@tristan2828/ui-foundation 4.46.0 → 4.47.0

package/conventions/docs/add-an-entity.md

@@ -4,21 +4,21 @@
 ## Index
 
 - [The reference files](#the-reference-files) · lines 37–59
-- [Before anything: the entity plan](#before-anything-the-entity-plan) · lines 61–715
+- [Before anything: the entity plan](#before-anything-the-entity-plan) · lines 61–720
   - Step 1: Add `<Entity>` to `openapi.yaml` · lines 99–106
   - Step 2: `npm run gen:api` · lines 107–108
   - Step 3: Add gateway tests in `tests/gateway/<entity>.test.ts`, derived from the spec · lines 109–120
   - Step 4: Add MSW handlers in `src/mocks/<entity>.ts` · lines 121–130
   - Step 5: Add a gateway module in `src/api/gateway/<entity>.ts` · lines 131–135
-  - Step 6: Copy the reference files, one for one, not just the two screens · lines 136–607
-  - Step 7: Register routes · lines 608–618
-  - Step 8: Add Playwright specs for all three screens · lines 619–697
-  - Step 9: Register the nav entry and route names · lines 698–712
-  - Step 10: `npm run verify`. · lines 713–715
-- [What not to copy](#what-not-to-copy) · lines 717–743
-- [After a commit, in the backend](#after-a-commit-in-the-backend) · lines 745–762
-- [Deleting](#deleting) · lines 764–793
-- [Fields only a script writes](#fields-only-a-script-writes) · lines 795–816
+  - Step 6: Copy the reference files, one for one, not just the two screens · lines 136–612
+  - Step 7: Register routes · lines 613–623
+  - Step 8: Add Playwright specs for all three screens · lines 624–702
+  - Step 9: Register the nav entry and route names · lines 703–717
+  - Step 10: `npm run verify`. · lines 718–720
+- [What not to copy](#what-not-to-copy) · lines 722–748
+- [After a commit, in the backend](#after-a-commit-in-the-backend) · lines 750–767
+- [Deleting](#deleting) · lines 769–798
+- [Fields only a script writes](#fields-only-a-script-writes) · lines 800–821
 
 <!-- /index -->
 
@@ -409,7 +409,12 @@ is a filled-in example while the Widgets demo is still here).
      and every `placement` from the copied view (one column). Widget's
      view is `rail`, with Details in the rail. The rail's sections come
      first in the page (header, rail, main) at every width, so the
-     view's specs find them first too.
+     view's specs find them first too. When the plan says the main
+     column comes first on a phone (the record is opened for its notes
+     or its checklist), pass `mobileOrder="main-first"`: header, main,
+     rail where the columns stack, and in the DOM at every width, with
+     the rail still on the right two columns wide. Never re-order
+     `sections` by the window's width yourself.
    - **A subtitle** (`subtitle`), only when the plan names a line that
      says what the record is for (a goal, a one-line summary): under the
      title in muted body type. When the plan marks it editable, wrap it

package/conventions/docs/design-language.md

@@ -13,14 +13,14 @@
   - [Written text (notes)](#written-text-notes) · lines 277–328
 - [Density](#density) · lines 330–387
 - [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 389–503
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 505–563
-- [Notices](#notices) · lines 565–593
-- [A value over time](#a-value-over-time) · lines 595–628
-- [A list as a board](#a-list-as-a-board) · lines 630–681
-- [A list as cards](#a-list-as-cards) · lines 683–729
-- [Key numbers on a record](#key-numbers-on-a-record) · lines 731–753
-- [Picking at random](#picking-at-random) · lines 755–786
-- [Filling in what's missing](#filling-in-whats-missing) · lines 788–838
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 505–574
+- [Notices](#notices) · lines 576–604
+- [A value over time](#a-value-over-time) · lines 606–639
+- [A list as a board](#a-list-as-a-board) · lines 641–692
+- [A list as cards](#a-list-as-cards) · lines 694–740
+- [Key numbers on a record](#key-numbers-on-a-record) · lines 742–764
+- [Picking at random](#picking-at-random) · lines 766–797
+- [Filling in what's missing](#filling-in-whats-missing) · lines 799–849
 
 <!-- /index -->
 
@@ -557,10 +557,21 @@ const { data, isLoading, error, refetch } = useProjectsSummaryQuery()
   each tile one link to its place (at least 44px tall); Retry stays its
   own button above it. Six places make the phone's 3 × 2 grid; past
   that, put the rest behind one tile ("More") rather than a third row.
+- **A row of chips on a phone** (`<ModuleStrip mobile="row">`), when the
+  hub's widgets should start on the first screen, or there are more
+  places than six tiles: below the sidebar's breakpoint the strip is one
+  row that scrolls sideways, a chip per place with its icon in its slot's
+  colour, its name and its number (no note, no action). While the number
+  loads, a small skeleton; on an error, a muted dash ("Couldn't load" to
+  a screen reader), with Retry left to the desktop card and the place's
+  own page. The row scrolls inside itself and the page never does. A
+  desktop shows the cards either way, so don't render your own row
+  beside a strip hidden on a phone.
 - Storybook's `app/ModuleCard` shows a hub with a strip and a widget,
-  every state, and both at `compact`; its checks run axe and the token and
-  glyph checks in both themes and at `large`, and measure the strip at a
-  desktop and a phone width.
+  every state, both at `compact`, and both again as a row of chips (Row,
+  Row states); its checks run axe and the token and glyph checks in both
+  themes and at `large`, measure the strip at a desktop and a phone
+  width, and run axe on the chips at a phone's.
 
 ## Notices
 

package/dist/components/app/entity-view.d.ts

@@ -52,6 +52,11 @@ export type EntityViewPlacement = 'main' | 'rail';
  * column on the right (one column on a narrow screen, rail first).
  */
 export type EntityViewLayout = 'column' | 'rail';
+/**
+ * Which column comes first where the rail layout is one column (a phone,
+ * or a narrow content area): `rail-first` (the default) or `main-first`.
+ */
+export type EntityViewMobileOrder = 'rail-first' | 'main-first';
 export type EntityViewProps = {
     /** The record's name or title, the page's <h1>, and the browser tab's once it loads (`documentTitle`). */
     title?: string;
@@ -102,6 +107,14 @@ export type EntityViewProps = {
     footer?: ReactNode;
     /** `rail` puts the sections placed `rail` in a column on the right. Defaults to `column`. */
     layout?: EntityViewLayout;
+    /**
+     * In the `rail` layout, where its columns stack (a phone): the rail
+     * before the main column (`rail-first`, the default), or the main column
+     * straight after the header and its `strip` (`main-first`). Two columns
+     * wide, the rail stays on the right either way. The `column` layout
+     * ignores it.
+     */
+    mobileOrder?: EntityViewMobileOrder;
     /** The rail's landmark name (its `<aside>`). Defaults to the title + " details". */
     railLabel?: string;
     isLoading: boolean;
@@ -114,4 +127,4 @@ export type EntityViewProps = {
         label: string;
     };
 };
-export declare function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;
+export declare function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout, mobileOrder, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;

package/dist/components/app/entity-view.js

@@ -40,8 +40,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // content area's whole width, sections placed `rail` go in a narrow column
 // on the right that stays in view while the main column scrolls (an issue
 // tracker's shape), and the rest fill the main column. Below the width two
-// columns need, one column: header, rail, main. The DOM is in that order at
-// every width, so reading and tab order match the screen.
+// columns need, one column: header, rail, main, or header, main, rail with
+// `mobileOrder="main-first"` (a record whose long content is what you open
+// it for: notes, a checklist). The DOM is in that order at every width, so
+// reading and tab order match the screen: beside each other, the columns'
+// places come from the grid, not the DOM.
 import { useEffect, useId, useState, useSyncExternalStore } from 'react';
 import { Link } from 'react-router';
 import { ArrowLeftIcon, SearchXIcon } from 'lucide-react';
@@ -90,7 +93,7 @@ function ViewSection({ section, inRail = false }) {
 // two columns follows the width the page actually has (the sidebar open
 // or not), not the window's: two from 56rem (896px), where the main
 // column still gets ~32rem beside a 22rem rail. Below that, one column in
-// DOM order (header, rail, main); from it, the grid puts the rail on the
+// DOM order (header, rail, main, or main first); from it, the grid puts the rail on the
 // right of row 1 and main on its left, both starting under the header.
 const RAIL_LAYOUT = {
     page: '@container/view flex min-w-0 flex-col gap-6',
@@ -109,10 +112,11 @@ function SkeletonCard({ rows, stacked }) {
 }
 // The page's shape before the record arrives, in the layout it will have,
 // so nothing jumps when it loads.
-function EntityViewSkeleton({ layout }) {
+function EntityViewSkeleton({ layout, mobileOrder }) {
     const header = (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-5 w-24" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-7 w-64 max-w-full" }), _jsx(Skeleton, { className: "h-5 w-40" })] })] }));
     if (layout === 'rail') {
-        return (_jsxs("div", { className: RAIL_LAYOUT.page, "data-state": "loading", "data-layout": "rail", children: [header, _jsxs("div", { className: RAIL_LAYOUT.columns, children: [_jsx("div", { className: cn(RAIL_LAYOUT.rail, 'flex flex-col gap-6'), children: _jsx(SkeletonCard, { rows: 4, stacked: true }) }), _jsx("div", { className: RAIL_LAYOUT.main, children: _jsx(SkeletonCard, { rows: 6, stacked: false }) })] })] }));
+        const main = (_jsx("div", { className: RAIL_LAYOUT.main, children: _jsx(SkeletonCard, { rows: 6, stacked: false }) }));
+        return (_jsxs("div", { className: RAIL_LAYOUT.page, "data-state": "loading", "data-layout": "rail", children: [header, _jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, _jsx("div", { className: cn(RAIL_LAYOUT.rail, 'flex flex-col gap-6'), children: _jsx(SkeletonCard, { rows: 4, stacked: true }) }), mobileOrder === 'rail-first' && main] })] }));
     }
     return (_jsxs("div", { className: "flex max-w-4xl flex-col gap-6", "data-state": "loading", children: [header, Array.from({ length: 2 }, (_, section) => (_jsx(SkeletonCard, { rows: 4, stacked: false }, section)))] }));
 }
@@ -143,7 +147,7 @@ function Rail({ label, sections }) {
     const [ref, fits] = useFitsWindow();
     return (_jsx("aside", { ref: ref, "aria-label": label, "data-fits": fits ? '' : undefined, className: cn(RAIL_LAYOUT.rail, RAIL_LAYOUT.sticky, 'flex min-w-0 flex-col gap-6'), children: sections.map((section) => (_jsx(ViewSection, { section: section, inRail: true }, section.title))) }));
 }
-export function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout = 'column', railLabel, isLoading, error, onRetry, back, }) {
+export function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout = 'column', mobileOrder = 'rail-first', railLabel, isLoading, error, onRetry, back, }) {
     // Editing in place: one store per view, and the leave-page prompt only
     // while a field is open (or one is always editable).
     const [store] = useState(() => new EditInPlaceStore());
@@ -157,8 +161,9 @@ export function EntityView({ title, documentTitle, titleEdit, subtitle, badges,
     if (error)
         return _jsx(ErrorState, { error: error, onRetry: onRetry });
     if (isLoading)
-        return _jsx(EntityViewSkeleton, { layout: layout });
+        return _jsx(EntityViewSkeleton, { layout: layout, mobileOrder: mobileOrder });
     const railSections = sections.filter((section) => section.placement === 'rail');
     const mainSections = sections.filter((section) => section.placement !== 'rail');
-    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), _jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) })] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
+    const main = (_jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) }));
+    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
 }

package/dist/components/app/module-card.d.ts

@@ -38,16 +38,25 @@ export type ModuleCardProps = ModuleCardPlace & {
     onRetry?: () => void;
     className?: string;
 };
+/** How a ModuleStrip shows its places on a phone: `tiles` (the default), or one sideways `row` of chips. */
+export type ModuleStripMobile = 'tiles' | 'row';
 export declare function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading, error, onRetry, className, }: ModuleCardProps): import("react").JSX.Element;
 export interface ModuleStripProps {
     /** Names the strip's navigation landmark: "Places". */
     'aria-label': string;
     /** ModuleCards, one per place. */
     children: ReactNode;
+    /**
+     * On a phone: three columns of `tiles` (the default), or one `row` of
+     * chips (icon, name, number) that scrolls sideways, below the sidebar's
+     * breakpoint. A desktop shows the cards either way.
+     */
+    mobile?: ModuleStripMobile;
     className?: string;
 }
 /**
  * A hub's places, a ModuleCard each: equal columns of 170px or more that
- * wrap, and three columns of tiles on a phone.
+ * wrap, and on a phone three columns of tiles, or one sideways row of
+ * chips (`mobile="row"`).
  */
-export declare function ModuleStrip({ 'aria-label': label, children, className }: ModuleStripProps): import("react").JSX.Element;
+export declare function ModuleStrip({ 'aria-label': label, children, mobile, className }: ModuleStripProps): import("react").JSX.Element;

package/dist/components/app/module-card.js

@@ -21,7 +21,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // smaller tiles with no action, each tile a whole link (the band link's
 // target stretched over the card) at least 44px tall. Retry sits above
 // that target. data-density="compact" tightens the band and the body.
-import { Children, useId } from 'react';
+//
+// `mobile="row"` makes the strip one sideways-scrolling row of chips below
+// the sidebar's breakpoint (md) instead, so a hub's widgets start on the
+// first screen: each place's icon in its slot's colour, its name and its
+// number, a skeleton while that loads and a dash when it fails (Retry is
+// the card's; the place's own page says what went wrong). Each ModuleCard
+// renders its chip beside its card, one shown at each width. The row
+// scrolls inside itself and is `relative`, so a chip's sr-only text
+// (absolutely placed) scrolls with it instead of widening the page.
+import { Children, createContext, useContext, useId } from 'react';
 import { Link } from 'react-router';
 import { AlertCircleIcon, ExternalLinkIcon } from 'lucide-react';
 import { cn } from 'cn';
@@ -67,29 +76,60 @@ const BAND_LINK_CLASS = 'group/band flex min-h-9 items-center gap-2 px-3 py-1.5
     'max-sm:gap-1.5 max-sm:px-2 max-sm:after:absolute max-sm:after:inset-0 max-sm:after:rounded-xl ' +
     'max-sm:focus-visible:ring-0 max-sm:focus-visible:after:ring-3 max-sm:focus-visible:after:ring-inset ' +
     'max-sm:focus-visible:after:ring-ring/50';
+// The chip on a phone in a `mobile="row"` strip. Its focus ring is inset:
+// the row clips anything drawn outside it.
+const CHIP_CLASS = 'flex min-h-11 items-center gap-1.5 rounded-full border border-border bg-card px-3 type-label ' +
+    'whitespace-nowrap text-foreground outline-none hover:bg-accent focus-visible:ring-3 ' +
+    'focus-visible:ring-inset focus-visible:ring-ring/50';
 const ACTION_CLASS = 'flex items-center gap-1 border-t border-border px-3 py-2 type-label text-foreground underline ' +
     'underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-3 focus-visible:ring-inset ' +
     'focus-visible:ring-ring/50 density-compact:py-1.5 max-sm:hidden';
 function NewTabMark() {
     return (_jsxs(_Fragment, { children: [_jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] }));
 }
+const StripMobileContext = createContext('tiles');
+function ChipValue({ state, value }) {
+    if (state === 'loading')
+        return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Loading" })] }));
+    if (state === 'error')
+        return (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: "Couldn't load" })] }));
+    if (value === undefined)
+        return null;
+    return (_jsx("span", { "data-slot": "module-card-chip-value", className: "font-semibold tabular-nums", children: value }));
+}
+function ModuleChip({ title, icon: Icon, category, to, href, value, state, }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn('size-4 shrink-0', category ? ICON_CLASS[category] : 'text-muted-foreground') }), title, _jsx(ChipValue, { state: state, value: value })] }));
+    const chipProps = { 'data-slot': 'module-card-chip', 'data-state': state, className: cn(CHIP_CLASS, 'md:hidden') };
+    return href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...chipProps, children: [content, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...chipProps, children: content }));
+}
 export function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading = false, error, onRetry, className, }) {
     const titleId = useId();
     const bodyId = useId();
     const state = error ? 'error' : isLoading ? 'loading' : 'success';
+    const mobile = useContext(StripMobileContext);
     const band = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn('size-4 shrink-0', category ? ICON_CLASS[category] : 'text-muted-foreground') }), _jsx("span", { id: titleId, className: "min-w-0 flex-1 truncate underline-offset-4 group-hover/band:underline", children: title })] }));
     const bandProps = {
         'aria-describedby': bodyId,
         'data-slot': 'module-card-band',
         className: cn(BAND_LINK_CLASS, category && BAND_CLASS[category]),
     };
