@milesroxas/design-hub 0.0.0-stage → 0.1.1

package/shell/shell.css

@@ -0,0 +1,160 @@
+/* The index: one group per feature (its primary prototype, its alternates on
+   a rail, its internal explorations folded into cards), then prototypes with
+   no feature, then the archive. Rows draw no dividers; their hover surface
+   bleeds 12px into the gutter. The list ends in a foot (the Ledger Foot Rule).
+   The rules are in README.md, The index. */
+
+/* One grid for the whole page, handed down by subgrid, so the context,
+   status and date columns line up across every group without fixed widths.
+   The page is 720px of text plus the 12px bleed each side; everything that
+   is not a row carries that 12px itself. */
+.index { width: min(744px, 100% - 8px); margin: 0 auto; padding: 96px 0 128px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 20px; align-content: start; }
+.index > * { grid-column: 1 / -1; }
+.index-head, .index-filter, .index-section, .index-subsection, .index-empty, .index-none, .index-foot { padding-inline: 12px; }
+
+.index-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
+.index-head h1 { font-size: 18px; line-height: 28px; font-weight: 600; text-wrap: balance; }
+.index-voice { font: 400 18px/28px var(--font-voice); letter-spacing: -0.01em; color: var(--text-secondary); max-width: 44ch; text-wrap: pretty; }
+.index code { font: 13px/20px var(--sys-font-mono); color: var(--text-secondary); }
+
+.index-filter { margin-bottom: 24px; }
+.index-filter input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-primary); box-shadow: var(--shadow-xs); font-size: 16px; transition: border-color var(--dur-hover) var(--ease-hover); }
+.index-filter input::placeholder { color: var(--text-placeholder); }
+.index-filter input:focus-visible { border-color: var(--border-brand); }
+
+.index-group { display: grid; grid-template-columns: subgrid; row-gap: 4px; }
+.index-group + .index-group { margin-top: 40px; }
+.index-section { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-tertiary); }
+/* A feature's walkthrough sits at the end of its heading line, in the same tier. */
+.index-guide { display: inline-flex; align-items: center; gap: 2px; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-xs); transition: color var(--dur-hover) var(--ease-hover); }
+.index-guide:hover { color: var(--text-primary); }
+/* Alternates are other takes on the primary: indented 20px under it and
+   joined by a 1px rail on the primary's text edge, so they read as children
+   of that one row. Subgrid carries the padding to the first column only, so
+   the meta columns still line up with every other row. */
+.index-alternates { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-left: 20px; }
+.index-alternates::before { content: ""; position: absolute; left: 12px; top: 2px; bottom: 12px; width: 1px; background: var(--border-secondary); }
+.index-alternates > .index-list { row-gap: 0; }
+.index-alternates-label { grid-column: 1 / -1; padding: 4px 12px 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-quaternary); }
+
+/* A feature's explorations sit under the sprint, folded away by default
+   behind a caption one tier below the heading; the page remembers the fold. */
+/* Rhythm inside a group: each block's text sits 20px under the text above it
+   (the primary under the heading, each caption under the last row's summary),
+   and a caption sits 8px over what it labels, so it belongs to what follows.
+   Groups stay 40px apart. */
+.index-subsection { grid-column: 1 / -1; margin-top: 4px; margin-bottom: 4px; font-size: 12px; line-height: 18px; font-weight: 500; }
+.index-fold-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: var(--text-quaternary); cursor: pointer; border-radius: var(--radius-xs); transition: color var(--dur-hover) var(--ease-hover); }
+.index-fold-count { color: var(--text-quaternary); font-weight: 400; }
+.index-fold-toggle svg { transition: transform var(--dur-dialog) var(--ease-out); }
+.index-fold-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+
+/* The fold opens by growing its one grid row from 0fr to 1fr while the cards
+   fade in, and closes faster than it opens. The cards clip only a few pixels
+   past their edge, so the hover shadow survives and a closed fold shows nothing. */
+.index-fold { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-dialog-out) var(--ease-out), opacity var(--dur-dialog-out) var(--ease-out); }
+.index-fold[data-open] { grid-template-rows: 1fr; opacity: 1; transition-duration: var(--dur-dialog); }
+.index-fold[data-instant] { transition: none; }
+
+/* Cards, not rows: the explorations are side questions, met as a set. The
+   grid's outer edges sit on the rows' hover bleed, so card text keeps the
+   page's text edge. The edge is an inset ring (a border would sit pasted on
+   the page, an outer ring would be clipped by the fold), one shadow layer for
+   lift in light; dark has no shadows, so the ring carries it alone. */
+/* Light rests on a ring and two soft layers and lifts on hover by deepening
+   them, the surface staying white so the card rises rather than sinks. Dark
+   has no shadows, so the ring brightens and the surface steps up instead. */
+.index {
+  --index-card-edge: inset 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 4px -2px oklch(0 0 0 / 0.04);
+  --index-card-edge-hover: inset 0 0 0 1px oklch(0 0 0 / 0.12), 0 1px 3px oklch(0 0 0 / 0.06), 0 6px 12px -6px oklch(0 0 0 / 0.12);
+  --index-card-bg-hover: var(--bg-primary);
+}
+.dark-mode .index { --index-card-edge: inset 0 0 0 1px oklch(1 0 0 / 0.09); --index-card-edge-hover: inset 0 0 0 1px oklch(1 0 0 / 0.16); --index-card-bg-hover: var(--bg-primary_hover); }
+.index-cards { min-height: 0; overflow: clip; overflow-clip-margin: 12px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 8px; }
+.index-cards > li { display: flex; }
+.index-card { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-lg); background: var(--bg-primary); box-shadow: var(--index-card-edge); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), transform var(--dur-press-out) var(--ease-press), opacity var(--dur-dialog-out) var(--ease-in); }
+/* The base focus ring is a box-shadow, so the card's edge would erase it; stack both. */
+.index-card:focus-visible { box-shadow: var(--focus-ring), var(--index-card-edge); }
+.index-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.index-card-head svg { flex-shrink: 0; margin-top: 2px; color: var(--fg-quaternary); transition: color var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-out); }
+/* The summary steps down to caption size so the title leads and three cards
+   scan as three titles; Ink Tertiary keeps it a rung above the meta. */
+.index-card .index-summary { font-size: 12px; line-height: 18px; }
+.index-card-meta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; color: var(--text-quaternary); font-size: 12px; line-height: 18px; white-space: nowrap; }
+.index-card-meta > :last-child { margin-left: auto; }
+
+.index-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
+.index-list > li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
+.index-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: 2px; padding: 12px; min-height: 56px; border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover), transform var(--dur-press-out) var(--ease-press), opacity var(--dur-dialog-out) var(--ease-in); }
+.index-title { grid-column: 1; font-weight: 600; color: var(--text-primary); }
+.index-summary { grid-column: 1; color: var(--text-tertiary); text-wrap: pretty; transition: color var(--dur-hover) var(--ease-hover); }
+.index-meta { display: grid; grid-template-columns: subgrid; grid-column: 2 / 5; grid-row: 1 / span 2; align-self: center; color: var(--text-quaternary); font-size: 12px; line-height: 18px; white-space: nowrap; }
+.index-meta > :last-child { justify-self: end; }
+
+/* The sprint is the one prototype opened every day: its title steps up one
+   size, nothing else changes, so the row is heavier without a new shape. */
+.index-row[data-kind="sprint"] .index-title { font-size: 16px; line-height: 24px; }
+
+/* Status wears a dot so the column scans by colour before it is read:
+   Ink for a question still open, Success for one answered, quiet for the
+   archive. The word stays, so colour is never the only signal. */
+.index-status { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }
+.index-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-quinary); }
+.index-status[data-status="exploring"]::before { background: var(--fg-brand-primary); }
+.index-status[data-status="decided"]::before { background: var(--fg-success-primary); }
+
+.index-none { min-height: 56px; display: flex; align-items: center; color: var(--text-tertiary); }
+.index-empty { display: flex; flex-direction: column; gap: 4px; min-height: 56px; }
+.index-empty h2 { font-size: 14px; font-weight: 600; }
+.index-empty p { color: var(--text-tertiary); max-width: 52ch; text-wrap: pretty; }
+
+.index-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-secondary); color: var(--text-primary); }
+
+@media (hover: hover) and (pointer: fine) {
+  .index-row:hover { background: var(--bg-primary_hover); }
+  .index-row:hover .index-summary { color: var(--text-secondary); }
+  .index-card:hover { background: var(--index-card-bg-hover); box-shadow: var(--index-card-edge-hover); }
+  .index-card:hover:focus-visible { box-shadow: var(--focus-ring), var(--index-card-edge-hover); }
+  .index-card:hover .index-summary { color: var(--text-secondary); }
+  .index-card:hover .index-card-head svg { color: var(--fg-secondary); transform: translateX(2px); }
+  .index-fold-toggle:hover { color: var(--text-secondary); }
+}
+.index-row:active { transform: scale(0.97); transition-duration: var(--dur-hover), var(--dur-press-in); }
+.index-card:active { transform: scale(0.97); transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-press-in); }
+
+/* Arrival, one shot: the head fades, then each heading and row rises 4px
+   in order, 30ms apart, then the foot. Seen many times a day, so it stays
+   under 300ms per element and ends inside half a second. Keyframes fill
+   backwards only, so once a row has arrived its opacity is free to transition. */
+.index-head { animation: index-fade 200ms var(--ease-out) backwards; }
+.index-rise { animation: index-rise 220ms var(--ease-out) calc(40ms + var(--i, 0) * 30ms) backwards; }
+@keyframes index-fade { from { opacity: 0; } }
+@keyframes index-rise { from { opacity: 0; translate: 0 4px; } }
+
+/* Departure, pointer only: the moment a row is clicked the rest of the page
+   accelerates away (the Layer Exit curve) while the browser fetches the
+   prototype, and the chosen row holds, so the eye keeps what it picked.
+   The browser paints this page until the next one is ready, so the fade
+   fills a wait that was blank. */
+.index-head, .index-filter, .index-section, .index-subsection, .index-alternates-label, .index-foot { transition: opacity var(--dur-dialog-out) var(--ease-in); }
+.index.is-leaving .index-alternates::before { opacity: 0; transition: opacity var(--dur-dialog-out) var(--ease-in); }
+.index.is-leaving :is(.index-head, .index-filter, .index-section, .index-subsection, .index-alternates-label, .index-foot, .index-row:not([data-chosen]), .index-card:not([data-chosen])) { opacity: 0; }
+.index.is-leaving :is(.index-row, .index-card) { pointer-events: none; }
+
+:root[data-motion="reduce"] .index-rise { animation-name: index-fade; animation-duration: 120ms; animation-timing-function: linear; }
+:root[data-motion="reduce"] :is(.index-row, .index-card):active { transform: none; }
+:root[data-motion="reduce"] .index-fold { transition-property: opacity; }
+:root[data-motion="reduce"] .index-fold-toggle svg { transition: none; }
+:root[data-motion="reduce"] .index-card:hover .index-card-head svg { transform: none; }
+
+@media (max-width: 560px) {
+  .index, .index-group, .index-alternates, .index-list, .index-list > li, .index-row { display: flex; flex-direction: column; }
+  .index-row { gap: 2px; }
+  .index-meta { display: flex; gap: 12px; margin-top: 4px; }
+}
+
+.shell-notice { width: min(720px, 100% - 32px); margin: 0 auto; padding: 96px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.shell-notice h1 { font-size: 18px; line-height: 28px; font-weight: 600; }
+.shell-notice p { color: var(--text-tertiary); }
+.shell-notice pre { max-width: 100%; overflow: auto; padding: 12px; border-radius: var(--radius-md); background: var(--bg-secondary); font: 12px/18px var(--sys-font-mono); color: var(--text-secondary); }
+.shell-notice a { color: var(--text-brand-secondary); font-weight: 600; }

package/shell/system.css

@@ -0,0 +1,238 @@
+/* The hub's own look: the index, the walkthrough, notices, and every harness
+   layer drawn over a prototype (review, picker, dials). Unbranded on purpose:
+   Geist and pure neutrals (chroma 0), with hue kept only for status. It never
+   reads as the design under review, and a project's tokens.css never reaches it.
+
+   Two parts. The --sys-font* and --harness-* values sit on :root, because
+   harness layers float over prototypes. The `.sys` scope remaps the semantic
+   token names the hub stylesheets (and @kit/ui) read, so the index and guide
+   stay neutral whatever tokens.css holds. main.tsx puts `.sys` on <html> for
+   hub routes; a notice carries it itself. Every name in the light block is
+   restated in the dark block, so no light value leaks into dark. */
+
+@import '@fontsource-variable/geist';
+@import '@fontsource-variable/geist-mono';
+
+:root {
+  --sys-font: 'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --sys-font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Harness material: one dark neutral surface in both themes, for anything
+     the prototype says in its own voice (scope toasts, dial hints, review). */
+  --harness-bg: oklch(0.277 0 0);
+  --harness-fg: oklch(1 0 0 / 0.85);
+  --harness-fg-muted: oklch(1 0 0 / 0.55);
+  --harness-border: oklch(1 0 0 / 0.1);
+  --harness-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+}
+
+.sys {
+  --font: var(--sys-font);
+  --font-voice: var(--sys-font);
+  font-family: var(--sys-font);
+
+  /* Neutral ramp, one hue (none). Status keeps its hue so a dot still
+     reads as success, warning or error. */
+  --brand-400: oklch(0.87 0 0);
+
+  --text-primary: oklch(0.205 0 0);
+  --text-secondary: oklch(0.371 0 0);
+  --text-secondary_hover: oklch(0.269 0 0);
+  --text-tertiary: oklch(0.46 0 0);
+  --text-quaternary: oklch(0.54 0 0);
+  --text-disabled: oklch(0.62 0 0);
+  --text-placeholder: oklch(0.6 0 0);
+  --text-white: oklch(1 0 0);
+  --text-brand-primary: oklch(0.205 0 0);
+  --text-brand-secondary: oklch(0.205 0 0);
+  --text-brand-tertiary: oklch(0.371 0 0);
+  --text-error-primary: oklch(0.505 0.213 27.518);
+  --text-error-primary_hover: oklch(0.444 0.177 26.899);
+  --text-warning-primary: oklch(0.555 0.163 48.998);
+  --text-success-primary: oklch(0.527 0.154 150.069);
+
+  --border-primary: oklch(0.87 0 0);
+  --border-secondary: oklch(0.922 0 0);
+  --border-tertiary: oklch(0.97 0 0);
+  --border-disabled: oklch(0.87 0 0);
+  --border-brand: oklch(0.556 0 0);
+  --border-brand_alt: oklch(0.205 0 0);
+  --border-error: oklch(0.637 0.237 25.331);
+
+  --fg-primary: oklch(0.205 0 0);
+  --fg-secondary: oklch(0.371 0 0);
+  --fg-tertiary: oklch(0.46 0 0);
+  --fg-quaternary: oklch(0.54 0 0);
+  --fg-quinary: oklch(0.708 0 0);
+  --fg-white: oklch(1 0 0);
+  --fg-disabled: oklch(0.708 0 0);
+  --fg-brand-primary: oklch(0.205 0 0);
+  --fg-brand-secondary: oklch(0.371 0 0);
+  --fg-error-primary: oklch(0.577 0.245 27.325);
+  --fg-warning-primary: oklch(0.666 0.179 58.318);
+  --fg-success-primary: oklch(0.627 0.194 149.214);
+
+  --bg-primary: oklch(1 0 0);
+  --bg-primary_alt: oklch(1 0 0);
+  --bg-primary_hover: oklch(0.97 0 0);
+  --bg-secondary: oklch(0.985 0 0);
+  --bg-secondary_alt: oklch(0.985 0 0);
+  --bg-secondary_hover: oklch(0.97 0 0);
+  --bg-secondary_hover_deep: oklch(0.94 0 0);
+  --bg-secondary_subtle: oklch(0.99 0 0);
+  --bg-tertiary: oklch(0.97 0 0);
+  --bg-active: oklch(0.97 0 0);
+  --bg-disabled: oklch(0.97 0 0);
+  --bg-overlay: oklch(0.145 0 0);
+  --bg-brand-primary: oklch(0.97 0 0);
+  --bg-brand-secondary: oklch(0.94 0 0);
+  --bg-brand-solid: oklch(0.205 0 0);
+  --bg-brand-solid_hover: oklch(0.3 0 0);
+  --bg-error-primary: oklch(0.971 0.013 17.38);
+  --bg-error-secondary: oklch(0.936 0.032 17.717);
+  --bg-error-solid: oklch(0.577 0.245 27.325);
+  --bg-warning-primary: oklch(0.987 0.022 95.277);
+  --bg-success-primary: oklch(0.982 0.018 155.826);
+
+  --button-primary-bg: oklch(0.205 0 0);
+  --button-primary-bg_hover: oklch(0.3 0 0);
+  --button-primary-fg: oklch(0.985 0 0);
+  --button-secondary-bg: oklch(1 0 0);
+  --button-secondary-bg_hover: oklch(0.97 0 0);
+  --button-secondary-bg_open: oklch(0.94 0 0);
+  --button-secondary-bg_deep: oklch(0.922 0 0);
+  --button-secondary-fg: oklch(0.269 0 0);
+  --button-secondary-fg_hover: oklch(0.145 0 0);
+  --button-secondary-border: oklch(0.87 0 0);
+  --button-tertiary-fg: oklch(0.46 0 0);
+  --button-tertiary-fg_hover: oklch(0.269 0 0);
+  --button-tertiary-bg_hover: oklch(0.97 0 0);
+  --button-primary-error-bg: oklch(0.577 0.245 27.325);
+  --button-primary-error-bg_hover: oklch(0.505 0.213 27.518);
+  --button-secondary-error-fg: oklch(0.505 0.213 27.518);
+  --button-secondary-error-border: oklch(0.808 0.114 19.571);
+  --button-secondary-error-bg_hover: oklch(0.971 0.013 17.38);
+  --nav-item-icon-fg: oklch(0.54 0 0);
+  --nav-item-icon-fg_active: oklch(0.269 0 0);
+  --avatar-bg: oklch(0.97 0 0);
+  --avatar-contrast-border: oklch(0 0 0 / 0.08);
+
+  --utility-gray-50: oklch(0.985 0 0); --utility-gray-200: oklch(0.922 0 0); --utility-gray-700: oklch(0.371 0 0);
+  --utility-brand-50: oklch(0.985 0 0); --utility-brand-200: oklch(0.922 0 0); --utility-brand-700: oklch(0.371 0 0);
+  --utility-error-50: oklch(0.971 0.013 17.38); --utility-error-200: oklch(0.885 0.062 18.334); --utility-error-600: oklch(0.577 0.245 27.325); --utility-error-700: oklch(0.505 0.213 27.518);
+  --utility-warning-50: oklch(0.987 0.022 95.277); --utility-warning-200: oklch(0.924 0.12 95.746); --utility-warning-600: oklch(0.666 0.179 58.318); --utility-warning-700: oklch(0.555 0.163 48.998);
+  --utility-success-50: oklch(0.982 0.018 155.826); --utility-success-200: oklch(0.925 0.084 155.995); --utility-success-600: oklch(0.627 0.194 149.214); --utility-success-700: oklch(0.527 0.154 150.069);
+
+  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px 0 oklch(0 0 0 / 0.06);
+  --shadow-md: 0 4px 8px -2px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.06);
+  --shadow-lg: 0 12px 16px -4px oklch(0 0 0 / 0.08), 0 4px 6px -2px oklch(0 0 0 / 0.03);
+  --shadow-xl: 0 20px 24px -4px oklch(0 0 0 / 0.08), 0 8px 8px -4px oklch(0 0 0 / 0.03);
+  --focus-ring: 0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0.556 0 0);
+  --focus-ring-error: 0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0.637 0.237 25.331);
+
+  --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
+  --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
+}
+
+/* Dark is the light ramp turned over: each role takes the step from the
+   other end, so the gaps between roles hold. */
+.sys.dark-mode,
+.dark-mode .sys {
+  --brand-400: oklch(0.87 0 0);
+
+  --text-primary: oklch(0.985 0 0);
+  --text-secondary: oklch(0.87 0 0);
+  --text-secondary_hover: oklch(0.922 0 0);
+  --text-tertiary: oklch(0.72 0 0);
+  --text-quaternary: oklch(0.66 0 0);
+  --text-disabled: oklch(0.5 0 0);
+  --text-placeholder: oklch(0.55 0 0);
+  --text-white: oklch(1 0 0);
+  --text-brand-primary: oklch(0.985 0 0);
+  --text-brand-secondary: oklch(0.985 0 0);
+  --text-brand-tertiary: oklch(0.87 0 0);
+  --text-error-primary: oklch(0.704 0.191 22.216);
+  --text-error-primary_hover: oklch(0.808 0.114 19.571);
+  --text-warning-primary: oklch(0.828 0.189 84.429);
+  --text-success-primary: oklch(0.792 0.209 151.711);
+
+  --border-primary: oklch(0.32 0 0);
+  --border-secondary: oklch(0.26 0 0);
+  --border-tertiary: oklch(0.215 0 0);
+  --border-disabled: oklch(0.32 0 0);
+  --border-brand: oklch(0.708 0 0);
+  --border-brand_alt: oklch(0.32 0 0);
+  --border-error: oklch(0.704 0.191 22.216);
+
+  --fg-primary: oklch(0.985 0 0);
+  --fg-secondary: oklch(0.87 0 0);
+  --fg-tertiary: oklch(0.72 0 0);
+  --fg-quaternary: oklch(0.66 0 0);
+  --fg-quinary: oklch(0.5 0 0);
+  --fg-white: oklch(1 0 0);
+  --fg-disabled: oklch(0.5 0 0);
+  --fg-brand-primary: oklch(0.985 0 0);
+  --fg-brand-secondary: oklch(0.87 0 0);
+  --fg-error-primary: oklch(0.637 0.237 25.331);
+  --fg-warning-primary: oklch(0.769 0.188 70.08);
+  --fg-success-primary: oklch(0.723 0.219 149.579);
+
+  --bg-primary: oklch(0.145 0 0);
+  --bg-primary_alt: oklch(0.175 0 0);
+  --bg-primary_hover: oklch(0.215 0 0);
+  --bg-secondary: oklch(0.175 0 0);
+  --bg-secondary_alt: oklch(0.145 0 0);
+  --bg-secondary_hover: oklch(0.215 0 0);
+  --bg-secondary_hover_deep: oklch(0.26 0 0);
+  --bg-secondary_subtle: oklch(0.175 0 0);
+  --bg-tertiary: oklch(0.215 0 0);
+  --bg-active: oklch(0.215 0 0);
+  --bg-disabled: oklch(0.215 0 0);
+  --bg-overlay: oklch(0.215 0 0);
+  --bg-brand-primary: oklch(0.26 0 0);
+  --bg-brand-secondary: oklch(0.32 0 0);
+  --bg-brand-solid: oklch(0.985 0 0);
+  --bg-brand-solid_hover: oklch(0.87 0 0);
+  --bg-error-primary: oklch(0.258 0.092 26.042);
+  --bg-error-secondary: oklch(0.396 0.141 25.723);
+  --bg-error-solid: oklch(0.577 0.245 27.325);
+  --bg-warning-primary: oklch(0.279 0.077 45.635);
+  --bg-success-primary: oklch(0.266 0.065 152.934);
+
+  --button-primary-bg: oklch(0.985 0 0);
+  --button-primary-bg_hover: oklch(0.87 0 0);
+  --button-primary-fg: oklch(0.205 0 0);
+  --button-secondary-bg: oklch(0.175 0 0);
+  --button-secondary-bg_hover: oklch(0.215 0 0);
+  --button-secondary-bg_open: oklch(0.26 0 0);
+  --button-secondary-bg_deep: oklch(0.32 0 0);
+  --button-secondary-fg: oklch(0.87 0 0);
+  --button-secondary-fg_hover: oklch(0.97 0 0);
+  --button-secondary-border: oklch(0.32 0 0);
+  --button-tertiary-fg: oklch(0.72 0 0);
+  --button-tertiary-fg_hover: oklch(0.922 0 0);
+  --button-tertiary-bg_hover: oklch(0.215 0 0);
+  --button-primary-error-bg: oklch(0.577 0.245 27.325);
+  --button-primary-error-bg_hover: oklch(0.505 0.213 27.518);
+  --button-secondary-error-fg: oklch(0.808 0.114 19.571);
+  --button-secondary-error-border: oklch(0.396 0.141 25.723);
+  --button-secondary-error-bg_hover: oklch(0.258 0.092 26.042);
+  --nav-item-icon-fg: oklch(0.66 0 0);
+  --nav-item-icon-fg_active: oklch(0.922 0 0);
+  --avatar-bg: oklch(0.215 0 0);
+  --avatar-contrast-border: oklch(1 0 0 / 0.12);
+
+  --utility-gray-50: oklch(0.175 0 0); --utility-gray-200: oklch(0.32 0 0); --utility-gray-700: oklch(0.87 0 0);
+  --utility-brand-50: oklch(0.175 0 0); --utility-brand-200: oklch(0.32 0 0); --utility-brand-700: oklch(0.87 0 0);
+  --utility-error-50: oklch(0.258 0.092 26.042); --utility-error-200: oklch(0.396 0.141 25.723); --utility-error-600: oklch(0.704 0.191 22.216); --utility-error-700: oklch(0.808 0.114 19.571);
+  --utility-warning-50: oklch(0.279 0.077 45.635); --utility-warning-200: oklch(0.414 0.112 45.904); --utility-warning-600: oklch(0.828 0.189 84.429); --utility-warning-700: oklch(0.879 0.169 91.605);
+  --utility-success-50: oklch(0.266 0.065 152.934); --utility-success-200: oklch(0.393 0.095 152.535); --utility-success-600: oklch(0.792 0.209 151.711); --utility-success-700: oklch(0.871 0.15 154.449);
+
+  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
+  --focus-ring: 0 0 0 2px oklch(0.145 0 0), 0 0 0 4px oklch(0.708 0 0);
+  --focus-ring-error: 0 0 0 2px oklch(0.145 0 0), 0 0 0 4px oklch(0.704 0.191 22.216);
+}
+
+/* Code in hub pages takes the mono face. */
+.sys :is(code, kbd, pre, samp) { font-family: var(--sys-font-mono); }

