astryx-dracula 0.2.1 → 0.3.0

package/templates/theme-showcase.tsx

@@ -1,6 +1,10 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   TN"Nocturne" + (S[p6] > V[g10] > (Ctr > V[g4 a=center] > Tx"Little haunts"[t=display-2] + Tx"We believe"[t=body]) + (G[c{min:200,max:3} g4] > (C[p0] > AR + V[g2 a=center] > Bd + Hd"Product"[level=2] + Tx"Description"[t=body] + (H[g2] > NI + B"Add to cart"))*3)) + (V[g8] > (G[c{min:200} g4] > (GS[c1] > C > Hd"Checkout"[level=2]) + (GS[c2] > C > Hd"Night Owl AI"[level=2])) + (G[c{min:200} g4] > (GS[c3] > C > T) + (GS[c1] > C > Hd"Revenue"[level=2])))
+//   TN"Nocturne" + (S[p6] > V[g10] > (Ctr > V[g4 a=center] > Hd"Little haunts"[level=1 type=display-2] + Tx"We believe"[t=body]) + (G[c={min:200,max:3} g4] > (C[p0] > AR + V[g2 a=center] > Bd + Hd"Product"[level=2] + Tx"Description"[t=body] + (H[g2] > NI + B"Add to cart"))*3)) + (V[g8] > (G[c={min:200} g4] > (GS[c=1] > C > Hd"Checkout"[level=2]) + (GS[c=2] > C > Hd"Night Owl AI"[level=2])) + (G[c={min:200} g4] > (GS[c=3] > C > T) + (GS[c=1] > C > Hd"Revenue"[level=2])))
+
+/**
+ * Theme Showcase — the storefront page each theme is previewed against, and the only template that is deliberately shell-less: it paints its o (Frame/responsive/container: see XLE header above.)
+ */
 
 import {type CSSProperties, type ReactNode} from 'react';
 import {
@@ -35,6 +39,10 @@ import {Divider} from '@astryxdesign/core/Divider';
 import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
 import {Item} from '@astryxdesign/core/Item';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
+import {ProductSwatch} from 'astryx-dracula/shared/revenue-chart';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Selector} from '@astryxdesign/core/Selector';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
@@ -53,6 +61,7 @@ import {
   ChatMessageList,
   ChatSystemMessage,
 } from '@astryxdesign/core/Chat';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // Styles passed to Astryx components via their `style` prop. Astryx components
 // forward the DOM `style` prop, so these work with no CSS compiler — in
@@ -100,6 +109,10 @@ const styles: Record<string, CSSProperties> = {
     minWidth: 0,
     maxWidth: 240,
   },
