From 3970cf9a00e0fb414566417fd97c458c3201e8bb Mon Sep 17 00:00:00 2001 From: ASOwnerYT Date: Wed, 5 Aug 2026 17:04:10 +1200 Subject: [PATCH] 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 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 --- .design-sync/NOTES.md | 157 +++++++++++++ .design-sync/build-css.mjs | 27 +++ .design-sync/config.json | 45 ++++ .design-sync/conventions.md | 102 +++++++++ .design-sync/docs/Accordion.md | 18 ++ .design-sync/docs/Alert.md | 17 ++ .design-sync/docs/AlertDialog.md | 25 +++ .design-sync/docs/AspectRatio.md | 7 + .design-sync/docs/Avatar.md | 17 ++ .design-sync/docs/Badge.md | 7 + .design-sync/docs/Breadcrumb.md | 21 ++ .design-sync/docs/Button.md | 7 + .design-sync/docs/ButtonGroup.md | 17 ++ .design-sync/docs/Calendar.md | 16 ++ .design-sync/docs/Card.md | 21 ++ .design-sync/docs/Carousel.md | 19 ++ .design-sync/docs/ChartContainer.md | 20 ++ .design-sync/docs/Checkbox.md | 7 + .design-sync/docs/Collapsible.md | 17 ++ .design-sync/docs/Command.md | 23 ++ .design-sync/docs/Contact.md | 7 + .design-sync/docs/ContextMenu.md | 29 +++ .design-sync/docs/Dialog.md | 24 ++ .design-sync/docs/Drawer.md | 24 ++ .design-sync/docs/DropdownMenu.md | 29 +++ .design-sync/docs/Empty.md | 20 ++ .design-sync/docs/Features.md | 7 + .design-sync/docs/Field.md | 24 ++ .design-sync/docs/Footer.md | 7 + .design-sync/docs/Form.md | 21 ++ .design-sync/docs/Header.md | 7 + .design-sync/docs/Hero.md | 7 + .design-sync/docs/HoverCard.md | 17 ++ .design-sync/docs/Input.md | 7 + .design-sync/docs/InputGroup.md | 20 ++ .design-sync/docs/InputOTP.md | 18 ++ .design-sync/docs/Item.md | 24 ++ .design-sync/docs/Kbd.md | 16 ++ .design-sync/docs/Label.md | 7 + .design-sync/docs/Menubar.md | 30 +++ .design-sync/docs/NavigationMenu.md | 22 ++ .design-sync/docs/Pagination.md | 21 ++ .design-sync/docs/Popover.md | 18 ++ .design-sync/docs/Process.md | 7 + .design-sync/docs/Progress.md | 7 + .design-sync/docs/RadioGroup.md | 16 ++ .design-sync/docs/ResizablePanelGroup.md | 17 ++ .design-sync/docs/ScrollArea.md | 16 ++ .design-sync/docs/Select.md | 24 ++ .design-sync/docs/Separator.md | 7 + .design-sync/docs/Services.md | 7 + .design-sync/docs/Sheet.md | 22 ++ .design-sync/docs/Sidebar.md | 37 +++ .design-sync/docs/Skeleton.md | 7 + .design-sync/docs/Slider.md | 7 + .design-sync/docs/Spinner.md | 7 + .design-sync/docs/Switch.md | 7 + .design-sync/docs/Table.md | 22 ++ .design-sync/docs/Tabs.md | 18 ++ .design-sync/docs/Textarea.md | 7 + .design-sync/docs/Toast.md | 21 ++ .design-sync/docs/Toaster.md | 7 + .design-sync/docs/Toggle.md | 7 + .design-sync/docs/ToggleGroup.md | 16 ++ .design-sync/docs/Tooltip.md | 18 ++ .design-sync/fonts/fonts.css | 40 ++++ .design-sync/fonts/inter-latin-ext.woff2 | Bin 0 -> 85272 bytes .design-sync/fonts/inter-latin.woff2 | Bin 0 -> 48432 bytes .../fonts/space-grotesk-latin-ext.woff2 | Bin 0 -> 18924 bytes .design-sync/fonts/space-grotesk-latin.woff2 | Bin 0 -> 22320 bytes .design-sync/make-pkg.mjs | 212 ++++++++++++++++++ .design-sync/previews/Accordion.tsx | 41 ++++ .design-sync/previews/Alert.tsx | 43 ++++ .design-sync/previews/Avatar.tsx | 61 +++++ .design-sync/previews/Badge.tsx | 38 ++++ .design-sync/previews/Breadcrumb.tsx | 57 +++++ .design-sync/previews/Button.tsx | 71 ++++++ .design-sync/previews/ButtonGroup.tsx | 56 +++++ .design-sync/previews/Card.tsx | 94 ++++++++ .design-sync/previews/Checkbox.tsx | 37 +++ .design-sync/previews/Collapsible.tsx | 50 +++++ .design-sync/previews/Contact.tsx | 19 ++ .design-sync/previews/Dialog.tsx | 46 ++++ .design-sync/previews/DropdownMenu.tsx | 58 +++++ .design-sync/previews/Empty.tsx | 40 ++++ .design-sync/previews/Features.tsx | 19 ++ .design-sync/previews/Field.tsx | 78 +++++++ .design-sync/previews/Footer.tsx | 19 ++ .design-sync/previews/Form.tsx | 79 +++++++ .design-sync/previews/Header.tsx | 20 ++ .design-sync/previews/Hero.tsx | 23 ++ .design-sync/previews/Input.tsx | 45 ++++ .design-sync/previews/Label.tsx | 33 +++ .design-sync/previews/Pagination.tsx | 46 ++++ .design-sync/previews/Popover.tsx | 30 +++ .design-sync/previews/Process.tsx | 19 ++ .design-sync/previews/Progress.tsx | 32 +++ .design-sync/previews/RadioGroup.tsx | 41 ++++ .design-sync/previews/Select.tsx | 93 ++++++++ .design-sync/previews/Separator.tsx | 32 +++ .design-sync/previews/Services.tsx | 19 ++ .design-sync/previews/Sheet.tsx | 42 ++++ .design-sync/previews/Skeleton.tsx | 31 +++ .design-sync/previews/Slider.tsx | 33 +++ .design-sync/previews/Spinner.tsx | 29 +++ .design-sync/previews/Switch.tsx | 39 ++++ .design-sync/previews/Table.tsx | 60 +++++ .design-sync/previews/Tabs.tsx | 30 +++ .design-sync/previews/Textarea.tsx | 36 +++ .design-sync/previews/Toggle.tsx | 53 +++++ .design-sync/previews/Tooltip.tsx | 28 +++ .design-sync/shims/next-link.tsx | 37 +++ .design-sync/tailwind-entry.css | 49 ++++ .design-sync/tsconfig.ds.json | 19 ++ .design-sync/tsconfig.dts.json | 17 ++ .gitignore | 10 +- 116 files changed, 3403 insertions(+), 1 deletion(-) create mode 100644 .design-sync/NOTES.md create mode 100644 .design-sync/build-css.mjs create mode 100644 .design-sync/config.json create mode 100644 .design-sync/conventions.md create mode 100644 .design-sync/docs/Accordion.md create mode 100644 .design-sync/docs/Alert.md create mode 100644 .design-sync/docs/AlertDialog.md create mode 100644 .design-sync/docs/AspectRatio.md create mode 100644 .design-sync/docs/Avatar.md create mode 100644 .design-sync/docs/Badge.md create mode 100644 .design-sync/docs/Breadcrumb.md create mode 100644 .design-sync/docs/Button.md create mode 100644 .design-sync/docs/ButtonGroup.md create mode 100644 .design-sync/docs/Calendar.md create mode 100644 .design-sync/docs/Card.md create mode 100644 .design-sync/docs/Carousel.md create mode 100644 .design-sync/docs/ChartContainer.md create mode 100644 .design-sync/docs/Checkbox.md create mode 100644 .design-sync/docs/Collapsible.md create mode 100644 .design-sync/docs/Command.md create mode 100644 .design-sync/docs/Contact.md create mode 100644 .design-sync/docs/ContextMenu.md create mode 100644 .design-sync/docs/Dialog.md create mode 100644 .design-sync/docs/Drawer.md create mode 100644 .design-sync/docs/DropdownMenu.md create mode 100644 .design-sync/docs/Empty.md create mode 100644 .design-sync/docs/Features.md create mode 100644 .design-sync/docs/Field.md create mode 100644 .design-sync/docs/Footer.md create mode 100644 .design-sync/docs/Form.md create mode 100644 .design-sync/docs/Header.md create mode 100644 .design-sync/docs/Hero.md create mode 100644 .design-sync/docs/HoverCard.md create mode 100644 .design-sync/docs/Input.md create mode 100644 .design-sync/docs/InputGroup.md create mode 100644 .design-sync/docs/InputOTP.md create mode 100644 .design-sync/docs/Item.md create mode 100644 .design-sync/docs/Kbd.md create mode 100644 .design-sync/docs/Label.md create mode 100644 .design-sync/docs/Menubar.md create mode 100644 .design-sync/docs/NavigationMenu.md create mode 100644 .design-sync/docs/Pagination.md create mode 100644 .design-sync/docs/Popover.md create mode 100644 .design-sync/docs/Process.md create mode 100644 .design-sync/docs/Progress.md create mode 100644 .design-sync/docs/RadioGroup.md create mode 100644 .design-sync/docs/ResizablePanelGroup.md create mode 100644 .design-sync/docs/ScrollArea.md create mode 100644 .design-sync/docs/Select.md create mode 100644 .design-sync/docs/Separator.md create mode 100644 .design-sync/docs/Services.md create mode 100644 .design-sync/docs/Sheet.md create mode 100644 .design-sync/docs/Sidebar.md create mode 100644 .design-sync/docs/Skeleton.md create mode 100644 .design-sync/docs/Slider.md create mode 100644 .design-sync/docs/Spinner.md create mode 100644 .design-sync/docs/Switch.md create mode 100644 .design-sync/docs/Table.md create mode 100644 .design-sync/docs/Tabs.md create mode 100644 .design-sync/docs/Textarea.md create mode 100644 .design-sync/docs/Toast.md create mode 100644 .design-sync/docs/Toaster.md create mode 100644 .design-sync/docs/Toggle.md create mode 100644 .design-sync/docs/ToggleGroup.md create mode 100644 .design-sync/docs/Tooltip.md create mode 100644 .design-sync/fonts/fonts.css create mode 100644 .design-sync/fonts/inter-latin-ext.woff2 create mode 100644 .design-sync/fonts/inter-latin.woff2 create mode 100644 .design-sync/fonts/space-grotesk-latin-ext.woff2 create mode 100644 .design-sync/fonts/space-grotesk-latin.woff2 create mode 100644 .design-sync/make-pkg.mjs create mode 100644 .design-sync/previews/Accordion.tsx create mode 100644 .design-sync/previews/Alert.tsx create mode 100644 .design-sync/previews/Avatar.tsx create mode 100644 .design-sync/previews/Badge.tsx create mode 100644 .design-sync/previews/Breadcrumb.tsx create mode 100644 .design-sync/previews/Button.tsx create mode 100644 .design-sync/previews/ButtonGroup.tsx create mode 100644 .design-sync/previews/Card.tsx create mode 100644 .design-sync/previews/Checkbox.tsx create mode 100644 .design-sync/previews/Collapsible.tsx create mode 100644 .design-sync/previews/Contact.tsx create mode 100644 .design-sync/previews/Dialog.tsx create mode 100644 .design-sync/previews/DropdownMenu.tsx create mode 100644 .design-sync/previews/Empty.tsx create mode 100644 .design-sync/previews/Features.tsx create mode 100644 .design-sync/previews/Field.tsx create mode 100644 .design-sync/previews/Footer.tsx create mode 100644 .design-sync/previews/Form.tsx create mode 100644 .design-sync/previews/Header.tsx create mode 100644 .design-sync/previews/Hero.tsx create mode 100644 .design-sync/previews/Input.tsx create mode 100644 .design-sync/previews/Label.tsx create mode 100644 .design-sync/previews/Pagination.tsx create mode 100644 .design-sync/previews/Popover.tsx create mode 100644 .design-sync/previews/Process.tsx create mode 100644 .design-sync/previews/Progress.tsx create mode 100644 .design-sync/previews/RadioGroup.tsx create mode 100644 .design-sync/previews/Select.tsx create mode 100644 .design-sync/previews/Separator.tsx create mode 100644 .design-sync/previews/Services.tsx create mode 100644 .design-sync/previews/Sheet.tsx create mode 100644 .design-sync/previews/Skeleton.tsx create mode 100644 .design-sync/previews/Slider.tsx create mode 100644 .design-sync/previews/Spinner.tsx create mode 100644 .design-sync/previews/Switch.tsx create mode 100644 .design-sync/previews/Table.tsx create mode 100644 .design-sync/previews/Tabs.tsx create mode 100644 .design-sync/previews/Textarea.tsx create mode 100644 .design-sync/previews/Toggle.tsx create mode 100644 .design-sync/previews/Tooltip.tsx create mode 100644 .design-sync/shims/next-link.tsx create mode 100644 .design-sync/tailwind-entry.css create mode 100644 .design-sync/tsconfig.ds.json create mode 100644 .design-sync/tsconfig.dts.json diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md new file mode 100644 index 0000000..76740ad --- /dev/null +++ b/.design-sync/NOTES.md @@ -0,0 +1,157 @@ +# design-sync notes — Cloudrite + +Repo-specific gotchas for future syncs. Read this before re-running. + +## What this repo is + +Not a component library — a Next.js 16 marketing site (`private: true`, no `dist/`, +no `exports`, no `.d.ts` tree). The DS surface is `components/ui/*` (54 shadcn/ui +primitives, new-york style) plus 7 hand-built Cloudrite page sections. + +## The staging package (`.ds-pkg/`) + +The converter needs a package with a built entry and a `.d.ts` tree. Three scripts +under `.design-sync/` build one from source; run them **in this order** (this is +`cfg.buildCmd`): + +1. `node_modules/.bin/tsc -p .design-sync/tsconfig.dts.json` — declaration emit, + 69 `.d.ts` files. Exits 0; all three steps are chained with `&&`, so a real + failure stops the run. + **`../next-env.d.ts` must stay in that config's `include`.** It pulls in Next's + JSX augmentation for styled-jsx; without it the ` + + +); diff --git a/.design-sync/previews/Dialog.tsx b/.design-sync/previews/Dialog.tsx new file mode 100644 index 0000000..5fe4263 --- /dev/null +++ b/.design-sync/previews/Dialog.tsx @@ -0,0 +1,46 @@ +import type { ReactNode } from 'react'; +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + Input, + Label, +} from 'cloudrite'; + +// Cloudrite is dark-only — the overlay surfaces read correctly only against the +// brand background, not the harness's white card body. +const Surface = ({ children }: { children: ReactNode }) => ( +
{children}
+); + +// `defaultOpen` is what makes the card worth looking at — a bare trigger shows +// none of Dialog's parts. Paired with cardMode:single in .design-sync/config.json. +export const Open = () => ( + + + e.preventDefault()}> + + Add a site + + We'll point the DNS and issue an SSL certificate automatically. + + +
+ + +
+ + + + + + + + + +); diff --git a/.design-sync/previews/DropdownMenu.tsx b/.design-sync/previews/DropdownMenu.tsx new file mode 100644 index 0000000..061c0c9 --- /dev/null +++ b/.design-sync/previews/DropdownMenu.tsx @@ -0,0 +1,58 @@ +import type { ReactNode } from 'react'; +import { + Button, + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from 'cloudrite'; +import { Download, RefreshCw, Settings, Trash2 } from 'lucide-react'; + +// Cloudrite is dark-only — the overlay surfaces read correctly only against the +// brand background, not the harness's white card body. +const Surface = ({ children }: { children: ReactNode }) => ( +
{children}
+); + +export const Open = () => ( + +
+ + + + + + cloudrite.co.nz + + + + + Clear cache + ⌘R + + + + Download backup + + + + Settings + + + + Auto-renew SSL + + + + Delete site + + + +
+ +); diff --git a/.design-sync/previews/Empty.tsx b/.design-sync/previews/Empty.tsx new file mode 100644 index 0000000..16335b3 --- /dev/null +++ b/.design-sync/previews/Empty.tsx @@ -0,0 +1,40 @@ +import type { ReactNode } from 'react'; +import { + Button, + Empty, + EmptyContent, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from 'cloudrite'; +import { CloudOff, Plus } from 'lucide-react'; + +// Cloudrite is dark-only — foreground-coloured text and `border-border` are +// invisible on the preview harness's white card body. Stories render on the +// brand surface, which is also how a real screen is built. +const Surface = ({ children }: { children: ReactNode }) => ( +
{children}
+); + +export const Default = () => ( + + + + + + + No sites yet + + Add your first site and we'll handle DNS, SSL and backups for you. + + + + + + + +); diff --git a/.design-sync/previews/Features.tsx b/.design-sync/previews/Features.tsx new file mode 100644 index 0000000..edf35da --- /dev/null +++ b/.design-sync/previews/Features.tsx @@ -0,0 +1,19 @@ +import { Features } from 'cloudrite'; + +// The "why Cloudrite" feature showcase. Rotates its active feature on a 4s interval; the still captures whichever is active on first paint. +// +// The section draws light-on-dark against the page background, which the preview +// card harness paints white — hence the surface wrapper. Transitions and +// animation delays are zeroed because the capture harness only waits on fonts +// and images, so an entrance animation would otherwise be screenshotted mid-flight. +const still = `*,*::before,*::after{ + transition-duration:0s !important;transition-delay:0s !important; + animation-duration:0s !important;animation-delay:0s !important; +}`; + +export const Default = () => ( +
+ + +
+); diff --git a/.design-sync/previews/Field.tsx b/.design-sync/previews/Field.tsx new file mode 100644 index 0000000..ed66c7b --- /dev/null +++ b/.design-sync/previews/Field.tsx @@ -0,0 +1,78 @@ +import type { ReactNode } from 'react'; +import { + Checkbox, + Field, + FieldContent, + FieldDescription, + FieldError, + FieldGroup, + FieldLabel, + FieldLegend, + FieldSeparator, + FieldSet, + Input, +} from 'cloudrite'; + +// Cloudrite is dark-only — foreground-coloured text and `border-border` are +// invisible on the preview harness's white card body. Stories render on the +// brand surface, which is also how a real screen is built. +const Surface = ({ children }: { children: ReactNode }) => ( +
{children}
+); + +export const Vertical = () => ( + + + + Domain + + We'll point the DNS for you at no charge. + + + +); + +export const Horizontal = () => ( + + + + + + Managed backups + Nightly snapshots kept for 30 days. + + + + +); + +export const WithError = () => ( + + + + Email + + Enter a valid email address. + + + +); + +export const Fieldset = () => ( + +
+ Hosting + + + Plan name + + + + + Site limit + + + +
+ +); diff --git a/.design-sync/previews/Footer.tsx b/.design-sync/previews/Footer.tsx new file mode 100644 index 0000000..4b0f9eb --- /dev/null +++ b/.design-sync/previews/Footer.tsx @@ -0,0 +1,19 @@ +import { Footer } from 'cloudrite'; + +// The site footer: service/company link columns, contact details and the Cloudrite mark. +// +// The section draws light-on-dark against the page background, which the preview +// card harness paints white — hence the surface wrapper. Transitions and +// animation delays are zeroed because the capture harness only waits on fonts +// and images, so an entrance animation would otherwise be screenshotted mid-flight. +const still = `*,*::before,*::after{ + transition-duration:0s !important;transition-delay:0s !important; + animation-duration:0s !important;animation-delay:0s !important; +}`; + +export const Default = () => ( +
+ +
+
+); diff --git a/.design-sync/previews/Form.tsx b/.design-sync/previews/Form.tsx new file mode 100644 index 0000000..55efc56 --- /dev/null +++ b/.design-sync/previews/Form.tsx @@ -0,0 +1,79 @@ +import type { ReactNode } from 'react'; +import { useForm } from 'react-hook-form'; +import { + Button, + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + Input, + Textarea, +} from 'cloudrite'; + +// Cloudrite is dark-only — foreground-coloured text and `border-border` are +// invisible on the preview harness's white card body. Stories render on the +// brand surface, which is also how a real screen is built. +const Surface = ({ children }: { children: ReactNode }) => ( +
{children}
+); + +type Values = { name: string; email: string; message: string }; + +// `Form` is react-hook-form's FormProvider — it needs a useForm() instance, and +// FormField wires each control through Controller. This is the enquiry form on +// the Cloudrite contact section. +export const EnquiryForm = () => { + const form = useForm({ + defaultValues: { name: 'Jamie Lambert', email: 'jamie@cafe.co.nz', message: '' }, + }); + return ( + +
+ e.preventDefault()}> + ( + + Name + + + + + )} + /> + ( + + Email + + + + We reply within one business day. + + )} + /> + ( + + How can we help? + +