rcf-lite 0.12.0 → 0.13.0

package/blueprints/application-spa/assets/tokens/design-tokens.json

@@ -0,0 +1,140 @@
+{
+  "meta": {
+    "name": "spa-blueprint-design-tokens",
+    "blueprint": "application-spa",
+    "version": "1.0.0",
+    "notes": "Canonical token values for application-spa-REQ-003, application-spa-REQ-005, application-spa-REQ-012, and application-spa-REQ-020. Colour pairings are contrast-validated: text tokens meet 4.5:1 and border/focus tokens meet 3:1 against every surface token in their theme. Parity rule: the light and dark colour key sets must remain identical; a key present in one theme and not the other is a defect (AC-1106-2)."
+  },
+  "color": {
+    "light": {
+      "surface": "#ffffff",
+      "surfaceRaised": "#f5f7fa",
+      "surfaceSunken": "#e9edf2",
+      "onSurface": "#1b2430",
+      "onSurfaceMuted": "#4a5568",
+      "primary": "#1d4ed8",
+      "onPrimary": "#ffffff",
+      "accent": "#0f6674",
+      "danger": "#b3261e",
+      "onDanger": "#ffffff",
+      "warning": "#8a4b0f",
+      "success": "#1a7431",
+      "muted": "#5b6572",
+      "border": "#697180",
+      "divider": "#d8dee6",
+      "focusRing": "#1d4ed8"
+    },
+    "dark": {
+      "surface": "#12161d",
+      "surfaceRaised": "#1a202a",
+      "surfaceSunken": "#0c0f15",
+      "onSurface": "#e8ecf2",
+      "onSurfaceMuted": "#a6b0bd",
+      "primary": "#8ab4ff",
+      "onPrimary": "#0e1a33",
+      "accent": "#5ad0e6",
+      "danger": "#ff8f88",
+      "onDanger": "#33100e",
+      "warning": "#f0b354",
+      "success": "#6dd58c",
+      "muted": "#98a2b0",
+      "border": "#8d97a5",
+      "divider": "#323a46",
+      "focusRing": "#8ab4ff"
+    },
+    "usage": {
+      "onSurface": "Body and heading text on any surface token.",
+      "onSurfaceMuted": "Secondary text; still passes 4.5:1 on every surface.",
+      "primary": "Primary actions and links; text-safe on surfaces; pair fills with onPrimary.",
+      "accent": "Highlights and selected states; text-safe on surfaces.",
+      "danger": "Destructive actions and error text; pair fills with onDanger.",
+      "warning": "Cautionary text and indicators; text-safe on surfaces.",
+      "success": "Positive confirmation text and indicators; text-safe on surfaces.",
+      "border": "Form-control and component boundaries (3:1 floor, WCAG 1.4.11).",
+      "divider": "Decorative separation only; never a control boundary.",
+      "focusRing": "Focus indicator colour (3:1 floor against surfaces)."
+    }
+  },
+  "spacing": {
+    "base": "4px",
+    "scale": {
+      "space-1": "0.25rem",
+      "space-2": "0.5rem",
+      "space-3": "0.75rem",
+      "space-4": "1rem",
+      "space-5": "1.25rem",
+      "space-6": "1.5rem",
+      "space-8": "2rem",
+      "space-10": "2.5rem",
+      "space-12": "3rem",
+      "space-16": "4rem",
+      "space-20": "5rem"
+    },
+    "notes": "All margins, paddings, and gaps resolve to this scale (AC-1104-1). Section spacing defaults: space-12 between page sections, space-6 within a section, space-2 between a label and its control."
+  },
+  "radius": {
+    "radius-sm": "4px",
+    "radius-md": "8px",
+    "radius-lg": "12px",
+    "radius-full": "9999px",
+    "notes": "radius-sm for inputs and small controls, radius-md for cards and overlays, radius-lg for prominent surfaces, radius-full for pills and avatars."
+  },
+  "typography": {
+    "scaleRatio": 1.25,
+    "fontFamily": {
+      "ui": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "mono": "ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace"
+    },
+    "size": {
+      "text-xs": "clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem)",
+      "text-sm": "clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem)",
+      "text-body": "clamp(0.875rem, 0.8rem + 0.5vw, 1rem)",
+      "text-lg": "clamp(1.094rem, 1rem + 0.6vw, 1.25rem)",
+      "text-xl": "clamp(1.367rem, 1.25rem + 0.75vw, 1.563rem)",
+      "text-2xl": "clamp(1.709rem, 1.55rem + 0.95vw, 1.953rem)",
+      "text-3xl": "clamp(2.136rem, 1.9rem + 1.2vw, 2.441rem)"
+    },
+    "lineHeight": {
+      "body": 1.5,
+      "heading": 1.2
+    },
+    "notes": "text-body resolves to at least 14px below 768 viewport width and at least 16px at 768 and above (AC-1127-2); clamp() carries the fluid scaling (AC-1127-3). Sizes above body follow the 1.25 modular scale."
+  },
+  "elevation": {
+    "light": {
+      "elevation-1": "0 1px 2px rgba(27, 36, 48, 0.08), 0 1px 3px rgba(27, 36, 48, 0.06)",
+      "elevation-2": "0 2px 6px rgba(27, 36, 48, 0.10), 0 4px 12px rgba(27, 36, 48, 0.08)",
+      "elevation-3": "0 8px 24px rgba(27, 36, 48, 0.16), 0 2px 6px rgba(27, 36, 48, 0.10)"
+    },
+    "dark": {
+      "elevation-1": "0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 236, 242, 0.05)",
+      "elevation-2": "0 2px 6px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(232, 236, 242, 0.07)",
+      "elevation-3": "0 8px 24px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(232, 236, 242, 0.09)",
+      "notes": "Dark elevation pairs shadow with a faint outline plus the raised surface tokens so hierarchy survives without light-theme shadow contrast (AC-1106-5)."
+    }
+  },
+  "motion": {
+    "duration": {
+      "motion-fast": "150ms",
+      "motion-base": "200ms",
+      "motion-slow": "250ms"
+    },
+    "easing": {
+      "ease-out": "cubic-bezier(0.2, 0, 0, 1)",
+      "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "notes": "Defaults per ADR-207: enter and state changes use ease-out at motion-base; exits use motion-fast. prefers-reduced-motion collapses all of these (see theme.css)."
+  },
+  "breakpoints": {
+    "bp-360": "360px",
+    "bp-768": "768px",
+    "bp-1024": "1024px",
+    "bp-1440": "1440px",
+    "notes": "The ratified baseline breakpoints (application-spa-REQ-004). Container widths per breakpoint live in assets/viewports.md."
+  },
+  "targetSize": {
+    "minimum": "24px",
+    "notes": "Minimum interactive target per WCAG 2.2 and AC-1126-4; controls may render visually smaller only when padding or spacing preserves the 24x24 target."
+  }
+}

package/blueprints/application-spa/assets/tokens/theme.css

@@ -0,0 +1,169 @@
+/* application-spa blueprint theme stylesheet.
+ *
+ * Realises assets/tokens/design-tokens.json as CSS custom properties in
+ * both themes (application-spa-REQ-005, ADR-202). Selection model:
+ *   1. No stored choice: prefers-color-scheme decides (AC-1106-4).
+ *   2. Explicit choice: the application sets data-theme="light|dark" on
+ *      the document root, which outranks the media query (AC-1107-5).
+ * Components consume the semantic custom properties only; raw colour
+ * values in component styles are a defect (AC-1106-1).
+ */
+
+:root {
+  /* Colour, light theme (default). */
+  --color-surface: #ffffff;
+  --color-surface-raised: #f5f7fa;
+  --color-surface-sunken: #e9edf2;
+  --color-on-surface: #1b2430;
+  --color-on-surface-muted: #4a5568;
+  --color-primary: #1d4ed8;
+  --color-on-primary: #ffffff;
+  --color-accent: #0f6674;
+  --color-danger: #b3261e;
+  --color-on-danger: #ffffff;
+  --color-warning: #8a4b0f;
+  --color-success: #1a7431;
+  --color-muted: #5b6572;
+  --color-border: #697180;
+  --color-divider: #d8dee6;
+  --color-focus-ring: #1d4ed8;
+
+  /* Elevation, light theme. */
+  --elevation-1: 0 1px 2px rgba(27, 36, 48, 0.08), 0 1px 3px rgba(27, 36, 48, 0.06);
+  --elevation-2: 0 2px 6px rgba(27, 36, 48, 0.10), 0 4px 12px rgba(27, 36, 48, 0.08);
+  --elevation-3: 0 8px 24px rgba(27, 36, 48, 0.16), 0 2px 6px rgba(27, 36, 48, 0.10);
+
+  /* Spacing (4pt scale). */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+
+  /* Radius. */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Typography (fluid modular scale, ratio 1.25). */
+  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;
+  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
+  --text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
+  --text-body: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
+  --text-lg: clamp(1.094rem, 1rem + 0.6vw, 1.25rem);
+  --text-xl: clamp(1.367rem, 1.25rem + 0.75vw, 1.563rem);
+  --text-2xl: clamp(1.709rem, 1.55rem + 0.95vw, 1.953rem);
+  --text-3xl: clamp(2.136rem, 1.9rem + 1.2vw, 2.441rem);
+  --leading-body: 1.5;
+  --leading-heading: 1.2;
+
+  /* Motion (ADR-207). */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --motion-slow: 250ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Target size floor (WCAG 2.2, AC-1126-4). */
+  --target-min: 24px;
+
+  color-scheme: light;
+}
+
+/* Dark palette as a reusable declaration block: applied by media query
+ * when no explicit choice exists, and by data-theme when one does. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --color-surface: #12161d;
+    --color-surface-raised: #1a202a;
+    --color-surface-sunken: #0c0f15;
+    --color-on-surface: #e8ecf2;
+    --color-on-surface-muted: #a6b0bd;
+    --color-primary: #8ab4ff;
+    --color-on-primary: #0e1a33;
+    --color-accent: #5ad0e6;
+    --color-danger: #ff8f88;
+    --color-on-danger: #33100e;
+    --color-warning: #f0b354;
+    --color-success: #6dd58c;
+    --color-muted: #98a2b0;
+    --color-border: #8d97a5;
+    --color-divider: #323a46;
+    --color-focus-ring: #8ab4ff;
+    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 236, 242, 0.05);
+    --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(232, 236, 242, 0.07);
+    --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(232, 236, 242, 0.09);
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme='dark'] {
+  --color-surface: #12161d;
+  --color-surface-raised: #1a202a;
+  --color-surface-sunken: #0c0f15;
+  --color-on-surface: #e8ecf2;
+  --color-on-surface-muted: #a6b0bd;
+  --color-primary: #8ab4ff;
+  --color-on-primary: #0e1a33;
+  --color-accent: #5ad0e6;
+  --color-danger: #ff8f88;
+  --color-on-danger: #33100e;
+  --color-warning: #f0b354;
+  --color-success: #6dd58c;
+  --color-muted: #98a2b0;
+  --color-border: #8d97a5;
+  --color-divider: #323a46;
+  --color-focus-ring: #8ab4ff;
+  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 236, 242, 0.05);
+  --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(232, 236, 242, 0.07);
+  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(232, 236, 242, 0.09);
+  color-scheme: dark;
+}
+
+/* Base text defaults (application-spa-REQ-020). */
+body {
+  font-family: var(--font-ui);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-on-surface);
+  background: var(--color-surface);
+}
+h1, h2, h3, h4, h5, h6 {
+  line-height: var(--leading-heading);
+}
+
+/* Focus visibility (AC-1126-3): one consistent, token-driven indicator. */
+:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Reduced motion (application-spa-REQ-012, ADR-207): one root-level rule, not
+ * per-component checks. Essential motion opts back in explicitly. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Safe-area handling (application-spa-REQ-003): shell chrome applies the insets. */
+.app-shell {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}