+  filterRowFill: {
+    flex: 1,
+    minWidth: 0,
+  },
   activityCard: {
     backgroundColor: 'var(--color-background-surface)',
     color: 'var(--color-text-primary)',
@@ -121,6 +134,9 @@ const styles: Record<string, CSSProperties> = {
   activityCardStack: {
     height: '100%',
   },
+  inventoryItemText: {
+    minWidth: 0,
+  },
   activityListFade: {
     flex: 1,
     minHeight: 0,
@@ -131,13 +147,11 @@ const styles: Record<string, CSSProperties> = {
       'linear-gradient(to bottom, black calc(100% - 48px), transparent)',
     marginInline: 'calc(var(--spacing-2) * -1)',
   },
-  content: {
-    maxWidth: 960,
-    marginInline: 'auto',
-    minWidth: 0,
-  },
+  // The hero column: centered, narrower than the grid below it.
   contentFluid: {
     maxWidth: 880,
+    marginInline: 'auto',
+    minWidth: 0,
   },
   heroText: {
     textAlign: 'center' as const,
@@ -151,6 +165,17 @@ const styles: Record<string, CSSProperties> = {
   },
   cardDescription: {
     flex: 1,
+    textAlign: 'center' as const,
+  },
+  // Store surfaces: the shell is intentionally absent, so the page paints its
+  // own body and card-showcase bands.
+  storeRoot: {
+    minHeight: '100%',
+    backgroundColor: 'var(--color-background-body)',
+  },
+  showcaseBand: {
+    padding: 'var(--spacing-6)',
+    backgroundColor: 'var(--color-background-surface)',
   },
   quantityInput: {
     // minWidth (not a hard width) so the field grows to fit the digit + the
@@ -175,7 +200,10 @@ const inlineStyles: Record<string, CSSProperties> = {
   chatBody: {
     flex: 1,
     minHeight: 0,
-    overflow: 'hidden',
+    // The message region is the scroll owner: the card is stretched to the
+    // grid row height, so longer conversations must scroll here rather than
+    // clip against the card.
+    overflowY: 'auto' as const,
   },
   chatSuggestions: {
     paddingInline: 'var(--spacing-4)',
@@ -185,22 +213,21 @@ const inlineStyles: Record<string, CSSProperties> = {
     paddingInline: 'var(--spacing-4)',
     paddingBottom: 'var(--spacing-4)',
   },
+  // Center supplies the 32px box and the centering; only the paint stays here.
+  // Surface, not muted: --color-text-secondary #9AA1BC is 3.57:1 on
+  // --color-background-muted #44475A, under the 4.5:1 text floor. The chip is
+  // aria-hidden decorative art so it clears the 3:1 non-text bar as-is, but the
+  // surface fill carries the same 4.60:1 pairing at no cost and cannot drop
+  // under the floor if anything smaller is ever put in the box.
   activityIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 'var(--radius-full)',
-    backgroundColor: 'var(--color-background-muted)',
+    borderRadius: 'var(--radius-element)', // square chip: no circles except dots/avatars
+    backgroundColor: 'var(--color-background-surface)',
     color: 'var(--color-text-secondary)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     flexShrink: 0,
   },
   cardBody: {
     padding: 'var(--spacing-4)',
     flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
   },
 };
 
@@ -211,20 +238,23 @@ const artImage: CSSProperties = {
   height: '100%',
   display: 'block',
 };
-// Rounded inventory swatch. No radius prop where the swatch renders, so the
-// SVG carries its own rounded corners (rx=4).
-const thumbSwatch: CSSProperties = {
-  flexShrink: 0,
-  display: 'block',
-};
 
-// One Dracula accent per hero product slot.
+// One Dracula accent per hero product slot. Purple stays off decorative art:
+// it reads as interactive, and nothing here is tappable.
 const PRODUCT_HUES = [
-  'var(--dracula-purple)',
+  'var(--dracula-green)',
   'var(--dracula-cyan)',
   'var(--dracula-yellow)',
 ];
 
+// Grid recipes the store renders at every width above the phone layout. Kept
+// at module scope: an object literal rebuilt per render is a new value prop
+// every time.
+const SHOWCASE_COLUMNS = {minWidth: 200, repeat: 'fit'} as const;
+const PRODUCT_COLUMNS = {minWidth: 200, max: 3} as const;
+const PAYMENT_COLUMNS = {minWidth: 70, max: 3} as const;
+const EXPIRY_COLUMNS = {minWidth: 90, max: 2} as const;
+
 /** Categorical badge variants usable for showcase product/inventory tags. */
 export type ShowcaseBadgeVariant =
   | 'blue'
@@ -249,7 +279,7 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
     name: 'Moonphase Watch',
     description: 'Clean lines and lume that carry through the longest night.',
     badge: 'New',
-    badgeVariant: 'blue',
+    badgeVariant: 'cyan',
   },
   {
     name: 'Night-Owl Headphones',
@@ -307,31 +337,6 @@ function ProductArt({hue, label}: {hue: string; label: string}) {
   );
 }
 
-// Rounded inventory swatch: Dracula surface with a per-row accent ring.
-function ThumbSwatch({hue, label}: {hue: string; label: string}) {
-  return (
-    <svg
-      viewBox="0 0 40 40"
-      width={40}
-      height={40}
-      style={thumbSwatch}
-      role="img"
-      aria-label={`${label} swatch`}>
-      <rect width={40} height={40} rx={5} fill="var(--dracula-bg-light)" />
-      <rect
-        x={1}
-        y={1}
-        width={38}
-        height={38}
-        rx={4}
-        fill="none"
-        stroke="var(--color-widget-content-border)"
-      />
-      <circle cx={20} cy={20} r={8} fill="none" stroke={hue} strokeWidth={3} />
-    </svg>
-  );
-}
-
 export interface ThemeShowcaseProps {
   /** The three hero product cards. Defaults to the nocturne store products. */
   products?: ProductSpec[];
@@ -353,20 +358,12 @@ export function ThemeShowcaseStore({
 }: ThemeShowcaseProps = {}) {
   const {isMobile} = useAppShellMobile();
   return (
-    <div
-      style={{
-        minHeight: '100%',
-        backgroundColor: 'var(--color-background-body)',
-      }}>
+    <VStack gap={0} style={styles.storeRoot}>
       <StorePreview products={products} isMobile={isMobile} />
-      <div
-        style={{
-          padding: 'var(--spacing-6)',
-          backgroundColor: 'var(--color-background-surface)',
-        }}>
+      <VStack gap={0} style={styles.showcaseBand}>
         <CardShowcase inventory={inventory} isMobile={isMobile} />
-      </div>
-    </div>
+      </VStack>
+    </VStack>
   );
 }
 
@@ -377,7 +374,7 @@ function CardShowcase({
   inventory: InventoryRow[];
   isMobile: boolean;
 }) {
-  const columns = isMobile ? 1 : ({minWidth: 200, repeat: 'fit'} as const);
+  const columns = isMobile ? 1 : SHOWCASE_COLUMNS;
 
   return (
     <VStack gap={8}>
@@ -408,14 +405,18 @@ function StorePreview({
   products: ProductSpec[];
   isMobile: boolean;
 }) {
+  // Shell-less preview: no AppShell above means the host context always
+  // reports desktop, so the nav reads the real viewport instead.
+  const isNarrowViewport = useMediaQuery('(max-width: 640px)');
+  const collapseNav = isMobile || isNarrowViewport;
   return (
-    <div data-theme-preview="true">
+    <VStack gap={0} data-theme-preview="true">
       <VStack gap={0}>
         <TopNav
           label="Theme preview navigation"
           heading={<TopNavHeading heading="Nocturne" />}
           centerContent={
-            isMobile ? undefined : (
+            collapseNav ? undefined : (
               <>
                 <TopNavItem label="Shop" href="#/templates/theme-showcase" isSelected />
                 <TopNavItem label="New In" href="#/templates/theme-showcase" />
@@ -425,47 +426,58 @@ function StorePreview({
             )
           }
           endContent={
-            <HStack gap={2} vAlign="center">
-              <HStack gap={0.5}>
-                <Button
-                  label="Search"
-                  tooltip="Search"
-                  variant="ghost"
-                  isIconOnly
-                  icon={<Search size={20} />}
-                  href="#/templates/theme-showcase"
-                />
-                <Button
-                  label="Account"
-                  tooltip="Account"
-                  variant="ghost"
-                  isIconOnly
-                  icon={<User size={20} />}
-                  href="#/templates/theme-showcase"
-                />
-                <Button
-                  label="Cart"
-                  tooltip="Cart"
-                  variant="ghost"
-                  isIconOnly
-                  icon={<ShoppingBag size={20} />}
-                  href="#/templates/theme-showcase"
-                />
+            collapseNav ? (
+              <Button
+                label="Cart"
+                tooltip="Cart"
+                variant="ghost"
+                isIconOnly
+                icon={<ShoppingBag size={20} />}
+                href="#/templates/theme-showcase"
+              />
+            ) : (
+              <HStack gap={2} vAlign="center">
+                <HStack gap={0.5}>
+                  <Button
+                    label="Search"
+                    tooltip="Search"
+                    variant="ghost"
+                    isIconOnly
+                    icon={<Search size={20} />}
+                    href="#/templates/theme-showcase"
+                  />
+                  <Button
+                    label="Account"
+                    tooltip="Account"
+                    variant="ghost"
+                    isIconOnly
+                    icon={<User size={20} />}
+                    href="#/templates/theme-showcase"
+                  />
+                  <Button
+                    label="Cart"
+                    tooltip="Cart"
+                    variant="ghost"
+                    isIconOnly
+                    icon={<ShoppingBag size={20} />}
+                    href="#/templates/theme-showcase"
+                  />
+                </HStack>
+                <Button label="Sign in" variant="primary" href="#/templates/theme-showcase" />
               </HStack>
-              <Button label="Sign in" variant="primary" href="#/templates/theme-showcase" />
-            </HStack>
+            )
           }
         />
 
         <Section padding={6} variant="transparent">
-          <VStack gap={10} style={{...styles.content, ...styles.contentFluid}}>
+          <VStack gap={10} style={styles.contentFluid}>
             <Center>
               <VStack gap={4} hAlign="center" style={styles.heroText}>
-                <Text type="display-2" color="accent">
+                <Heading level={1} type="display-2">
                   Little haunts,
                   <br />
                   everywhere you roam
-                </Text>
+                </Heading>
                 <Text type="body" color="secondary">
                   We believe the smallest shadows are the ones that matter most.
                   Turn an ordinary evening into something worth remembering.
@@ -473,7 +485,7 @@ function StorePreview({
               </VStack>
             </Center>
 
-            <Grid columns={isMobile ? 1 : {minWidth: 200, max: 3}} gap={4}>
+            <Grid columns={isMobile ? 1 : PRODUCT_COLUMNS} gap={4}>
               {products.map((p, i) => (
                 <Card key={p.name} padding={0} height="100%">
                   <VStack gap={0} style={styles.cardStack}>
@@ -483,44 +495,42 @@ function StorePreview({
                         label={p.name}
                       />
                     </AspectRatio>
-                    <div style={inlineStyles.cardBody}>
-                      <VStack gap={2} hAlign="center" style={styles.cardStack}>
-                        <HStack>
-                          <Badge label={p.badge} variant={p.badgeVariant} />
-                        </HStack>
-                        <Heading level={2} style={styles.centerText}>
-                          {p.name}
-                        </Heading>
-                        <Text
-                          type="body"
-                          color="secondary"
-                          style={{
-                            ...styles.cardDescription,
-                            ...styles.centerText,
-                          }}>
-                          {p.description}
-                        </Text>
-                        <HStack gap={2} vAlign="center" hAlign="center">
-                          <NumberInput
-                            label="Quantity"
-                            isLabelHidden
-                            value={1}
-                            onChange={() => {}}
-                            min={1}
-                            max={99}
-                            size="sm"
-                            style={styles.quantityInput}
-                          />
-                          <Button
-                            label="Add to cart"
-                            variant="secondary"
-                            size="sm"
-                            href="#/templates/theme-showcase"
-                            style={styles.cartButton}
-                          />
-                        </HStack>
-                      </VStack>
-                    </div>
+                    <VStack
+                      gap={2}
+                      hAlign="center"
+                      style={inlineStyles.cardBody}>
+                      <HStack>
+                        <Badge label={p.badge} variant={p.badgeVariant} />
+                      </HStack>
+                      <Heading level={2} style={styles.centerText}>
+                        {p.name}
+                      </Heading>
+                      <Text
+                        type="body"
+                        color="secondary"
+                        style={styles.cardDescription}>
+                        {p.description}
+                      </Text>
+                      <HStack gap={2} vAlign="center" hAlign="center">
+                        <NumberInput
+                          label="Quantity"
+                          isLabelHidden
+                          value={1}
+                          onChange={() => {}}
+                          min={1}
+                          max={99}
+                          size="sm"
+                          style={styles.quantityInput}
+                        />
+                        <Button
+                          label="Add to cart"
+                          variant="secondary"
+                          size="sm"
+                          href="#/templates/theme-showcase"
+                          style={styles.cartButton}
+                        />
+                      </HStack>
+                    </VStack>
                   </VStack>
                 </Card>
               ))}
@@ -528,13 +538,13 @@ function StorePreview({
           </VStack>
         </Section>
       </VStack>
-    </div>
+    </VStack>
   );
 }
 
 function CheckoutCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} style={styles.card}>
+    <Card padding={4} style={styles.card}>
       <VStack gap={4} style={styles.checkoutStack}>
         <Heading level={2}>Checkout</Heading>
 
@@ -588,7 +598,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             <Text type="label" weight="semibold">
               Payment method
             </Text>
-            <Grid columns={isMobile ? 1 : {minWidth: 70, max: 3}} gap={2}>
+            <Grid columns={isMobile ? 1 : PAYMENT_COLUMNS} gap={2}>
               <SelectableCard
                 label="Pay with card"
                 isSelected={true}
@@ -646,7 +656,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             size="lg"
           />
 
-          <Grid columns={isMobile ? 1 : {minWidth: 90, max: 2}} gap={2}>
+          <Grid columns={isMobile ? 1 : EXPIRY_COLUMNS} gap={2}>
             <TextInput
               label="Expiry"
               placeholder="MM / YY"
@@ -735,26 +745,32 @@ function ChatCard() {
 
       <Divider variant="subtle" />
 
-      <div style={inlineStyles.chatBody}>
+      <VStack
+        gap={0}
+        style={inlineStyles.chatBody}
+        isScrollable={false}
+        tabIndex={0}
+        role="region"
+        aria-label="Night Owl chat messages">
         <ChatMessageList>
           <ChatSystemMessage>Today</ChatSystemMessage>
 
           <ChatMessage sender="user">
             <ChatMessageBubble variant="filled">
-              Where’s my order?
+              Where's my order?
             </ChatMessageBubble>
           </ChatMessage>
 
           <ChatMessage sender="assistant">
             <VStack gap={3}>
               <Text type="body">
-                Your order #1043 — the Moonphase Watch and Belfry Throw —
-                shipped this morning from the Aisle 3 warehouse and is currently
-                in transit with UPS. It’s on track to arrive at your address by
+                Your order #1043 (the Moonphase Watch and Belfry Throw)
+                shipped this morning from the courier-raven roost and is currently
+                in transit with courier-raven. It's on track to arrive at your address by
                 end of day tomorrow.
               </Text>
               <Text type="body">
-                Let me know if you’d like to reschedule the delivery, redirect
+                Let me know if you'd like to reschedule the delivery, redirect
                 it to a pickup point, or start a return once it arrives.
               </Text>
             </VStack>
@@ -768,7 +784,7 @@ function ChatCard() {
 
           <ChatMessage sender="assistant">
             <VStack gap={3}>
-              <Text type="body">Here’s everything I have on order #1043:</Text>
+              <Text type="body">Here's everything I have on order #1043:</Text>
               <Card padding={3}>
                 <VStack gap={1}>
                   <Item
@@ -782,7 +798,7 @@ function ChatCard() {
                   />
                   <Item
                     label="Shipping"
-                    description="UPS Ground"
+                    description="Courier-raven ground"
                     endContent={
                       <Text type="body" weight="semibold" hasTabularNumbers>
                         $12
@@ -792,21 +808,28 @@ function ChatCard() {
                   <Item
                     label="Estimated arrival"
                     description="Tomorrow by 8pm"
-                    endContent={<Badge variant="green" label="On time" />}
+                    endContent={
+                      <HStack gap={1} vAlign="center">
+                        <StatusDot variant="success" label="On time" />
+                        <Text type="supporting" color="secondary">
+                          On time
+                        </Text>
+                      </HStack>
+                    }
                   />
                   <Item
                     label="Tracking"
-                    description="UPS 1Z 999 AA1 0123 4567 84"
-                    endContent={<Link href="#/templates/theme-showcase">Track →</Link>}
+                    description="RVN 1Z 999 AA1 0123 4567 84"
+                    endContent={<Link href="#/templates/theme-showcase">Track</Link>}
                   />
                 </VStack>
               </Card>
             </VStack>
           </ChatMessage>
         </ChatMessageList>
-      </div>
+      </VStack>
 
-      <div style={inlineStyles.chatSuggestions}>
+      <VStack gap={0} style={inlineStyles.chatSuggestions}>
         <HStack gap={1} hAlign="center" wrap="wrap">
           {SUGGESTED_QUESTIONS.map(question => (
             <Button
@@ -817,14 +840,14 @@ function ChatCard() {
             />
           ))}
         </HStack>
-      </div>
+      </VStack>
 
-      <div style={inlineStyles.chatComposer}>
+      <VStack gap={0} style={inlineStyles.chatComposer}>
         <ChatComposer
           value=""
           onChange={() => {}}
           onSubmit={() => {}}
-          placeholder="Ask Night Owl…"
+          placeholder="Ask Night Owl..."
           footerActions={
             <Button
               variant="ghost"
@@ -846,7 +869,7 @@ function ChatCard() {
             />
           }
         />
-      </div>
+      </VStack>
     </Card>
   );
 }
@@ -910,7 +933,7 @@ function formatAmount(amount: number): string {
 
 function LatestActivityCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} style={styles.activityCard}>
+    <Card padding={4} style={styles.activityCard}>
       <VStack gap={4} style={styles.activityCardStack}>
         <Heading level={2}>Revenue</Heading>
 
@@ -941,13 +964,31 @@ function LatestActivityCard({isMobile}: {isMobile: boolean}) {
         </HStack>
 
         <VStack gap={1} style={styles.activityListFade}>
+          {/* The sign travels in the string (formatAmount prefixes U+2212), so
+              direction is never colour-alone and 1.4.1 holds without a tint.
+              A negative text role is not available here, and the reason is
+              worth recording rather than working around:
+                - TextColorMap is six keys (primary, secondary, disabled,
+                  placeholder, accent, inherit). No negative.
+                - `accent` is Purple in this theme, and principle 2 makes
+                  purple tappable-only, so a refund would read as a link.
+                - --color-negative #FF5555 measures 3.75:1 on this card
+                  #343746, under the 4.5:1 floor, so a style-prop tint would
+                  trade a weak signal for a real contrast failure.
+              secondary therefore stays and the minus sign is the signal. A
+              kit-wide negative text role needs a new token AND a colour that
+              clears 4.5:1 on a card — a human call, not a call-site one. */}
           {ACTIVITY.map(item => (
             <Item
               key={item.id}
               startContent={
-                <div style={inlineStyles.activityIcon} aria-hidden="true">
+                <Center
+                  width={32}
+                  height={32}
+                  style={inlineStyles.activityIcon}
+                  aria-hidden="true">
                   {item.icon}
-                </div>
+                </Center>
               }
               label={item.label}
               description={item.detail}
@@ -978,7 +1019,7 @@ export interface InventoryRow extends Record<string, unknown> {
   available: number;
   location: string;
   tags: TagSpec[];
-  hue: string;
+  hue: SceneHue;
   selected: boolean;
 }
 
@@ -988,9 +1029,9 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Moonphase Watch',
     meta: 'Steel case, moonphase dial',
     available: 42,
-    location: 'Aisle 3',
-    tags: [{label: 'New', variant: 'blue'}],
-    hue: 'var(--dracula-purple)',
+    location: 'Roost 3',
+    tags: [{label: 'New', variant: 'cyan'}],
+    hue: 'var(--dracula-comment)',
     selected: false,
   },
   {
@@ -998,7 +1039,7 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Night-Owl Headphones',
     meta: 'ANC, 30hr battery',
     available: 128,
-    location: 'Aisle 1',
+    location: 'Roost 1',
     tags: [{label: 'Popular', variant: 'green'}],
     hue: 'var(--dracula-cyan)',
     selected: true,
@@ -1008,7 +1049,7 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Coven Canvas Backpack',
     meta: 'Waxed canvas, 25L',
     available: 63,
-    location: 'Aisle 2',
+    location: 'Roost 2',
     tags: [{label: 'Limited', variant: 'yellow'}],
     hue: 'var(--dracula-yellow)',
     selected: false,
@@ -1018,7 +1059,7 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Night Market Wallet',
     meta: 'Full-grain, RFID blocking',
     available: 15,
-    location: 'Aisle 4',
+    location: 'Roost 4',
     tags: [{label: 'Leather', variant: 'yellow'}],
     hue: 'var(--dracula-orange)',
     selected: true,
@@ -1028,8 +1069,8 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Midnight Tumbler',
     meta: 'Vacuum insulated, 16oz',
     available: 87,
-    location: 'Aisle 5',
-    tags: [{label: 'Drinkware', variant: 'green'}],
+    location: 'Roost 5',
+    tags: [{label: 'Drinkware', variant: 'yellow'}],
     hue: 'var(--dracula-pink)',
     selected: false,
   },
@@ -1038,8 +1079,8 @@ const DEFAULT_INVENTORY: InventoryRow[] = [
     name: 'Belfry Throw',
     meta: 'Heavyweight, oat',
     available: 24,
-    location: 'Aisle 6',
-    tags: [{label: 'Home', variant: 'orange'}],
+    location: 'Roost 6',
+    tags: [{label: 'Home', variant: 'yellow'}],
     hue: 'var(--dracula-green)',
     selected: true,
   },
@@ -1061,8 +1102,8 @@ function SelectCell({row}: {row: InventoryRow}) {
 function ItemCell({row}: {row: InventoryRow}) {
   return (
     <HStack gap={3} vAlign="center">
-      <ThumbSwatch hue={row.hue} label={row.name} />
-      <VStack gap={0} style={{minWidth: 0}}>
+      <ProductSwatch accent={row.hue} label={row.name} />
+      <VStack gap={0} style={styles.inventoryItemText}>
         <Text type="body" weight="semibold">
           {row.name}
         </Text>
@@ -1100,7 +1141,79 @@ function ActionsCell() {
   );
 }
 
+// The full column set needs 64+80+100+100+80+64 = 488px of grid and the card
+// insets cost 2 × --spacing-6 on top, so it stops fitting below ~600px. A 375px
+// phone leaves ~280px inside the card: the phone layout drops the selection
+// control (no bulk action bar acts on it) and the two metadata columns, which
+// needs 244px. Table keeps its own scroll wrapper either way; the point is that
+// a row should not have to be read sideways.
+const NARROW_TABLE_QUERY = '(max-width: 600px)';
+const NARROW_COLUMN_KEYS: Record<string, true> = {
+  select: true,
+  location: true,
+  tags: true,
+};
+
+const INVENTORY_COLUMNS: TableColumn<InventoryRow>[] = [
+  {
+    key: 'select',
+    header: '',
+    // Wide enough that the control + the theme's cell padding (up to
+    // --spacing-4 = 16px/side on spacious density) fit inside the cell,
+    // so the control's hover background doesn't overflow toward the
+    // card's clipped (rounded) edge on larger-padding themes.
+    width: pixel(64),
+    renderCell: row => <SelectCell row={row} />,
+  },
+  {
+    key: 'item',
+    header: 'Item',
+    // Lower min-width (default 120) so the table fits its container on
+    // larger-spacing themes instead of overflowing the actions column.
+    width: proportional(3, {minWidth: 80}),
+    renderCell: row => <ItemCell row={row} />,
+  },
+  {
+    key: 'available',
+    header: 'Available',
+    width: pixel(100),
+    renderCell: row => (
+      <Text type="body" hasTabularNumbers>
+        {row.available}
+      </Text>
+    ),
+  },
+  {
+    key: 'location',
+    header: 'Location',
+    width: pixel(100),
+    renderCell: row => <Text type="body">{row.location}</Text>,
+  },
+  {
+    key: 'tags',
+    header: 'Tags',
+    width: proportional(2, {minWidth: 80}),
+    align: 'end',
+    renderCell: row => <TagsCell row={row} />,
+  },
+  {
+    key: 'actions',
+    header: '',
+    // Match the select column: fit the sm more-menu button + cell
+    // padding so its hover background stays clear of the card's
+    // clipped rounded edge across themes.
+    width: pixel(64),
+    align: 'end',
+    renderCell: () => <ActionsCell />,
+  },
+];
+
+const NARROW_INVENTORY_COLUMNS = INVENTORY_COLUMNS.filter(
+  column => !NARROW_COLUMN_KEYS[column.key],
+);
+
 function InventoryCard({inventory}: {inventory: InventoryRow[]}) {
+  const isNarrow = useMediaQuery(NARROW_TABLE_QUERY);
   const lowStockCount = inventory.filter(
     row => row.available < LOW_STOCK_THRESHOLD,
   ).length;
@@ -1111,7 +1224,6 @@ function InventoryCard({inventory}: {inventory: InventoryRow[]}) {
         <Button
           label="Add item"
           variant="primary"
-          size="sm"
           icon={<Plus size={16} />}
         />
       </HStack>
@@ -1123,7 +1235,7 @@ function InventoryCard({inventory}: {inventory: InventoryRow[]}) {
         vAlign="center"
         hAlign="between"
         style={styles.inventoryFilterRow}>
-        <HStack gap={2} vAlign="center" style={{flex: 1, minWidth: 0}}>
+        <HStack gap={2} vAlign="center" style={styles.filterRowFill}>
           <TextInput
             label="Search inventory"
             isLabelHidden
@@ -1162,12 +1274,12 @@ function InventoryCard({inventory}: {inventory: InventoryRow[]}) {
               value={undefined}
               onChange={() => {}}
               options={[
-                'Aisle 1',
-                'Aisle 2',
-                'Aisle 3',
-                'Aisle 4',
-                'Aisle 5',
-                'Aisle 6',
+                'Roost 1',
+                'Roost 2',
+                'Roost 3',
+                'Roost 4',
+                'Roost 5',
+                'Roost 6',
               ]}
             />
             <Selector
@@ -1210,75 +1322,25 @@ function InventoryCard({inventory}: {inventory: InventoryRow[]}) {
       </HStack>
 
       {lowStockCount > 0 && (
-        <div style={inlineStyles.inventoryBannerWrap}>
+        <VStack gap={0} style={inlineStyles.inventoryBannerWrap}>
           <Banner
             status="warning"
             title={lowStockCount + ' items are running low'}
           />
-        </div>
+        </VStack>
       )}
 
-      <div style={styles.inventoryTableWrap}>
+      <VStack gap={0} style={styles.inventoryTableWrap}>
         <Table<InventoryRow>
           data={inventory}
-          columns={[
-            {
-              key: 'select',
-              header: '',
-              // Wide enough that the control + the theme's cell padding (up to
-              // --spacing-4 = 16px/side on spacious density) fit inside the cell,
-              // so the control's hover background doesn't overflow toward the
-              // card's clipped (rounded) edge on larger-padding themes.
-              width: pixel(64),
-              renderCell: row => <SelectCell row={row} />,
-            },
-            {
-              key: 'item',
-              header: 'Item',
-              // Lower min-width (default 120) so the table fits its container on
-              // larger-spacing themes instead of overflowing the actions column.
-              width: proportional(3, {minWidth: 80}),
-              renderCell: row => <ItemCell row={row} />,
-            },
-            {
-              key: 'available',
-              header: 'Available',
-              width: pixel(100),
-              renderCell: row => (
-                <Text type="body" hasTabularNumbers>
-                  {row.available}
-                </Text>
-              ),
-            },
-            {
-              key: 'location',
-              header: 'Location',
-              width: pixel(100),
-              renderCell: row => <Text type="body">{row.location}</Text>,
-            },
-            {
-              key: 'tags',
-              header: 'Tags',
-              width: proportional(2, {minWidth: 80}),
-              align: 'end',
-              renderCell: row => <TagsCell row={row} />,
-            },
-            {
-              key: 'actions',
-              header: '',
-              // Match the select column: fit the sm more-menu button + cell
-              // padding so its hover background stays clear of the card's
-              // clipped rounded edge across themes.
-              width: pixel(64),
-              align: 'end',
-              renderCell: () => <ActionsCell />,
-            },
-          ]}
+          columns={
+            isNarrow ? NARROW_INVENTORY_COLUMNS : INVENTORY_COLUMNS
+          }
           density="spacious"
           dividers="rows"
           hasHover
         />
-      </div>
+      </VStack>
     </Card>
   );
 }