Product listing

/

Focus search. Arrow down or Enter moves into the products.

Arrow keys

Move between cards in the grid or rows in the list; focus lands instantly. Left and right switch the status and layout controls.

EnterorSpace

Open the focused product in the details panel.

X

Select or deselect the focused product. Shift-click selects a range; Command-click toggles one.

JorK

Step to the next or previous product in the details panel.

Arrow upordown on a handle

Move a row in the featured order without dragging.

Escape

Close a filter or menu, clear search, or clear the selection.

⌘K

Focus the sidebar search, from the screen shell.

• Status filters are Arc's SegmentedControl, a labelled group of pressed buttons whose counts are real text.
• Each card and row is one button named with the product, price, status and stock; checkboxes and drag handles are separate controls with their own names.
• The list is a table with column headers and aria-sort on the sortable ones.
• Filters open in Arc's Popover as labelled dialogs that take focus, close on Escape or an outside press, and return focus to their trigger; the sort is Arc's DropdownMenu.
• Stock and status pair a meaningful icon (package, circle check, dashed circle, archive) with words, so color never carries meaning alone. Sales channels in the sidebar name their count and sync state in their accessible names.
• Bulk changes, reorders, new products and exports are announced in a live region, and every undoable change offers Undo.

• Cards and rows move to their new places on the smooth spring when filters or sort change; removed items fade out at the same size.
• Segmented highlights glide on the morph spring. A selected sales channel fills in place, and every hover fill is instant.
• Switching grid and list, and switching products in the panel, is one short crossfade.
• Counts roll digit by digit with Arc's AnimatedCounter; stock meters and sales bars grow on the smooth spring.
• The bulk bar and notices rise 8px into place. Buttons press to 0.97; triggers that open a layer answer with color only.
• Reduced motion removes travel and layout animation and keeps the final state, focus and feedback.

• At 1440 by 900 the shell sidebar, a four column grid or a seven column list, and the details panel sit side by side.
• Below 1080px the details panel becomes a sheet opened by clicking a product; below 900px the sidebar becomes a sheet from the menu button.
• The list drops channels and sold below a 760px main area, then status and price below 640px, where price moves under the name.
• Below 640px search shares its row with the sort and layout controls, the filters scroll in their own row with edge fades, the grid has two columns, header buttons keep only their icons, and the bulk bar shows icons.

• Filtering and sorting are one pass over the products per change; totals are derived, not stored.
• Only transform and opacity animate. Hover and selection fills are plain CSS with no transition.
• Edge fades update through data attributes without React renders, and images use next/image with responsive sizes.

• Wrap it in an element with a definite height: the screen fills its container and scrolls inside, never the page.
• Pass products already scoped to the store; the screen filters, sorts and totals on the client. Persist edits through onProductChange.
• Brand marks for Instagram, TikTok and Amazon are Simple Icons paths (CC0) and are sample content, not endorsements. The store logo is a ScreenShellMark (seed, amber).
• Built on the screen-shell component; change the sidebar there, not here.

The full library index for assistants is at /llms.txt.