package/blueprints/application-spa/assets/viewports.md

@@ -0,0 +1,18 @@
+# Viewport table
+
+The ratified baseline breakpoints (application-spa-REQ-004) and the layout behaviour declared at each. Every declared route must render without page-level horizontal overflow at all four widths (AC-1105-1).
+
+| Breakpoint | Width | Container max-width | Columns | Navigation | Tables |
+|---|---|---|---|---|---|
+| bp-360 | 360px | 100% minus space-4 gutters | 4 | Top bar with menu disclosure; side nav closed | Card layout or scoped scroll container |
+| bp-768 | 768px | 720px | 8 | Top bar full; side nav collapsible | Card layout or scoped scroll container up to 768; full table above |
+| bp-1024 | 1024px | 960px | 12 | Top bar full; side nav open where declared | Full table |
+| bp-1440 | 1440px | 1280px | 12 | Top bar full; side nav open where declared | Full table |
+
+Rules that hold at every width:
+
+- Reflow, not scale: layout reorganises between breakpoints (AC-1105-2); between the named widths the layout is fluid within the active column grid.
+- Body text: minimum 14px below 768, minimum 16px at 768 and above; fluid between (application-spa-REQ-020).
+- Interactive targets: minimum 24x24 CSS pixels at every width (AC-1105-6).
+- Safe areas: shell chrome applies safe-area insets on notched viewports (application-spa-REQ-003).
+- Test the four named widths as the floor, not the ceiling: resize continuously between 360 and 1440 when verifying reflow (AC-1127-3).