package/skills/miles-conductor/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: miles-conductor
+description: "Run this project in Conductor (conductor.build) workspaces: the settings file, a port per workspace, and the machine port registry that keeps projects off each other's ports. Load when the user mentions Conductor, workspaces, parallel agents, or a dev server that answers with the wrong project. Triggers on: Conductor, workspace, workspaces, CONDUCTOR_PORT, parallel agents, port taken, port collision, wrong site, ports.json, port registry."
+---
+
+# Conductor
+
+Conductor gives each workspace its own `$CONDUCTOR_PORT`, but never checks that the port is free. A dev server orphaned in another project can still hold it, and the workspace's Open button then shows the other project with no error. Everything here exists to make that failure loud.
+
+## Set up
+
+1. From the project root: `pnpm bootstrap --conductor --branch <integration branch>`. It writes `.conductor/settings.toml`: setup runs `pnpm bootstrap` in each new workspace, run starts `pnpm dev`, and the preview URL is the workspace's port. A file the user has edited is kept, and the JSON warns that it differs.
+2. Commit `.conductor/settings.toml`. `.conductor/settings.local.toml` is gitignored, for one person's overrides.
+3. Tell the user to add the repository in Conductor and set its base branch to the same branch. Conductor keeps that setting in its app only, so nothing in the repo can set or check it.
+
+## Ports
+
+```
+Where is the dev server running?
+├── A Conductor workspace → $CONDUCTOR_PORT, always. The dev server reads it before .env.
+│                           It never enters the machine registry: Conductor owns that range.
+└── A main checkout       → the port pnpm bootstrap picked, written to .env and claimed in
+                            ~/.config/design-hub/ports.json ($DESIGN_HUB_PORTS overrides the path).
+                            Bootstrap skips every port another project claims, running or not.
+```
+
+On a taken port, `pnpm dev` refuses to start (`strictPort`) and `pnpm bootstrap` names the process and its folder. Then:
+
+1. Never pass another port. Why: the Open button and `.claude/launch.json` keep pointing at the configured one, so a second port is a server nobody opens.
+2. Find the holder: `lsof -nP -iTCP:<port> -sTCP:LISTEN`, then `lsof -a -p <pid> -d cwd` for its folder.
+3. An orphaned server of this project: stop it. A server of another project: ask the user before stopping it.
+
+When the user keeps their own record of which project owns which port, add this project's port to it too.
+
+## Nothing shared
+
+Workspaces share no database and no container. The review store's local copy is a file in each checkout's `.design-hub/`, and the deployed store is remote, so two workspaces never see each other's local comments.

