Add design-sync inputs for claude.ai/design

Import this repo's components into a Claude Design project so the design agent builds with the real Cloudrite library instead of generic components. The repo is a Next.js app, not a component library: no dist/, no exports map, no .d.ts tree, and Tailwind exists only as build directives. So .design-sync/ carries a small build that manufactures a consumable package from source (staged to the gitignored .ds-pkg/): - tsconfig.dts.json declaration emit, for real <Name>Props contracts - build-css.mjs Tailwind v4 -> a static stylesheet via @tailwindcss/postcss - make-pkg.mjs stages the package; index.js exports all 292 symbols while index.d.ts exports only the 61 roots, so shadcn's flat compound parts don't each become a preview card. Also generates the per-root parts tables in docs/ - shims/next-link router-free anchor; the real next/link needs AppRouterContext and drags in the App Router runtime - fonts/ Space Grotesk + Inter woff2 (SIL OFL). next/font supplies these at runtime in the app, so the bundle has none previews/ holds 40 authored preview stories, conventions.md is prepended to the generated README as the design agent's usage guide, and NOTES.md records the gotchas a future sync would otherwise rediscover. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-05 17:04:10 +12:00
parent d321ed44a8
commit 3970cf9a00
116 changed files with 3403 additions and 1 deletions
@@ -0,0 +1,49 @@
+/* Design-sync Tailwind entry.
+ *
+ * The app's own app/globals.css is a Tailwind v4 *source* file (`@import
+ * 'tailwindcss'`), not a shippable stylesheet, and it leans on Next to supply
+ * two things the DS bundle has to supply itself:
+ *
+ *   1. Utilities. Compiled here via @tailwindcss/cli into .design-sync/compiled.css.
+ *   2. Font variables. next/font/google assigns --font-sans / --font-body on
+ *      <body> at runtime, so globals.css can write the self-referential
+ *      `--font-sans: var(--font-sans), 'Space Grotesk', …`. Outside Next that
+ *      cycle is invalid at computed-value time and the whole declaration drops,
+ *      leaving every font-sans/font-body utility unset. The @theme block below
+ *      re-declares both with real family stacks.
+ *
+ * Regenerate whenever component sources or authored previews change:
+ *   pnpm exec @tailwindcss/cli -i .design-sync/tailwind-entry.css -o .design-sync/compiled.css --minify
+ */
+
+@import '../app/globals.css';
+@import './fonts/fonts.css';
+
+/* Tailwind v4 auto-detects sources from this file's directory, which would miss
+ * the repo's component tree. Name both scan roots explicitly. */
+@source '../components';
+@source './previews';
+
+@theme inline {
+  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* app/globals.css puts the dark palette on :root, so the DS is dark by default
+ * (matching cloudrite.co.nz). Tell the UA so form controls and scrollbars match. */
+:root {
+  color-scheme: dark;
+}
+
+/* Designs built with this DS get the dark page by default. Deliberately `body`
+ * only, at plain specificity: the preview-card harness sets its own
+ * `body{background:#fff}` in a later inline <style>, so it still wins inside a
+ * card (which is what the product wants), while a real design gets the brand
+ * surface without having to remember it. Do NOT add `html` here — the harness's
+ * white body over a dark html paints a black band under every card. */
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-body);
+}