package/blueprints/application-spa/assets/wireframes/dashboard.md

@@ -0,0 +1,48 @@
+# Wireframe: dashboard
+
+The authenticated home surface. Composes summary cards, a primary collection preview, and recent activity. Realise with the tokens in assets/tokens; all copy is placeholder shape, replaced per application-spa-US-1124.
+
+## 1024 and above
+
+```
++--------------------------------------------------------------------------+
+| [skip-link (visible on focus)]                                           |
+| banner: logo | nav: Overview* Items Reports | search | theme | user menu |
++----------------+---------------------------------------------------------+
+| side nav       | h1 Dashboard                                            |
+| (if declared)  |                                                         |
+|  Overview*     | +-- card --------+ +-- card --------+ +-- card -------+ |
+|  Items         | | metric label   | | metric label   | | metric label  | |
+|  Reports       | | 128            | | 42             | | 7 needs care  | |
+|                | | delta context  | | delta context  | | warning tone  | |
+|                | +----------------+ +----------------+ +---------------+ |
+|                |                                                         |
+|                | h2 Recent items                    [View all ->]        |
+|                | +-----------------------------------------------------+ |
+|                | | item title      | status chip | owner | updated     | |
+|                | | item title      | status chip | owner | updated     | |
+|                | | item title      | status chip | owner | updated     | |
+|                | +-----------------------------------------------------+ |
+|                |                                                         |
+|                | h2 Activity                                             |
+|                | | avatar  actor did thing on item        timestamp     | |
+|                | | avatar  actor did thing on item        timestamp     | |
++----------------+---------------------------------------------------------+
+| contentinfo: product name | version | support link                        |
++--------------------------------------------------------------------------+
+```
+
+## 360
+
+Single column: cards stack full-width (surface-raised, elevation-1), recent items render as cards per the table rule (AC-1105-4), activity list below. Navigation collapses into the menu disclosure; the theme toggle stays reachable in the top bar.
+
+## States
+
+- Loading: skeletons mirror the three cards and the list rows (AC-1112-5); no full-page spinner.
+- Empty (new account): each region renders its empty state; the recent-items region leads with the primary create action (AC-1112-4).
+- Error: failed regions render the error-state component with retry, healthy regions still render; one failed query never blanks the dashboard.
+- Re-entry: cached data renders instantly, then revalidates (AC-1120-2).
+
+## Landmarks and structure
+
+banner, navigation, main (unique), contentinfo (AC-1103-5). Exactly one h1. Cards are not clickable wholesale unless the whole card is one link (AC-1111-1).

package/blueprints/application-spa/assets/wireframes/detail.md

@@ -0,0 +1,40 @@
+# Wireframe: detail (single resource)
+
+The canonical single-resource surface at the resource's canonical URL. Deep-linkable cold (AC-1101-6), breadcrumbed when nested (AC-1101-3).
+
+## 1024 and above
+
+```
++--------------------------------------------------------------------------+
+| shell                                                                    |
++----------------+---------------------------------------------------------+
+| side nav       | breadcrumb: Home / Items / Quarterly readiness review   |
+|                | h1 Quarterly readiness review     [Edit] [... menu]     |
+|                | status chip | owner | updated timestamp                 |
+|                |                                                         |
+|                | +--- main column (8 cols) ---+ +-- aside (4 cols) ----+ |
+|                | | h2 Description             | | h2 Properties        | |
+|                | | body text ...              | | owner    Alex Morgan | |
+|                | |                            | | status   active      | |
+|                | | h2 Activity                | | created  date        | |
+|                | | timeline entries ...       | | tags     chips       | |
+|                | +----------------------------+ +----------------------+ |
++----------------+---------------------------------------------------------+
+```
+
+## 360
+
+Single column: header block, properties (collapsed into a definition list), description, activity. The overflow menu carries secondary actions; the primary action stays visible.
+
+## States
+
+- Loading: skeleton for header block and both columns.
+- Error, not found: the 404 surface (AC-1101-4); removed resource: the 410 surface (AC-1101-5).
+- Error, load failure: error-state component with retry; the shell and breadcrumb still render.
+- Success after edit: updated values render without reload on every route that displays this resource (AC-1120-6).
+- Re-entry: cached render, background revalidation (AC-1120-2).
+
+## Behaviour contracts
+
+- The [... menu] is an accessible popover (AC-1110-5); destructive entries open a confirmation modal with focus on the safe action (AC-1108-3).
+- Timestamps format through locale APIs (AC-1122-3).