-    return (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
+    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
                 (action.href !== undefined ? (_jsxs("a", { href: action.href, target: "_blank", rel: "noreferrer", "aria-describedby": titleId, className: ACTION_CLASS, children: [_jsx("span", { className: "truncate", children: action.label }), _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: action.to, "aria-describedby": titleId, className: ACTION_CLASS, children: _jsx("span", { className: "truncate", children: action.label }) })))] }));
+    if (mobile === 'tiles')
+        return card;
+    return (_jsxs(_Fragment, { children: [card, _jsx(ModuleChip, { title: title, icon: Icon, category: category, to: to, href: href, value: value, state: state })] }));
 }
+// The list's columns: whole class names, so Tailwind generates them.
+const STRIP_LIST = {
+    tiles: 'grid grid-cols-3 gap-2 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]',
+    row: 'flex gap-2 md:grid md:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]',
+};
 /**
  * A hub's places, a ModuleCard each: equal columns of 170px or more that
- * wrap, and three columns of tiles on a phone.
+ * wrap, and on a phone three columns of tiles, or one sideways row of
+ * chips (`mobile="row"`).
  */
-export function ModuleStrip({ 'aria-label': label, children, className }) {
-    return (_jsx("nav", { "aria-label": label, "data-slot": "module-strip", className: className, children: _jsx("ul", { className: "grid grid-cols-3 gap-2 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]", children: Children.map(children, (child) => child && _jsx("li", { className: "min-w-0", children: child })) }) }));
+export function ModuleStrip({ 'aria-label': label, children, mobile = 'tiles', className }) {
+    const row = mobile === 'row';
+    return (_jsx(StripMobileContext.Provider, { value: mobile, children: _jsx("nav", { "aria-label": label, "data-slot": "module-strip", "data-mobile": mobile, className: cn(row && 'relative min-w-0 max-md:overflow-x-auto max-md:[scrollbar-width:none]', className), children: _jsx("ul", { className: STRIP_LIST[mobile], children: Children.map(children, (child) => child && _jsx("li", { className: cn('min-w-0', row && 'max-md:shrink-0'), children: child })) }) }) }));
 }

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { type RowGroup } from './components/app/table-groups.js';
 export { byDay, type ByDayOptions } from './lib/group-by-day.js';
 export { EntityForm, type EntityFormProps } from './components/app/entity-form.js';
 export { KeyStats, type KeyStat, type KeyStatsProps } from './components/app/key-stats.js';
-export { EntityView, type EntityViewField, type EntityViewLayout, type EntityViewPlacement, type EntityViewProps, type EntityViewSection, } from './components/app/entity-view.js';
+export { EntityView, type EntityViewField, type EntityViewLayout, type EntityViewMobileOrder, type EntityViewPlacement, type EntityViewProps, type EntityViewSection, } from './components/app/entity-view.js';
 export { editInPlace, type EditControlProps, type EditInPlace, type EditInPlaceList, type EditInPlaceListOptions, type EditInPlaceOptions, type EditKind, type EditListAddProps, type EditListItemProps, } from './components/app/edit-in-place.js';
 export { DataEnvironmentBanner } from './components/app/data-environment-banner.js';
 export { EditableValue, type EditableValueProps } from './components/app/editable-value.js';
@@ -44,7 +44,7 @@ export { ImageField, type ImageFieldProps } from './components/app/image-field.j
 export { DEFAULT_IMAGE_TYPES, type ImageUpload, type ImageUploadResult } from './lib/image-file.js';
 export { formatPlainDate, type PlainDate } from './lib/plain-date.js';
 export { ChoiceCell, LinkCell, NameCell, type ChoiceCellProps, type LinkCellProps, type NameCellProps, } from './components/app/row-edit-cells.js';
-export { ModuleCard, ModuleStrip, type CategorySlot, type ModuleCardLink, type ModuleCardPlace, type ModuleCardProps, type ModuleStripProps, } from './components/app/module-card.js';
+export { ModuleCard, ModuleStrip, type CategorySlot, type ModuleCardLink, type ModuleCardPlace, type ModuleCardProps, type ModuleStripMobile, type ModuleStripProps, } from './components/app/module-card.js';
 export { WidgetCard, WidgetCardGroup, WidgetList, WidgetListItem, type WidgetCardGroupProps, type WidgetCardLink, type WidgetCardProps, type WidgetListItemProps, } from './components/app/widget-card.js';
 export { WidgetLayoutSheet, type WidgetLayoutSheetProps } from './components/app/widget-layout-sheet.js';
 export { ThemeProvider } from './components/theme-provider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.46.0",
+  "version": "4.47.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {