@milesroxas/create-design-hub 0.0.0-stage → 0.1.1

package/template/kit/tokens.css

@@ -0,0 +1,249 @@
+/* The neutral default scale. A project replaces these values with its own
+   design's tokens (miles-paper-to-prototype reads them from Paper) and keeps
+   the names, so every kit stylesheet and every prototype keeps working.
+   Light on :root, dark on .dark-mode (prefs.ts mirrors the theme there). */
+
+:root {
+  color-scheme: light;
+
+  /* Primitives: the only place a hex is allowed outside this file is a
+     README that names the decision. */
+  --brand-50: #eff4ff; --brand-100: #dbe6fe; --brand-200: #b9cdfc; --brand-300: #8fb0f9;
+  --brand-400: #5f8bf3; --brand-500: #3d6ee8; --brand-600: #2b57cc; --brand-700: #2246a6;
+  --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-200: #eaecf0;
+  --gray-300: #d0d5dd; --gray-400: #98a2b3; --gray-500: #667085; --gray-600: #475467;
+  --gray-700: #344054; --gray-800: #182230; --gray-900: #101828; --gray-950: #0c111d;
+  --error-500: #f04438;
+
+  /* Semantic: text */
+  --text-primary: #101828;
+  --text-secondary: #344054;
+  --text-secondary_hover: #182230;
+  --text-tertiary: #475467;
+  --text-quaternary: #667085;
+  --text-disabled: #667085;
+  --text-placeholder: #667085;
+  --text-white: #ffffff;
+  --text-brand-primary: #2246a6;
+  --text-brand-secondary: #2b57cc;
+  --text-brand-tertiary: #3d6ee8;
+  --text-error-primary: #d92d20;
+  --text-error-primary_hover: #b32318; /* a destructive word under the pointer on a hover fill (the Hover Ink Rule) */
+  --text-warning-primary: #dc6803;
+  --text-success-primary: #079455;
+
+  /* Semantic: borders */
+  --border-primary: #d0d5dd;
+  --border-secondary: #eaecf0;
+  --border-tertiary: #f2f4f7;
+  --border-disabled: #d0d5dd;
+  --border-brand: #3d6ee8;
+  --border-brand_alt: #2b57cc;
+  --border-error: #f04438;
+
+  /* Semantic: foreground (icons) */
+  --fg-primary: #101828;
+  --fg-secondary: #344054;
+  --fg-tertiary: #475467;
+  --fg-quaternary: #667085;
+  --fg-quinary: #98a2b3;
+  --fg-white: #ffffff;
+  --fg-disabled: #98a2b3;
+  --fg-brand-primary: #2b57cc;
+  --fg-brand-secondary: #3d6ee8;
+  --fg-error-primary: #d92d20;
+  --fg-warning-primary: #dc6803;
+  --fg-success-primary: #079455;
+
+  /* Semantic: backgrounds */
+  --bg-primary: #ffffff;
+  --bg-primary_alt: #ffffff;
+  --bg-primary_hover: #f9fafb;
+  --bg-secondary: #f9fafb;
+  --bg-secondary_alt: #f9fafb;
+  --bg-secondary_hover: #f2f4f7;
+  --bg-secondary_hover_deep: #eaecf0; /* hover on a row that already rests on bg-secondary */
+  --bg-secondary_subtle: #fcfcfd;
+  --bg-tertiary: #f2f4f7;
+  --bg-active: #f2f4f7;
+  --bg-disabled: #f2f4f7;
+  --bg-overlay: #0c111d;
+  --bg-brand-primary: #eff4ff;
+  --bg-brand-secondary: #dbe6fe;
+  --bg-brand-solid: #2b57cc;
+  --bg-brand-solid_hover: #2246a6;
+  --bg-error-primary: #fef3f2;
+  --bg-error-secondary: #fee4e2;
+  --bg-error-solid: #d92d20;
+  --bg-warning-primary: #fffaeb;
+  --bg-success-primary: #ecfdf3;
+
+  /* Component */
+  --button-primary-bg: #2b57cc;
+  --button-primary-bg_hover: #2246a6;
+  --button-primary-fg: #ffffff;
+  --button-secondary-bg: #ffffff;
+  --button-secondary-bg_hover: #f9fafb;
+  --button-secondary-bg_open: #f2f4f7; /* menu open or pressed: one step past hover (the Engaged State Rule) */
+  --button-secondary-bg_deep: #eaecf0; /* open or pressed on a surface that already wears the hover fill */
+  --button-secondary-fg: #344054;
+  --button-secondary-fg_hover: #182230;
+  --button-secondary-border: #d0d5dd;
+  --button-tertiary-fg: #475467;
+  --button-tertiary-fg_hover: #344054;
+  --button-tertiary-bg_hover: #f9fafb;
+  --button-primary-error-bg: #d92d20;
+  --button-primary-error-bg_hover: #b32318;
+  --button-secondary-error-fg: #b32318;
+  --button-secondary-error-border: #fda19b;
+  --button-secondary-error-bg_hover: #fef3f2;
+  --nav-item-icon-fg: #667085;
+  --nav-item-icon-fg_active: #344054;
+  --avatar-bg: #f2f4f7;
+  --avatar-contrast-border: rgb(0 0 0 / 0.08);
+
+  /* Utility: badges */
+  --utility-gray-50: #f9fafb; --utility-gray-200: #eaecf0; --utility-gray-700: #344054;
+  --utility-brand-50: #eff4ff; --utility-brand-200: #b9cdfc; --utility-brand-700: #2246a6;
+  --utility-error-50: #fef3f2; --utility-error-200: #fecdc9; --utility-error-600: #d92d20; --utility-error-700: #b32318;
+  --utility-warning-50: #fffaeb; --utility-warning-200: #fedf89; --utility-warning-600: #dc6803; --utility-warning-700: #b54708;
+  --utility-success-50: #ecfdf3; --utility-success-200: #a9efc5; --utility-success-600: #079455; --utility-success-700: #067647;
+
+  /* Shadows, tinted gray-900 in light mode; dark draws none (the Hairline First Rule) */
+  --shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.10), 0 1px 2px 0 rgb(16 24 40 / 0.06);
+  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.10), 0 2px 4px -2px rgb(16 24 40 / 0.06);
+  --shadow-lg: 0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03);
+  --shadow-xl: 0 20px 24px -4px rgb(16 24 40 / 0.08), 0 8px 8px -4px rgb(16 24 40 / 0.03);
+  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #3d6ee8;
+  --focus-ring-error: 0 0 0 2px #ffffff, 0 0 0 4px #f04438;
+
+  /* Radius */
+  --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
+  --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
+
+  /* Type. No font files ship with the template: a project adds its own
+     @font-face here and names it first in --font. */
+  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-voice: Georgia, "Times New Roman", serif;
+
+  /* Motion, one set so it can be reviewed as one. ease-out enters, ease-in
+     leaves, ease-hover for fills and colours, ease-press for a press. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-press: cubic-bezier(0.33, 1, 0.68, 1);   /* easeOutCubic: an even settle, no snap */
+  --ease-morph: cubic-bezier(0.45, 0, 0.55, 1);   /* easeInOutQuad: a glyph changing shape in place */
+  --ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad: gentler than `ease` for fills */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* easeInQuad: a layer leaving accelerates away */
+  --dur-press: 160ms;
+  --dur-press-in: 90ms;
+  --dur-press-out: 160ms;
+  --dur-hover: 120ms;
+  --dur-menu: 180ms;
+  --dur-menu-out: 120ms;
+  --dur-dialog: 220ms;
+  --dur-dialog-out: 150ms;
+  --dur-sheet: 320ms;
+  --dur-toast: 260ms;
+  --dur-toast-out: 180ms;
+  --dur-swap-out: 240ms;
+  --dur-swap-in: 380ms;
+
+  /* The harness material (--harness-*) and the hub's fonts live in
+     the hub's own system.css: they belong to the hub, not the design. */
+}
+
+.dark-mode {
+  color-scheme: dark;
+
+  --gray-25: #fafafa; --gray-50: #f7f7f7; --gray-100: #f0f1f1; --gray-200: #ececed;
+  --gray-300: #cecfd2; --gray-400: #94969c; --gray-500: #85888e; --gray-600: #61656c;
+  --gray-700: #373a41; --gray-800: #22262f; --gray-900: #13161b; --gray-950: #0c0e12;
+
+  --text-primary: #f7f7f7;
+  --text-secondary: #cecfd2;
+  --text-secondary_hover: #ececed;
+  --text-tertiary: #94969c;
+  --text-quaternary: #94969c;
+  --text-disabled: #85888e;
+  --text-placeholder: #85888e;
+  --text-brand-primary: #f7f7f7;
+  --text-brand-secondary: #cecfd2;
+  --text-brand-tertiary: #94969c;
+  --text-error-primary: #f97066;
+  --text-error-primary_hover: #fda19b;
+  --text-warning-primary: #fdb022;
+  --text-success-primary: #47cd89;
+
+  --border-primary: #373a41;
+  --border-secondary: #22262f;
+  --border-tertiary: #22262f;
+  --border-disabled: #373a41;
+  --border-brand: #5f8bf3;
+  --border-brand_alt: #373a41;
+  --border-error: #f97066;
+
+  --fg-primary: #ffffff;
+  --fg-secondary: #cecfd2;
+  --fg-tertiary: #94969c;
+  --fg-quaternary: #94969c;
+  --fg-quinary: #85888e;
+  --fg-disabled: #85888e;
+  --fg-brand-primary: #3d6ee8;
+  --fg-brand-secondary: #2b57cc;
+  --fg-error-primary: #f04438;
+  --fg-warning-primary: #f79009;
+  --fg-success-primary: #17b26a;
+
+  --bg-primary: #0c0e12;
+  --bg-primary_alt: #13161b;
+  --bg-primary_hover: #22262f;
+  --bg-secondary: #13161b;
+  --bg-secondary_alt: #0c0e12;
+  --bg-secondary_hover: #22262f;
+  --bg-secondary_hover_deep: #22262f;
+  --bg-secondary_subtle: #13161b;
+  --bg-tertiary: #22262f;
+  --bg-active: #22262f;
+  --bg-disabled: #22262f;
+  --bg-overlay: #22262f;
+  --bg-brand-primary: #3d6ee8;
+  --bg-brand-secondary: #2b57cc;
+  --bg-brand-solid: #3d6ee8;
+  --bg-brand-solid_hover: #5f8bf3;
+  --bg-error-primary: #f04438;
+  --bg-error-secondary: #d92d20;
+  --bg-warning-primary: #f79009;
+  --bg-success-primary: #17b26a;
+
+  --button-primary-bg: #3d6ee8;
+  --button-primary-bg_hover: #2b57cc;
+  --button-secondary-bg: #13161b;
+  --button-secondary-bg_hover: #22262f;
+  --button-secondary-bg_open: #373a41;
+  --button-secondary-bg_deep: #42464d; /* one even step past bg_open (oklch L 0.385), so Error Ink still passes on it */
+  --button-secondary-fg: #cecfd2;
+  --button-secondary-fg_hover: #f0f1f1;
+  --button-secondary-border: #373a41;
+  --button-tertiary-fg: #94969c;
+  --button-tertiary-fg_hover: #ececed;
+  --button-tertiary-bg_hover: #22262f;
+  --button-secondary-error-fg: #fecdc9;
+  --button-secondary-error-border: #912018;
+  --button-secondary-error-bg_hover: #7a271a;
+  --nav-item-icon-fg: #94969c;
+  --nav-item-icon-fg_active: #ececed;
+  --avatar-bg: #22262f;
+  --avatar-contrast-border: rgb(255 255 255 / 0.12);
+
+  --utility-gray-50: #13161b; --utility-gray-200: #373a41; --utility-gray-700: #cecfd2;
+  --utility-brand-50: #0f1f4d; --utility-brand-200: #1c3a8a; --utility-brand-700: #8fb0f9;
+  --utility-error-50: #55160c; --utility-error-200: #912018; --utility-error-600: #f97066; --utility-error-700: #fda19b;
+  --utility-warning-50: #4e1d09; --utility-warning-200: #93370d; --utility-warning-600: #fdb022; --utility-warning-700: #fec84b;
+  --utility-success-50: #053321; --utility-success-200: #085d3a; --utility-success-600: #47cd89; --utility-success-700: #75e0a7;
+
+  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
+  --focus-ring: 0 0 0 2px #0c0e12, 0 0 0 4px #5f8bf3;
+  --focus-ring-error: 0 0 0 2px #0c0e12, 0 0 0 4px #f97066;
+}