package/blueprints/application-spa/assets/wireframes/empty.md

@@ -0,0 +1,31 @@
+# Wireframe: empty state
+
+The shape every empty region follows (AC-1112-4, AC-1117-3). Rendered inside the region it fills: a full route body, a table body, a combobox listbox, or an aside.
+
+## Shape (any width)
+
+```
++--------------------------------------------+
+|                                            |
+|              [ icon / small                |
+|                illustration ]              |
+|                                            |
+|        h2/h3  No items yet                 |
+|                                            |
+|   Body: one sentence naming what will      |
+|   appear here and why it is useful.        |
+|                                            |
+|          [ + Create your first item ]      |
+|          [ secondary: learn more ]         |
+|                                            |
++--------------------------------------------+
+```
+
+## Rules
+
+- Three elements always: visual, headline naming the absent content, primary filling action (AC-1112-4). The secondary action is optional.
+- Copy is context-specific: an empty "Items" list and an empty search result do not share copy (AC-1117-3); filtered-empty offers "clear filters" instead of "create".
+- The visual uses the icon set through semantic aliases (application-spa-REQ-011), muted tones, decorative and hidden from assistive technology (AC-1118-4).
+- Never renders while loading is still possible (AC-1117-6); the data layer must have settled on empty.
+- Vertical centring within the region above 768; top-aligned with space-12 padding at 360.
+- Template copy here is a shape, not shippable text (AC-1124-5).

package/blueprints/application-spa/assets/wireframes/error.md

