feat: init

README.md

@@ -0,0 +1,72 @@
+# claddcn-svelte
+
+The [cladd.io](https://cladd.io) skin for shadcn-svelte.
+
+## Install into a project
+
+```bash
+# in the root of a shadcn-svelte project
+npx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars
+# or
+bunx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars
+```
+
+`init`:
+
+1. copies `claddcn.css` next to your Tailwind entry and `@import`s it;
+2. `--strip-vars` removes your old `:root` / `.dark` / `@theme inline` token blocks
+   (claddcn defines every shadcn token, and blocks after the import would win);
+3. overwrites `$lib/components/ui/*` with the cladd versions and backs up the old
+   files to `.claddcn-backup/<timestamp>/`;
+4. extends `cn()` so tailwind-merge understands `text-cladd-xs`, `h-cladd-md`, etc.;
+5. installs `@fontsource-variable/geist` and `geist-mono`, using bun, pnpm, yarn or npm.
+
+Flags: `--css <file>` (if components.json points at the wrong CSS), `--only button,card`, `--no-install`, `--dry`.
+
+As a shadcn-svelte registry: `npx shadcn-svelte registry build` → serve `static/r`
+→ `npx shadcn-svelte add https://…/r/button.json`.
+
+## What you get
+
+| shadcn-svelte                 | cladd equivalent                                         |
+| ----------------------------- | -------------------------------------------------------- |
+| `Button` `default`            | brand-tinted gradient surface (the “Get started” button) |
+| `outline` / `secondary`       | neutral raised gradient, with or without outline         |
+| `ghost`                       | transparent, rises to the next surface level on hover    |
+| `destructive`                 | red-tinted surface                                       |
+| `fill` (new)                  | solid accent gradient fill                               |
+| `color="green"` (new)         | any of the 11 cladd accents on Button / Badge            |
+| `rounded` (new)               | pill shape                                               |
+| `Input`, `Textarea`           | recessed “cut” well, focus ring floating 4px off         |
+| `Checkbox`                    | round thumb, brand fill when checked                     |
+| `Switch`                      | cladd switch with the × → ✓ indicator                    |
+| `Tabs`                        | toolbar pill with raised active segment                  |
+| `Select`, menus               | 24px-radius popover, pill rows, spring scale-in          |
+| `Dialog`, `Sheet`             | 24px panels, spring pop-in, floating sheet               |
+| `Tooltip`                     | small raised surface, no arrow                           |
+| `Surface`, `SurfaceCut` (new) | the cladd primitives, auto-nesting depth                 |
+
+### Utility classes for hand-written markup
+
+`cladd-surface` (+ `cladd-gradient`, `cladd-fill`, `cladd-gradient-fill`, `cladd-outline`),
+`cladd-cut`, `cladd-ghost`, `cladd-hoverable`, `cladd-clickable`, `cladd-focusable`,
+`cladd-segment` (active via `aria-current="page"` / `data-state="active"`),
+`cladd-section-title`, `cladd-color-{neutral,brand,red,pink,purple,blue,cyan,lime,green,yellow,orange}`,
+`cladd-level-{1..5}`.
+
+Tailwind tokens: `bg-cladd-surface`, `bg-cladd-surface-next`, `text-cladd-fg-soft`,
+`text-cladd-primary`, `h-cladd-md`, `rounded-cladd-md`, `rounded-cladd-panel`,
+`shadow-cladd-outline`, `text-cladd-xs`, …
+
+Nested `.cladd-surface` elements step one level deeper automatically (1–5). cladd does
+this with React context. Here it comes from selector depth, so it also works in plain markup.
+
+## Requirements
+
+Tailwind CSS v4, bits-ui v2, tailwind-merge v3, and browsers with relative color
+syntax (`oklch(from …)`): Chrome 119+, Safari 18+, Firefox 128+.
+
+## License
+
+MIT. Design tokens, surface math and component styling are ported from
+[cladd](https://github.com/cladd-ui/cladd) (MIT, © 2026 cladd-ui).