package/template/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "design-hub-project",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22.18"
+  },
+  "scripts": {
+    "dev": "design-hub dev",
+    "build": "design-hub build",
+    "preview": "design-hub preview",
+    "bootstrap": "design-hub bootstrap",
+    "new": "design-hub new",
+    "guide": "design-hub guide",
+    "check": "design-hub check",
+    "fix": "design-hub check --fix",
+    "guard": "design-hub guard",
+    "preflight": "design-hub preflight",
+    "comments": "design-hub comments",
+    "people": "design-hub people",
+    "calibrate": "design-hub calibrate",
+    "fixtures-pull": "design-hub fixtures-pull",
+    "visual-match": "design-hub visual-match",
+    "elyx": "design-hub elyx",
+    "skills": "design-hub skills",
+    "commands": "design-hub commands"
+  },
+  "dependencies": {
+    "@milesroxas/design-hub": "workspace:*",
+    "motion": "^14.6.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  }
+}

package/template/plans/README.md

@@ -0,0 +1,11 @@
+# Animation plans
+
+Plans written by the `improve-animations` skill. Each one is self-contained: an executor with no context from the session that wrote it can carry it out from the file alone. Run one with `improve-animations execute plans/NNN-slug.md`, or hand it to any agent.
+
+| # | Plan | Severity | Status |
+| --- | --- | --- | --- |
+| | | | |
+
+## Order and dependencies
+
+None yet. When a plan depends on another, say so here, and record where the result was written (the prototype's README and, for a rule, `DESIGN.md`).

package/template/prototypes/sample-list/README.md

@@ -0,0 +1,51 @@
+---
+title: Sample list
+summary: A list page with every fixture set on a dial, as the reference for the conventions.
+context: app
+status: exploring
+kind: sprint
+feature: sample
+created: 2026-10-30
+---
+
+# Sample list
+
+The one prototype that ships with the template. It is the reference Claude reads for the conventions, because a working example teaches them more reliably than prose: a feature folder, the README frontmatter the index reads, hostile fixtures on a dial, motion on `DialVars`, scope toasts, and a walkthrough at `/guide/sample/`. Delete it when the project has a feature of its own.
+
+## Problem
+
+A list is where edge cases hide: the name nobody expected, the empty team, the fortieth row, the item with no image. Reviewers see one pretty state and sign off on it.
+
+## Question
+
+Does the row hold up under every fixture set without the layout moving?
+
+## Flows
+
+| Flow | Starts from | Edge cases |
+| --- | --- | --- |
+| Read the list | `#/items` | longest name, no items, 40 items, no cover |
+| Open an item | a row | the row is the link; Open is a scope toast |
+| Add an item | New item | a scope toast; adding is not this prototype's question |
+
+## States
+
+Every state the prototype holds, one row each. The fidelity guard and `miles-port` read this table.
+
+| State | How to reach it |
+| --- | --- |
+| Real list | Controls → Review → Fixtures → **real** |
+| Longest names | Controls → Review → Fixtures → **longest** |
+| Empty | Controls → Review → Fixtures → **empty** |
+| Maximum count | Controls → Review → Fixtures → **max** |
+| Missing media | Controls → Review → Fixtures → **missing** |
+| Compact rows | Controls → Review → Density → **compact** |
+| Dark | Controls → View → Theme → **dark** |
+
+## Fixtures
+
+`fixtures.json` holds `real` (eight items written from the comp; a Webflow project would pull them with one `collections_items_list_items` call) and `missing` (hand-written: no cover, no owner, no name). `@kit/fixtures` derives `longest`, `empty` and `max`; the design's maximum is 40 rows.
+
+## Decision
+
+Empty until picked. What was chosen, its values, and what was rejected and why. Then delete the folder.

package/template/prototypes/sample-list/fixtures.json

@@ -0,0 +1,87 @@
+{
+  "real": [
+    {
+      "id": "1",
+      "name": "Spring launch page",
+      "owner": "Ada Lovelace",
+      "status": "active",
+      "updated": "2026-10-28",
+      "cover": "#dbe6fe"
+    },
+    {
+      "id": "2",
+      "name": "Pricing table refresh",
+      "owner": "Grace Hopper",
+      "status": "active",
+      "updated": "2026-10-27",
+      "cover": "#fedf89"
+    },
+    {
+      "id": "3",
+      "name": "Onboarding checklist",
+      "owner": "Katherine Johnson",
+      "status": "paused",
+      "updated": "2026-10-21",
+      "cover": "#a9efc5"
+    },
+    {
+      "id": "4",
+      "name": "Help centre search",
+      "owner": "Mary Jackson",
+      "status": "done",
+      "updated": "2026-10-14",
+      "cover": "#fecdc9"
+    },
+    {
+      "id": "5",
+      "name": "Team settings",
+      "owner": "Dorothy Vaughan",
+      "status": "active",
+      "updated": "2026-10-12",
+      "cover": "#eaecf0"
+    },
+    {
+      "id": "6",
+      "name": "Invoice email",
+      "owner": "Radia Perlman",
+      "status": "done",
+      "updated": "2026-10-03",
+      "cover": "#dbe6fe"
+    },
+    {
+      "id": "7",
+      "name": "Mobile navigation",
+      "owner": "Hedy Lamarr",
+      "status": "paused",
+      "updated": "2026-09-30",
+      "cover": "#fedf89"
+    },
+    {
+      "id": "8",
+      "name": "Changelog",
+      "owner": "Annie Easley",
+      "status": "active",
+      "updated": "2026-09-22",
+      "cover": "#a9efc5"
+    }
+  ],
+  "missing": [
+    {
+      "id": "m1",
+      "name": "Item with no cover",
+      "owner": "Ada Lovelace",
+      "status": "active",
+      "updated": "2026-10-28",
+      "cover": null
+    },
+    {
+      "id": "m2",
+      "name": "Item with no owner",
+      "owner": "",
+      "status": "paused",
+      "updated": "2026-10-20",
+      "cover": "#dbe6fe"
+    },
+    { "id": "m3", "name": "", "owner": "Grace Hopper", "status": "done", "updated": "", "cover": null }
+  ]
+}

package/template/prototypes/sample-list/index.tsx

@@ -0,0 +1,122 @@
+import { AppShell, PageHead } from '@kit/AppShell';
+import { DialVars, useDials } from '@kit/dials';
+import { type FixtureSets, fixtureSets, SET_NAMES, type SetName } from '@kit/fixtures';
+import { fmtDate, plural } from '@kit/format';
+import { useHashRoute } from '@kit/hooks';
+import { Badge, Button, notInPrototype, toast } from '@kit/ui';
+import type { CSSProperties } from 'react';
+import data from './fixtures.json';
+import './styles.css';
+
+type Item = {
+  id: string;
+  name: string;
+  owner: string;
+  status: string;
+  updated: string;
+  cover: string | null;
+};
+
+const MAX_ROWS = 40;
+const sets: FixtureSets<Item> = fixtureSets(data satisfies { real: Item[]; missing: Item[] }, {
+  max: MAX_ROWS,
+  text: ['name', 'owner'],
+});
+
+const TONE: Record<string, 'success' | 'warning' | 'brand'> = {
+  active: 'brand',
+  paused: 'warning',
+  done: 'success',
+};
+
+// The list is its own component so its Review panel registers before the
+// Motion dials and View: a child registers before its parent, and siblings in order.
+function ItemsPage() {
+  const review = useDials(
+    'Review',
+    {
+      fixtures: { type: 'select', options: [...SET_NAMES], default: 'real' },
+      density: { type: 'select', options: ['comfortable', 'compact'], default: 'comfortable' },
+    },
+    {
+      hints: {
+        fixtures:
+          'Which fixture set the list shows. longest, empty and max are derived from real by @kit/fixtures.',
+        density: 'Row height: 56px comfortable, 44px compact.',
+      },
+    },
+  );
+  const items = sets[review.fixtures as SetName];
+
+  return (
+    <div className="page" data-density={review.density}>
+      <PageHead
+        title="Items"
+        actions={<Button kind="primary" label="New item" onClick={() => notInPrototype('Adding an item')} />}
+      />
+      {items.length === 0 ? (
+        <div className="card empty">
+          <h3>No items yet</h3>
+          <p>New item starts the first one.</p>
+        </div>
+      ) : (
+        <div className="card table-card">
+          <ul className="items">
+            {items.map((item, i) => (
+              <li key={item.id} className="item-row" style={{ '--i': Math.min(i, 8) } as CSSProperties}>
+                <a
+                  className="item-link"
+                  href={`#/items/${item.id}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    toast(`${item.name || 'The item'} would open here.`, { kind: 'scope' });
+                  }}
+                >
+                  {item.cover ? (
+                    <span className="item-cover" style={{ background: item.cover }} aria-hidden="true" />
+                  ) : (
+                    <span className="item-cover is-missing" aria-hidden="true" />
+                  )}
+                  <span className="item-text">
+                    <span className="item-name">
+                      {item.name || <span className="item-unnamed">Untitled</span>}
+                    </span>
+                    <span className="item-owner">{item.owner || 'No owner'}</span>
+                  </span>
+                </a>
+                <Badge tone={TONE[item.status]} dot>
+                  {item.status}
+                </Badge>
+                <time className="item-date tabular" dateTime={item.updated}>
+                  {fmtDate(item.updated) || 'Never'}
+                </time>
+              </li>
+            ))}
+          </ul>
+          <div className="table-foot">
+            <span className="foot-sum">{plural(items.length, 'item')}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function Prototype() {
+  const { path } = useHashRoute('#/items');
+  return (
+    <AppShell active={path}>
+      <ItemsPage />
+      <DialVars
+        name="Motion"
+        config={{ rise: [220, 0, 600, 10], stagger: [30, 0, 120, 5] }}
+        options={{
+          hints: {
+            rise: 'How long each row takes to arrive, in ms.',
+            stagger: 'The gap between one row and the next, in ms.',
+          },
+        }}
+      />
+    </AppShell>
+  );
+}

package/template/prototypes/sample-list/styles.css

@@ -0,0 +1,25 @@
+/* The list: one grid per row, the cover and the text in the first column,
+   status and date pinned right. Rows arrive 4px up, one after another, on
+   the dials in index.tsx (--rise, --stagger, unitless ms). */
+.items { list-style: none; margin: 0; padding: 0; }
+.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px; align-items: center; gap: 16px; min-height: 56px; padding: 8px 16px 8px 8px; border-bottom: 1px solid var(--border-secondary); animation: item-rise calc(var(--rise, 220) * 1ms) var(--ease-out) calc(var(--i, 0) * var(--stagger, 30) * 1ms) backwards; }
+.item-row:last-child { border-bottom: 0; }
+.page[data-density="compact"] .item-row { min-height: 44px; padding-block: 4px; }
+.item-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px; margin: -4px -8px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover); }
+@media (hover: hover) and (pointer: fine) { .item-link:hover { background: var(--bg-primary_hover); } }
+.item-link:active { background: var(--bg-active); }
+.item-cover { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgb(16 24 40 / 0.08); }
+.page[data-density="compact"] .item-cover { width: 32px; height: 32px; }
+.item-cover.is-missing { background: var(--bg-secondary); box-shadow: none; outline: 1px dashed var(--border-primary); outline-offset: -1px; }
+.item-text { display: flex; flex-direction: column; min-width: 0; }
+.item-name { font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
+.item-unnamed { color: var(--text-quaternary); font-style: italic; }
+.item-owner { color: var(--text-tertiary); font-size: 12px; line-height: 18px; }
+.item-date { color: var(--text-tertiary); text-align: right; }
+@keyframes item-rise { from { opacity: 0; translate: 0 4px; } }
+:root[data-motion="reduce"] .item-row { animation-name: item-fade; }
+@keyframes item-fade { from { opacity: 0; } }
+@media (max-width: 640px) {
+  .item-row { grid-template-columns: minmax(0, 1fr) auto; }
+  .item-date { display: none; }
+}

package/template/proxy.ts

@@ -0,0 +1,4 @@
+// The password gate in front of every deployed path (vercel.json, proxy.entrypoint).
+import { createProxy } from '@milesroxas/design-hub/vercel';
+
+export default createProxy({ siteName: 'Prototypes' });

package/template/sketches/paper/README.md

@@ -0,0 +1,3 @@
+# Paper sketches
+
+Exports from Paper Desktop that a prototype or a design doc cites: PNG, PDF, HTML or JSX. Name a file by the frame it came from. The live comp stays in Paper; `miles-paper-to-prototype` reads it over MCP, never from here, because an export drifts from the frame the moment the frame changes.

package/template/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@milesroxas/design-hub/tsconfig.project.json",
+  "compilerOptions": {
+    "paths": {
+      "@kit/*": ["./kit/*", "./node_modules/@milesroxas/design-hub/kit/*"],
+      "@milesroxas/design-hub/kit/*": ["./node_modules/@milesroxas/design-hub/kit/*"]
+    }
+  },
+  "include": ["prototypes", "kit", "api", "proxy.ts"]
+}

package/template/vercel.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "framework": "vite",
+  "installCommand": "pnpm install --frozen-lockfile",
+  "buildCommand": "pnpm build",
+  "outputDirectory": "dist",
+  "proxy": {
+    "entrypoint": "proxy.ts",
+    "matcher": ["/(.*)"]
+  },
+  "rewrites": [
+    {
+      "source": "/((?!api/).*)",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Robots-Tag",
+          "value": "noindex, nofollow, noarchive"
+        },
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "Referrer-Policy",
+          "value": "same-origin"
+        },
+        {
+          "key": "Strict-Transport-Security",
+          "value": "max-age=31536000; includeSubDomains"
+        }
+      ]
+    }
+  ],
+  "functions": {
+    "api/review.ts": {
+      "maxDuration": 10
+    }
+  }
+}