@@ -0,0 +1,46 @@
+# Wireframe: error states
+
+Three distinct error surfaces, all fed by the problem-details envelope (ADR-204) and all phrased per application-spa-REQ-017.
+
+## Region error (a data load failed inside a healthy page)
+
+```
++--------------------------------------------+
+|         [ alert icon, danger alias ]       |
+|    h3  We could not load your items        |
+|    Body: The connection to the server      |
+|    failed. Your other work is unaffected.  |
+|            [ Try again ]                   |
++--------------------------------------------+
+```
+
+Renders inside the failed region only; shell, navigation, and healthy regions stay live. Retry re-runs the query (AC-1121-2). 4xx-class problems adapt copy to the user-fixable cause; 5xx-class problems say it is not the user's fault (AC-1117-4).
+
+## Route error (404 / 410)
+
+```
++--------------------------------------------------------------------------+
+| shell (navigation fully present)                                         |
+|                                                                          |
+|        h1  There is nothing at this address                              |
+|        Body: The link may be mistyped or the page may have moved.        |
+|        [ Go to dashboard ]   [ search affordance if declared ]           |
++--------------------------------------------------------------------------+
+```
+
+404 says "never existed or moved"; 410 names the resource as removed, in past tense, with a path to its collection (AC-1101-4, AC-1101-5).
+
+## Application error (error boundary caught a crash)
+
+```
++--------------------------------------------------------------------------+
+| shell if the shell boundary survived, otherwise minimal branded frame    |
+|                                                                          |
+|        h1  Something went wrong on our side                              |
+|        Body: The page hit a problem it could not recover from.           |
+|        Nothing you did caused this.                                      |
+|        [ Reload this page ]   [ Go to dashboard ]                        |
++--------------------------------------------------------------------------+
+```
+
+The boundary reports with route and component context (AC-1123-3). No stack traces, exception names, or internal ids anywhere on any of the three surfaces (AC-1124-4).

package/blueprints/application-spa/assets/wireframes/form.md

@@ -0,0 +1,50 @@
+# Wireframe: form (create and edit)
+
+The canonical mutation surface. Realises the application-spa-REQ-007 contract end to end; the forms engine (TAC-205) owns timing and error binding.
+
+## 1024 and above
+
+```
++--------------------------------------------------------------------------+
+| shell                                                                    |
++----------------+---------------------------------------------------------+
+| side nav       | breadcrumb: Home / Items / New item                     |
+|                | h1 New item                                             |
+|                |                                                         |
+|                | [ error summary: appears here on failed submit,        |
+|                |   one link per failed field, focus lands here ]        |
+|                |                                                         |
+|                | Title (required)                                        |
+|                | [_______________________________________________]      |
+|                | helper text: what a good title looks like              |
+|                |                                                         |
+|                | Owner (required)          Status                        |
+|                | [ combobox............v ] [ select.........v ]          |
+|                |                                                         |
+|                | Description                                             |
+|                | [ textarea                                       ]      |
+|                | [                                                ]      |
+|                |                                                         |
+|                | Tags                                                    |
+|                | [ chip input___________________ ]                       |
+|                |                                                         |
+|                | [Cancel]                        [Create item]           |
++----------------+---------------------------------------------------------+
+```
+
+## 360
+
+Single column, labels above fields, actions full-width with the primary action last and reachable without scrolling past unrelated content. Field-appropriate mobile keyboards via inputmode and type (AC-1113-6).
+
+## States
+
+- Field error: danger border, message under the field, aria-describedby wired (AC-1113-4); clears live on correction (AC-1113-1).
+- Failed submit: summary renders and takes focus (AC-1113-2, AC-1113-3); values preserved (AC-1113-7).
+- Submitting: primary button busy per AC-1108-2; fields stay readable, not blanked.
+- Offline submit: queued-or-refused explicitly, payload intact (AC-1121-3).
+- Success: route per journey spec, confirmation visible, affected collections updated (AC-1117-5).
+- Dirty-leave: navigating away with unsaved changes asks for confirmation via modal (AC-1110-1).
+
+## Notes
+
+Required marking is visible and programmatic (AC-1113-5). Autocomplete tokens on personal-data fields (AC-1113-6). No motion during entry (AC-1119-4).