package/skills/miles-deploy/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: miles-deploy
+description: "Deploy the prototypes to Vercel behind the password gate and hand out the share link: the pre-flight (pnpm preflight), the GATE_* env, the review store for comments, the handover message. Load when the user asks to deploy, share, send a link, set or rotate the password, turn on comments, or check the work before any of those. Triggers on: deploy, share, share link, send to the client, Vercel, password, gate, GATE_PASSWORD, production, preview URL, pre-flight, preflight, ready to send, turn on comments, review store."
+---
+
+# Deploy
+
+Pushing `main` deploys the project to the linked Vercel project. Every path sits behind the gate in `proxy.ts`: the shared password opens it to view, and an invite link opens it to one named person who can comment. The mechanics are scripts; this skill decides when they run and what the user is told.
+
+## Before every link goes out
+
+Run from the project root:
+
+```bash
+pnpm preflight
+```
+
+It runs every check in one pass and prints JSON with one entry per step. Read it, then walk this for each step with `ok: false`:
+
+```
+step failed?
+├── contacts → show the user each value with its file and path. Replace it in fixtures.json,
+│              or, only after the user says it is a business contact:
+│              pnpm preflight --allow-contact <value>
+├── states   → add the missing rows to that README's States table (miles-prototype), then rerun
+├── gate     → pnpm bootstrap --vercel <project> sets GATE_PASSWORD and GATE_SECRET
+└── any other → fix what `detail` names; `fix` says how
+```
+
+Never send the link with a failed step, and never skip one with `--skip` without the user's word. Why: the link is what the client signs off on, and every step guards something they would see (a private phone number, a state nobody listed, a page that will not load).
+
+## First deploy
+
+1. The user signs in once, in their own terminal: `vercel login`. It is interactive; never run it for them.
+2. From the project root:
+   ```bash
+   pnpm bootstrap --vercel <project-name>
+   ```
+   It links the project, writes `GATE_PASSWORD` (12 readable characters, or `--gate-password <word>`) and a fresh `GATE_SECRET` to `.env` and to Production and Preview, and prints the password in `share.password`. A second run keeps what is set.
+3. `pnpm preflight`, then push `main` (or `vercel --prod` from the project root).
+4. The handover message, in one message: the URL, the password, which prototype to open (the sprint's slug), the walkthrough at `/guide/<feature>/`, and that Controls is the round button at the top of the page. A reviewer who is not told about Controls reviews one state. Never send `GATE_SECRET`.
+
+## Comments
+
+Ask the user once whether reviewers should comment on the link. If yes:
+
+```bash
+pnpm bootstrap --vercel <project> --review [--typesafe-key <key>]
+```
+
+It adds Upstash Redis to the project through the Vercel Marketplace and copies the store's credentials into `.env`. If it stops on the Marketplace terms, the user runs `vercel integration add upstash/upstash-kv` once in their terminal, then you rerun. With TypeSafe on, comments are sorted by kind and state as they arrive. Redeploy so the env reaches the site, then invite the first editor:
+
+```bash
+pnpm people invite --name "<user>" --team "<studio>" --role editor --site https://<deployment>
+```
+
+Send them the link; from then on, editors invite reviewers from the People tab. `miles-review` owns working from the comments.
+
+## Rotating access
+
+- **A reviewer leaves:** revoke them in the People tab, or `pnpm people revoke <id>`. Their sessions end on their next page load.
+- **The shared password leaked:** `pnpm bootstrap --vercel <project> --gate-password <new>`, then redeploy. Every password visitor signs in again; invited people are not affected.
+
+## Security, never weakened for a prototype
+
+- `vercel.json` sets `noindex`, `X-Frame-Options: DENY`, `nosniff`, HSTS and a same-origin referrer on every path. The gate and invite pages add a hash CSP and send no referrer.
+- A wrong password waits 800ms. For a link going to a large client list, add a Vercel Firewall rate-limit rule on `POST` before it goes out.

package/skills/miles-design-hub/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: miles-design-hub
+description: "Start a new Design Hub project: ask every question up front, create it with `npm create @milesroxas/design-hub`, run the setup, hand off to the Paper skill. Global install only; never load inside a project. Triggers on: design hub, new design project, start a project, new prototype repo, set up prototypes, from the template."
+---
+
+# Design Hub
+
+The entry point. The user never starts in a terminal: they ask for a new project, this skill asks every question before it touches disk, then runs two commands and hands off. A question asked up front is one Claude never guesses later.
+
+Someone who does not use Claude Code gets the same result from the setup app: `Design Hub.command` in the Design Hub repo opens a page that asks the name, the place and GitHub, then runs the same two commands. Point a non-technical user there instead of this skill when they ask how to start without Claude.
+
+## 1. Ask, all at once, before anything runs
+
+Ask these in one message and wait for every answer. Defaults in brackets.
+
+1. **Where should the project live?** An absolute path; its folder name becomes the repo name. [`~/SITES/<name>`]
+2. **Which GitHub account or org owns the repo, private or public, or no GitHub repo?** [the account `gh` is signed in as, private]
+3. **Start from a Paper comp or from the sample prototype?** [sample]
+4. **If Paper: the link to the Paper frame or page.**
+5. **Does the design include a shell? Which frames hold it?** A product shell is sidebar, top bar and content; a website shell is header and footer, plus a pre-footer when the design treats it as a global. [no shell: prototypes stand in the Space]
+6. **Install the `miles-*` skills globally or for this project only?** [project only; the clone already has them]
+7. **Turn on TypeSafe checks? If yes, the TypeSafe API key.** [off] Why opt-in: a template anyone can use cannot require a paid account.
+8. **Will the project run in Conductor workspaces? If yes, the branch they land on.** [no]
+
+Comments and the share link come later, with `miles-deploy`, because they need a Vercel project.
+
+## 2. Check the machine
+
+```bash
+node --version     # 22.18 or newer; else install the current LTS
+pnpm --version     # else: corepack enable
+gh auth status     # only with a GitHub repo; else ask the user to run gh auth login
+```
+
+The skills these lean on, installed globally: `emil-prototype`, `emil-writing-skills`, `impeccable`. Check `~/.claude/skills/` and install any that is missing with `npx skills add <source> -g -y`; say which were added.
+
+## 3. Create the project
+
+```bash
+npm create @milesroxas/design-hub@latest -- --path <path> --visibility private|public|none [--owner <owner>]
+```
+
+It copies the template, pins the `@milesroxas/design-hub` package, installs, puts the `miles-*` skills in `.claude/skills/`, makes the first commit, and with `private` or `public` creates the GitHub repo and pushes. It prints one JSON object; `ok: false` names the fix. A second run finds the project and changes nothing, so rerun it after a fix instead of finishing by hand.
+
+## 4. Run the setup
+
+```bash
+pnpm --dir <path> bootstrap [--typesafe-key <key>] [--conductor --branch <branch>]
+```
+
+It picks a port nothing holds and no other project claims, writes it to `.env` and `.claude/launch.json`, and applies the flags. Read the JSON's `warnings`. With question 6 answered globally: `npx skills add milesroxas/design-hub -g -y`.
+
+## 5. Record what was answered
+
+Write the shell answer under `DESIGN.md`, Shell (kind, the Paper frames, or "none"), so it is built once and every later session reads it instead of asking. Fill `PRODUCT.md` from what the user said about the product; leave a section empty only when they said nothing about it, and say so.
+
+## 6. Hand off
+
+- **Paper start:** open the Paper link and load `miles-paper-to-prototype`. It reads the fonts and tokens first, then the shell frames, then the feature frame, and leaves `sample-list/` in place as the reference until the first feature exists.
+- **Sample start:** `pnpm dev` and open `http://localhost:<port>/sample-list/`; point the user at `/guide/sample/` for the walkthrough. The next step is `miles-new-feature`.
+
+Close with the path, the port, the repo URL when there is one, whether TypeSafe is on, and the one command that starts the server. Nothing is committed unless the user asks.

package/skills/miles-get-hostile/SKILL.md

@@ -0,0 +1,61 @@
+---
+name: miles-get-hostile
+description: "Hostile fixtures for a prototype: fixtures.json with real data from the CMS or the comp, the missing set by hand, and the strategy and design answers for the edge cases (longest, empty, maximum count, missing media). Load when writing or changing fixtures.json, when a reviewer asks what happens with no items or a long name, or when a state needs data to reach it. Triggers on: fixtures, fixture set, hostile, edge case, worst content, longest, empty state, max count, missing image, real data, CMS pull, collection items, fixtures-pull, Webflow token."
+---
+
+# Get hostile
+
+Pretty placeholder data hides the decision. Every prototype carries five sets, switched by a dial, and a reviewer signs off on all five or none. The cost per feature is one pull and a few hand-written entries.
+
+## The sets
+
+| Set | Holds | Who writes it |
+| --- | --- | --- |
+| `real` | 8 to 20 real items with only the fields the component renders | the CMS, or the comp |
+| `longest` | the first item with each free-text field named in `text` at the longest real value, doubled | `@kit/fixtures` |
+| `empty` | nothing | `@kit/fixtures` |
+| `max` | the real items repeated to the design's maximum count | `@kit/fixtures` |
+| `missing` | items with no image, no link, no owner, no name | you, by hand |
+
+`fixtures.json` holds `real` and `missing`. `fixtureSets(data, { max, text })` fills the rest at runtime; a key written in the JSON by hand wins over the derived one, for the component whose edge no rule can know.
+
+`text` lists the fields a reviewer reads as prose: a name, a title, a description. Never a date, a status, an id, a URL or a colour. Why: doubling those does not make a longer value, it makes a broken one (`Invalid Date`, a status the code does not know), and the review then argues about a bug the CMS can never produce.
+
+## Where `real` comes from, cheapest first
+
+1. **A Webflow project with `WEBFLOW_TOKEN` in `.env`.** Run `pnpm fixtures-pull <slug> --collection <id>` once with no `--map`: it lists the collection's fields. Then pull with one `--map key=field.path` per field the component renders (`--map cover=thumbnail.url`). It pages through any `--limit` and keeps every other key in `fixtures.json`. Why a script: it costs no tokens per item, so a pull of 200 items costs the same as 20.
+2. **A Webflow project without a token.** One call to the Webflow MCP's CMS tool for the collection behind the design, `limit` 20 or fewer. Keep only the fields the component renders. Never a full-collection pull: every field of every item spends tokens on nothing the component shows.
+3. **No CMS.** Write `real` from the content in the Paper comp, word for word. Eight items minimum, because a list of three never shows its rhythm.
+4. **A different CMS.** One read of up to 20 items with the same field cut. Say which tool was used in the README's Fixtures section.
+
+Strip anything that identifies a private person before writing it down: a phone number, a personal email, a home address. `pnpm preflight` stops on every email and phone number until each is replaced or confirmed as a business contact.
+
+## The shape
+
+There is no shared schema. The component's props type is the schema, and TypeScript checks the JSON against it:
+
+```ts
+const sets = fixtureSets(data satisfies { real: Item[]; missing: Item[] }, { max: 40, text: ['name', 'owner'] });
+```
+
+Keep `id` on every item: `max` suffixes it to keep keys unique.
+
+## What each edge case means for the design
+
+Decide these before the user sees the set, and write the answer in the README:
+
+- **Longest.** The text wraps or truncates, and the choice is written down. A column that holds the longest value is the column's width; nothing else on the row moves. Why: the CMS will hold a longer title than anything in it today, and a layout that moves under it was never tested.
+- **Empty.** One sentence that says the state and the next step, and the one action that starts it. Never a blank card, never a disabled button beside an empty table. Why: the first visit is the page's teaching moment.
+- **Max.** The page at the design's maximum count, scrolled. Entrance stagger capped at eight so the fortieth row does not wait a second; over about 200 rows, `content-visibility: auto` or a window. Why: the maximum is where performance gets judged.
+- **Missing.** Each absent field says what is absent where the value would be (`Untitled`, `No owner`, a dashed tile for a cover). Never a broken image, never a blank cell. Why: a blank reads as a bug, a word reads as a state.
+
+## On the dial
+
+```ts
+const review = useDials('Review', {
+  fixtures: { type: 'select', options: [...SET_NAMES], default: 'real' },
+}, { hints: { fixtures: 'Which fixture set the list shows.' } });
+const items = sets[review.fixtures as SetName];
+```
+
+Each set is a row in the README's States table (`Controls → Review → Fixtures → **longest**`), so the walkthrough and the port report can name it.