package/blueprints/application-spa/assets/wireframes/list.md

@@ -0,0 +1,45 @@
+# Wireframe: list (collection)
+
+The canonical collection surface: filterable, sortable, paginated. One of these exists per listable resource class, always at the collection's canonical URL (application-spa-REQ-001).
+
+## 1024 and above
+
+```
++--------------------------------------------------------------------------+
+| shell (as dashboard)                                                     |
++----------------+---------------------------------------------------------+
+| side nav       | breadcrumb: Home / Items          (if depth > 2)        |
+|                | h1 Items (128)                     [+ New item]         |
+|                |                                                         |
+|                | [ filter: status v ] [ filter: owner v ] [ search... ]  |
+|                | active filters as dismissible chips                     |
+|                |                                                         |
+|                | +-----------------------------------------------------+ |
+|                | | Title ^        | Status      | Owner    | Updated v | |
+|                | |-----------------------------------------------------| |
+|                | | item title     | status chip | avatar   | date      | |
+|                | | item title     | status chip | avatar   | date      | |
+|                | |  ... 25 rows per page ...                           | |
+|                | +-----------------------------------------------------+ |
+|                |                                                         |
+|                | [< Prev]  Page 3 of 6  [Next >]        25 per page v    |
++----------------+---------------------------------------------------------+
+```
+
+## 360
+
+Filters collapse into a single Filters disclosure showing an active-count badge. Rows render as cards: title prominent, status chip, owner, updated; the primary action stays visible without horizontal scroll (AC-1105-4).
+
+## States
+
+- Loading: skeleton rows matching the column silhouette (AC-1111-4).
+- Empty, no data: empty-state component; headline names the resource, primary action creates the first one (AC-1112-4).
+- Empty, filtered to zero: distinct copy naming the filters, action clears them; do not reuse the no-data state.
+- Error: error-state component inside the table region with retry (AC-1111-4).
+- Success after create or edit: list reflects the write without manual refresh (AC-1120-3), confirmation per the journey spec.
+
+## Behaviour contracts
+
+- Sort headers expose aria-sort and cycle predictably (AC-1111-3).
+- Page and named filters serialise to the URL so positions are shareable (AC-1111-8).
+- Pagination controls disable impossible moves rather than hiding them (AC-1111-7).

package/blueprints/application-spa/assets/wireframes/session-expired.md

@@ -0,0 +1,35 @@
+# Wireframe: session expired
+
+Rendered when a request returns 401 mid-session (AC-1116-1). Distinct from sign-out: the user did not choose this, so the surface explains and preserves their place.
+
+## Shape
+
+```
++--------------------------------------------------------------------------+
+| minimal banner: product logo | theme toggle                              |
+|                                                                          |
+|                    +------------------------------+                      |
+|                    |   [ info icon alias ]        |                      |
+|                    |                              |                      |
+|                    |  h1  Your session expired    |                      |
+|                    |                              |                      |
+|                    |  Body: For your security you |                      |
+|                    |  were signed out after a     |                      |
+|                    |  period of inactivity. Sign  |                      |
+|                    |  back in to pick up where    |                      |
+|                    |  you left off.               |                      |
+|                    |                              |                      |
+|                    |  [ sign-in form or button    |                      |
+|                    |    per project auth flow ]   |                      |
+|                    +------------------------------+                      |
+|                                                                          |
+| contentinfo                                                              |
++--------------------------------------------------------------------------+
+```
+
+## Behaviour
+
+- The interrupted route is remembered; successful re-authentication returns the user there (AC-1116-2), with declared form-input preservation honoured (AC-1114-4).
+- Tone is neutral and unblaming (application-spa-REQ-017): expiry is a security behaviour, not a user mistake.
+- If multiple requests fail at once, the surface renders once; parallel 401s must not stack redirects or alerts.
+- The data layer stops retrying while this surface is up and resumes cleanly after re-authentication (TAC-204).