@orochibraru/ui 1.0.3-canary.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/blocks/option-group.svelte +1 -1
  2. package/dist/components/blocks/responsive-sheet.svelte +1 -1
  3. package/dist/mcp-content.json +1 -1
  4. package/package.json +1 -1
package/dist/components/blocks/option-group.svelte CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  <fieldset>
32
32
  <legend class="mb-2 px-1 text-sm font-medium">{legend}</legend>
33
- <div class="grid gap-2 md:grid-cols-2 xl:grid-cols-3">
33
+ <div class="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
34
34
  {#each options as option (option.value)}
35
35
  <label
36
36
  class="group border-border bg-card has-checked:border-primary has-checked:ring-primary/30 has-focus-visible:ring-ring/50 flex min-h-14 cursor-pointer items-center gap-3 rounded-2xl border p-3 transition-all has-checked:ring-2 has-focus-visible:ring-3"
package/dist/components/blocks/responsive-sheet.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  <Dialog.Description>{description}</Dialog.Description>
46
46
  {/if}
47
47
  </Dialog.Header>
48
- <div class="-mx-6 grid min-h-0 gap-6 overflow-y-auto px-6">
48
+ <div class="-mx-6 grid min-h-0 grid-cols-1 gap-6 overflow-y-auto px-6">
49
49
  {@render children()}
50
50
  </div>
51
51
  </Dialog.Content>
package/dist/mcp-content.json CHANGED
@@ -1 +1 @@
1
- {"version":"1.0.3-canary.1","readme":"# @orochibraru/ui\n\nSvelte 5 components and the theme shared by OpenCount, LocalAssistant, Homerun,\nSergio's, Nuvio Web and Penombre: the shadcn-svelte primitives (vega style) as\nthese apps customised them, a handful of app-level blocks, and the oklch theme\nthey all draw from. One package instead of six drifting copies.\n\nBuilt for SvelteKit 3, Svelte 5 runes and Tailwind CSS v4.\n\n## Install\n\n```bash\nbun add -d @orochibraru/ui\n```\n\nIt goes in `devDependencies`: the app bundles it, so nothing from it is needed\nat runtime next to the compiled server.\n\n## Set up the stylesheet\n\nImport the theme right after Tailwind in the app's root stylesheet:\n\n```css\n@import \"tailwindcss\";\n@import \"@orochibraru/ui/theme.css\";\n```\n\nThe theme brings the design tokens, the `data-*` state variants the primitives\nstyle with, `tw-animate-css`, and an `@source` that makes Tailwind scan the\npackage, so no other configuration is needed.\n\n## Use\n\nEvery primitive is a subpath, with the same exports shadcn-svelte generates:\n\n```svelte\n<script lang=\"ts\">\n import EmptyState from \"@orochibraru/ui/blocks/empty-state\";\n import { Button } from \"@orochibraru/ui/button\";\n import * as Dialog from \"@orochibraru/ui/dialog\";\n import { cn } from \"@orochibraru/ui/utils\";\n</script>\n```\n\nMoving an app over is a rewrite of its imports:\n`#lib/components/ui/button/index.js` becomes `@orochibraru/ui/button`.\n\nPrimitives: accordion, alert, alert-dialog, avatar, badge, breadcrumb, button,\nbutton-group, calendar, card, checkbox, command, context-menu, dialog, drawer,\ndropdown-menu, empty, field, input, input-group, input-otp, label, menubar,\npagination, popover, progress, radio-group, range-calendar, resizable,\nscroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner,\nspinner, switch, table, tabs, textarea, toggle, toggle-group, tooltip.\n\n`input` turns password managers off on fields that don't set `autocomplete`, so\na search box never gets a login suggestion.\n\n## Components\n\nUnder `@orochibraru/ui/components/<name>`: one import, data in. Where a\nprimitive is assembled from parts, a component takes an array or an object and\nrenders the whole thing, phones included.\n\n```svelte\n<script lang=\"ts\">\n import Input from \"@orochibraru/ui/components/input\";\n</script>\n\n<Input label=\"Email\" name=\"email\" type=\"email\" required bind:value={email} />\n```\n\nEvery form component takes the same field props: `name`, `label`, `description`,\n`error` (a string or the array a form action returns), `required`, `disabled`,\n`id` and a bindable `value` (`checked` for `checkbox` and `switch`, `files` for\n`file-dropzone`). The label, the description or the error, and the ARIA wiring\nbetween them come with it.\n\n`form` renders them from an array and posts to a form action. A failed action\nthat returns `fail(400, { errors: { field: [\"message\"] } })` puts each message\nunder its field; a toast narrates the submit:\n\n```svelte\n<Form\n action=\"?/create\"\n fields={[\n { name: \"name\", label: \"Project name\", required: true },\n { name: \"role\", type: \"select\", label: \"Role\", options: roles },\n { name: \"notify\", type: \"switch\", label: \"Notify the team\" },\n ]}\n messages={{ submit: \"Create project\", success: \"Project created.\" }}\n/>\n```\n\n| Component | What it does |\n| ------------------- | ---------------------------------------------------------------------------------------------- |\n| `accordion` | Questions and answers from an array: plain text or a snippet per item. |\n| `avatar-group` | Overlapping avatars with initials, a +N count and names in tooltips. |\n| `bar-list` | A ranked list with proportional bars, links and a show-more toggle. |\n| `breadcrumbs` | A trail of pages from an array, collapsing the middle into a menu on phones. |\n| `checkbox` | One checkbox with its label and description, the whole row tappable. |\n| `checkbox-list` | Options in, a labelled group of checkboxes out, posting every checked value. |\n| `confirm-dialog` | Ask before acting: waits on an async confirm, a drawer on phones. |\n| `data-table` | Columns and rows in, a sortable table out: cards on phones, links per row. |\n| `date-field` | A date with its label: calendar in a popover, a drawer on phones, ISO value. |\n| `file-dropzone` | Drop or pick files, folders too: type and size limits, a list to review, posted with the form. |\n| `form` | Fields from an array, laid out and posted to a form action, with errors under each field. |\n| `input` | A text field with its label, description and error in one: passwords get a reveal button. |\n| `menu` | Actions from an array: a dropdown on desktop, a drawer of big rows on phones. |\n| `pagination` | Page numbers from a total and a page size, prev and next on phones. |\n| `radio-list` | Pick one option from a list or from cards, with a legend and errors. |\n| `segmented-control` | A single choice as equal segments that fold to icons when space runs out. |\n| `select` | Options in, a labelled select out: searchable, and a drawer on phones. |\n| `status-badge` | A status pill with a tone, a dot and an optional pulse for live states. |\n| `switch` | A labelled switch row that posts true when on. |\n| `tabs` | Tabs from an array, scrolling sideways when they run out of room. |\n| `textarea` | A multi-line field with its label, error and an optional character counter. |\n\n## Blocks\n\nUnder `@orochibraru/ui/blocks/<name>`:\n\n| Block | What it does |\n| --------------------- | ----------------------------------------------------------------------------- |\n| `accent-toggle` | The accent presets: swatch strip on desktop, labelled rows on phones. |\n| `auth-shell` | Centered sign-in layout: heading, optional `brand` and `footer` snippets. |\n| `bottom-nav` | Phone tab bar of top-level destinations, the current one lit. |\n| `command-palette` | ⌘K search over pages and actions: dialog on desktop, tall drawer on phones. |\n| `copy-field` | Monospace value with a copy button and a promise toast. |\n| `document-title` | `<title>` from the page title, suffixed with `appName`. |\n| `empty-state` | Icon, title, subtitle and an action slot for an empty list. |\n| `error-page` | Status, message and error id from `page`, with a link to `homeHref`. |\n| `fab` | Floating action button above the phone tab bar, with a haptic tap. |\n| `icon-button` | Round icon button with a tooltip that doubles as its accessible name. |\n| `install-prompt` | One-time PWA install sheet: native prompt, iOS steps or browser menu steps. |\n| `music-player` | Audio bar with a queue: play, skip, seek, volume; positioning is the app's. |\n| `nav-cards` | Phone-only list of a section's tabs as cards: icon, label, description. |\n| `new-password-fields` | New password and its confirmation: reveal, strength meter, rules. |\n| `option-group` | Radio cards for a settings choice, with an icon or a `swatch` snippet each. |\n| `otp-field` | One-time code: digits only, SMS autofill, posted as one `code` field. |\n| `password-input` | Password field with a button to reveal it. |\n| `responsive-sheet` | A dialog on desktop, a bottom drawer under 768px. |\n| `setting-switch` | Labelled switch row for settings forms, posting `name=true` when on. |\n| `stat-card` | Glass card with an icon, a value and a hint, optionally a link. |\n| `stepper` | Multi-step flow: markers on desktop, progress bar and current step on phones. |\n| `tab-nav` | Pill tab bar of links, the current page's tab highlighted. |\n| `tab-section` | Layout for a tabbed section: tabs on desktop, nav cards on phones. |\n| `theme-picker` | System, light and dark as radio cards, for an appearance page. |\n| `theme-toggle` | System, light and dark: icon strip on desktop, three rows on phones. |\n| `top-loading-bar` | Progress bar during SvelteKit navigations, safe-area aware. |\n| `video-player` | Video with scrubbing, chapters, subtitles, speed, fullscreen, gestures, keys. |\n\nBlocks with built-in copy (`accent-toggle`, `copy-field`, `error-page`,\n`install-prompt`, `new-password-fields`, `password-input`, `theme-picker`,\n`theme-toggle`) take a `messages` prop. Its keys override the English defaults\none by one, which is how a French or translated app uses them. Blocks never set\nthe page title, except `tab-section`, which owns its section's title: the app\ncalls `setPageTitle` itself.\n\n### Tabbed sections\n\nA tabbed page is one real route per tab, each tab with a description, under a\n`tab-section` layout. On phones the index route renders `nav-cards` and each tab\nis a page titled by its label, its back button returning to the cards. On\ndesktop the index replaces itself with the first tab and `tab-nav` shows them\nall. The tabs live in one list (`SectionTab[]`, exported by `nav-cards`) that\nthe layout and the index page share.\n\n### Theme\n\n`theme-picker` and `theme-toggle` call `mode-watcher`'s `setMode`, so the app\nmounts `<ModeWatcher />` in its root layout. Both take the saved theme as\n`value`, so the server-rendered page checks the right one, and call `onchange`\nwith the new theme for the app to persist. `theme-picker` also posts as a\n`theme` radio field (`name` changes it) inside a form.\n\n`icon-button`, and `copy-field` through it, need a `Tooltip.Provider` above\nthem, which apps put in their root layout.\n\n## Modules\n\n- `@orochibraru/ui/utils`: `cn` and the shadcn-svelte prop helper types.\n- `@orochibraru/ui/toast`: `enhanceToast` and `saveToast` narrate a form action\n through one promise toast, `toastError` turns anything thrown into a message.\n Form updates keep `reset: false` by default so `bind:value` fields survive a\n submit.\n- `@orochibraru/ui/page-title`: `providePageTitle` once in the root layout,\n `setPageTitle` in pages, `usePageTitle` in app bars.\n- `@orochibraru/ui/appearance`: `applyAppearance` and `appearanceBootScript`\n apply a saved accent, theme, dark variant, font and corner style to `<html>`,\n the boot script before first paint.\n- `@orochibraru/ui/password`: `passwordRules` and `passwordScore`, the rules a\n new password must pass and a 0 to 4 strength, the same on the form and the\n server. `new-password-fields` renders them; `ruleLabels` translates them.\n- `@orochibraru/ui/server/logger`: `Logger` writes scoped lines as coloured text\n or JSON lines (`LOG_FORMAT=json`) at `LOG_LEVEL` or above; `configureLogging`\n sets both in code. JSON lines carry the active trace and span ids.\n- `@orochibraru/ui/server/telemetry`: `Telemetry` starts OpenTelemetry tracing\n over OTLP from `instrumentation.server.ts`; with `tracing: { server: true }`\n in the kit options, SvelteKit's own spans go with it. Its SDK packages are\n optional peer dependencies, installed only by apps that trace.\n- `@orochibraru/ui/server/hooks`: `requestLog` logs one line per request and\n `unexpectedErrors` logs a crash, records it on the span and returns its trace\n id as the error id.\n- `@orochibraru/ui/haptics`: `haptic(\"tap\" | \"success\" | \"error\")`, a no-op\n where vibration isn't supported.\n\n## Theming\n\nColours derive from two variables, so an app usually overrides only these after\nimporting the theme:\n\n```css\n:root {\n --hue: 8;\n --primary-chroma: 0.15;\n}\n```\n\nOn `<html>`:\n\n- `class=\"dark\"` switches to the dark palette, `data-dark-variant=\"amoled\"`\n makes it pure black.\n- Bordeaux is the default. `data-accent` picks a preset: `bordeaux`, `green`,\n `blue`, `violet`, `rose`, `orange`, `amber`, `cyan` or `neutral`.\n- `data-font` (`system`, `serif`, `mono`) and `data-corners=\"square\"` change the\n type and the radius.\n\n`class=\"aurora\"` on `<body>` adds the drifting gradient background. It is opt-in\nso apps with a flat look don't get it.\n\nThe theme also defines the `glass`, `glow`, `no-scrollbar` and `tabular`\nutilities, the `standalone` variant for installed PWAs, `safe-*` spacing for\nnotches, the toast styling and the page transitions on phones. Fonts are left to\neach app: set `--app-font` and `--display-font`.\n\n## Develop\n\n```bash\nbun install\nbun run dev\n```\n\nThe dev server is the docs site: a page per block, component and module, with\nthe component live and the code that renders it. That code is the example file\nitself, its `#lib` imports rewritten to the package subpaths, so the two can't\ndrift apart. A file named `<slug>.<name>` next to an example is a companion,\nshown after it: the layout, action or page an app needs for what the preview\ncan't hold. An example without a script is a note for the preview only.\n\nComponents built mostly for phones (drawers, steppers, cards, the media players)\nalso show on their page inside an iPhone or Android frame: an iframe of a bare\npreview route at the device's real width, so phone layouts and drawers behave as\nthey would on the device.\n\nThe primitives are shadcn-svelte's components, so the site links to its docs\ninstead of repeating them; llms.txt and the MCP server still carry their usage\ncode. The privacy page lists what the site stores and loads, and the credits.\n\nEvery component page can be copied as Markdown, viewed as Markdown, exported as\na PDF (through the browser's print dialog, in the light theme), or opened in\nClaude or ChatGPT. The list pages filter by category.\n\nThe `Dockerfile` deploys the docs site: `bun run build:docs` compiles it to one\nBun binary that serves on port 3000 and reads `x-forwarded-proto` and\n`x-forwarded-host`, so llms.txt links point at the public URL behind a proxy.\n\n`bun run check`, `bun run test` and `bun run build` are the gates; `build`\npackages `dist/` and runs publint.\n\nNew upstream components come from the shadcn-svelte CLI (`components.json` is\nset up), followed by `node_modules/.bin/tailwint --fix` on the new files. The\nCLI overwrites any customised primitive a new one depends on (drawer, input and\nsonner carry the apps' changes): copy those aside before `add --overwrite` and\nput them back after.\n\nDependencies use caret ranges, unlike the apps' exact pins, so a consuming app\ndedupes `bits-ui` and friends with its own copy instead of bundling two.\n\n## MCP server\n\nThe package ships an MCP server with the docs and every example's code bundled\nin, so an editor's assistant can list, search and read the components without\nthe docs site. It runs over stdio from the package's `bin`:\n\n```bash\nclaude mcp add orochibraru-ui -- npx -y @orochibraru/ui\n```\n\nCursor, VS Code and other clients take the same command:\n\n```json\n{\n \"mcpServers\": {\n \"orochibraru-ui\": { \"command\": \"npx\", \"args\": [\"-y\", \"@orochibraru/ui\"] }\n }\n}\n```\n\nIts tools are `get_setup` (this README), `list_components` (by group or\ncategory), `search_components` and `get_component` (the description, import path\nand usage code). `bun run build` bundles it with its content, so it needs no\ndependency at runtime. The docs site serves the same server over streamable HTTP\nat `/mcp`, plus `/llms.txt`, `/llms-full.txt` and a Markdown page per component\nat `/<group>/<slug>.md`.\n","files":{"examples/input-group.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport SearchIcon from \"@lucide/svelte/icons/search\";\n\n\timport * as InputGroup from \"#lib/components/ui/input-group/index.js\";\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-3\">\n\t<InputGroup.Root>\n\t\t<InputGroup.Addon>\n\t\t\t<SearchIcon />\n\t\t</InputGroup.Addon>\n\t\t<InputGroup.Input placeholder=\"Search files\" />\n\t</InputGroup.Root>\n\t<InputGroup.Root>\n\t\t<InputGroup.Input type=\"number\" placeholder=\"25\" />\n\t\t<InputGroup.Addon align=\"inline-end\">\n\t\t\t<InputGroup.Text>MB</InputGroup.Text>\n\t\t</InputGroup.Addon>\n\t</InputGroup.Root>\n\t<InputGroup.Root>\n\t\t<InputGroup.Input readonly value=\"https://acme.com/s/report\" />\n\t\t<InputGroup.Addon align=\"inline-end\">\n\t\t\t<InputGroup.Button size=\"icon-xs\" aria-label=\"Copy URL\">\n\t\t\t\t<CopyIcon />\n\t\t\t</InputGroup.Button>\n\t\t</InputGroup.Addon>\n\t</InputGroup.Root>\n</div>\n","examples/toast.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nexport const actions = {\n\tsave: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tif (!String(form.get(\"name\") ?? \"\").trim()) {\n\t\t\treturn fail(400, { error: \"Name is required.\" });\n\t\t}\n\t\treturn { saved: true };\n\t},\n} satisfies Actions;\n","examples/otp-field.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport OtpField from \"#lib/components/blocks/otp-field.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell\n\theading=\"Check your phone\"\n\tsubheading=\"Enter the code from your authenticator app.\"\n>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<div class=\"flex flex-col items-center gap-6\">\n\t\t<OtpField\n\t\t\tlabel=\"6-digit code\"\n\t\t\talign=\"center\"\n\t\t\toncomplete={(code) => toast(`Verifying ${code}.`)}\n\t\t/>\n\t\t<Button variant=\"link\">Use a backup code instead</Button>\n\t</div>\n</AuthShell>\n","examples/theme-picker.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport ThemePicker from \"#lib/components/blocks/theme-picker.svelte\";\n</script>\n\n<ThemePicker onchange={(theme) => toast(`Theme: ${theme}.`)} />\n","examples/toggle-group.svelte":"<script lang=\"ts\">\n\timport CalendarIcon from \"@lucide/svelte/icons/calendar\";\n\timport LayoutGridIcon from \"@lucide/svelte/icons/layout-grid\";\n\timport ListIcon from \"@lucide/svelte/icons/list\";\n\n\timport * as ToggleGroup from \"#lib/components/ui/toggle-group/index.js\";\n\n\tlet view = $state(\"list\");\n\tlet statuses = $state([\"pending\"]);\n</script>\n\n<div class=\"flex flex-wrap items-center gap-4\">\n\t<ToggleGroup.Root type=\"single\" bind:value={view} variant=\"outline\">\n\t\t<ToggleGroup.Item value=\"list\" aria-label=\"List view\">\n\t\t\t<ListIcon />\n\t\t</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"grid\" aria-label=\"Grid view\">\n\t\t\t<LayoutGridIcon />\n\t\t</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"calendar\" aria-label=\"Calendar view\">\n\t\t\t<CalendarIcon />\n\t\t</ToggleGroup.Item>\n\t</ToggleGroup.Root>\n\t<ToggleGroup.Root type=\"multiple\" bind:value={statuses} spacing={1}>\n\t\t<ToggleGroup.Item value=\"paid\">Paid</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"pending\">Pending</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"overdue\">Overdue</ToggleGroup.Item>\n\t</ToggleGroup.Root>\n</div>\n","examples/top-loading-bar.+layout.svelte":"<script lang=\"ts\">\n\timport TopLoadingBar from \"#lib/components/blocks/top-loading-bar.svelte\";\n\n\tconst { children } = $props();\n</script>\n\n<TopLoadingBar />\n{@render children()}\n","examples/video-player.svelte":"<script lang=\"ts\">\n\timport VideoPlayer from \"#lib/components/blocks/video-player.svelte\";\n\n\tlet currentTime = $state(0);\n</script>\n\n<div class=\"grid gap-3\">\n\t<VideoPlayer\n\t\tsrc=\"https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.720p.vp9.webm#t=0,30\"\n\t\tposter=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Big_Buck_Bunny_4K.webm/1280px--Big_Buck_Bunny_4K.webm.jpg\"\n\t\ttitle=\"Big Buck Bunny, captioned 30-second excerpt\"\n\t\ttracks={[\n\t\t\t{\n\t\t\t\tsrc: \"/big-buck-bunny-captions.vtt\",\n\t\t\t\tlabel: \"English captions\",\n\t\t\t\tsrclang: \"en\",\n\t\t\t\tkind: \"captions\",\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t]}\n\t\tbind:currentTime\n\t/>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tIn this opening excerpt, a butterfly crosses a sunny forest clearing before\n\t\tthe title appears and Big Buck Bunny wakes beneath a tree.\n\t</p>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tSpace or K plays and pauses, the arrows seek and change the volume, F goes\n\t\tfullscreen, M mutes. On a phone, tap to show the controls and double-tap a\n\t\tside to seek. At {Math.floor(currentTime)} s. Big Buck Bunny © Blender Foundation,\n\t\tCC BY 3.0.\n\t</p>\n</div>\n","examples/stat-card.svelte":"<script lang=\"ts\">\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HardDriveIcon from \"@lucide/svelte/icons/hard-drive\";\n\timport ListTodoIcon from \"@lucide/svelte/icons/list-todo\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport StatCard from \"#lib/components/blocks/stat-card.svelte\";\n</script>\n\n<div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n\t<StatCard label=\"Projects\" value={12} hint=\"This month\" icon={FolderIcon} />\n\t<StatCard\n\t\tlabel=\"Active members\"\n\t\tvalue={48}\n\t\ticon={UsersIcon}\n\t\ttone=\"positive\"\n\t/>\n\t<StatCard\n\t\tlabel=\"Storage used\"\n\t\tvalue=\"86 %\"\n\t\ticon={HardDriveIcon}\n\t\ttone=\"warning\"\n\t/>\n\t<StatCard label=\"Open tasks\" value={7} href=\"#\" icon={ListTodoIcon} />\n</div>\n","examples/haptics.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { haptic } from \"#lib/haptics.js\";\n</script>\n\n<div class=\"flex flex-wrap gap-2\">\n\t<Button variant=\"outline\" onclick={() => haptic(\"tap\")}>Tap</Button>\n\t<Button variant=\"outline\" onclick={() => haptic(\"success\")}>Success</Button>\n\t<Button variant=\"outline\" onclick={() => haptic(\"error\")}>Error</Button>\n</div>\n","examples/avatar.svelte":"<script lang=\"ts\">\n\timport * as Avatar from \"#lib/components/ui/avatar/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<Avatar.Root size=\"sm\">\n\t\t<Avatar.Fallback>AM</Avatar.Fallback>\n\t</Avatar.Root>\n\t<Avatar.Root>\n\t\t<Avatar.Image src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n\t\t<Avatar.Fallback>SC</Avatar.Fallback>\n\t</Avatar.Root>\n\t<Avatar.Root size=\"lg\">\n\t\t<Avatar.Fallback>NB</Avatar.Fallback>\n\t\t<Avatar.Badge />\n\t</Avatar.Root>\n\t<Avatar.Group>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>AL</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>SM</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>JD</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.GroupCount>+4</Avatar.GroupCount>\n\t</Avatar.Group>\n</div>\n","examples/password-input.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport PasswordInput from \"#lib/components/blocks/password-input.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell heading=\"Sign in\" subheading=\"Welcome back.\">\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<form class=\"grid gap-5\">\n\t\t<Input\n\t\t\tlabel=\"Email\"\n\t\t\tname=\"email\"\n\t\t\ttype=\"email\"\n\t\t\tautocomplete=\"email\"\n\t\t\trequired\n\t\t/>\n\t\t<PasswordInput label=\"Password\" required />\n\t\t<Button type=\"submit\" class=\"h-11\">Sign in</Button>\n\t</form>\n\t{#snippet footer()}\n\t\tNo account? Ask your admin for an invitation.\n\t{/snippet}\n</AuthShell>\n","examples/popover.svelte":"<script lang=\"ts\">\n\timport { buttonVariants } from \"#lib/components/ui/button/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport * as Popover from \"#lib/components/ui/popover/index.js\";\n</script>\n\n<Popover.Root>\n\t<Popover.Trigger class={buttonVariants({ variant: \"outline\" })}>\n\t\tSet storage limit\n\t</Popover.Trigger>\n\t<Popover.Content>\n\t\t<Popover.Header>\n\t\t\t<Popover.Title>Storage limit</Popover.Title>\n\t\t\t<Popover.Description>\n\t\t\t\tWe'll warn the team when the workspace gets close.\n\t\t\t</Popover.Description>\n\t\t</Popover.Header>\n\t\t<div class=\"flex flex-col gap-2\">\n\t\t\t<Label for=\"storage-limit\">Limit (GB)</Label>\n\t\t\t<Input id=\"storage-limit\" type=\"number\" value=\"100\" />\n\t\t</div>\n\t</Popover.Content>\n</Popover.Root>\n","examples/empty.svelte":"<script lang=\"ts\">\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Empty from \"#lib/components/ui/empty/index.js\";\n</script>\n\n<Empty.Root class=\"border\">\n\t<Empty.Header>\n\t\t<Empty.Media variant=\"icon\">\n\t\t\t<FileTextIcon />\n\t\t</Empty.Media>\n\t\t<Empty.Title>No documents yet</Empty.Title>\n\t\t<Empty.Description>\n\t\t\tCreate the first document of this project to get started.\n\t\t</Empty.Description>\n\t</Empty.Header>\n\t<Empty.Content>\n\t\t<Button><PlusIcon /> New document</Button>\n\t</Empty.Content>\n</Empty.Root>\n","examples/install-prompt.svelte":"<script lang=\"ts\">\n\timport InstallPrompt from \"#lib/components/blocks/install-prompt.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tOn a phone it opens by itself once; bind <code>open</code> to show it again from\n\t\ta settings page. It picks the native prompt, the iOS Share steps or the browser\n\t\tmenu steps.\n\t</p>\n\t<Button onclick={() => (open = true)}>Show the install sheet</Button>\n</div>\n<InstallPrompt appName=\"Acme\" storageKey=\"acme-install-prompt\" bind:open>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-14 rounded-2xl\"></div>\n\t{/snippet}\n</InstallPrompt>\n","examples/progress.svelte":"<script lang=\"ts\">\n\timport { Progress } from \"#lib/components/ui/progress/index.js\";\n\n\tconst used = 62;\n\tconst total = 100;\n</script>\n\n<div class=\"flex flex-col gap-2\">\n\t<div class=\"flex justify-between text-sm\">\n\t\t<span class=\"font-medium\">Storage</span>\n\t\t<span class=\"text-muted-foreground\">{used} GB of {total} GB</span>\n\t</div>\n\t<Progress value={used} max={total} />\n</div>\n","examples/appearance.svelte":"<script lang=\"ts\">\n\timport { applyAppearance } from \"#lib/appearance.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet corners = $state(\"rounded\");\n\n\tfunction toggleCorners() {\n\t\tcorners = corners === \"rounded\" ? \"square\" : \"rounded\";\n\t\tapplyAppearance(\n\t\t\tdocument.documentElement,\n\t\t\t{\n\t\t\t\taccent: document.documentElement.dataset.accent ?? \"bordeaux\",\n\t\t\t\ttheme: \"system\",\n\t\t\t\tdarkVariant: \"default\",\n\t\t\t\tfont: \"default\",\n\t\t\t\tcorners,\n\t\t\t},\n\t\t\tmatchMedia(\"(prefers-color-scheme: dark)\").matches,\n\t\t);\n\t}\n</script>\n\n<Button variant=\"outline\" onclick={toggleCorners}>\n\tCorners: {corners}\n</Button>\n","examples/hooks.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: <code>requestLog</code> writes one line per page or API request\n\t\tand skips assets and data requests; <code>unexpectedErrors</code> logs a crash,\n\t\trecords it on the request's span and hands the error page its trace id as the\n\t\terror id.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:02:15.020</span\n\t\t> <span class=\"text-red-400\">ERROR</span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Server]</span\n\t\t> Unhandled error <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} errorId: <span class=\"text-emerald-400\"\n\t\t\t\t>'1ac71cdacfc998b028cb0a12aee24333'</span\n\t\t\t>, path: <span class=\"text-emerald-400\">'/api/stats'</span> {\"}\"}</span\n\t\t>\n<span class=\"text-red-400\">Error: The database didn't answer in time.</span>\n<span\n\t\t\tclass=\"text-neutral-500\"> at load (src/routes/api/stats/+server.ts:12:11)</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:15.020</span> <span class=\"text-red-400\"\n\t\t\t>ERROR</span\n\t\t> <span class=\"text-fuchsia-400\">[Http]</span> <b>GET</b> /api/stats <span\n\t\t\tclass=\"text-red-400\">500</span\n\t\t> <span class=\"text-neutral-500\">12ms</span></pre>\n</div>\n","examples/top-loading-bar.svelte":"<script lang=\"ts\">\n\timport { goto } from \"$app/navigation\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tWatch the top of the screen: this button reloads the page through a load\n\t\tfunction that takes a second and a half, and the bar creeps until it lands.\n\t</p>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() => goto(`?slow=${Date.now()}`, { reset: false })}\n\t>\n\t\tLoad this page slowly\n\t</Button>\n</div>\n","examples/input.svelte":"<script lang=\"ts\">\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-2\">\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"account-email\">Email</Label>\n\t\t<Input\n\t\t\tid=\"account-email\"\n\t\t\ttype=\"email\"\n\t\t\tautocomplete=\"email\"\n\t\t\tplaceholder=\"you@example.com\"\n\t\t/>\n\t</div>\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"service-search\">Search services</Label>\n\t\t<Input id=\"service-search\" type=\"search\" placeholder=\"postgres, redis…\" />\n\t</div>\n</div>\n","examples/logger.+server.ts":"import { json, type RequestHandler } from \"@sveltejs/kit\";\n\nimport { Logger } from \"#lib/server/logger.js\";\n\nconst logger = new Logger(\"Projects\");\n\nexport const POST: RequestHandler = async ({ request }) => {\n\tconst { name } = await request.json();\n\tconst projectId = `p_${crypto.randomUUID().slice(0, 4)}`;\n\tlogger.info(\"Project created\", { projectId, name });\n\treturn json({ projectId }, { status: 201 });\n};\n","examples/error-page.+error.svelte":"<script lang=\"ts\">\n\timport ErrorPage from \"#lib/components/blocks/error-page.svelte\";\n</script>\n\n<ErrorPage\n\thomeHref=\"/\"\n\tmessages={{ notFoundTitle: \"Rien ici\", home: \"Retour à l'accueil\" }}\n/>\n","examples/skeleton.svelte":"<script lang=\"ts\">\n\timport { Skeleton } from \"#lib/components/ui/skeleton/index.js\";\n</script>\n\n<div class=\"grid gap-4\">\n\t{#each [1, 2, 3] as row (row)}\n\t\t<div class=\"flex items-center gap-3\">\n\t\t\t<Skeleton class=\"size-10 shrink-0 rounded-full\" />\n\t\t\t<div class=\"grid flex-1 gap-2\">\n\t\t\t\t<Skeleton class=\"h-4 w-2/3\" />\n\t\t\t\t<Skeleton class=\"h-4 w-1/3\" />\n\t\t\t</div>\n\t\t\t<Skeleton class=\"h-4 w-16\" />\n\t\t</div>\n\t{/each}\n</div>\n","examples/input-otp.svelte":"<script lang=\"ts\">\n\timport * as InputOTP from \"#lib/components/ui/input-otp/index.js\";\n\n\tlet code = $state(\"\");\n</script>\n\n<div class=\"flex flex-col gap-3\">\n\t<InputOTP.Root maxlength={6} bind:value={code}>\n\t\t{#snippet children({ cells })}\n\t\t\t<InputOTP.Group>\n\t\t\t\t{#each cells.slice(0, 3) as cell (cell)}\n\t\t\t\t\t<InputOTP.Slot {cell} />\n\t\t\t\t{/each}\n\t\t\t</InputOTP.Group>\n\t\t\t<InputOTP.Separator />\n\t\t\t<InputOTP.Group>\n\t\t\t\t{#each cells.slice(3, 6) as cell (cell)}\n\t\t\t\t\t<InputOTP.Slot {cell} />\n\t\t\t\t{/each}\n\t\t\t</InputOTP.Group>\n\t\t{/snippet}\n\t</InputOTP.Root>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\t{code.length === 6\n\t\t\t? `Verifying ${code}…`\n\t\t\t: \"Enter the code we emailed you.\"}\n\t</p>\n</div>\n","examples/calendar.svelte":"<script lang=\"ts\">\n\timport {\n\t\ttype DateValue,\n\t\tgetLocalTimeZone,\n\t\ttoday,\n\t} from \"@internationalized/date\";\n\n\timport { Calendar } from \"#lib/components/ui/calendar/index.js\";\n\n\tlet dueDate = $state<DateValue | undefined>(today(getLocalTimeZone()));\n</script>\n\n<div class=\"flex flex-wrap items-start gap-6\">\n\t<Calendar type=\"single\" bind:value={dueDate} class=\"rounded-lg border\" />\n\t<Calendar\n\t\ttype=\"single\"\n\t\tcaptionLayout=\"dropdown\"\n\t\tminValue={today(getLocalTimeZone())}\n\t\tclass=\"rounded-lg border\"\n\t/>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tDue on {dueDate?.toDate(getLocalTimeZone()).toLocaleDateString() ?? \"—\"}\n\t</p>\n</div>\n","examples/drawer.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Drawer from \"#lib/components/ui/drawer/index.js\";\n\n\tconst members = [\n\t\t{ name: \"Alex\", role: \"Owner\" },\n\t\t{ name: \"Sam\", role: \"Editor\" },\n\t\t{ name: \"Jordan\", role: \"Viewer\" },\n\t];\n\n\tlet open = $state(false);\n\n\tfunction save() {\n\t\topen = false;\n\t\ttoast.success(\"Access updated.\");\n\t}\n</script>\n\n<Drawer.Root bind:open>\n\t<Drawer.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Manage access</Button>\n\t\t{/snippet}\n\t</Drawer.Trigger>\n\t<Drawer.Content>\n\t\t<Drawer.Header>\n\t\t\t<Drawer.Title>Manage access</Drawer.Title>\n\t\t\t<Drawer.Description>Website redesign · 3 members</Drawer.Description>\n\t\t</Drawer.Header>\n\t\t<ul class=\"divide-y px-4\">\n\t\t\t{#each members as member (member.name)}\n\t\t\t\t<li class=\"flex justify-between py-3\">\n\t\t\t\t\t<span>{member.name}</span>\n\t\t\t\t\t<span class=\"text-muted-foreground\">{member.role}</span>\n\t\t\t\t</li>\n\t\t\t{/each}\n\t\t</ul>\n\t\t<Drawer.Footer>\n\t\t\t<Button onclick={save}>Save</Button>\n\t\t\t<Drawer.Close>\n\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t{/snippet}\n\t\t\t</Drawer.Close>\n\t\t</Drawer.Footer>\n\t</Drawer.Content>\n</Drawer.Root>\n","examples/dropdown-menu.svelte":"<script lang=\"ts\">\n\timport EllipsisIcon from \"@lucide/svelte/icons/ellipsis\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Share2Icon from \"@lucide/svelte/icons/share-2\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as DropdownMenu from \"#lib/components/ui/dropdown-menu/index.js\";\n\n\tlet notify = $state(true);\n\tlet visibility = $state(\"private\");\n</script>\n\n<DropdownMenu.Root>\n\t<DropdownMenu.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">\n\t\t\t\tWebsite redesign <EllipsisIcon />\n\t\t\t</Button>\n\t\t{/snippet}\n\t</DropdownMenu.Trigger>\n\t<DropdownMenu.Content class=\"w-56\" align=\"start\">\n\t\t<DropdownMenu.Group>\n\t\t\t<DropdownMenu.Label>Project</DropdownMenu.Label>\n\t\t\t<DropdownMenu.Item>\n\t\t\t\t<PencilIcon /> Edit\n\t\t\t\t<DropdownMenu.Shortcut>⌘E</DropdownMenu.Shortcut>\n\t\t\t</DropdownMenu.Item>\n\t\t\t<DropdownMenu.Item><Share2Icon /> Share</DropdownMenu.Item>\n\t\t</DropdownMenu.Group>\n\t\t<DropdownMenu.Separator />\n\t\t<DropdownMenu.CheckboxItem bind:checked={notify}>\n\t\t\tNotifications\n\t\t</DropdownMenu.CheckboxItem>\n\t\t<DropdownMenu.Sub>\n\t\t\t<DropdownMenu.SubTrigger>Visibility</DropdownMenu.SubTrigger>\n\t\t\t<DropdownMenu.SubContent>\n\t\t\t\t<DropdownMenu.RadioGroup bind:value={visibility}>\n\t\t\t\t\t<DropdownMenu.RadioItem value=\"private\"\n\t\t\t\t\t\t>Private</DropdownMenu.RadioItem\n\t\t\t\t\t>\n\t\t\t\t\t<DropdownMenu.RadioItem value=\"team\">Team</DropdownMenu.RadioItem>\n\t\t\t\t</DropdownMenu.RadioGroup>\n\t\t\t</DropdownMenu.SubContent>\n\t\t</DropdownMenu.Sub>\n\t\t<DropdownMenu.Separator />\n\t\t<DropdownMenu.Item variant=\"destructive\">\n\t\t\t<Trash2Icon /> Delete\n\t\t</DropdownMenu.Item>\n\t</DropdownMenu.Content>\n</DropdownMenu.Root>\n","examples/new-password-fields.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport NewPasswordFields from \"#lib/components/blocks/new-password-fields.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n</script>\n\n<AuthShell\n\theading=\"Set a new password\"\n\tsubheading=\"Pick something you don't use anywhere else.\"\n>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<div class=\"grid gap-6\">\n\t\t<Field.Group>\n\t\t\t<NewPasswordFields email=\"alex@example.com\" />\n\t\t</Field.Group>\n\t\t<Button class=\"h-11\">Save the password</Button>\n\t</div>\n</AuthShell>\n","examples/telemetry.vite.config.ts":"import adapter from \"@sveltejs/adapter-bun\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [\n\t\tsveltekit({\n\t\t\tadapter: adapter({ buildOptions: { compile: true } }),\n\t\t\ttracing: { server: true },\n\t\t}),\n\t],\n});\n","examples/theme-toggle.svelte":"<script lang=\"ts\">\n\timport ThemeToggle from \"#lib/components/blocks/theme-toggle.svelte\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<ThemeToggle />\n\t<ThemeToggle\n\t\tmessages={{ system: \"Système\", light: \"Clair\", dark: \"Sombre\" }}\n\t/>\n</div>\n","examples/sheet.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport * as Sheet from \"#lib/components/ui/sheet/index.js\";\n\n\tlet open = $state(false);\n\tlet name = $state(\"Alex Martin\");\n</script>\n\n<Sheet.Root bind:open>\n\t<Sheet.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Edit profile</Button>\n\t\t{/snippet}\n\t</Sheet.Trigger>\n\t<Sheet.Content>\n\t\t<Sheet.Header>\n\t\t\t<Sheet.Title>Edit profile</Sheet.Title>\n\t\t\t<Sheet.Description>Changes are visible to your team.</Sheet.Description>\n\t\t</Sheet.Header>\n\t\t<Field.Group class=\"px-4\">\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"profile-name\">Name</Field.Label>\n\t\t\t\t<Input id=\"profile-name\" bind:value={name} />\n\t\t\t</Field.Field>\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"profile-email\">Email</Field.Label>\n\t\t\t\t<Input id=\"profile-email\" value=\"alex@example.com\" />\n\t\t\t</Field.Field>\n\t\t</Field.Group>\n\t\t<Sheet.Footer>\n\t\t\t<Button onclick={() => (open = false)}>Save</Button>\n\t\t\t<Sheet.Close>\n\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t{/snippet}\n\t\t\t</Sheet.Close>\n\t\t</Sheet.Footer>\n\t</Sheet.Content>\n</Sheet.Root>\n","examples/tooltip.svelte":"<script lang=\"ts\">\n\timport DownloadIcon from \"@lucide/svelte/icons/download\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Tooltip from \"#lib/components/ui/tooltip/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Edit\">\n\t\t\t\t\t<PencilIcon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content>Edit file</Tooltip.Content>\n\t</Tooltip.Root>\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Export\">\n\t\t\t\t\t<DownloadIcon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content side=\"bottom\">Export as CSV</Tooltip.Content>\n\t</Tooltip.Root>\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Delete\">\n\t\t\t\t\t<Trash2Icon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content side=\"right\">Delete for everyone</Tooltip.Content>\n\t</Tooltip.Root>\n</div>\n","examples/alert-dialog.svelte":"<script lang=\"ts\">\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport * as AlertDialog from \"#lib/components/ui/alert-dialog/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AlertDialog.Root>\n\t<AlertDialog.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"destructive\">Delete project</Button>\n\t\t{/snippet}\n\t</AlertDialog.Trigger>\n\t<AlertDialog.Content>\n\t\t<AlertDialog.Header>\n\t\t\t<AlertDialog.Media>\n\t\t\t\t<Trash2Icon />\n\t\t\t</AlertDialog.Media>\n\t\t\t<AlertDialog.Title>Delete \"Website redesign\"?</AlertDialog.Title>\n\t\t\t<AlertDialog.Description>\n\t\t\t\tThe project and its 48 files are deleted for every member. This can't be\n\t\t\t\tundone.\n\t\t\t</AlertDialog.Description>\n\t\t</AlertDialog.Header>\n\t\t<AlertDialog.Footer>\n\t\t\t<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t\t\t<AlertDialog.Action\n\t\t\t\tvariant=\"destructive\"\n\t\t\t\tonclick={() => toast.success(\"Project deleted.\")}\n\t\t\t>\n\t\t\t\tDelete\n\t\t\t</AlertDialog.Action>\n\t\t</AlertDialog.Footer>\n\t</AlertDialog.Content>\n</AlertDialog.Root>\n","examples/document-title.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<Input\n\tlabel=\"Page title\"\n\tdescription=\"The header above and this browser tab follow as you type.\"\n\tbind:value={title.current}\n/>\n","examples/range-calendar.svelte":"<script lang=\"ts\">\n\timport {\n\t\ttype DateValue,\n\t\tgetLocalTimeZone,\n\t\ttoday,\n\t} from \"@internationalized/date\";\n\n\timport { RangeCalendar } from \"#lib/components/ui/range-calendar/index.js\";\n\n\tconst start = today(getLocalTimeZone());\n\tlet value = $state<{\n\t\tstart: DateValue | undefined;\n\t\tend: DateValue | undefined;\n\t}>({\n\t\tstart,\n\t\tend: start.add({ days: 6 }),\n\t});\n</script>\n\n<div class=\"flex flex-wrap items-start gap-6\">\n\t<RangeCalendar bind:value numberOfMonths={2} class=\"rounded-md border\" />\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tTrip: {value.start?.toString() ?? \"…\"} → {value.end?.toString() ?? \"…\"}\n\t</p>\n</div>\n","examples/bottom-nav.svelte":"<script lang=\"ts\">\n\timport { page } from \"$app/state\";\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport BottomNav from \"#lib/components/blocks/bottom-nav.svelte\";\n\n\tconst items = [\n\t\t{ href: \"#home\", label: \"Home\", icon: HouseIcon },\n\t\t{ href: \"#projects\", label: \"Projects\", icon: FolderIcon },\n\t\t{ href: \"#inbox\", label: \"Inbox\", icon: BellIcon },\n\t\t{ href: \"#account\", label: \"Account\", icon: UserRoundIcon },\n\t];\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tPhones only, fixed to the bottom of the screen: see it in the phone frame, or\n\ton a phone. Leave about 8rem of bottom padding on the page so the last row\n\tisn't hidden behind it. Pass <code>isActive</code> when a destination owns more\n\tthan its own href.\n</p>\n<BottomNav\n\t{items}\n\tisActive={(_pathname, href) => href === (page.url.hash || \"#home\")}\n/>\n","examples/tabs.svelte":"<script lang=\"ts\">\n\timport * as Tabs from \"#lib/components/ui/tabs/index.js\";\n\n\tlet tab = $state(\"projects\");\n</script>\n\n<div class=\"grid gap-8\">\n\t<Tabs.Root bind:value={tab}>\n\t\t<Tabs.List>\n\t\t\t<Tabs.Trigger value=\"projects\">Projects</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"activity\">Activity</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"members\">Members</Tabs.Trigger>\n\t\t</Tabs.List>\n\t\t<Tabs.Content value=\"projects\" class=\"text-sm\">\n\t\t\t12 projects, 4 archived.\n\t\t</Tabs.Content>\n\t\t<Tabs.Content value=\"activity\" class=\"text-sm\">\n\t\t\tSam commented on the roadmap.\n\t\t</Tabs.Content>\n\t\t<Tabs.Content value=\"members\" class=\"text-sm\">\n\t\t\tAlex, Sam, Lou and you.\n\t\t</Tabs.Content>\n\t</Tabs.Root>\n\t<Tabs.Root value=\"week\">\n\t\t<Tabs.List variant=\"line\">\n\t\t\t<Tabs.Trigger value=\"week\">This week</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"month\">This month</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"year\" disabled>This year</Tabs.Trigger>\n\t\t</Tabs.List>\n\t</Tabs.Root>\n</div>\n","examples/option-group.svelte":"<script lang=\"ts\">\n\timport BookOpenIcon from \"@lucide/svelte/icons/book-open\";\n\timport CodeIcon from \"@lucide/svelte/icons/code\";\n\timport TypeIcon from \"@lucide/svelte/icons/type\";\n\n\timport OptionGroup from \"#lib/components/blocks/option-group.svelte\";\n\n\tconst fonts = [\n\t\t{\n\t\t\tvalue: \"default\",\n\t\t\tlabel: \"Default\",\n\t\t\tdescription: \"The app's own typefaces.\",\n\t\t\ticon: TypeIcon,\n\t\t},\n\t\t{\n\t\t\tvalue: \"serif\",\n\t\t\tlabel: \"Serif\",\n\t\t\tdescription: \"A classic book face for a calmer read.\",\n\t\t\ticon: BookOpenIcon,\n\t\t},\n\t\t{\n\t\t\tvalue: \"mono\",\n\t\t\tlabel: \"Mono\",\n\t\t\tdescription: \"Every character the same width.\",\n\t\t\ticon: CodeIcon,\n\t\t},\n\t];\n\n\tconst accents = [\n\t\t{ value: \"blue\", label: \"Blue\", color: \"oklch(0.6 0.19 255)\" },\n\t\t{ value: \"green\", label: \"Green\", color: \"oklch(0.6 0.14 165)\" },\n\t\t{ value: \"rose\", label: \"Rose\", color: \"oklch(0.6 0.2 12)\" },\n\t];\n\n\tlet font = $state(\"default\");\n\tlet accent = $state(\"blue\");\n</script>\n\n<div class=\"grid gap-6\">\n\t<OptionGroup\n\t\tname=\"font\"\n\t\tlegend=\"Font\"\n\t\toptions={fonts}\n\t\tbind:value={font}\n\t\tonchange={() => {}}\n\t/>\n\t<OptionGroup\n\t\tname=\"accent\"\n\t\tlegend=\"Accent\"\n\t\toptions={accents}\n\t\tbind:value={accent}\n\t\tonchange={() => {}}\n\t>\n\t\t{#snippet swatch(option)}\n\t\t\t<span\n\t\t\t\tclass=\"size-5 rounded-full\"\n\t\t\t\tstyle:background={accents.find((item) => item.value === option.value)\n\t\t\t\t\t?.color}\n\t\t\t></span>\n\t\t{/snippet}\n\t</OptionGroup>\n</div>\n","examples/textarea.svelte":"<script lang=\"ts\">\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Textarea } from \"#lib/components/ui/textarea/index.js\";\n\n\tlet message = $state(\"\");\n</script>\n\n<Field.Group>\n\t<Field.Field>\n\t\t<Field.Label for=\"message\">Message</Field.Label>\n\t\t<Textarea\n\t\t\tid=\"message\"\n\t\t\tbind:value={message}\n\t\t\tmaxlength={200}\n\t\t\tplaceholder=\"Write a message...\"\n\t\t/>\n\t\t<Field.Description>{message.length} / 200 characters</Field.Description>\n\t</Field.Field>\n\t<Field.Field>\n\t\t<Field.Label for=\"archived-message\">Archived message</Field.Label>\n\t\t<Textarea id=\"archived-message\" value=\"This thread is closed.\" disabled />\n\t</Field.Field>\n</Field.Group>\n","examples/appearance.+layout.svelte":"<script lang=\"ts\">\n\timport { ModeWatcher } from \"mode-watcher\";\n\n\timport { appearanceBootScript } from \"#lib/appearance.js\";\n\n\tconst { children, data } = $props();\n</script>\n\n<svelte:head>\n\t{@html appearanceBootScript(data.appearance)}\n</svelte:head>\n\n<ModeWatcher defaultMode={data.appearance.theme} />\n{@render children()}\n","examples/slider.svelte":"<script lang=\"ts\">\n\timport { Slider } from \"#lib/components/ui/slider/index.js\";\n\n\tlet limit = $state(450);\n\tlet range = $state([20, 80]);\n</script>\n\n<div class=\"grid gap-8\">\n\t<div class=\"grid gap-3\">\n\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t<span>Storage limit</span>\n\t\t\t<span class=\"tabular\">{limit} GB</span>\n\t\t</div>\n\t\t<Slider type=\"single\" bind:value={limit} max={1000} step={10} />\n\t</div>\n\t<div class=\"grid gap-3\">\n\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t<span>File size between</span>\n\t\t\t<span class=\"tabular\">{range[0]} MB and {range[1]} MB</span>\n\t\t</div>\n\t\t<Slider type=\"multiple\" bind:value={range} max={200} step={5} />\n\t</div>\n\t<Slider type=\"single\" value={30} disabled />\n</div>\n","examples/stepper.svelte":"<script lang=\"ts\">\n\timport FolderPlusIcon from \"@lucide/svelte/icons/folder-plus\";\n\timport ListChecksIcon from \"@lucide/svelte/icons/list-checks\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport Stepper from \"#lib/components/blocks/stepper.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tconst steps = [\n\t\t{\n\t\t\tlabel: \"Basics\",\n\t\t\tdescription: \"Give the project a name people will recognize.\",\n\t\t\ticon: FolderPlusIcon,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Team\",\n\t\t\tdescription: \"Invite someone to work on it with you.\",\n\t\t\ticon: UsersIcon,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Review\",\n\t\t\tdescription: \"Check everything before creating it.\",\n\t\t\ticon: ListChecksIcon,\n\t\t},\n\t];\n\n\tlet active = $state(0);\n\tlet name = $state(\"\");\n\tlet summary = $state(\"\");\n\tlet invite = $state(\"\");\n\tlet attempted = $state(false);\n\n\tconst nameMissing = $derived(attempted && name.trim() === \"\");\n\n\tfunction onnext(step: number) {\n\t\tif (step === 0) {\n\t\t\tattempted = true;\n\t\t\treturn name.trim() !== \"\";\n\t\t}\n\t\treturn true;\n\t}\n\n\tfunction create() {\n\t\ttoast.success(\"Project created.\", { description: name });\n\t}\n</script>\n\n<Stepper {steps} bind:active {onnext}>\n\t<div class=\"grid gap-5\" hidden={active !== 0}>\n\t\t<Input\n\t\t\tlabel=\"Name\"\n\t\t\tplaceholder=\"Website redesign\"\n\t\t\terror={nameMissing ? \"Give the project a name.\" : undefined}\n\t\t\tbind:value={name}\n\t\t/>\n\t\t<Input\n\t\t\tlabel=\"Summary\"\n\t\t\tplaceholder=\"What it's about, in one line\"\n\t\t\tbind:value={summary}\n\t\t/>\n\t</div>\n\n\t<div class=\"grid gap-5\" hidden={active !== 1}>\n\t\t<Input\n\t\t\tlabel=\"Email\"\n\t\t\ttype=\"email\"\n\t\t\tplaceholder=\"sam@example.com\"\n\t\t\tdescription=\"Optional, you can invite people later.\"\n\t\t\tbind:value={invite}\n\t\t/>\n\t</div>\n\n\t<dl class=\"grid gap-3 text-sm\" hidden={active !== 2}>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Name</dt>\n\t\t\t<dd class=\"font-medium\">{name}</dd>\n\t\t</div>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Summary</dt>\n\t\t\t<dd class=\"font-medium\">{summary || \"None\"}</dd>\n\t\t</div>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Invited</dt>\n\t\t\t<dd class=\"font-medium\">{invite || \"Nobody yet\"}</dd>\n\t\t</div>\n\t</dl>\n\n\t{#snippet finish()}\n\t\t<Button class=\"glow h-11 rounded-full px-5\" onclick={create}>\n\t\t\tCreate project\n\t\t</Button>\n\t{/snippet}\n</Stepper>\n","examples/context-menu.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport * as ContextMenu from \"#lib/components/ui/context-menu/index.js\";\n\n\tlet showArchived = $state(false);\n\tlet sort = $state(\"date\");\n</script>\n\n<ContextMenu.Root>\n\t<ContextMenu.Trigger\n\t\tclass=\"text-muted-foreground flex h-36 w-full items-center justify-center rounded-lg border border-dashed text-sm\"\n\t>\n\t\tRight-click (or long-press) the file list\n\t</ContextMenu.Trigger>\n\t<ContextMenu.Content class=\"w-56\">\n\t\t<ContextMenu.Item>\n\t\t\t<PencilIcon /> Edit\n\t\t\t<ContextMenu.Shortcut>⌘E</ContextMenu.Shortcut>\n\t\t</ContextMenu.Item>\n\t\t<ContextMenu.Item><CopyIcon /> Duplicate</ContextMenu.Item>\n\t\t<ContextMenu.Sub>\n\t\t\t<ContextMenu.SubTrigger>Move to project</ContextMenu.SubTrigger>\n\t\t\t<ContextMenu.SubContent>\n\t\t\t\t<ContextMenu.Item>Website redesign</ContextMenu.Item>\n\t\t\t\t<ContextMenu.Item>Mobile app</ContextMenu.Item>\n\t\t\t</ContextMenu.SubContent>\n\t\t</ContextMenu.Sub>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.CheckboxItem bind:checked={showArchived}>\n\t\t\tShow archived\n\t\t</ContextMenu.CheckboxItem>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.Group>\n\t\t\t<ContextMenu.GroupHeading>Sort by</ContextMenu.GroupHeading>\n\t\t\t<ContextMenu.RadioGroup bind:value={sort}>\n\t\t\t\t<ContextMenu.RadioItem value=\"date\">Date</ContextMenu.RadioItem>\n\t\t\t\t<ContextMenu.RadioItem value=\"name\">Name</ContextMenu.RadioItem>\n\t\t\t</ContextMenu.RadioGroup>\n\t\t</ContextMenu.Group>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.Item variant=\"destructive\"\n\t\t\t><Trash2Icon /> Delete</ContextMenu.Item\n\t\t>\n\t</ContextMenu.Content>\n</ContextMenu.Root>\n","examples/breadcrumb.svelte":"<script lang=\"ts\">\n\timport * as Breadcrumb from \"#lib/components/ui/breadcrumb/index.js\";\n</script>\n\n<Breadcrumb.Root>\n\t<Breadcrumb.List>\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Link href=\"#\">Groups</Breadcrumb.Link>\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Ellipsis />\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Link href=\"#\">Lisbon trip</Breadcrumb.Link>\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Page>Dinner at Ramiro</Breadcrumb.Page>\n\t\t</Breadcrumb.Item>\n\t</Breadcrumb.List>\n</Breadcrumb.Root>\n","examples/table.svelte":"<script lang=\"ts\">\n\timport * as Table from \"#lib/components/ui/table/index.js\";\n\n\tconst files = [\n\t\t{ id: 1, name: \"Roadmap.pdf\", owner: \"Alex\", date: \"Mar 12\", size: 2.4 },\n\t\t{\n\t\t\tid: 2,\n\t\t\tname: \"Brand assets.zip\",\n\t\t\towner: \"Sam\",\n\t\t\tdate: \"Mar 14\",\n\t\t\tsize: 118,\n\t\t},\n\t\t{ id: 3, name: \"Notes.md\", owner: \"Lou\", date: \"Mar 15\", size: 0.2 },\n\t];\n\n\tconst total = files.reduce((sum, file) => sum + file.size, 0);\n</script>\n\n<Table.Root>\n\t<Table.Caption>Shared files, updated in March.</Table.Caption>\n\t<Table.Header>\n\t\t<Table.Row>\n\t\t\t<Table.Head>File</Table.Head>\n\t\t\t<Table.Head>Owner</Table.Head>\n\t\t\t<Table.Head>Modified</Table.Head>\n\t\t\t<Table.Head class=\"text-right\">Size</Table.Head>\n\t\t</Table.Row>\n\t</Table.Header>\n\t<Table.Body>\n\t\t{#each files as file (file.id)}\n\t\t\t<Table.Row>\n\t\t\t\t<Table.Cell class=\"font-medium\">{file.name}</Table.Cell>\n\t\t\t\t<Table.Cell>{file.owner}</Table.Cell>\n\t\t\t\t<Table.Cell>{file.date}</Table.Cell>\n\t\t\t\t<Table.Cell class=\"text-right tabular\">\n\t\t\t\t\t{file.size.toFixed(1)} MB\n\t\t\t\t</Table.Cell>\n\t\t\t</Table.Row>\n\t\t{/each}\n\t</Table.Body>\n\t<Table.Footer>\n\t\t<Table.Row>\n\t\t\t<Table.Cell colspan={3}>Total</Table.Cell>\n\t\t\t<Table.Cell class=\"text-right tabular\">{total.toFixed(1)} MB</Table.Cell>\n\t\t</Table.Row>\n\t</Table.Footer>\n</Table.Root>\n","examples/telemetry.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: started from <code>instrumentation.server.ts</code>, which runs\n\t\tbefore the app. With <code>tracing.server</code> on, SvelteKit's own spans for\n\t\thandle, load, actions and remote functions are exported with yours, and the logger\n\t\tstamps every JSON line with the active trace.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:01:58.102</span\n\t\t> <span class=\"text-sky-400\">INFO </span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Telemetry]</span\n\t\t> Tracing on <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} endpoint: <span class=\"text-emerald-400\"\n\t\t\t\t>'http://collector:4318'</span\n\t\t\t>, serviceName: <span class=\"text-emerald-400\">'acme'</span> {\"}\"}</span\n\t\t>\n\n<span class=\"text-neutral-500\">trace 1ac71cda…</span>\n sveltekit.handle.root <span class=\"text-neutral-500\">41ms</span>\n └─ sveltekit.load <span class=\"text-neutral-500\">29ms</span>\n └─ projects.import <span class=\"text-neutral-500\">22ms</span\n\t\t></pre>\n</div>\n","examples/utils.svelte":"<script lang=\"ts\">\n\timport { cn } from \"#lib/utils.js\";\n\n\tlet urgent = $state(false);\n</script>\n\n<button\n\ttype=\"button\"\n\tonclick={() => (urgent = !urgent)}\n\tclass={cn(\n\t\t\"bg-muted rounded-xl px-4 py-2 text-sm font-medium\",\n\t\turgent && \"bg-destructive text-white\",\n\t)}\n>\n\t{urgent ? \"Urgent\" : \"Normal\"}: click to toggle\n</button>\n","examples/time-series-chart.svelte":"<script lang=\"ts\">\n\timport TimeSeriesChart, {\n\t\ttype TimeSeries,\n\t} from \"#lib/components/blocks/time-series-chart.svelte\";\n\n\tconst days = Array.from(\n\t\t{ length: 30 },\n\t\t(_, index) => new Date(2026, 8, 1 + index),\n\t);\n\n\tfunction wave(index: number, base: number, swing: number) {\n\t\tconst weekend = [0, 6].includes(days[index]?.getDay() ?? 1) ? 0.7 : 1;\n\t\tconst ripple = ((index * 37) % 11) / 11 - 0.5;\n\t\treturn Math.round(\n\t\t\t(base + swing * Math.sin(index / 4) + (swing / 2) * ripple) * weekend,\n\t\t);\n\t}\n\n\tconst traffic: TimeSeries[] = [\n\t\t{\n\t\t\tname: \"Visitors\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: wave(index, 420 + index * 4, 60),\n\t\t\t})),\n\t\t},\n\t\t{\n\t\t\tname: \"Sign-ups\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: index === 17 || index === 18 ? null : wave(index, 110, 30),\n\t\t\t})),\n\t\t},\n\t];\n\n\tconst uploads: TimeSeries[] = [\n\t\t{\n\t\t\tname: \"Uploads\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: wave(index, 64, 18),\n\t\t\t})),\n\t\t},\n\t];\n</script>\n\n<div class=\"grid w-full gap-10\">\n\t<TimeSeriesChart\n\t\ttitle=\"Visitors and sign-ups\"\n\t\tdescription=\"September, per day. Sign-ups weren't tracked on the 18th and 19th.\"\n\t\tseries={traffic}\n\t/>\n\t<TimeSeriesChart\n\t\ttitle=\"Daily uploads\"\n\t\tkind=\"bar\"\n\t\theight={200}\n\t\tseries={uploads}\n\t/>\n</div>\n","examples/toggle.svelte":"<script lang=\"ts\">\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport StarIcon from \"@lucide/svelte/icons/star\";\n\n\timport { Toggle } from \"#lib/components/ui/toggle/index.js\";\n\n\tlet starred = $state(false);\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Toggle bind:pressed={starred} aria-label=\"Star this group\">\n\t\t<StarIcon class={starred ? \"fill-current\" : \"\"} />\n\t</Toggle>\n\t<Toggle variant=\"outline\" aria-label=\"Mute notifications\">\n\t\t<BellIcon /> Mute\n\t</Toggle>\n\t<Toggle size=\"sm\" variant=\"outline\">Recurring only</Toggle>\n\t<Toggle size=\"lg\" pressed>Unpaid</Toggle>\n\t<Toggle disabled>Archived</Toggle>\n</div>\n","examples/accordion.svelte":"<script lang=\"ts\">\n\timport * as Accordion from \"#lib/components/ui/accordion/index.js\";\n</script>\n\n<Accordion.Root type=\"single\" value=\"invite\">\n\t<Accordion.Item value=\"invite\">\n\t\t<Accordion.Trigger>How do I invite team members?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tOpen the project settings and send an invite by email. They join with the\n\t\t\trole you pick.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n\t<Accordion.Item value=\"export\">\n\t\t<Accordion.Trigger>Can I export my documents?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tYes. Every document exports to PDF or Markdown from its menu.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n\t<Accordion.Item value=\"delete\">\n\t\t<Accordion.Trigger>What happens when I delete a project?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tIt stays in the trash for 30 days, then it is gone for good with all its\n\t\t\tfiles.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n</Accordion.Root>\n","examples/music-player.svelte":"<script lang=\"ts\">\n\timport MusicPlayer from \"#lib/components/blocks/music-player.svelte\";\n\n\tconst tracks = [\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/2/2a/Gymnopedie_No._1_%28ISRC_USUAN1100787%29.mp3\",\n\t\t\ttitle: \"Gymnopédie No. 1\",\n\t\t\tartist: \"Erik Satie, played by Kevin MacLeod\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/8/82/Nocturne_in_E_flat_major%2C_Op._9_no._2.mp3\",\n\t\t\ttitle: \"Nocturne in E-flat major, Op. 9 No. 2\",\n\t\t\tartist: \"Frédéric Chopin\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/6/63/Clair_de_Lune_-_Wright_Brass_-_United_States_Air_Force_Band_of_Flight.mp3\",\n\t\t\ttitle: \"Clair de Lune\",\n\t\t\tartist: \"Claude Debussy, US Air Force Band of Flight\",\n\t\t},\n\t];\n\n\tlet index = $state(0);\n\tlet paused = $state(true);\n</script>\n\n<div class=\"grid gap-5\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tIt renders in flow, as wide as its container: wrap it in a fixed bar to dock\n\t\tit at the bottom of the screen. From Wikimedia Commons: Satie by Kevin\n\t\tMacLeod under CC BY 3.0, Chopin and Debussy in the public domain.\n\t</p>\n\t<MusicPlayer {tracks} bind:index bind:paused />\n</div>\n","examples/alert.svelte":"<script lang=\"ts\">\n\timport CircleAlertIcon from \"@lucide/svelte/icons/circle-alert\";\n\timport InfoIcon from \"@lucide/svelte/icons/info\";\n\n\timport * as Alert from \"#lib/components/ui/alert/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid gap-3\">\n\t<Alert.Root>\n\t\t<InfoIcon />\n\t\t<Alert.Title>Sync runs every hour</Alert.Title>\n\t\t<Alert.Description>\n\t\t\tChanges made on your other devices show up within the hour.\n\t\t</Alert.Description>\n\t</Alert.Root>\n\t<Alert.Root variant=\"destructive\">\n\t\t<CircleAlertIcon />\n\t\t<Alert.Title>Upload failed</Alert.Title>\n\t\t<Alert.Description>\n\t\t\treport.pdf is larger than the 25 MB limit.\n\t\t</Alert.Description>\n\t\t<Alert.Action>\n\t\t\t<Button size=\"sm\" variant=\"outline\">Retry</Button>\n\t\t</Alert.Action>\n\t</Alert.Root>\n</div>\n","examples/install-prompt.+layout.svelte":"<script lang=\"ts\">\n\timport InstallPrompt from \"#lib/components/blocks/install-prompt.svelte\";\n\n\tconst { children } = $props();\n</script>\n\n{@render children()}\n<InstallPrompt appName=\"Acme\" storageKey=\"acme-install-prompt\">\n\t{#snippet brand()}\n\t\t<img src=\"/icon-192.png\" alt=\"\" class=\"size-14 rounded-2xl\" />\n\t{/snippet}\n</InstallPrompt>\n","examples/command-palette.svelte":"<script lang=\"ts\">\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport SunMoonIcon from \"@lucide/svelte/icons/sun-moon\";\n\timport UserPlusIcon from \"@lucide/svelte/icons/user-plus\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\timport { toggleMode } from \"mode-watcher\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport CommandPalette, {\n\t\ttype CommandGroup,\n\t} from \"#lib/components/blocks/command-palette.svelte\";\n\n\tconst groups: CommandGroup[] = [\n\t\t{\n\t\t\theading: \"Navigation\",\n\t\t\titems: [\n\t\t\t\t{ label: \"Home\", href: \"#home\", icon: HouseIcon },\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Team\",\n\t\t\t\t\thref: \"#team\",\n\t\t\t\t\ticon: UsersIcon,\n\t\t\t\t\tdescription: \"Members and roles\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Settings\",\n\t\t\t\t\thref: \"#settings\",\n\t\t\t\t\ticon: SettingsIcon,\n\t\t\t\t\tkeywords: [\"preferences\", \"account\"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\theading: \"Actions\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tlabel: \"New document\",\n\t\t\t\t\ticon: FileTextIcon,\n\t\t\t\t\tshortcut: \"⌘N\",\n\t\t\t\t\tonSelect: () => toast.success(\"Document created.\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Invite member\",\n\t\t\t\t\ticon: UserPlusIcon,\n\t\t\t\t\tshortcut: \"⌘I\",\n\t\t\t\t\tonSelect: () => toast.success(\"Invite sent.\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Toggle theme\",\n\t\t\t\t\ticon: SunMoonIcon,\n\t\t\t\t\tshortcut: \"⌘D\",\n\t\t\t\t\tkeywords: [\"dark\", \"light\", \"mode\"],\n\t\t\t\t\tonSelect: toggleMode,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n</script>\n\n<CommandPalette {groups} />\n","examples/badge.svelte":"<script lang=\"ts\">\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\n\timport { Badge } from \"#lib/components/ui/badge/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Badge>Active</Badge>\n\t<Badge variant=\"secondary\">Pending</Badge>\n\t<Badge variant=\"outline\">Archived</Badge>\n\t<Badge variant=\"destructive\">Overdue</Badge>\n\t<Badge variant=\"secondary\"\n\t\t><CheckIcon data-icon=\"inline-start\" /> Completed</Badge\n\t>\n\t<Badge href=\"#\">3 new messages</Badge>\n</div>\n","examples/toast.svelte":"<script lang=\"ts\">\n\timport { enhance } from \"$app/forms\";\n\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { saveToast } from \"#lib/toast.js\";\n</script>\n\n<form\n\tmethod=\"POST\"\n\taction=\"?/save\"\n\tuse:enhance={saveToast(\"Profile\")}\n\tclass=\"grid gap-4 sm:grid-cols-[1fr_auto] sm:items-end\"\n>\n\t<Input\n\t\tlabel=\"Name\"\n\t\tname=\"name\"\n\t\tvalue=\"Alex\"\n\t\tdescription=\"Clear it to see the action's error.\"\n\t/>\n\t<Button type=\"submit\" class=\"h-11\">Save</Button>\n</form>\n","examples/radio-group.svelte":"<script lang=\"ts\">\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport * as RadioGroup from \"#lib/components/ui/radio-group/index.js\";\n\n\tlet notify = $state(\"all\");\n</script>\n\n<div class=\"flex flex-col gap-4\">\n\t<RadioGroup.Root bind:value={notify}>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"all\" id=\"notify-all\" />\n\t\t\t<Label for=\"notify-all\">All new messages</Label>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"mentions\" id=\"notify-mentions\" />\n\t\t\t<Label for=\"notify-mentions\">Mentions only</Label>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"none\" id=\"notify-none\" />\n\t\t\t<Label for=\"notify-none\">Nothing</Label>\n\t\t</div>\n\t</RadioGroup.Root>\n\t<p class=\"text-muted-foreground text-sm\">Selected: {notify}</p>\n</div>\n","examples/spinner.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Spinner } from \"#lib/components/ui/spinner/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<Spinner />\n\t<Spinner class=\"size-6\" />\n\t<Spinner class=\"size-8 text-primary\" />\n\t<div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n\t\t<Spinner /> Syncing accounts\n\t</div>\n\t<Button disabled><Spinner /> Importing</Button>\n</div>\n","examples/nav-cards.svelte":"<script lang=\"ts\">\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport FingerprintIcon from \"@lucide/svelte/icons/fingerprint\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport NavCards, {\n\t\ttype SectionTab,\n\t} from \"#lib/components/blocks/nav-cards.svelte\";\n\n\tconst tabs: SectionTab[] = [\n\t\t{\n\t\t\thref: \"#profile\",\n\t\t\tlabel: \"Profile\",\n\t\t\tdescription: \"Your name and the email you sign in with.\",\n\t\t\ticon: UserRoundIcon,\n\t\t},\n\t\t{\n\t\t\thref: \"#security\",\n\t\t\tlabel: \"Security\",\n\t\t\tdescription: \"Password, passkeys and backup codes.\",\n\t\t\ticon: FingerprintIcon,\n\t\t},\n\t\t{\n\t\t\thref: \"#notifications\",\n\t\t\tlabel: \"Notifications\",\n\t\t\tdescription: \"Get told on this device when something happens.\",\n\t\t\ticon: BellIcon,\n\t\t},\n\t];\n</script>\n\n<p class=\"text-muted-foreground hidden text-sm md:block\">\n\tPhones only: narrow the window to see the cards. On desktop the section shows\n\tits tabs instead.\n</p>\n<NavCards {tabs} />\n","examples/document-title.+layout.svelte":"<script lang=\"ts\">\n\timport DocumentTitle from \"#lib/components/blocks/document-title.svelte\";\n\timport { providePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { children } = $props();\n\n\tprovidePageTitle();\n</script>\n\n<DocumentTitle appName=\"Acme\" />\n{@render children()}\n","examples/button.svelte":"<script lang=\"ts\">\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Spinner } from \"#lib/components/ui/spinner/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Button>Primary</Button>\n\t<Button variant=\"secondary\">Secondary</Button>\n\t<Button variant=\"outline\">Outline</Button>\n\t<Button variant=\"ghost\">Ghost</Button>\n\t<Button variant=\"destructive\">Delete</Button>\n\t<Button variant=\"link\">Link</Button>\n\t<Button disabled><Spinner /> Saving</Button>\n\t<Button size=\"icon\" aria-label=\"Add\"><PlusIcon /></Button>\n\t<Button href=\"/\">As a link</Button>\n</div>\n","examples/page-title.+page.svelte":"<script lang=\"ts\">\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { setPageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { data } = $props();\n\n\tsetPageTitle(() => data.project.name, \"/projects\", [\n\t\t{\n\t\t\tlabel: \"New task\",\n\t\t\ticon: PlusIcon,\n\t\t\thref: \"/tasks/new\",\n\t\t\tprimary: true,\n\t\t},\n\t\t{ label: \"Edit project\", icon: PencilIcon, href: \"/projects/edit\" },\n\t]);\n</script>\n","examples/sidebar.svelte":"<script lang=\"ts\">\n\timport BoxIcon from \"@lucide/svelte/icons/box\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport * as Sidebar from \"#lib/components/ui/sidebar/index.js\";\n\n\tconst items = [\n\t\t{ title: \"Overview\", href: \"#overview\", icon: HouseIcon },\n\t\t{ title: \"Projects\", href: \"#projects\", icon: FolderIcon, badge: 12 },\n\t\t{ title: \"Members\", href: \"#members\", icon: UsersIcon },\n\t\t{ title: \"Settings\", href: \"#settings\", icon: SettingsIcon },\n\t];\n\n\tlet active = $state(\"Projects\");\n</script>\n\n<Sidebar.Provider class=\"h-96 min-h-0 overflow-hidden rounded-lg border\">\n\t<Sidebar.Root collapsible=\"none\" class=\"border-e\">\n\t\t<Sidebar.Header>\n\t\t\t<div class=\"flex items-center gap-2 p-2 font-semibold\">\n\t\t\t\t<BoxIcon class=\"size-4\" /> Acme\n\t\t\t</div>\n\t\t</Sidebar.Header>\n\t\t<Sidebar.Content>\n\t\t\t<Sidebar.Group>\n\t\t\t\t<Sidebar.GroupLabel>Workspace</Sidebar.GroupLabel>\n\t\t\t\t<Sidebar.GroupContent>\n\t\t\t\t\t<Sidebar.Menu>\n\t\t\t\t\t\t{#each items as item (item.title)}\n\t\t\t\t\t\t\t<Sidebar.MenuItem>\n\t\t\t\t\t\t\t\t<Sidebar.MenuButton isActive={active === item.title}>\n\t\t\t\t\t\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\t\t\tonclick={() => (active = item.title)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<item.icon />\n\t\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t{/snippet}\n\t\t\t\t\t\t\t\t</Sidebar.MenuButton>\n\t\t\t\t\t\t\t\t{#if item.badge}\n\t\t\t\t\t\t\t\t\t<Sidebar.MenuBadge>{item.badge}</Sidebar.MenuBadge>\n\t\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t\t</Sidebar.MenuItem>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</Sidebar.Menu>\n\t\t\t\t</Sidebar.GroupContent>\n\t\t\t</Sidebar.Group>\n\t\t</Sidebar.Content>\n\t\t<Sidebar.Footer>\n\t\t\t<div class=\"p-2 text-sm text-muted-foreground\">alex@example.com</div>\n\t\t</Sidebar.Footer>\n\t</Sidebar.Root>\n\t<div class=\"flex-1 p-6\">\n\t\t<h3 class=\"font-semibold\">{active}</h3>\n\t\t<p class=\"text-sm text-muted-foreground\">Page content goes here.</p>\n\t</div>\n</Sidebar.Provider>\n","examples/menubar.svelte":"<script lang=\"ts\">\n\timport * as Menubar from \"#lib/components/ui/menubar/index.js\";\n\n\tlet showArchived = $state(false);\n\tlet sort = $state(\"name\");\n</script>\n\n<Menubar.Root>\n\t<Menubar.Menu>\n\t\t<Menubar.Trigger>File</Menubar.Trigger>\n\t\t<Menubar.Content>\n\t\t\t<Menubar.Item\n\t\t\t\t>New file <Menubar.Shortcut>⌘N</Menubar.Shortcut></Menubar.Item\n\t\t\t>\n\t\t\t<Menubar.Item\n\t\t\t\t>Duplicate <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item\n\t\t\t>\n\t\t\t<Menubar.Sub>\n\t\t\t\t<Menubar.SubTrigger>Export</Menubar.SubTrigger>\n\t\t\t\t<Menubar.SubContent>\n\t\t\t\t\t<Menubar.Item>PDF</Menubar.Item>\n\t\t\t\t\t<Menubar.Item>Markdown</Menubar.Item>\n\t\t\t\t</Menubar.SubContent>\n\t\t\t</Menubar.Sub>\n\t\t\t<Menubar.Separator />\n\t\t\t<Menubar.Item variant=\"destructive\">Delete</Menubar.Item>\n\t\t</Menubar.Content>\n\t</Menubar.Menu>\n\t<Menubar.Menu>\n\t\t<Menubar.Trigger>View</Menubar.Trigger>\n\t\t<Menubar.Content>\n\t\t\t<Menubar.CheckboxItem bind:checked={showArchived}>\n\t\t\t\tShow hidden files\n\t\t\t</Menubar.CheckboxItem>\n\t\t\t<Menubar.Separator />\n\t\t\t<Menubar.Group>\n\t\t\t\t<Menubar.GroupHeading>Sort by</Menubar.GroupHeading>\n\t\t\t\t<Menubar.RadioGroup bind:value={sort}>\n\t\t\t\t\t<Menubar.RadioItem value=\"name\">Name</Menubar.RadioItem>\n\t\t\t\t\t<Menubar.RadioItem value=\"modified\">Date modified</Menubar.RadioItem>\n\t\t\t\t\t<Menubar.RadioItem value=\"size\">Size</Menubar.RadioItem>\n\t\t\t\t</Menubar.RadioGroup>\n\t\t\t</Menubar.Group>\n\t\t</Menubar.Content>\n\t</Menubar.Menu>\n</Menubar.Root>\n","examples/scroll-area.svelte":"<script lang=\"ts\">\n\timport { ScrollArea } from \"#lib/components/ui/scroll-area/index.js\";\n\timport { Separator } from \"#lib/components/ui/separator/index.js\";\n\n\tconst files = Array.from({ length: 30 }, (_, i) => ({\n\t\tid: i + 1,\n\t\tname: [\"Notes\", \"Roadmap\", \"Report\", \"Brief\", \"Draft\"][i % 5],\n\t\tsize: ((i * 37) % 120) + 8,\n\t}));\n</script>\n\n<ScrollArea class=\"h-72 rounded-md border\">\n\t<div class=\"p-4\">\n\t\t<h4 class=\"mb-4 text-sm font-medium\">Files</h4>\n\t\t{#each files as file (file.id)}\n\t\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t\t<span>{file.name}</span>\n\t\t\t\t<span class=\"text-muted-foreground\">{file.size} KB</span>\n\t\t\t</div>\n\t\t\t<Separator class=\"my-2\" />\n\t\t{/each}\n\t</div>\n</ScrollArea>\n","examples/pagination.svelte":"<script lang=\"ts\">\n\timport * as Pagination from \"#lib/components/ui/pagination/index.js\";\n\n\tlet page = $state(1);\n</script>\n\n<Pagination.Root count={240} perPage={20} bind:page>\n\t{#snippet children({ pages, currentPage })}\n\t\t<Pagination.Content>\n\t\t\t<Pagination.Item>\n\t\t\t\t<Pagination.Previous />\n\t\t\t</Pagination.Item>\n\t\t\t{#each pages as p (p.key)}\n\t\t\t\t<Pagination.Item>\n\t\t\t\t\t{#if p.type === \"ellipsis\"}\n\t\t\t\t\t\t<Pagination.Ellipsis />\n\t\t\t\t\t{:else}\n\t\t\t\t\t\t<Pagination.Link page={p} isActive={currentPage === p.value} />\n\t\t\t\t\t{/if}\n\t\t\t\t</Pagination.Item>\n\t\t\t{/each}\n\t\t\t<Pagination.Item>\n\t\t\t\t<Pagination.Next />\n\t\t\t</Pagination.Item>\n\t\t</Pagination.Content>\n\t{/snippet}\n</Pagination.Root>\n","examples/time-range-picker.svelte":"<script lang=\"ts\">\n\timport TimeRangePicker, {\n\t\ttype TimeRange,\n\t} from \"#lib/components/blocks/time-range-picker.svelte\";\n\timport TimeSeriesChart from \"#lib/components/blocks/time-series-chart.svelte\";\n\n\tconst hour = 3_600_000;\n\tconst day = 24 * hour;\n\n\tlet range = $state<TimeRange>({\n\t\tpreset: \"7d\",\n\t\tstart: new Date(Date.now() - 7 * day),\n\t\tend: new Date(),\n\t});\n\n\tfunction buckets(start: Date, end: Date) {\n\t\tconst span = end.getTime() - start.getTime();\n\t\tconst unit = span <= 2 * day ? \"hour\" : span <= 100 * day ? \"day\" : \"month\";\n\t\tconst cursor = new Date(start);\n\t\tcursor.setMinutes(0, 0, 0);\n\t\tif (unit !== \"hour\") {\n\t\t\tcursor.setHours(0);\n\t\t}\n\t\tif (unit === \"month\") {\n\t\t\tcursor.setDate(1);\n\t\t}\n\t\tconst points: Date[] = [];\n\t\twhile (cursor <= end) {\n\t\t\tpoints.push(new Date(cursor));\n\t\t\tif (unit === \"hour\") {\n\t\t\t\tcursor.setHours(cursor.getHours() + 1);\n\t\t\t} else if (unit === \"day\") {\n\t\t\t\tcursor.setDate(cursor.getDate() + 1);\n\t\t\t} else {\n\t\t\t\tcursor.setMonth(cursor.getMonth() + 1);\n\t\t\t}\n\t\t}\n\t\treturn { unit, points };\n\t}\n\n\tfunction activeUsers(at: Date, unit: string) {\n\t\tif (unit === \"hour\") {\n\t\t\treturn Math.round(\n\t\t\t\t60 + 45 * Math.sin(((at.getHours() - 9) / 24) * 2 * Math.PI),\n\t\t\t);\n\t\t}\n\t\tconst index = Math.floor(at.getTime() / day);\n\t\tconst ripple = ((index * 37) % 11) / 11;\n\t\tconst daily = 900 + 160 * Math.sin(index / 6) + 120 * ripple;\n\t\treturn Math.round(unit === \"month\" ? daily * 30 : daily);\n\t}\n\n\tconst series = $derived.by(() => {\n\t\tconst { unit, points } = buckets(range.start, range.end);\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: \"Active users\",\n\t\t\t\tpoints: points.map((at) => ({ at, value: activeUsers(at, unit) })),\n\t\t\t},\n\t\t];\n\t});\n</script>\n\n<div class=\"grid w-full gap-6\">\n\t<TimeRangePicker bind:value={range} />\n\t<TimeSeriesChart title=\"Active users\" kind=\"area\" {series} />\n</div>\n","examples/copy-field.svelte":"<script lang=\"ts\">\n\timport CopyField from \"#lib/components/blocks/copy-field.svelte\";\n</script>\n\n<CopyField label=\"Copy the token\" value=\"oc_4f9a2c81d7e3b605\" />\n","examples/separator.svelte":"<script lang=\"ts\">\n\timport { Separator } from \"#lib/components/ui/separator/index.js\";\n</script>\n\n<div class=\"grid gap-4\">\n\t<div class=\"grid gap-1\">\n\t\t<h4 class=\"text-sm font-medium\">Marketing site</h4>\n\t\t<p class=\"text-sm text-muted-foreground\">4 members, 23 tasks</p>\n\t</div>\n\t<Separator />\n\t<div class=\"flex h-5 items-center gap-4 text-sm\">\n\t\t<a href=\"#overview\">Overview</a>\n\t\t<Separator orientation=\"vertical\" />\n\t\t<a href=\"#tasks\">Tasks</a>\n\t\t<Separator orientation=\"vertical\" />\n\t\t<a href=\"#settings\">Settings</a>\n\t</div>\n</div>\n","examples/command.svelte":"<script lang=\"ts\">\n\timport CalendarIcon from \"@lucide/svelte/icons/calendar\";\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\timport SearchIcon from \"@lucide/svelte/icons/search\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Command from \"#lib/components/ui/command/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div class=\"grid gap-4\">\n\t<Command.Root class=\"rounded-lg border\">\n\t\t<Command.Input placeholder=\"Search projects and documents...\" />\n\t\t<Command.List>\n\t\t\t<Command.Empty>No results.</Command.Empty>\n\t\t\t<Command.Group heading=\"Projects\">\n\t\t\t\t<Command.Item><FolderIcon /> Website redesign</Command.Item>\n\t\t\t\t<Command.Item><FolderIcon /> Mobile app</Command.Item>\n\t\t\t</Command.Group>\n\t\t\t<Command.Separator />\n\t\t\t<Command.Group heading=\"Documents\">\n\t\t\t\t<Command.Item><FileTextIcon /> Quarterly report</Command.Item>\n\t\t\t\t<Command.Item><FileTextIcon /> Meeting notes</Command.Item>\n\t\t\t</Command.Group>\n\t\t</Command.List>\n\t</Command.Root>\n\n\t<Button variant=\"outline\" class=\"w-fit\" onclick={() => (open = true)}>\n\t\t<SearchIcon /> Open command palette\n\t</Button>\n\t<Command.Dialog bind:open>\n\t\t<Command.Input placeholder=\"Type a command...\" />\n\t\t<Command.List>\n\t\t\t<Command.Empty>No results.</Command.Empty>\n\t\t\t<Command.Group heading=\"Actions\">\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<PlusIcon /> New document\n\t\t\t\t\t<Command.Shortcut>⌘N</Command.Shortcut>\n\t\t\t\t</Command.Item>\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<CalendarIcon /> Schedule a meeting\n\t\t\t\t</Command.Item>\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<SettingsIcon /> Settings\n\t\t\t\t\t<Command.Shortcut>⌘,</Command.Shortcut>\n\t\t\t\t</Command.Item>\n\t\t\t</Command.Group>\n\t\t</Command.List>\n\t</Command.Dialog>\n</div>\n","examples/page-title.app-bar.svelte":"<script lang=\"ts\">\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<header class=\"flex h-14 items-center gap-2 px-4\">\n\t{#if title.backHref}\n\t\t<a href={title.backHref}>Back</a>\n\t{/if}\n\t<h1 class=\"truncate font-semibold\">{title.current}</h1>\n</header>\n","examples/auth-shell.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell heading=\"Sign in\" subheading=\"Welcome back.\">\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<form class=\"grid gap-4\">\n\t\t<Input label=\"Email\" name=\"email\" type=\"email\" autocomplete=\"email\" />\n\t\t<Button type=\"submit\" class=\"h-11\">Continue</Button>\n\t</form>\n\t{#snippet footer()}\n\t\tNo account? Ask your admin.\n\t{/snippet}\n</AuthShell>\n","examples/select.svelte":"<script lang=\"ts\">\n\timport * as Select from \"#lib/components/ui/select/index.js\";\n\n\tconst roles = [\n\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t{ value: \"admin\", label: \"Admin\" },\n\t\t{ value: \"owner\", label: \"Owner\" },\n\t];\n\n\tlet role = $state(\"\");\n\tconst label = $derived(\n\t\troles.find((r) => r.value === role)?.label ?? \"Pick a role\",\n\t);\n</script>\n\n<Select.Root type=\"single\" bind:value={role}>\n\t<Select.Trigger class=\"w-56\">{label}</Select.Trigger>\n\t<Select.Content>\n\t\t<Select.Group>\n\t\t\t<Select.Label>Roles</Select.Label>\n\t\t\t{#each roles as r (r.value)}\n\t\t\t\t<Select.Item value={r.value} label={r.label}>{r.label}</Select.Item>\n\t\t\t{/each}\n\t\t</Select.Group>\n\t</Select.Content>\n</Select.Root>\n","examples/resizable.svelte":"<script lang=\"ts\">\n\timport * as Resizable from \"#lib/components/ui/resizable/index.js\";\n</script>\n\n<div class=\"h-72 rounded-md border\">\n\t<Resizable.PaneGroup direction=\"horizontal\">\n\t\t<Resizable.Pane defaultSize={25} minSize={15}>\n\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t<span class=\"font-medium\">Services</span>\n\t\t\t</div>\n\t\t</Resizable.Pane>\n\t\t<Resizable.Handle withHandle />\n\t\t<Resizable.Pane defaultSize={75}>\n\t\t\t<Resizable.PaneGroup direction=\"vertical\">\n\t\t\t\t<Resizable.Pane defaultSize={60}>\n\t\t\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t\t\t<span class=\"font-medium\">Details</span>\n\t\t\t\t\t</div>\n\t\t\t\t</Resizable.Pane>\n\t\t\t\t<Resizable.Handle withHandle />\n\t\t\t\t<Resizable.Pane defaultSize={40}>\n\t\t\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t\t\t<span class=\"font-medium\">Logs</span>\n\t\t\t\t\t</div>\n\t\t\t\t</Resizable.Pane>\n\t\t\t</Resizable.PaneGroup>\n\t\t</Resizable.Pane>\n\t</Resizable.PaneGroup>\n</div>\n","examples/sonner.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tfunction syncFiles() {\n\t\treturn new Promise((resolve) => setTimeout(resolve, 1500));\n\t}\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Button variant=\"outline\" onclick={() => toast(\"File uploaded.\")}>\n\t\tDefault\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() =>\n\t\t\ttoast.success(\"Invite sent.\", {\n\t\t\t\tdescription: \"Sam will get an email shortly.\",\n\t\t\t})}\n\t>\n\t\tSuccess\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() => toast.error(\"Couldn't reach the server.\")}\n\t>\n\t\tError\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() =>\n\t\t\ttoast.promise(syncFiles(), {\n\t\t\t\tloading: \"Syncing files...\",\n\t\t\t\tsuccess: \"Files up to date.\",\n\t\t\t\terror: \"Sync failed.\",\n\t\t\t})}\n\t>\n\t\tPromise\n\t</Button>\n</div>\n","examples/checkbox.svelte":"<script lang=\"ts\">\n\timport { Checkbox } from \"#lib/components/ui/checkbox/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\n\tlet notify = $state(true);\n</script>\n\n<Field.Group>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"notify\" bind:checked={notify} />\n\t\t<Field.Label for=\"notify\">Email me when someone comments</Field.Label>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"weekly\" />\n\t\t<Field.Content>\n\t\t\t<Field.Label for=\"weekly\">Weekly digest</Field.Label>\n\t\t\t<Field.Description>A summary of activity every Monday.</Field.Description>\n\t\t</Field.Content>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"share\" indeterminate />\n\t\t<Field.Label for=\"share\">Share with everyone</Field.Label>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\" data-disabled>\n\t\t<Checkbox id=\"archived\" disabled />\n\t\t<Field.Label for=\"archived\">Include archived projects</Field.Label>\n\t</Field.Field>\n</Field.Group>\n","examples/empty-state.svelte":"<script lang=\"ts\">\n\timport InboxIcon from \"@lucide/svelte/icons/inbox\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport EmptyState from \"#lib/components/blocks/empty-state.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<EmptyState\n\ticon={InboxIcon}\n\ttitle=\"No messages yet\"\n\tsubtitle=\"Start a conversation and it shows up here.\"\n>\n\t<Button><PlusIcon /> New message</Button>\n</EmptyState>\n","examples/password.svelte":"<script lang=\"ts\">\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { passwordRules, passwordScore } from \"#lib/password.js\";\n\n\tlet password = $state(\"\");\n\n\tconst rules = $derived(passwordRules(password, \"alex@example.com\"));\n\tconst score = $derived(passwordScore(password, \"alex@example.com\"));\n</script>\n\n<div class=\"grid gap-3\">\n\t<Input\n\t\ttype=\"text\"\n\t\tplaceholder=\"Type a password\"\n\t\taria-label=\"Password\"\n\t\tbind:value={password}\n\t/>\n\t<p class=\"text-sm\">Score: {score} / 4</p>\n\t<ul class=\"text-sm\">\n\t\t{#each rules as rule (rule.id)}\n\t\t\t<li class={rule.passed ? \"text-positive\" : \"text-muted-foreground\"}>\n\t\t\t\t{rule.passed ? \"✓\" : \"✗\"}\n\t\t\t\t{rule.label}\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</div>\n","examples/icon-button.svelte":"<script lang=\"ts\">\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport IconButton from \"#lib/components/blocks/icon-button.svelte\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<IconButton label=\"Edit\" icon={PencilIcon} />\n\t<IconButton label=\"Settings\" icon={SettingsIcon} href=\"#\" variant=\"outline\" />\n\t<IconButton label=\"Delete\" icon={Trash2Icon} variant=\"destructive\" />\n</div>\n","examples/logger.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: what a <code>new Logger(\"Projects\")</code> writes. Console\n\t\tformat in development, one JSON line per entry with\n\t\t<code>LOG_FORMAT=json</code>, the active trace and span ids included so a\n\t\tline leads to its trace.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:02:11.408</span\n\t\t> <span class=\"text-sky-400\">INFO </span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Projects]</span\n\t\t> Project created <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} projectId: <span class=\"text-emerald-400\">'p_81f2'</span\n\t\t\t> {\"}\"}</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:11.412</span> <span class=\"text-sky-400\"\n\t\t\t>INFO </span> <span class=\"text-fuchsia-400\">[Http]</span> <b>POST</b\n\t\t> /projects <span class=\"text-emerald-400\">201</span> <span\n\t\t\tclass=\"text-neutral-500\">38ms</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:15.020</span> <span class=\"text-red-400\"\n\t\t\t>ERROR</span\n\t\t> <span class=\"text-fuchsia-400\">[Http]</span> <b>GET</b> /api/stats <span\n\t\t\tclass=\"text-red-400\">500</span\n\t\t> <span class=\"text-neutral-500\">12ms</span></pre>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-300\">{`{\"time\":\"2026-10-29T14:02:11.408Z\",\"level\":\"info\",\"scope\":\"Projects\",\"message\":\"Project created\",\"trace_id\":\"1ac71cdacfc998b028cb0a12aee24333\",\"span_id\":\"c26a99096a72dd42\",\"projectId\":\"p_81f2\"}`}</pre>\n</div>\n","examples/bottom-nav.+layout.svelte":"<script lang=\"ts\">\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport BottomNav from \"#lib/components/blocks/bottom-nav.svelte\";\n\n\tconst { children } = $props();\n\n\tconst items = [\n\t\t{ href: \"/\", label: \"Home\", icon: HouseIcon },\n\t\t{ href: \"/groups\", label: \"Groups\", icon: UsersIcon },\n\t\t{ href: \"/account\", label: \"Account\", icon: UserRoundIcon },\n\t];\n</script>\n\n<main class=\"min-h-dvh pb-32 md:pb-10\">\n\t{@render children()}\n</main>\n<BottomNav {items} />\n","examples/page-title.+layout.svelte":"<script lang=\"ts\">\n\timport { providePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { children } = $props();\n\n\tprovidePageTitle();\n</script>\n\n{@render children()}\n","examples/new-password-fields.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nimport { passwordRules } from \"#lib/password.js\";\n\nexport const actions = {\n\tdefault: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tconst password = String(form.get(\"password\") ?? \"\");\n\t\tconst failed = passwordRules(\n\t\t\tpassword,\n\t\t\tString(form.get(\"email\") ?? \"\"),\n\t\t).filter((rule) => !rule.passed);\n\t\tif (failed.length > 0) {\n\t\t\treturn fail(400, {\n\t\t\t\terrors: { password: failed.map((rule) => rule.label) },\n\t\t\t});\n\t\t}\n\t\tif (form.get(\"confirmPassword\") !== password) {\n\t\t\treturn fail(400, {\n\t\t\t\terrors: { confirmPassword: [\"The passwords don't match.\"] },\n\t\t\t});\n\t\t}\n\t\treturn { saved: true };\n\t},\n} satisfies Actions;\n","examples/switch.svelte":"<script lang=\"ts\">\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport { Switch } from \"#lib/components/ui/switch/index.js\";\n\n\tlet emails = $state(true);\n\tlet digest = $state(false);\n</script>\n\n<div class=\"grid gap-4\">\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"emails\" bind:checked={emails} />\n\t\t<Label for=\"emails\">Email notifications</Label>\n\t</div>\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"digest\" size=\"sm\" bind:checked={digest} />\n\t\t<Label for=\"digest\">Weekly digest {digest ? \"on\" : \"off\"}</Label>\n\t</div>\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"sso\" disabled />\n\t\t<Label for=\"sso\">Single sign-on (Pro plan)</Label>\n\t</div>\n</div>\n","examples/label.svelte":"<script lang=\"ts\">\n\timport { Checkbox } from \"#lib/components/ui/checkbox/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-end gap-6\">\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"project-name\">Project name</Label>\n\t\t<Input id=\"project-name\" placeholder=\"Marketing site\" />\n\t</div>\n\t<div class=\"flex h-9 items-center gap-2\">\n\t\t<Checkbox id=\"project-notify\" />\n\t\t<Label for=\"project-notify\">Notify team members</Label>\n\t</div>\n</div>\n","examples/page-title.svelte":"<script lang=\"ts\">\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tThis page set its title to <strong>{title.current}</strong> and its back\n\tbutton to <code>{title.backHref}</code>. The phone app bar, the desktop header\n\tand the browser tab all read it.\n</p>\n","examples/setting-switch.svelte":"<script lang=\"ts\">\n\timport SettingSwitch from \"#lib/components/blocks/setting-switch.svelte\";\n</script>\n\n<form method=\"POST\" action=\"?/save\">\n\t<SettingSwitch\n\t\tname=\"push\"\n\t\tlabel=\"Push notifications\"\n\t\tdescription=\"On this device only.\"\n\t\tchecked\n\t/>\n\t<SettingSwitch\n\t\tname=\"digest\"\n\t\tlabel=\"Weekly digest\"\n\t\tdescription=\"Every Monday morning.\"\n\t\tchecked={false}\n\t/>\n</form>\n","examples/error-page.svelte":"<script lang=\"ts\">\n\timport ErrorPage from \"#lib/components/blocks/error-page.svelte\";\n\timport * as Tabs from \"#lib/components/ui/tabs/index.js\";\n\n\tlet status = $state(\"404\");\n</script>\n\n<Tabs.Root bind:value={status}>\n\t<Tabs.List>\n\t\t<Tabs.Trigger value=\"404\">404</Tabs.Trigger>\n\t\t<Tabs.Trigger value=\"500\">500</Tabs.Trigger>\n\t</Tabs.List>\n</Tabs.Root>\n<ErrorPage\n\thomeHref=\"/\"\n\tstatus={Number(status)}\n\terror={{\n\t\tmessage: \"The database didn't answer in time.\",\n\t\tstatus: Number(status),\n\t\terrorId: \"7f3a9c21\",\n\t}}\n\tclass=\"min-h-96\"\n/>\n","examples/dialog.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Dialog from \"#lib/components/ui/dialog/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\n\tlet open = $state(false);\n\n\tfunction save(event: SubmitEvent) {\n\t\tevent.preventDefault();\n\t\topen = false;\n\t\ttoast.success(\"Project renamed.\");\n\t}\n</script>\n\n<Dialog.Root bind:open>\n\t<Dialog.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Rename project</Button>\n\t\t{/snippet}\n\t</Dialog.Trigger>\n\t<Dialog.Content>\n\t\t<form class=\"grid gap-6\" onsubmit={save}>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>Rename project</Dialog.Title>\n\t\t\t\t<Dialog.Description>\n\t\t\t\t\tEvery member sees the new name right away.\n\t\t\t\t</Dialog.Description>\n\t\t\t</Dialog.Header>\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"project-name\">Name</Field.Label>\n\t\t\t\t<Input id=\"project-name\" value=\"Website redesign\" />\n\t\t\t</Field.Field>\n\t\t\t<Dialog.Footer>\n\t\t\t\t<Dialog.Close>\n\t\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t\t{/snippet}\n\t\t\t\t</Dialog.Close>\n\t\t\t\t<Button type=\"submit\">Save</Button>\n\t\t\t</Dialog.Footer>\n\t\t</form>\n\t</Dialog.Content>\n</Dialog.Root>\n","examples/button-group.svelte":"<script lang=\"ts\">\n\timport ChevronLeftIcon from \"@lucide/svelte/icons/chevron-left\";\n\timport ChevronRightIcon from \"@lucide/svelte/icons/chevron-right\";\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\n\timport * as ButtonGroup from \"#lib/components/ui/button-group/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-4\">\n\t<ButtonGroup.Root>\n\t\t<Button variant=\"outline\">Day</Button>\n\t\t<Button variant=\"outline\">Week</Button>\n\t\t<Button variant=\"outline\">Month</Button>\n\t</ButtonGroup.Root>\n\t<ButtonGroup.Root>\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Previous month\">\n\t\t\t<ChevronLeftIcon />\n\t\t</Button>\n\t\t<ButtonGroup.Text>October 2026</ButtonGroup.Text>\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Next month\">\n\t\t\t<ChevronRightIcon />\n\t\t</Button>\n\t</ButtonGroup.Root>\n\t<ButtonGroup.Root>\n\t\t<ButtonGroup.Text>https://</ButtonGroup.Text>\n\t\t<Input value=\"acme.com\" aria-label=\"Domain\" />\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Copy\">\n\t\t\t<CopyIcon />\n\t\t</Button>\n\t</ButtonGroup.Root>\n</div>\n","examples/field.svelte":"<script lang=\"ts\">\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Switch } from \"#lib/components/ui/switch/index.js\";\n\n\tlet estimate = $state(\"\");\n\tconst invalid = $derived(estimate !== \"\" && Number(estimate) <= 0);\n</script>\n\n<Field.Set>\n\t<Field.Legend>New task</Field.Legend>\n\t<Field.Description>Visible to everyone in the project.</Field.Description>\n\t<Field.Group class=\"grid gap-6 md:grid-cols-2\">\n\t\t<Field.Field>\n\t\t\t<Field.Label for=\"task-title\">Title</Field.Label>\n\t\t\t<Input id=\"task-title\" placeholder=\"Write the release notes\" />\n\t\t</Field.Field>\n\t\t<Field.Field data-invalid={invalid}>\n\t\t\t<Field.Label for=\"task-estimate\">Estimate</Field.Label>\n\t\t\t<Input\n\t\t\t\tid=\"task-estimate\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tplaceholder=\"0\"\n\t\t\t\taria-invalid={invalid}\n\t\t\t\tbind:value={estimate}\n\t\t\t/>\n\t\t\t{#if invalid}\n\t\t\t\t<Field.Error>The estimate must be greater than zero.</Field.Error>\n\t\t\t{:else}\n\t\t\t\t<Field.Description>In hours.</Field.Description>\n\t\t\t{/if}\n\t\t</Field.Field>\n\t\t<Field.Field orientation=\"horizontal\">\n\t\t\t<Switch id=\"task-recurring\" />\n\t\t\t<Field.Label for=\"task-recurring\">Repeat every week</Field.Label>\n\t\t</Field.Field>\n\t</Field.Group>\n</Field.Set>\n","examples/telemetry.instrumentation.server.ts":"import { Telemetry } from \"#lib/server/telemetry.js\";\n\nnew Telemetry({\n\tserviceName: \"acme\",\n\tserviceVersion: process.env.APP_VERSION,\n\tendpoint: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,\n}).start();\n","examples/fab.svelte":"<script lang=\"ts\">\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport Fab from \"#lib/components/blocks/fab.svelte\";\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tPhones only: narrow the window and it floats bottom right, above the tab bar.\n\tOn desktop the same action is a primary button in the page header.\n</p>\n<Fab label=\"New task\" icon={PlusIcon} onclick={() => toast(\"Fab tapped.\")} />\n","examples/tab-section.svelte":"<script lang=\"ts\">\n\timport { resolve } from \"$app/paths\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tOne real route per tab, under a layout that renders the section. The live\n\t\tdemo below is the code on this page: on desktop it opens the first tab, on\n\t\tphones it lists the tabs as cards.\n\t</p>\n\t<Button href={resolve(\"/section\")}>Open the demo section</Button>\n</div>\n","examples/accent-toggle.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport AccentToggle from \"#lib/components/blocks/accent-toggle.svelte\";\n</script>\n\n<AccentToggle onchange={(accent) => toast(`Accent: ${accent}.`)} />\n","examples/hooks.hooks.server.ts":"import { sequence } from \"@sveltejs/kit/hooks\";\n\nimport { requestLog, unexpectedErrors } from \"#lib/server/hooks.js\";\nimport { Logger } from \"#lib/server/logger.js\";\n\nexport const handle = sequence(requestLog(new Logger(\"Http\")));\n\nexport const handleError = unexpectedErrors(\n\tnew Logger(\"Server\"),\n\t\"Something went wrong.\",\n);\n","examples/tab-nav.svelte":"<script lang=\"ts\">\n\timport FingerprintIcon from \"@lucide/svelte/icons/fingerprint\";\n\timport PaletteIcon from \"@lucide/svelte/icons/palette\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport TabNav from \"#lib/components/blocks/tab-nav.svelte\";\n\n\tconst tabs = [\n\t\t{ href: \"/blocks/tab-nav\", label: \"Profile\", icon: UserRoundIcon },\n\t\t{ href: \"/account/appearance\", label: \"Appearance\", icon: PaletteIcon },\n\t\t{ href: \"/account/security\", label: \"Security\", icon: FingerprintIcon },\n\t];\n</script>\n\n<TabNav {tabs} />\n","examples/responsive-sheet.svelte":"<script lang=\"ts\">\n\timport ResponsiveSheet from \"#lib/components/blocks/responsive-sheet.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div>\n\t<Button variant=\"outline\" onclick={() => (open = true)}>Edit profile</Button>\n</div>\n<ResponsiveSheet\n\tbind:open\n\ttitle=\"Edit profile\"\n\tdescription=\"A dialog on desktop, a drawer on phones.\"\n>\n\t<p class=\"pb-6 text-sm\">Resize the window to see it switch.</p>\n</ResponsiveSheet>\n","examples/card.svelte":"<script lang=\"ts\">\n\timport EllipsisIcon from \"@lucide/svelte/icons/ellipsis\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Card from \"#lib/components/ui/card/index.js\";\n</script>\n\n<div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-3\">\n\t<Card.Root>\n\t\t<Card.Header>\n\t\t\t<Card.Title>Website redesign</Card.Title>\n\t\t\t<Card.Description>4 members · 48 files</Card.Description>\n\t\t\t<Card.Action>\n\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"More\">\n\t\t\t\t\t<EllipsisIcon />\n\t\t\t\t</Button>\n\t\t\t</Card.Action>\n\t\t</Card.Header>\n\t\t<Card.Content>\n\t\t\t<p class=\"text-2xl font-semibold tabular-nums\">12 of 20 tasks</p>\n\t\t\t<p class=\"text-muted-foreground\">Due in 5 days</p>\n\t\t</Card.Content>\n\t\t<Card.Footer class=\"gap-2\">\n\t\t\t<Button variant=\"outline\">Share</Button>\n\t\t\t<Button>New task</Button>\n\t\t</Card.Footer>\n\t</Card.Root>\n\t<Card.Root size=\"sm\">\n\t\t<Card.Header>\n\t\t\t<Card.Title>Quarterly report</Card.Title>\n\t\t\t<Card.Description>Edited 12 minutes ago</Card.Description>\n\t\t</Card.Header>\n\t\t<Card.Content class=\"text-muted-foreground\">\n\t\t\tShared with 3 team members.\n\t\t</Card.Content>\n\t</Card.Root>\n</div>\n","examples/components/date-field.svelte":"<script lang=\"ts\">\n\timport DateField from \"#lib/components/kit/date-field.svelte\";\n\n\tlet start = $state(\"\");\n\tlet due = $state(\"2026-06-15\");\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-2\">\n\t<DateField\n\t\tlabel=\"Start date\"\n\t\tname=\"start\"\n\t\tdescription=\"The first day of the project.\"\n\t\tbind:value={start}\n\t/>\n\t<DateField\n\t\tlabel=\"Due date\"\n\t\tname=\"due\"\n\t\tmin=\"2026-01-01\"\n\t\tmax=\"2026-12-31\"\n\t\trequired\n\t\tbind:value={due}\n\t/>\n\t<DateField\n\t\tlabel=\"Review\"\n\t\tname=\"review\"\n\t\terror=\"Pick a date after the start.\"\n\t/>\n\t<DateField label=\"Created\" value=\"2026-03-02\" disabled />\n</div>\n","examples/components/file-dropzone.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport FileDropzone, {\n\t\ttype FileRejection,\n\t} from \"#lib/components/kit/file-dropzone.svelte\";\n\n\tconst reasons: Record<FileRejection, string> = {\n\t\t\"too-large\": \"is over 10 MB\",\n\t\t\"too-many\": \"is one file too many\",\n\t\ttype: \"isn't an image or a PDF\",\n\t};\n\n\tlet files = $state<File[]>([]);\n</script>\n\n<FileDropzone\n\tlabel=\"Attachments\"\n\tname=\"attachments\"\n\tdescription=\"Images or PDFs, shared with the whole team.\"\n\taccept=\"image/*,.pdf\"\n\tmaxFiles={5}\n\tmaxFileSize={10 * 1024 * 1024}\n\tfolders\n\tbind:files\n\tonreject={({ file, reason }) =>\n\t\ttoast.error(`${file.name} ${reasons[reason]}.`)}\n/>\n","examples/components/avatar-group.svelte":"<script lang=\"ts\">\n\timport AvatarGroup from \"#lib/components/kit/avatar-group.svelte\";\n\n\tconst members = [\n\t\t{ name: \"Alex Martin\" },\n\t\t{ name: \"Sam Lee\" },\n\t\t{ name: \"Jordan Kim\" },\n\t\t{ name: \"Robin Diaz\" },\n\t\t{ name: \"Casey Moreau\" },\n\t\t{ name: \"Taylor Nguyen\" },\n\t];\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<AvatarGroup people={members} size=\"sm\" />\n\t<AvatarGroup people={members} max={3} />\n\t<AvatarGroup people={members.slice(0, 2)} size=\"lg\" />\n</div>\n","examples/components/radio-list.svelte":"<script lang=\"ts\">\n\timport RadioList from \"#lib/components/kit/radio-list.svelte\";\n\n\tlet visibility = $state(\"team\");\n\tlet plan = $state(\"standard\");\n</script>\n\n<div class=\"grid gap-6\">\n\t<RadioList\n\t\tlabel=\"Visibility\"\n\t\tname=\"visibility\"\n\t\tdescription=\"You can change this later.\"\n\t\toptions={[\n\t\t\t{ value: \"private\", label: \"Private\", description: \"Only you.\" },\n\t\t\t{ value: \"team\", label: \"Team\", description: \"Everyone in your team.\" },\n\t\t\t{\n\t\t\t\tvalue: \"public\",\n\t\t\t\tlabel: \"Public\",\n\t\t\t\tdescription: \"Anyone with the link.\",\n\t\t\t\tdisabled: true,\n\t\t\t},\n\t\t]}\n\t\tbind:value={visibility}\n\t/>\n\t<RadioList\n\t\tlabel=\"Plan\"\n\t\tname=\"plan\"\n\t\tvariant=\"cards\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"starter\",\n\t\t\t\tlabel: \"Starter\",\n\t\t\t\tdescription: \"One project, three members.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"standard\",\n\t\t\t\tlabel: \"Standard\",\n\t\t\t\tdescription: \"Ten projects, unlimited members.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"enterprise\",\n\t\t\t\tlabel: \"Enterprise\",\n\t\t\t\tdescription: \"Single sign-on and audit log.\",\n\t\t\t},\n\t\t]}\n\t\tbind:value={plan}\n\t/>\n</div>\n","examples/components/input.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n\n\tlet email = $state(\"\");\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-2\">\n\t<Input\n\t\tlabel=\"Email\"\n\t\tname=\"email\"\n\t\ttype=\"email\"\n\t\tautocomplete=\"email\"\n\t\trequired\n\t\tdescription=\"We send the sign-in link here.\"\n\t\tbind:value={email}\n\t/>\n\t<Input label=\"Password\" name=\"password\" type=\"password\" />\n\t<Input label=\"Project name\" name=\"project\" error=\"This name is taken.\" />\n\t<Input label=\"Read only\" value=\"acme-workspace\" disabled />\n</div>\n","examples/components/menu.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport ExternalLinkIcon from \"@lucide/svelte/icons/external-link\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport Menu from \"#lib/components/kit/menu.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet lastAction = $state(\"Nothing yet\");\n</script>\n\n<div class=\"grid gap-4\">\n\t<div\n\t\tclass=\"bg-card flex w-full items-center justify-between gap-3 rounded-xl border p-3 pl-4\"\n\t>\n\t\t<div class=\"min-w-0\">\n\t\t\t<p class=\"truncate font-medium\">Website redesign</p>\n\t\t\t<p class=\"text-muted-foreground text-sm\">Updated 2 hours ago</p>\n\t\t</div>\n\t\t<Menu\n\t\t\ttitle=\"Website redesign\"\n\t\t\titems={[\n\t\t\t\t{ label: \"Open\", icon: ExternalLinkIcon, href: \"#open\" },\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Rename\",\n\t\t\t\t\ticon: PencilIcon,\n\t\t\t\t\tshortcut: \"R\",\n\t\t\t\t\tonSelect: () => (lastAction = \"Rename\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Duplicate\",\n\t\t\t\t\ticon: CopyIcon,\n\t\t\t\t\tshortcut: \"⌘D\",\n\t\t\t\t\tonSelect: () => (lastAction = \"Duplicate\"),\n\t\t\t\t},\n\t\t\t\t{ label: \"Archive\", disabled: true },\n\t\t\t\t\"separator\",\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Delete\",\n\t\t\t\t\ticon: Trash2Icon,\n\t\t\t\t\tdestructive: true,\n\t\t\t\t\tonSelect: () => (lastAction = \"Delete\"),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</div>\n\t<div class=\"flex flex-wrap items-center gap-3\">\n\t\t<Menu\n\t\t\titems={[\n\t\t\t\t{ label: \"Members\", href: \"#members\" },\n\t\t\t\t{ label: \"Settings\", href: \"#settings\" },\n\t\t\t]}\n\t\t>\n\t\t\t{#snippet trigger({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" class=\"h-11 rounded-xl md:h-9\">\n\t\t\t\t\tTeam\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Menu>\n\t\t<p class=\"text-muted-foreground text-sm\">Last action: {lastAction}</p>\n\t</div>\n</div>\n","examples/components/status-badge.svelte":"<script lang=\"ts\">\n\timport StatusBadge from \"#lib/components/kit/status-badge.svelte\";\n\n\tconst statuses = [\"running\", \"syncing\", \"paused\", \"failed\", \"draft\"] as const;\n</script>\n\n<div class=\"flex flex-wrap gap-2\">\n\t{#each statuses as status (status)}\n\t\t<StatusBadge\n\t\t\t{status}\n\t\t\tpulse={status === \"syncing\"}\n\t\t\ttones={{\n\t\t\t\trunning: \"positive\",\n\t\t\t\tsyncing: \"info\",\n\t\t\t\tpaused: \"warning\",\n\t\t\t\tfailed: \"negative\",\n\t\t\t}}\n\t\t\tlabels={{\n\t\t\t\trunning: \"Running\",\n\t\t\t\tsyncing: \"Syncing\",\n\t\t\t\tpaused: \"Paused\",\n\t\t\t\tfailed: \"Failed\",\n\t\t\t\tdraft: \"Draft\",\n\t\t\t}}\n\t\t/>\n\t{/each}\n</div>\n","examples/components/tabs.svelte":"<script lang=\"ts\">\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport Tabs from \"#lib/components/kit/tabs.svelte\";\n\n\tlet tab = $state(\"files\");\n\n\tconst panels: Record<string, string> = {\n\t\tfiles: \"12 files, last edited this morning.\",\n\t\tmembers: \"5 members can edit this project.\",\n\t\tactivity: \"No activity this week.\",\n\t\tsettings: \"Visibility, integrations and danger zone.\",\n\t\tarchive: \"Nothing archived.\",\n\t};\n</script>\n\n<Tabs\n\tbind:value={tab}\n\titems={[\n\t\t{ value: \"files\", label: \"Files\", icon: FolderIcon, badge: 12 },\n\t\t{ value: \"members\", label: \"Members\", icon: UsersIcon, badge: 5 },\n\t\t{ value: \"activity\", label: \"Activity\" },\n\t\t{ value: \"settings\", label: \"Settings\", icon: SettingsIcon },\n\t\t{ value: \"archive\", label: \"Archive\", disabled: true },\n\t]}\n>\n\t{#snippet children(value)}\n\t\t<p class=\"text-muted-foreground rounded-xl border p-4\">{panels[value]}</p>\n\t{/snippet}\n</Tabs>\n","examples/components/textarea.svelte":"<script lang=\"ts\">\n\timport Textarea from \"#lib/components/kit/textarea.svelte\";\n\n\tlet bio = $state(\"\");\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-2\">\n\t<Textarea\n\t\tlabel=\"Bio\"\n\t\tname=\"bio\"\n\t\tmaxlength={160}\n\t\tdescription=\"Shown on your public profile.\"\n\t\tbind:value={bio}\n\t/>\n\t<Textarea label=\"Notes\" name=\"notes\" rows={4} />\n\t<Textarea\n\t\tlabel=\"Feedback\"\n\t\tname=\"feedback\"\n\t\trequired\n\t\terror=\"Tell us a little more.\"\n\t/>\n\t<Textarea label=\"Read only\" value=\"Archived on import.\" disabled />\n</div>\n","examples/components/accordion.svelte":"<script lang=\"ts\">\n\timport Accordion from \"#lib/components/kit/accordion.svelte\";\n\n\tlet open = $state(\"Who can see a project?\");\n</script>\n\n<Accordion\n\tbind:value={open}\n\titems={[\n\t\t{\n\t\t\ttitle: \"Who can see a project?\",\n\t\t\tcontent:\n\t\t\t\t\"Every member of the workspace. Guests only see the projects they were invited to.\",\n\t\t},\n\t\t{\n\t\t\ttitle: \"Can I restore a deleted file?\",\n\t\t\tcontent:\n\t\t\t\t\"Yes, for 30 days.\\nOpen the project's trash and pick the file to bring back.\",\n\t\t},\n\t\t{\n\t\t\ttitle: \"How do I invite a member?\",\n\t\t\tcontent: \"Open the members page and send an invitation by email.\",\n\t\t},\n\t]}\n/>\n","examples/components/bar-list.svelte":"<script lang=\"ts\">\n\timport FileIcon from \"@lucide/svelte/icons/file\";\n\timport FileImageIcon from \"@lucide/svelte/icons/file-image\";\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport FileVideoIcon from \"@lucide/svelte/icons/file-video\";\n\n\timport BarList from \"#lib/components/kit/bar-list.svelte\";\n</script>\n\n<BarList\n\tmax={4}\n\tformat={(value) => `${value} files`}\n\titems={[\n\t\t{ label: \"Images\", value: 412, icon: FileImageIcon, href: \"#images\" },\n\t\t{ label: \"Documents\", value: 268, icon: FileTextIcon, href: \"#documents\" },\n\t\t{ label: \"Videos\", value: 54, icon: FileVideoIcon, href: \"#videos\" },\n\t\t{ label: \"Spreadsheets\", value: 131, icon: FileIcon },\n\t\t{ label: \"Archives\", value: 17, icon: FileIcon },\n\t\t{ label: \"Other\", value: 9, icon: FileIcon },\n\t]}\n/>\n","examples/components/pagination.svelte":"<script lang=\"ts\">\n\timport Pagination from \"#lib/components/kit/pagination.svelte\";\n\n\tlet page = $state(1);\n\tconst files = Array.from({ length: 236 }, (_, index) => `File ${index + 1}`);\n\tconst perPage = 20;\n\tconst visible = $derived(files.slice((page - 1) * perPage, page * perPage));\n</script>\n\n<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\t{visible[0]} to {visible.at(-1)}\n\t</p>\n\t<Pagination bind:page total={files.length} {perPage} />\n\t<Pagination\n\t\tpage={3}\n\t\ttotal={95}\n\t\tperPage={10}\n\t\thref={(target) => `#page-${target}`}\n\t/>\n</div>\n","examples/components/form.svelte":"<script lang=\"ts\">\n\timport Form, { type FormField } from \"#lib/components/kit/form.svelte\";\n\n\tconst fields: FormField[] = [\n\t\t{ name: \"name\", label: \"Project name\", required: true },\n\t\t{\n\t\t\tname: \"owner\",\n\t\t\ttype: \"email\",\n\t\t\tlabel: \"Owner\",\n\t\t\tautocomplete: \"email\",\n\t\t\tdescription: \"They get the invitations and the weekly digest.\",\n\t\t},\n\t\t{\n\t\t\tname: \"visibility\",\n\t\t\ttype: \"segmented\",\n\t\t\tlabel: \"Visibility\",\n\t\t\toptions: [\n\t\t\t\t{ value: \"private\", label: \"Private\" },\n\t\t\t\t{ value: \"team\", label: \"Team\" },\n\t\t\t\t{ value: \"public\", label: \"Public\" },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tname: \"role\",\n\t\t\ttype: \"select\",\n\t\t\tlabel: \"Default role\",\n\t\t\toptions: [\n\t\t\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t\t\t{ value: \"admin\", label: \"Admin\" },\n\t\t\t],\n\t\t},\n\t\t{ name: \"due\", type: \"date\", label: \"Due date\" },\n\t\t{\n\t\t\tname: \"notify\",\n\t\t\ttype: \"switch\",\n\t\t\tlabel: \"Notify the team\",\n\t\t\tdescription: \"Send an email when the project is created.\",\n\t\t},\n\t\t{\n\t\t\tname: \"description\",\n\t\t\ttype: \"textarea\",\n\t\t\tlabel: \"Description\",\n\t\t\tmaxlength: 280,\n\t\t},\n\t];\n</script>\n\n<Form\n\t{fields}\n\taction=\"?/createProject\"\n\tvalues={{ visibility: \"team\", role: \"editor\", notify: true }}\n\tmessages={{\n\t\tsubmit: \"Create project\",\n\t\tloading: \"Creating the project\",\n\t\tsuccess: \"Project created.\",\n\t}}\n/>\n","examples/components/select.svelte":"<script lang=\"ts\">\n\timport GlobeIcon from \"@lucide/svelte/icons/globe\";\n\timport LockIcon from \"@lucide/svelte/icons/lock\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport Select from \"#lib/components/kit/select.svelte\";\n\n\tlet role = $state(\"editor\");\n\tlet visibility = $state(\"\");\n\tlet country = $state(\"\");\n\n\tconst countries = [\n\t\t\"Belgium\",\n\t\t\"Canada\",\n\t\t\"France\",\n\t\t\"Germany\",\n\t\t\"Italy\",\n\t\t\"Japan\",\n\t\t\"Spain\",\n\t\t\"Switzerland\",\n\t].map((name) => ({ value: name.toLowerCase(), label: name }));\n</script>\n\n<div class=\"grid gap-4 md:grid-cols-2\">\n\t<Select\n\t\tlabel=\"Role\"\n\t\tname=\"role\"\n\t\toptions={[\n\t\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t\t{ value: \"owner\", label: \"Owner\", disabled: true },\n\t\t]}\n\t\tbind:value={role}\n\t/>\n\t<Select\n\t\tlabel=\"Visibility\"\n\t\tname=\"visibility\"\n\t\tplaceholder=\"Who can see it\"\n\t\tdescription=\"You can change this later.\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"private\",\n\t\t\t\tlabel: \"Private\",\n\t\t\t\tdescription: \"Only you\",\n\t\t\t\ticon: LockIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"team\",\n\t\t\t\tlabel: \"Team\",\n\t\t\t\tdescription: \"Everyone in the workspace\",\n\t\t\t\ticon: UsersIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"public\",\n\t\t\t\tlabel: \"Public\",\n\t\t\t\tdescription: \"Anyone with the link\",\n\t\t\t\ticon: GlobeIcon,\n\t\t\t},\n\t\t]}\n\t\tbind:value={visibility}\n\t/>\n\t<Select\n\t\tlabel=\"Country\"\n\t\tname=\"country\"\n\t\tsearchable\n\t\trequired\n\t\toptions={countries}\n\t\tbind:value={country}\n\t/>\n\t<Select label=\"Region\" options={[]} error=\"Pick a country first.\" disabled />\n</div>\n","examples/components/checkbox.svelte":"<script lang=\"ts\">\n\timport Checkbox from \"#lib/components/kit/checkbox.svelte\";\n\n\tlet digest = $state(true);\n</script>\n\n<div class=\"grid gap-2 md:grid-cols-2\">\n\t<Checkbox\n\t\tlabel=\"Weekly digest\"\n\t\tname=\"digest\"\n\t\tdescription=\"A summary of the week's activity, every Monday.\"\n\t\tbind:checked={digest}\n\t/>\n\t<Checkbox\n\t\tlabel=\"I accept the terms\"\n\t\tname=\"terms\"\n\t\trequired\n\t\terror=\"Accept the terms to continue.\"\n\t/>\n\t<Checkbox label=\"Product announcements\" name=\"announcements\" disabled />\n</div>\n","examples/components/switch.svelte":"<script lang=\"ts\">\n\timport Switch from \"#lib/components/kit/switch.svelte\";\n\n\tlet mentions = $state(true);\n\tlet reminders = $state(false);\n</script>\n\n<div class=\"grid gap-2 md:grid-cols-2\">\n\t<Switch\n\t\tlabel=\"Mentions\"\n\t\tname=\"mentions\"\n\t\tdescription=\"Notify me when someone mentions me.\"\n\t\tbind:checked={mentions}\n\t/>\n\t<Switch\n\t\tlabel=\"Reminders\"\n\t\tname=\"reminders\"\n\t\tdescription=\"A nudge the day before a due date.\"\n\t\tbind:checked={reminders}\n\t/>\n\t<Switch\n\t\tlabel=\"Read receipts\"\n\t\tname=\"receipts\"\n\t\tdescription=\"Managed by your administrator.\"\n\t\tchecked\n\t\tdisabled\n\t/>\n</div>\n","examples/components/data-table.svelte":"<script lang=\"ts\">\n\timport DataTable from \"#lib/components/kit/data-table.svelte\";\n\timport StatusBadge from \"#lib/components/kit/status-badge.svelte\";\n\n\tinterface Project {\n\t\tname: string;\n\t\towner: string;\n\t\tstatus: \"active\" | \"paused\" | \"archived\";\n\t\tfiles: number;\n\t\tupdated: Date;\n\t}\n\n\tconst projects: Project[] = [\n\t\t{\n\t\t\tname: \"Website refresh\",\n\t\t\towner: \"Alex Martin\",\n\t\t\tstatus: \"active\",\n\t\t\tfiles: 128,\n\t\t\tupdated: new Date(\"2026-10-21\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Onboarding guide\",\n\t\t\towner: \"Sam Lee\",\n\t\t\tstatus: \"paused\",\n\t\t\tfiles: 42,\n\t\t\tupdated: new Date(\"2026-09-30\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Brand assets\",\n\t\t\towner: \"Jordan Kim\",\n\t\t\tstatus: \"active\",\n\t\t\tfiles: 310,\n\t\t\tupdated: new Date(\"2026-10-27\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Annual report\",\n\t\t\towner: \"Robin Diaz\",\n\t\t\tstatus: \"archived\",\n\t\t\tfiles: 76,\n\t\t\tupdated: new Date(\"2026-03-14\"),\n\t\t},\n\t];\n\n\tconst dateFormat = new Intl.DateTimeFormat(\"en\", {\n\t\tdateStyle: \"medium\",\n\t\ttimeZone: \"UTC\",\n\t});\n</script>\n\n<DataTable\n\trows={projects}\n\trowHref={(project) => `#${project.name.toLowerCase().replaceAll(\" \", \"-\")}`}\n\tcolumns={[\n\t\t{ key: \"name\", label: \"Project\", sortable: true },\n\t\t{ key: \"owner\", label: \"Owner\", hideOnMobile: true },\n\t\t{ key: \"status\", label: \"Status\" },\n\t\t{ key: \"files\", label: \"Files\", align: \"right\", sortable: true },\n\t\t{\n\t\t\tkey: \"updated\",\n\t\t\tlabel: \"Updated\",\n\t\t\talign: \"right\",\n\t\t\tsortable: true,\n\t\t\tformat: (value) => dateFormat.format(value),\n\t\t},\n\t]}\n>\n\t{#snippet cell(project, column, text)}\n\t\t{#if column.key === \"status\"}\n\t\t\t<StatusBadge\n\t\t\t\tstatus={project.status}\n\t\t\t\ttones={{ active: \"positive\", paused: \"warning\", archived: \"neutral\" }}\n\t\t\t\tlabels={{ active: \"Active\", paused: \"Paused\", archived: \"Archived\" }}\n\t\t\t/>\n\t\t{:else}\n\t\t\t{text}\n\t\t{/if}\n\t{/snippet}\n</DataTable>\n","examples/components/breadcrumbs.svelte":"<script lang=\"ts\">\n\timport Breadcrumbs from \"#lib/components/kit/breadcrumbs.svelte\";\n</script>\n\n<div class=\"grid gap-4\">\n\t<Breadcrumbs\n\t\titems={[{ label: \"Projects\", href: \"#projects\" }, { label: \"Website\" }]}\n\t/>\n\t<Breadcrumbs\n\t\titems={[\n\t\t\t{ label: \"Files\", href: \"#files\" },\n\t\t\t{ label: \"Shared\", href: \"#shared\" },\n\t\t\t{ label: \"Design\", href: \"#design\" },\n\t\t\t{ label: \"Assets\", href: \"#assets\" },\n\t\t\t{ label: \"Icons\", href: \"#icons\" },\n\t\t\t{ label: \"Navigation icons\" },\n\t\t]}\n\t/>\n</div>\n","examples/components/checkbox-list.svelte":"<script lang=\"ts\">\n\timport CheckboxList from \"#lib/components/kit/checkbox-list.svelte\";\n\n\tlet channels = $state([\"email\"]);\n\tlet days = $state<string[]>([]);\n</script>\n\n<div class=\"grid gap-6 md:grid-cols-2\">\n\t<CheckboxList\n\t\tlabel=\"Notify me by\"\n\t\tname=\"channels\"\n\t\tdescription=\"Pick as many as you like.\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"email\",\n\t\t\t\tlabel: \"Email\",\n\t\t\t\tdescription: \"Sent to your account address.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"push\",\n\t\t\t\tlabel: \"Push\",\n\t\t\t\tdescription: \"On every signed-in device.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"sms\",\n\t\t\t\tlabel: \"Text message\",\n\t\t\t\tdescription: \"Add a phone number first.\",\n\t\t\t\tdisabled: true,\n\t\t\t},\n\t\t]}\n\t\tbind:value={channels}\n\t/>\n\t<CheckboxList\n\t\tlabel=\"Working days\"\n\t\tname=\"days\"\n\t\torientation=\"horizontal\"\n\t\trequired\n\t\terror={days.length === 0 ? \"Pick at least one day.\" : undefined}\n\t\toptions={[\n\t\t\t{ value: \"mon\", label: \"Mon\" },\n\t\t\t{ value: \"tue\", label: \"Tue\" },\n\t\t\t{ value: \"wed\", label: \"Wed\" },\n\t\t\t{ value: \"thu\", label: \"Thu\" },\n\t\t\t{ value: \"fri\", label: \"Fri\" },\n\t\t]}\n\t\tbind:value={days}\n\t/>\n</div>\n","examples/components/segmented-control.svelte":"<script lang=\"ts\">\n\timport EyeIcon from \"@lucide/svelte/icons/eye\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport ShieldIcon from \"@lucide/svelte/icons/shield\";\n\n\timport SegmentedControl from \"#lib/components/kit/segmented-control.svelte\";\n\n\tlet role = $state(\"editor\");\n\tlet period = $state(\"week\");\n</script>\n\n<div class=\"grid gap-6 md:grid-cols-2\">\n\t<SegmentedControl\n\t\tlabel=\"Role\"\n\t\tname=\"role\"\n\t\tdescription=\"Admins can invite and remove members.\"\n\t\toptions={[\n\t\t\t{ value: \"viewer\", label: \"Viewer\", icon: EyeIcon },\n\t\t\t{ value: \"editor\", label: \"Editor\", icon: PencilIcon },\n\t\t\t{ value: \"admin\", label: \"Admin\", icon: ShieldIcon },\n\t\t]}\n\t\tbind:value={role}\n\t/>\n\t<SegmentedControl\n\t\tlabel=\"Period\"\n\t\tname=\"period\"\n\t\toptions={[\n\t\t\t{ value: \"day\", label: \"Day\" },\n\t\t\t{ value: \"week\", label: \"Week\" },\n\t\t\t{ value: \"month\", label: \"Month\" },\n\t\t]}\n\t\tbind:value={period}\n\t/>\n</div>\n","examples/components/form.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nexport const actions = {\n\tcreateProject: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tconst name = String(form.get(\"name\") ?? \"\").trim();\n\t\tconst owner = String(form.get(\"owner\") ?? \"\").trim();\n\t\tconst errors: Record<string, string[]> = {};\n\t\tif (!name) {\n\t\t\terrors.name = [\"Give the project a name.\"];\n\t\t}\n\t\tif (owner && !owner.includes(\"@\")) {\n\t\t\terrors.owner = [\"That doesn't look like an email address.\"];\n\t\t}\n\t\tif (Object.keys(errors).length > 0) {\n\t\t\treturn fail(400, { errors });\n\t\t}\n\t\treturn { created: name };\n\t},\n} satisfies Actions;\n","examples/components/confirm-dialog.svelte":"<script lang=\"ts\">\n\timport ConfirmDialog from \"#lib/components/kit/confirm-dialog.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet archiveOpen = $state(false);\n\tlet deleteOpen = $state(false);\n\tlet status = $state(\"3 files in this folder\");\n\n\tfunction wait(milliseconds: number) {\n\t\treturn new Promise((resolve) => setTimeout(resolve, milliseconds));\n\t}\n</script>\n\n<div class=\"flex flex-wrap items-center gap-3\">\n\t<Button\n\t\tvariant=\"outline\"\n\t\tclass=\"h-11 rounded-xl md:h-9\"\n\t\tonclick={() => (archiveOpen = true)}\n\t>\n\t\tArchive project\n\t</Button>\n\t<Button\n\t\tvariant=\"destructive\"\n\t\tclass=\"h-11 rounded-xl md:h-9\"\n\t\tonclick={() => (deleteOpen = true)}\n\t>\n\t\tDelete folder\n\t</Button>\n\t<p class=\"text-muted-foreground text-sm\">{status}</p>\n</div>\n\n<ConfirmDialog\n\tbind:open={archiveOpen}\n\ttitle=\"Archive this project?\"\n\tdescription=\"Members keep read access. You can restore it later.\"\n\tconfirmLabel=\"Archive\"\n\tonconfirm={() => (status = \"Project archived\")}\n/>\n\n<ConfirmDialog\n\tbind:open={deleteOpen}\n\ttitle=\"Delete this folder?\"\n\tdescription=\"The folder and its 3 files are removed for every member.\"\n\tconfirmLabel=\"Delete\"\n\tdestructive\n\tonconfirm={async () => {\n\t\tawait wait(1500);\n\t\tstatus = \"Folder deleted\";\n\t}}\n/>\n","routes/section/tabs.ts":"import { resolve } from \"$app/paths\";\nimport PaletteIcon from \"@lucide/svelte/icons/palette\";\nimport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\nimport type { SectionTab } from \"#lib/components/blocks/nav-cards.svelte\";\n\nexport const tabs: SectionTab[] = [\n\t{\n\t\thref: resolve(\"/section/profile\"),\n\t\tlabel: \"Profile\",\n\t\tdescription: \"Your name and the email you sign in with.\",\n\t\ticon: UserRoundIcon,\n\t},\n\t{\n\t\thref: resolve(\"/section/appearance\"),\n\t\tlabel: \"Appearance\",\n\t\tdescription: \"Light, dark, or whatever the device says.\",\n\t\ticon: PaletteIcon,\n\t},\n];\n","routes/section/+layout.svelte":"<script lang=\"ts\">\n\timport { resolve } from \"$app/paths\";\n\n\timport TabSection from \"#lib/components/blocks/tab-section.svelte\";\n\n\timport { tabs } from \"./tabs.js\";\n\n\tconst { children } = $props();\n</script>\n\n<TabSection\n\ttitle=\"Section\"\n\tindexHref={resolve(\"/section\")}\n\tbackHref={resolve(\"/[group]/[slug]\", {\n\t\tgroup: \"blocks\",\n\t\tslug: \"tab-section\",\n\t})}\n\t{tabs}\n>\n\t{@render children()}\n</TabSection>\n","routes/section/+page.svelte":"<script lang=\"ts\">\n\timport NavCards from \"#lib/components/blocks/nav-cards.svelte\";\n\n\timport { tabs } from \"./tabs.js\";\n</script>\n\n<NavCards {tabs} />\n","routes/section/appearance/+page.svelte":"<script lang=\"ts\">\n\timport ThemePicker from \"#lib/components/blocks/theme-picker.svelte\";\n</script>\n\n<ThemePicker />\n","routes/section/profile/+page.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n</script>\n\n<div class=\"grid gap-5 md:grid-cols-2\">\n\t<Input label=\"Name\" name=\"name\" value=\"Alex\" />\n\t<Input label=\"Email\" name=\"email\" type=\"email\" value=\"alex@example.com\" />\n</div>\n"}}
1
+ {"version":"1.0.3","readme":"# @orochibraru/ui\n\nSvelte 5 components and the theme shared by OpenCount, LocalAssistant, Homerun,\nSergio's, Nuvio Web and Penombre: the shadcn-svelte primitives (vega style) as\nthese apps customised them, a handful of app-level blocks, and the oklch theme\nthey all draw from. One package instead of six drifting copies.\n\nBuilt for SvelteKit 3, Svelte 5 runes and Tailwind CSS v4.\n\n## Install\n\n```bash\nbun add -d @orochibraru/ui\n```\n\nIt goes in `devDependencies`: the app bundles it, so nothing from it is needed\nat runtime next to the compiled server.\n\n## Set up the stylesheet\n\nImport the theme right after Tailwind in the app's root stylesheet:\n\n```css\n@import \"tailwindcss\";\n@import \"@orochibraru/ui/theme.css\";\n```\n\nThe theme brings the design tokens, the `data-*` state variants the primitives\nstyle with, `tw-animate-css`, and an `@source` that makes Tailwind scan the\npackage, so no other configuration is needed.\n\n## Use\n\nEvery primitive is a subpath, with the same exports shadcn-svelte generates:\n\n```svelte\n<script lang=\"ts\">\n import EmptyState from \"@orochibraru/ui/blocks/empty-state\";\n import { Button } from \"@orochibraru/ui/button\";\n import * as Dialog from \"@orochibraru/ui/dialog\";\n import { cn } from \"@orochibraru/ui/utils\";\n</script>\n```\n\nMoving an app over is a rewrite of its imports:\n`#lib/components/ui/button/index.js` becomes `@orochibraru/ui/button`.\n\nPrimitives: accordion, alert, alert-dialog, avatar, badge, breadcrumb, button,\nbutton-group, calendar, card, checkbox, command, context-menu, dialog, drawer,\ndropdown-menu, empty, field, input, input-group, input-otp, label, menubar,\npagination, popover, progress, radio-group, range-calendar, resizable,\nscroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner,\nspinner, switch, table, tabs, textarea, toggle, toggle-group, tooltip.\n\n`input` turns password managers off on fields that don't set `autocomplete`, so\na search box never gets a login suggestion.\n\n## Components\n\nUnder `@orochibraru/ui/components/<name>`: one import, data in. Where a\nprimitive is assembled from parts, a component takes an array or an object and\nrenders the whole thing, phones included.\n\n```svelte\n<script lang=\"ts\">\n import Input from \"@orochibraru/ui/components/input\";\n</script>\n\n<Input label=\"Email\" name=\"email\" type=\"email\" required bind:value={email} />\n```\n\nEvery form component takes the same field props: `name`, `label`, `description`,\n`error` (a string or the array a form action returns), `required`, `disabled`,\n`id` and a bindable `value` (`checked` for `checkbox` and `switch`, `files` for\n`file-dropzone`). The label, the description or the error, and the ARIA wiring\nbetween them come with it.\n\n`form` renders them from an array and posts to a form action. A failed action\nthat returns `fail(400, { errors: { field: [\"message\"] } })` puts each message\nunder its field; a toast narrates the submit:\n\n```svelte\n<Form\n action=\"?/create\"\n fields={[\n { name: \"name\", label: \"Project name\", required: true },\n { name: \"role\", type: \"select\", label: \"Role\", options: roles },\n { name: \"notify\", type: \"switch\", label: \"Notify the team\" },\n ]}\n messages={{ submit: \"Create project\", success: \"Project created.\" }}\n/>\n```\n\n| Component | What it does |\n| ------------------- | ---------------------------------------------------------------------------------------------- |\n| `accordion` | Questions and answers from an array: plain text or a snippet per item. |\n| `avatar-group` | Overlapping avatars with initials, a +N count and names in tooltips. |\n| `bar-list` | A ranked list with proportional bars, links and a show-more toggle. |\n| `breadcrumbs` | A trail of pages from an array, collapsing the middle into a menu on phones. |\n| `checkbox` | One checkbox with its label and description, the whole row tappable. |\n| `checkbox-list` | Options in, a labelled group of checkboxes out, posting every checked value. |\n| `confirm-dialog` | Ask before acting: waits on an async confirm, a drawer on phones. |\n| `data-table` | Columns and rows in, a sortable table out: cards on phones, links per row. |\n| `date-field` | A date with its label: calendar in a popover, a drawer on phones, ISO value. |\n| `file-dropzone` | Drop or pick files, folders too: type and size limits, a list to review, posted with the form. |\n| `form` | Fields from an array, laid out and posted to a form action, with errors under each field. |\n| `input` | A text field with its label, description and error in one: passwords get a reveal button. |\n| `menu` | Actions from an array: a dropdown on desktop, a drawer of big rows on phones. |\n| `pagination` | Page numbers from a total and a page size, prev and next on phones. |\n| `radio-list` | Pick one option from a list or from cards, with a legend and errors. |\n| `segmented-control` | A single choice as equal segments that fold to icons when space runs out. |\n| `select` | Options in, a labelled select out: searchable, and a drawer on phones. |\n| `status-badge` | A status pill with a tone, a dot and an optional pulse for live states. |\n| `switch` | A labelled switch row that posts true when on. |\n| `tabs` | Tabs from an array, scrolling sideways when they run out of room. |\n| `textarea` | A multi-line field with its label, error and an optional character counter. |\n\n## Blocks\n\nUnder `@orochibraru/ui/blocks/<name>`:\n\n| Block | What it does |\n| --------------------- | ----------------------------------------------------------------------------- |\n| `accent-toggle` | The accent presets: swatch strip on desktop, labelled rows on phones. |\n| `auth-shell` | Centered sign-in layout: heading, optional `brand` and `footer` snippets. |\n| `bottom-nav` | Phone tab bar of top-level destinations, the current one lit. |\n| `command-palette` | ⌘K search over pages and actions: dialog on desktop, tall drawer on phones. |\n| `copy-field` | Monospace value with a copy button and a promise toast. |\n| `document-title` | `<title>` from the page title, suffixed with `appName`. |\n| `empty-state` | Icon, title, subtitle and an action slot for an empty list. |\n| `error-page` | Status, message and error id from `page`, with a link to `homeHref`. |\n| `fab` | Floating action button above the phone tab bar, with a haptic tap. |\n| `icon-button` | Round icon button with a tooltip that doubles as its accessible name. |\n| `install-prompt` | One-time PWA install sheet: native prompt, iOS steps or browser menu steps. |\n| `music-player` | Audio bar with a queue: play, skip, seek, volume; positioning is the app's. |\n| `nav-cards` | Phone-only list of a section's tabs as cards: icon, label, description. |\n| `new-password-fields` | New password and its confirmation: reveal, strength meter, rules. |\n| `option-group` | Radio cards for a settings choice, with an icon or a `swatch` snippet each. |\n| `otp-field` | One-time code: digits only, SMS autofill, posted as one `code` field. |\n| `password-input` | Password field with a button to reveal it. |\n| `responsive-sheet` | A dialog on desktop, a bottom drawer under 768px. |\n| `setting-switch` | Labelled switch row for settings forms, posting `name=true` when on. |\n| `stat-card` | Glass card with an icon, a value and a hint, optionally a link. |\n| `stepper` | Multi-step flow: markers on desktop, progress bar and current step on phones. |\n| `tab-nav` | Pill tab bar of links, the current page's tab highlighted. |\n| `tab-section` | Layout for a tabbed section: tabs on desktop, nav cards on phones. |\n| `theme-picker` | System, light and dark as radio cards, for an appearance page. |\n| `theme-toggle` | System, light and dark: icon strip on desktop, three rows on phones. |\n| `top-loading-bar` | Progress bar during SvelteKit navigations, safe-area aware. |\n| `video-player` | Video with scrubbing, chapters, subtitles, speed, fullscreen, gestures, keys. |\n\nBlocks with built-in copy (`accent-toggle`, `copy-field`, `error-page`,\n`install-prompt`, `new-password-fields`, `password-input`, `theme-picker`,\n`theme-toggle`) take a `messages` prop. Its keys override the English defaults\none by one, which is how a French or translated app uses them. Blocks never set\nthe page title, except `tab-section`, which owns its section's title: the app\ncalls `setPageTitle` itself.\n\n### Tabbed sections\n\nA tabbed page is one real route per tab, each tab with a description, under a\n`tab-section` layout. On phones the index route renders `nav-cards` and each tab\nis a page titled by its label, its back button returning to the cards. On\ndesktop the index replaces itself with the first tab and `tab-nav` shows them\nall. The tabs live in one list (`SectionTab[]`, exported by `nav-cards`) that\nthe layout and the index page share.\n\n### Theme\n\n`theme-picker` and `theme-toggle` call `mode-watcher`'s `setMode`, so the app\nmounts `<ModeWatcher />` in its root layout. Both take the saved theme as\n`value`, so the server-rendered page checks the right one, and call `onchange`\nwith the new theme for the app to persist. `theme-picker` also posts as a\n`theme` radio field (`name` changes it) inside a form.\n\n`icon-button`, and `copy-field` through it, need a `Tooltip.Provider` above\nthem, which apps put in their root layout.\n\n## Modules\n\n- `@orochibraru/ui/utils`: `cn` and the shadcn-svelte prop helper types.\n- `@orochibraru/ui/toast`: `enhanceToast` and `saveToast` narrate a form action\n through one promise toast, `toastError` turns anything thrown into a message.\n Form updates keep `reset: false` by default so `bind:value` fields survive a\n submit.\n- `@orochibraru/ui/page-title`: `providePageTitle` once in the root layout,\n `setPageTitle` in pages, `usePageTitle` in app bars.\n- `@orochibraru/ui/appearance`: `applyAppearance` and `appearanceBootScript`\n apply a saved accent, theme, dark variant, font and corner style to `<html>`,\n the boot script before first paint.\n- `@orochibraru/ui/password`: `passwordRules` and `passwordScore`, the rules a\n new password must pass and a 0 to 4 strength, the same on the form and the\n server. `new-password-fields` renders them; `ruleLabels` translates them.\n- `@orochibraru/ui/server/logger`: `Logger` writes scoped lines as coloured text\n or JSON lines (`LOG_FORMAT=json`) at `LOG_LEVEL` or above; `configureLogging`\n sets both in code. JSON lines carry the active trace and span ids.\n- `@orochibraru/ui/server/telemetry`: `Telemetry` starts OpenTelemetry tracing\n over OTLP from `instrumentation.server.ts`; with `tracing: { server: true }`\n in the kit options, SvelteKit's own spans go with it. Its SDK packages are\n optional peer dependencies, installed only by apps that trace.\n- `@orochibraru/ui/server/hooks`: `requestLog` logs one line per request and\n `unexpectedErrors` logs a crash, records it on the span and returns its trace\n id as the error id.\n- `@orochibraru/ui/haptics`: `haptic(\"tap\" | \"success\" | \"error\")`, a no-op\n where vibration isn't supported.\n\n## Theming\n\nColours derive from two variables, so an app usually overrides only these after\nimporting the theme:\n\n```css\n:root {\n --hue: 8;\n --primary-chroma: 0.15;\n}\n```\n\nOn `<html>`:\n\n- `class=\"dark\"` switches to the dark palette, `data-dark-variant=\"amoled\"`\n makes it pure black.\n- Bordeaux is the default. `data-accent` picks a preset: `bordeaux`, `green`,\n `blue`, `violet`, `rose`, `orange`, `amber`, `cyan` or `neutral`.\n- `data-font` (`system`, `serif`, `mono`) and `data-corners=\"square\"` change the\n type and the radius.\n\n`class=\"aurora\"` on `<body>` adds the drifting gradient background. It is opt-in\nso apps with a flat look don't get it.\n\nThe theme also defines the `glass`, `glow`, `no-scrollbar` and `tabular`\nutilities, the `standalone` variant for installed PWAs, `safe-*` spacing for\nnotches, the toast styling and the page transitions on phones. Fonts are left to\neach app: set `--app-font` and `--display-font`.\n\n## Develop\n\n```bash\nbun install\nbun run dev\n```\n\nThe dev server is the docs site: a page per block, component and module, with\nthe component live and the code that renders it. That code is the example file\nitself, its `#lib` imports rewritten to the package subpaths, so the two can't\ndrift apart. A file named `<slug>.<name>` next to an example is a companion,\nshown after it: the layout, action or page an app needs for what the preview\ncan't hold. An example without a script is a note for the preview only.\n\nComponents built mostly for phones (drawers, steppers, cards, the media players)\nalso show on their page inside an iPhone or Android frame: an iframe of a bare\npreview route at the device's real width, so phone layouts and drawers behave as\nthey would on the device.\n\nThe primitives are shadcn-svelte's components, so the site links to its docs\ninstead of repeating them; llms.txt and the MCP server still carry their usage\ncode. The privacy page lists what the site stores and loads, and the credits.\n\nEvery component page can be copied as Markdown, viewed as Markdown, exported as\na PDF (through the browser's print dialog, in the light theme), or opened in\nClaude or ChatGPT. The list pages filter by category.\n\nThe `Dockerfile` deploys the docs site: `bun run build:docs` compiles it to one\nBun binary that serves on port 3000 and reads `x-forwarded-proto` and\n`x-forwarded-host`, so llms.txt links point at the public URL behind a proxy.\n\n`bun run check`, `bun run test` and `bun run build` are the gates; `build`\npackages `dist/` and runs publint.\n\nNew upstream components come from the shadcn-svelte CLI (`components.json` is\nset up), followed by `node_modules/.bin/tailwint --fix` on the new files. The\nCLI overwrites any customised primitive a new one depends on (drawer, input and\nsonner carry the apps' changes): copy those aside before `add --overwrite` and\nput them back after.\n\nDependencies use caret ranges, unlike the apps' exact pins, so a consuming app\ndedupes `bits-ui` and friends with its own copy instead of bundling two.\n\n## MCP server\n\nThe package ships an MCP server with the docs and every example's code bundled\nin, so an editor's assistant can list, search and read the components without\nthe docs site. It runs over stdio from the package's `bin`:\n\n```bash\nclaude mcp add orochibraru-ui -- npx -y @orochibraru/ui\n```\n\nCursor, VS Code and other clients take the same command:\n\n```json\n{\n \"mcpServers\": {\n \"orochibraru-ui\": { \"command\": \"npx\", \"args\": [\"-y\", \"@orochibraru/ui\"] }\n }\n}\n```\n\nIts tools are `get_setup` (this README), `list_components` (by group or\ncategory), `search_components` and `get_component` (the description, import path\nand usage code). `bun run build` bundles it with its content, so it needs no\ndependency at runtime. The docs site serves the same server over streamable HTTP\nat `/mcp`, plus `/llms.txt`, `/llms-full.txt` and a Markdown page per component\nat `/<group>/<slug>.md`.\n","files":{"examples/input-group.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport SearchIcon from \"@lucide/svelte/icons/search\";\n\n\timport * as InputGroup from \"#lib/components/ui/input-group/index.js\";\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n\t<InputGroup.Root>\n\t\t<InputGroup.Addon>\n\t\t\t<SearchIcon />\n\t\t</InputGroup.Addon>\n\t\t<InputGroup.Input placeholder=\"Search files\" />\n\t</InputGroup.Root>\n\t<InputGroup.Root>\n\t\t<InputGroup.Input type=\"number\" placeholder=\"25\" />\n\t\t<InputGroup.Addon align=\"inline-end\">\n\t\t\t<InputGroup.Text>MB</InputGroup.Text>\n\t\t</InputGroup.Addon>\n\t</InputGroup.Root>\n\t<InputGroup.Root>\n\t\t<InputGroup.Input readonly value=\"https://acme.com/s/report\" />\n\t\t<InputGroup.Addon align=\"inline-end\">\n\t\t\t<InputGroup.Button size=\"icon-xs\" aria-label=\"Copy URL\">\n\t\t\t\t<CopyIcon />\n\t\t\t</InputGroup.Button>\n\t\t</InputGroup.Addon>\n\t</InputGroup.Root>\n</div>\n","examples/toast.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nexport const actions = {\n\tsave: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tif (!String(form.get(\"name\") ?? \"\").trim()) {\n\t\t\treturn fail(400, { error: \"Name is required.\" });\n\t\t}\n\t\treturn { saved: true };\n\t},\n} satisfies Actions;\n","examples/otp-field.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport OtpField from \"#lib/components/blocks/otp-field.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell\n\theading=\"Check your phone\"\n\tsubheading=\"Enter the code from your authenticator app.\"\n>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<div class=\"flex flex-col items-center gap-6\">\n\t\t<OtpField\n\t\t\tlabel=\"6-digit code\"\n\t\t\talign=\"center\"\n\t\t\toncomplete={(code) => toast(`Verifying ${code}.`)}\n\t\t/>\n\t\t<Button variant=\"link\">Use a backup code instead</Button>\n\t</div>\n</AuthShell>\n","examples/theme-picker.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport ThemePicker from \"#lib/components/blocks/theme-picker.svelte\";\n</script>\n\n<ThemePicker onchange={(theme) => toast(`Theme: ${theme}.`)} />\n","examples/toggle-group.svelte":"<script lang=\"ts\">\n\timport CalendarIcon from \"@lucide/svelte/icons/calendar\";\n\timport LayoutGridIcon from \"@lucide/svelte/icons/layout-grid\";\n\timport ListIcon from \"@lucide/svelte/icons/list\";\n\n\timport * as ToggleGroup from \"#lib/components/ui/toggle-group/index.js\";\n\n\tlet view = $state(\"list\");\n\tlet statuses = $state([\"pending\"]);\n</script>\n\n<div class=\"flex flex-wrap items-center gap-4\">\n\t<ToggleGroup.Root type=\"single\" bind:value={view} variant=\"outline\">\n\t\t<ToggleGroup.Item value=\"list\" aria-label=\"List view\">\n\t\t\t<ListIcon />\n\t\t</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"grid\" aria-label=\"Grid view\">\n\t\t\t<LayoutGridIcon />\n\t\t</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"calendar\" aria-label=\"Calendar view\">\n\t\t\t<CalendarIcon />\n\t\t</ToggleGroup.Item>\n\t</ToggleGroup.Root>\n\t<ToggleGroup.Root type=\"multiple\" bind:value={statuses} spacing={1}>\n\t\t<ToggleGroup.Item value=\"paid\">Paid</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"pending\">Pending</ToggleGroup.Item>\n\t\t<ToggleGroup.Item value=\"overdue\">Overdue</ToggleGroup.Item>\n\t</ToggleGroup.Root>\n</div>\n","examples/top-loading-bar.+layout.svelte":"<script lang=\"ts\">\n\timport TopLoadingBar from \"#lib/components/blocks/top-loading-bar.svelte\";\n\n\tconst { children } = $props();\n</script>\n\n<TopLoadingBar />\n{@render children()}\n","examples/video-player.svelte":"<script lang=\"ts\">\n\timport VideoPlayer from \"#lib/components/blocks/video-player.svelte\";\n\n\tlet currentTime = $state(0);\n</script>\n\n<div class=\"grid gap-3\">\n\t<VideoPlayer\n\t\tsrc=\"https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.720p.vp9.webm#t=0,30\"\n\t\tposter=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Big_Buck_Bunny_4K.webm/1280px--Big_Buck_Bunny_4K.webm.jpg\"\n\t\ttitle=\"Big Buck Bunny, captioned 30-second excerpt\"\n\t\ttracks={[\n\t\t\t{\n\t\t\t\tsrc: \"/big-buck-bunny-captions.vtt\",\n\t\t\t\tlabel: \"English captions\",\n\t\t\t\tsrclang: \"en\",\n\t\t\t\tkind: \"captions\",\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t]}\n\t\tbind:currentTime\n\t/>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tIn this opening excerpt, a butterfly crosses a sunny forest clearing before\n\t\tthe title appears and Big Buck Bunny wakes beneath a tree.\n\t</p>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tSpace or K plays and pauses, the arrows seek and change the volume, F goes\n\t\tfullscreen, M mutes. On a phone, tap to show the controls and double-tap a\n\t\tside to seek. At {Math.floor(currentTime)} s. Big Buck Bunny © Blender Foundation,\n\t\tCC BY 3.0.\n\t</p>\n</div>\n","examples/stat-card.svelte":"<script lang=\"ts\">\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HardDriveIcon from \"@lucide/svelte/icons/hard-drive\";\n\timport ListTodoIcon from \"@lucide/svelte/icons/list-todo\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport StatCard from \"#lib/components/blocks/stat-card.svelte\";\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n\t<StatCard label=\"Projects\" value={12} hint=\"This month\" icon={FolderIcon} />\n\t<StatCard\n\t\tlabel=\"Active members\"\n\t\tvalue={48}\n\t\ticon={UsersIcon}\n\t\ttone=\"positive\"\n\t/>\n\t<StatCard\n\t\tlabel=\"Storage used\"\n\t\tvalue=\"86 %\"\n\t\ticon={HardDriveIcon}\n\t\ttone=\"warning\"\n\t/>\n\t<StatCard label=\"Open tasks\" value={7} href=\"#\" icon={ListTodoIcon} />\n</div>\n","examples/haptics.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { haptic } from \"#lib/haptics.js\";\n</script>\n\n<div class=\"flex flex-wrap gap-2\">\n\t<Button variant=\"outline\" onclick={() => haptic(\"tap\")}>Tap</Button>\n\t<Button variant=\"outline\" onclick={() => haptic(\"success\")}>Success</Button>\n\t<Button variant=\"outline\" onclick={() => haptic(\"error\")}>Error</Button>\n</div>\n","examples/avatar.svelte":"<script lang=\"ts\">\n\timport * as Avatar from \"#lib/components/ui/avatar/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<Avatar.Root size=\"sm\">\n\t\t<Avatar.Fallback>AM</Avatar.Fallback>\n\t</Avatar.Root>\n\t<Avatar.Root>\n\t\t<Avatar.Image src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n\t\t<Avatar.Fallback>SC</Avatar.Fallback>\n\t</Avatar.Root>\n\t<Avatar.Root size=\"lg\">\n\t\t<Avatar.Fallback>NB</Avatar.Fallback>\n\t\t<Avatar.Badge />\n\t</Avatar.Root>\n\t<Avatar.Group>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>AL</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>SM</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.Root>\n\t\t\t<Avatar.Fallback>JD</Avatar.Fallback>\n\t\t</Avatar.Root>\n\t\t<Avatar.GroupCount>+4</Avatar.GroupCount>\n\t</Avatar.Group>\n</div>\n","examples/password-input.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport PasswordInput from \"#lib/components/blocks/password-input.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell heading=\"Sign in\" subheading=\"Welcome back.\">\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<form class=\"grid gap-5\">\n\t\t<Input\n\t\t\tlabel=\"Email\"\n\t\t\tname=\"email\"\n\t\t\ttype=\"email\"\n\t\t\tautocomplete=\"email\"\n\t\t\trequired\n\t\t/>\n\t\t<PasswordInput label=\"Password\" required />\n\t\t<Button type=\"submit\" class=\"h-11\">Sign in</Button>\n\t</form>\n\t{#snippet footer()}\n\t\tNo account? Ask your admin for an invitation.\n\t{/snippet}\n</AuthShell>\n","examples/popover.svelte":"<script lang=\"ts\">\n\timport { buttonVariants } from \"#lib/components/ui/button/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport * as Popover from \"#lib/components/ui/popover/index.js\";\n</script>\n\n<Popover.Root>\n\t<Popover.Trigger class={buttonVariants({ variant: \"outline\" })}>\n\t\tSet storage limit\n\t</Popover.Trigger>\n\t<Popover.Content>\n\t\t<Popover.Header>\n\t\t\t<Popover.Title>Storage limit</Popover.Title>\n\t\t\t<Popover.Description>\n\t\t\t\tWe'll warn the team when the workspace gets close.\n\t\t\t</Popover.Description>\n\t\t</Popover.Header>\n\t\t<div class=\"flex flex-col gap-2\">\n\t\t\t<Label for=\"storage-limit\">Limit (GB)</Label>\n\t\t\t<Input id=\"storage-limit\" type=\"number\" value=\"100\" />\n\t\t</div>\n\t</Popover.Content>\n</Popover.Root>\n","examples/empty.svelte":"<script lang=\"ts\">\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Empty from \"#lib/components/ui/empty/index.js\";\n</script>\n\n<Empty.Root class=\"border\">\n\t<Empty.Header>\n\t\t<Empty.Media variant=\"icon\">\n\t\t\t<FileTextIcon />\n\t\t</Empty.Media>\n\t\t<Empty.Title>No documents yet</Empty.Title>\n\t\t<Empty.Description>\n\t\t\tCreate the first document of this project to get started.\n\t\t</Empty.Description>\n\t</Empty.Header>\n\t<Empty.Content>\n\t\t<Button><PlusIcon /> New document</Button>\n\t</Empty.Content>\n</Empty.Root>\n","examples/install-prompt.svelte":"<script lang=\"ts\">\n\timport InstallPrompt from \"#lib/components/blocks/install-prompt.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tOn a phone it opens by itself once; bind <code>open</code> to show it again from\n\t\ta settings page. It picks the native prompt, the iOS Share steps or the browser\n\t\tmenu steps.\n\t</p>\n\t<Button onclick={() => (open = true)}>Show the install sheet</Button>\n</div>\n<InstallPrompt appName=\"Acme\" storageKey=\"acme-install-prompt\" bind:open>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-14 rounded-2xl\"></div>\n\t{/snippet}\n</InstallPrompt>\n","examples/progress.svelte":"<script lang=\"ts\">\n\timport { Progress } from \"#lib/components/ui/progress/index.js\";\n\n\tconst used = 62;\n\tconst total = 100;\n</script>\n\n<div class=\"flex flex-col gap-2\">\n\t<div class=\"flex justify-between text-sm\">\n\t\t<span class=\"font-medium\">Storage</span>\n\t\t<span class=\"text-muted-foreground\">{used} GB of {total} GB</span>\n\t</div>\n\t<Progress value={used} max={total} />\n</div>\n","examples/appearance.svelte":"<script lang=\"ts\">\n\timport { applyAppearance } from \"#lib/appearance.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet corners = $state(\"rounded\");\n\n\tfunction toggleCorners() {\n\t\tcorners = corners === \"rounded\" ? \"square\" : \"rounded\";\n\t\tapplyAppearance(\n\t\t\tdocument.documentElement,\n\t\t\t{\n\t\t\t\taccent: document.documentElement.dataset.accent ?? \"bordeaux\",\n\t\t\t\ttheme: \"system\",\n\t\t\t\tdarkVariant: \"default\",\n\t\t\t\tfont: \"default\",\n\t\t\t\tcorners,\n\t\t\t},\n\t\t\tmatchMedia(\"(prefers-color-scheme: dark)\").matches,\n\t\t);\n\t}\n</script>\n\n<Button variant=\"outline\" onclick={toggleCorners}>\n\tCorners: {corners}\n</Button>\n","examples/hooks.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: <code>requestLog</code> writes one line per page or API request\n\t\tand skips assets and data requests; <code>unexpectedErrors</code> logs a crash,\n\t\trecords it on the request's span and hands the error page its trace id as the\n\t\terror id.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:02:15.020</span\n\t\t> <span class=\"text-red-400\">ERROR</span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Server]</span\n\t\t> Unhandled error <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} errorId: <span class=\"text-emerald-400\"\n\t\t\t\t>'1ac71cdacfc998b028cb0a12aee24333'</span\n\t\t\t>, path: <span class=\"text-emerald-400\">'/api/stats'</span> {\"}\"}</span\n\t\t>\n<span class=\"text-red-400\">Error: The database didn't answer in time.</span>\n<span\n\t\t\tclass=\"text-neutral-500\"> at load (src/routes/api/stats/+server.ts:12:11)</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:15.020</span> <span class=\"text-red-400\"\n\t\t\t>ERROR</span\n\t\t> <span class=\"text-fuchsia-400\">[Http]</span> <b>GET</b> /api/stats <span\n\t\t\tclass=\"text-red-400\">500</span\n\t\t> <span class=\"text-neutral-500\">12ms</span></pre>\n</div>\n","examples/top-loading-bar.svelte":"<script lang=\"ts\">\n\timport { goto } from \"$app/navigation\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tWatch the top of the screen: this button reloads the page through a load\n\t\tfunction that takes a second and a half, and the bar creeps until it lands.\n\t</p>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() => goto(`?slow=${Date.now()}`, { reset: false })}\n\t>\n\t\tLoad this page slowly\n\t</Button>\n</div>\n","examples/input.svelte":"<script lang=\"ts\">\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"account-email\">Email</Label>\n\t\t<Input\n\t\t\tid=\"account-email\"\n\t\t\ttype=\"email\"\n\t\t\tautocomplete=\"email\"\n\t\t\tplaceholder=\"you@example.com\"\n\t\t/>\n\t</div>\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"service-search\">Search services</Label>\n\t\t<Input id=\"service-search\" type=\"search\" placeholder=\"postgres, redis…\" />\n\t</div>\n</div>\n","examples/logger.+server.ts":"import { json, type RequestHandler } from \"@sveltejs/kit\";\n\nimport { Logger } from \"#lib/server/logger.js\";\n\nconst logger = new Logger(\"Projects\");\n\nexport const POST: RequestHandler = async ({ request }) => {\n\tconst { name } = await request.json();\n\tconst projectId = `p_${crypto.randomUUID().slice(0, 4)}`;\n\tlogger.info(\"Project created\", { projectId, name });\n\treturn json({ projectId }, { status: 201 });\n};\n","examples/error-page.+error.svelte":"<script lang=\"ts\">\n\timport ErrorPage from \"#lib/components/blocks/error-page.svelte\";\n</script>\n\n<ErrorPage\n\thomeHref=\"/\"\n\tmessages={{ notFoundTitle: \"Rien ici\", home: \"Retour à l'accueil\" }}\n/>\n","examples/skeleton.svelte":"<script lang=\"ts\">\n\timport { Skeleton } from \"#lib/components/ui/skeleton/index.js\";\n</script>\n\n<div class=\"grid gap-4\">\n\t{#each [1, 2, 3] as row (row)}\n\t\t<div class=\"flex items-center gap-3\">\n\t\t\t<Skeleton class=\"size-10 shrink-0 rounded-full\" />\n\t\t\t<div class=\"grid flex-1 gap-2\">\n\t\t\t\t<Skeleton class=\"h-4 w-2/3\" />\n\t\t\t\t<Skeleton class=\"h-4 w-1/3\" />\n\t\t\t</div>\n\t\t\t<Skeleton class=\"h-4 w-16\" />\n\t\t</div>\n\t{/each}\n</div>\n","examples/input-otp.svelte":"<script lang=\"ts\">\n\timport * as InputOTP from \"#lib/components/ui/input-otp/index.js\";\n\n\tlet code = $state(\"\");\n</script>\n\n<div class=\"flex flex-col gap-3\">\n\t<InputOTP.Root maxlength={6} bind:value={code}>\n\t\t{#snippet children({ cells })}\n\t\t\t<InputOTP.Group>\n\t\t\t\t{#each cells.slice(0, 3) as cell (cell)}\n\t\t\t\t\t<InputOTP.Slot {cell} />\n\t\t\t\t{/each}\n\t\t\t</InputOTP.Group>\n\t\t\t<InputOTP.Separator />\n\t\t\t<InputOTP.Group>\n\t\t\t\t{#each cells.slice(3, 6) as cell (cell)}\n\t\t\t\t\t<InputOTP.Slot {cell} />\n\t\t\t\t{/each}\n\t\t\t</InputOTP.Group>\n\t\t{/snippet}\n\t</InputOTP.Root>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\t{code.length === 6\n\t\t\t? `Verifying ${code}…`\n\t\t\t: \"Enter the code we emailed you.\"}\n\t</p>\n</div>\n","examples/calendar.svelte":"<script lang=\"ts\">\n\timport {\n\t\ttype DateValue,\n\t\tgetLocalTimeZone,\n\t\ttoday,\n\t} from \"@internationalized/date\";\n\n\timport { Calendar } from \"#lib/components/ui/calendar/index.js\";\n\n\tlet dueDate = $state<DateValue | undefined>(today(getLocalTimeZone()));\n</script>\n\n<div class=\"flex flex-wrap items-start gap-6\">\n\t<Calendar type=\"single\" bind:value={dueDate} class=\"rounded-lg border\" />\n\t<Calendar\n\t\ttype=\"single\"\n\t\tcaptionLayout=\"dropdown\"\n\t\tminValue={today(getLocalTimeZone())}\n\t\tclass=\"rounded-lg border\"\n\t/>\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tDue on {dueDate?.toDate(getLocalTimeZone()).toLocaleDateString() ?? \"—\"}\n\t</p>\n</div>\n","examples/drawer.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Drawer from \"#lib/components/ui/drawer/index.js\";\n\n\tconst members = [\n\t\t{ name: \"Alex\", role: \"Owner\" },\n\t\t{ name: \"Sam\", role: \"Editor\" },\n\t\t{ name: \"Jordan\", role: \"Viewer\" },\n\t];\n\n\tlet open = $state(false);\n\n\tfunction save() {\n\t\topen = false;\n\t\ttoast.success(\"Access updated.\");\n\t}\n</script>\n\n<Drawer.Root bind:open>\n\t<Drawer.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Manage access</Button>\n\t\t{/snippet}\n\t</Drawer.Trigger>\n\t<Drawer.Content>\n\t\t<Drawer.Header>\n\t\t\t<Drawer.Title>Manage access</Drawer.Title>\n\t\t\t<Drawer.Description>Website redesign · 3 members</Drawer.Description>\n\t\t</Drawer.Header>\n\t\t<ul class=\"divide-y px-4\">\n\t\t\t{#each members as member (member.name)}\n\t\t\t\t<li class=\"flex justify-between py-3\">\n\t\t\t\t\t<span>{member.name}</span>\n\t\t\t\t\t<span class=\"text-muted-foreground\">{member.role}</span>\n\t\t\t\t</li>\n\t\t\t{/each}\n\t\t</ul>\n\t\t<Drawer.Footer>\n\t\t\t<Button onclick={save}>Save</Button>\n\t\t\t<Drawer.Close>\n\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t{/snippet}\n\t\t\t</Drawer.Close>\n\t\t</Drawer.Footer>\n\t</Drawer.Content>\n</Drawer.Root>\n","examples/dropdown-menu.svelte":"<script lang=\"ts\">\n\timport EllipsisIcon from \"@lucide/svelte/icons/ellipsis\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Share2Icon from \"@lucide/svelte/icons/share-2\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as DropdownMenu from \"#lib/components/ui/dropdown-menu/index.js\";\n\n\tlet notify = $state(true);\n\tlet visibility = $state(\"private\");\n</script>\n\n<DropdownMenu.Root>\n\t<DropdownMenu.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">\n\t\t\t\tWebsite redesign <EllipsisIcon />\n\t\t\t</Button>\n\t\t{/snippet}\n\t</DropdownMenu.Trigger>\n\t<DropdownMenu.Content class=\"w-56\" align=\"start\">\n\t\t<DropdownMenu.Group>\n\t\t\t<DropdownMenu.Label>Project</DropdownMenu.Label>\n\t\t\t<DropdownMenu.Item>\n\t\t\t\t<PencilIcon /> Edit\n\t\t\t\t<DropdownMenu.Shortcut>⌘E</DropdownMenu.Shortcut>\n\t\t\t</DropdownMenu.Item>\n\t\t\t<DropdownMenu.Item><Share2Icon /> Share</DropdownMenu.Item>\n\t\t</DropdownMenu.Group>\n\t\t<DropdownMenu.Separator />\n\t\t<DropdownMenu.CheckboxItem bind:checked={notify}>\n\t\t\tNotifications\n\t\t</DropdownMenu.CheckboxItem>\n\t\t<DropdownMenu.Sub>\n\t\t\t<DropdownMenu.SubTrigger>Visibility</DropdownMenu.SubTrigger>\n\t\t\t<DropdownMenu.SubContent>\n\t\t\t\t<DropdownMenu.RadioGroup bind:value={visibility}>\n\t\t\t\t\t<DropdownMenu.RadioItem value=\"private\"\n\t\t\t\t\t\t>Private</DropdownMenu.RadioItem\n\t\t\t\t\t>\n\t\t\t\t\t<DropdownMenu.RadioItem value=\"team\">Team</DropdownMenu.RadioItem>\n\t\t\t\t</DropdownMenu.RadioGroup>\n\t\t\t</DropdownMenu.SubContent>\n\t\t</DropdownMenu.Sub>\n\t\t<DropdownMenu.Separator />\n\t\t<DropdownMenu.Item variant=\"destructive\">\n\t\t\t<Trash2Icon /> Delete\n\t\t</DropdownMenu.Item>\n\t</DropdownMenu.Content>\n</DropdownMenu.Root>\n","examples/new-password-fields.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport NewPasswordFields from \"#lib/components/blocks/new-password-fields.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n</script>\n\n<AuthShell\n\theading=\"Set a new password\"\n\tsubheading=\"Pick something you don't use anywhere else.\"\n>\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<div class=\"grid gap-6\">\n\t\t<Field.Group>\n\t\t\t<NewPasswordFields email=\"alex@example.com\" />\n\t\t</Field.Group>\n\t\t<Button class=\"h-11\">Save the password</Button>\n\t</div>\n</AuthShell>\n","examples/telemetry.vite.config.ts":"import adapter from \"@sveltejs/adapter-bun\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [\n\t\tsveltekit({\n\t\t\tadapter: adapter({ buildOptions: { compile: true } }),\n\t\t\ttracing: { server: true },\n\t\t}),\n\t],\n});\n","examples/theme-toggle.svelte":"<script lang=\"ts\">\n\timport ThemeToggle from \"#lib/components/blocks/theme-toggle.svelte\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<ThemeToggle />\n\t<ThemeToggle\n\t\tmessages={{ system: \"Système\", light: \"Clair\", dark: \"Sombre\" }}\n\t/>\n</div>\n","examples/sheet.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport * as Sheet from \"#lib/components/ui/sheet/index.js\";\n\n\tlet open = $state(false);\n\tlet name = $state(\"Alex Martin\");\n</script>\n\n<Sheet.Root bind:open>\n\t<Sheet.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Edit profile</Button>\n\t\t{/snippet}\n\t</Sheet.Trigger>\n\t<Sheet.Content>\n\t\t<Sheet.Header>\n\t\t\t<Sheet.Title>Edit profile</Sheet.Title>\n\t\t\t<Sheet.Description>Changes are visible to your team.</Sheet.Description>\n\t\t</Sheet.Header>\n\t\t<Field.Group class=\"px-4\">\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"profile-name\">Name</Field.Label>\n\t\t\t\t<Input id=\"profile-name\" bind:value={name} />\n\t\t\t</Field.Field>\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"profile-email\">Email</Field.Label>\n\t\t\t\t<Input id=\"profile-email\" value=\"alex@example.com\" />\n\t\t\t</Field.Field>\n\t\t</Field.Group>\n\t\t<Sheet.Footer>\n\t\t\t<Button onclick={() => (open = false)}>Save</Button>\n\t\t\t<Sheet.Close>\n\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t{/snippet}\n\t\t\t</Sheet.Close>\n\t\t</Sheet.Footer>\n\t</Sheet.Content>\n</Sheet.Root>\n","examples/tooltip.svelte":"<script lang=\"ts\">\n\timport DownloadIcon from \"@lucide/svelte/icons/download\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Tooltip from \"#lib/components/ui/tooltip/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Edit\">\n\t\t\t\t\t<PencilIcon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content>Edit file</Tooltip.Content>\n\t</Tooltip.Root>\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Export\">\n\t\t\t\t\t<DownloadIcon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content side=\"bottom\">Export as CSV</Tooltip.Content>\n\t</Tooltip.Root>\n\t<Tooltip.Root>\n\t\t<Tooltip.Trigger>\n\t\t\t{#snippet child({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" size=\"icon\" aria-label=\"Delete\">\n\t\t\t\t\t<Trash2Icon />\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Tooltip.Trigger>\n\t\t<Tooltip.Content side=\"right\">Delete for everyone</Tooltip.Content>\n\t</Tooltip.Root>\n</div>\n","examples/alert-dialog.svelte":"<script lang=\"ts\">\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport * as AlertDialog from \"#lib/components/ui/alert-dialog/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AlertDialog.Root>\n\t<AlertDialog.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"destructive\">Delete project</Button>\n\t\t{/snippet}\n\t</AlertDialog.Trigger>\n\t<AlertDialog.Content>\n\t\t<AlertDialog.Header>\n\t\t\t<AlertDialog.Media>\n\t\t\t\t<Trash2Icon />\n\t\t\t</AlertDialog.Media>\n\t\t\t<AlertDialog.Title>Delete \"Website redesign\"?</AlertDialog.Title>\n\t\t\t<AlertDialog.Description>\n\t\t\t\tThe project and its 48 files are deleted for every member. This can't be\n\t\t\t\tundone.\n\t\t\t</AlertDialog.Description>\n\t\t</AlertDialog.Header>\n\t\t<AlertDialog.Footer>\n\t\t\t<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t\t\t<AlertDialog.Action\n\t\t\t\tvariant=\"destructive\"\n\t\t\t\tonclick={() => toast.success(\"Project deleted.\")}\n\t\t\t>\n\t\t\t\tDelete\n\t\t\t</AlertDialog.Action>\n\t\t</AlertDialog.Footer>\n\t</AlertDialog.Content>\n</AlertDialog.Root>\n","examples/document-title.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<Input\n\tlabel=\"Page title\"\n\tdescription=\"The header above and this browser tab follow as you type.\"\n\tbind:value={title.current}\n/>\n","examples/range-calendar.svelte":"<script lang=\"ts\">\n\timport {\n\t\ttype DateValue,\n\t\tgetLocalTimeZone,\n\t\ttoday,\n\t} from \"@internationalized/date\";\n\n\timport { RangeCalendar } from \"#lib/components/ui/range-calendar/index.js\";\n\n\tconst start = today(getLocalTimeZone());\n\tlet value = $state<{\n\t\tstart: DateValue | undefined;\n\t\tend: DateValue | undefined;\n\t}>({\n\t\tstart,\n\t\tend: start.add({ days: 6 }),\n\t});\n</script>\n\n<div class=\"flex flex-wrap items-start gap-6\">\n\t<RangeCalendar bind:value numberOfMonths={2} class=\"rounded-md border\" />\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tTrip: {value.start?.toString() ?? \"…\"} → {value.end?.toString() ?? \"…\"}\n\t</p>\n</div>\n","examples/bottom-nav.svelte":"<script lang=\"ts\">\n\timport { page } from \"$app/state\";\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport BottomNav from \"#lib/components/blocks/bottom-nav.svelte\";\n\n\tconst items = [\n\t\t{ href: \"#home\", label: \"Home\", icon: HouseIcon },\n\t\t{ href: \"#projects\", label: \"Projects\", icon: FolderIcon },\n\t\t{ href: \"#inbox\", label: \"Inbox\", icon: BellIcon },\n\t\t{ href: \"#account\", label: \"Account\", icon: UserRoundIcon },\n\t];\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tPhones only, fixed to the bottom of the screen: see it in the phone frame, or\n\ton a phone. Leave about 8rem of bottom padding on the page so the last row\n\tisn't hidden behind it. Pass <code>isActive</code> when a destination owns more\n\tthan its own href.\n</p>\n<BottomNav\n\t{items}\n\tisActive={(_pathname, href) => href === (page.url.hash || \"#home\")}\n/>\n","examples/tabs.svelte":"<script lang=\"ts\">\n\timport * as Tabs from \"#lib/components/ui/tabs/index.js\";\n\n\tlet tab = $state(\"projects\");\n</script>\n\n<div class=\"grid gap-8\">\n\t<Tabs.Root bind:value={tab}>\n\t\t<Tabs.List>\n\t\t\t<Tabs.Trigger value=\"projects\">Projects</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"activity\">Activity</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"members\">Members</Tabs.Trigger>\n\t\t</Tabs.List>\n\t\t<Tabs.Content value=\"projects\" class=\"text-sm\">\n\t\t\t12 projects, 4 archived.\n\t\t</Tabs.Content>\n\t\t<Tabs.Content value=\"activity\" class=\"text-sm\">\n\t\t\tSam commented on the roadmap.\n\t\t</Tabs.Content>\n\t\t<Tabs.Content value=\"members\" class=\"text-sm\">\n\t\t\tAlex, Sam, Lou and you.\n\t\t</Tabs.Content>\n\t</Tabs.Root>\n\t<Tabs.Root value=\"week\">\n\t\t<Tabs.List variant=\"line\">\n\t\t\t<Tabs.Trigger value=\"week\">This week</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"month\">This month</Tabs.Trigger>\n\t\t\t<Tabs.Trigger value=\"year\" disabled>This year</Tabs.Trigger>\n\t\t</Tabs.List>\n\t</Tabs.Root>\n</div>\n","examples/option-group.svelte":"<script lang=\"ts\">\n\timport BookOpenIcon from \"@lucide/svelte/icons/book-open\";\n\timport CodeIcon from \"@lucide/svelte/icons/code\";\n\timport TypeIcon from \"@lucide/svelte/icons/type\";\n\n\timport OptionGroup from \"#lib/components/blocks/option-group.svelte\";\n\n\tconst fonts = [\n\t\t{\n\t\t\tvalue: \"default\",\n\t\t\tlabel: \"Default\",\n\t\t\tdescription: \"The app's own typefaces.\",\n\t\t\ticon: TypeIcon,\n\t\t},\n\t\t{\n\t\t\tvalue: \"serif\",\n\t\t\tlabel: \"Serif\",\n\t\t\tdescription: \"A classic book face for a calmer read.\",\n\t\t\ticon: BookOpenIcon,\n\t\t},\n\t\t{\n\t\t\tvalue: \"mono\",\n\t\t\tlabel: \"Mono\",\n\t\t\tdescription: \"Every character the same width.\",\n\t\t\ticon: CodeIcon,\n\t\t},\n\t];\n\n\tconst accents = [\n\t\t{ value: \"blue\", label: \"Blue\", color: \"oklch(0.6 0.19 255)\" },\n\t\t{ value: \"green\", label: \"Green\", color: \"oklch(0.6 0.14 165)\" },\n\t\t{ value: \"rose\", label: \"Rose\", color: \"oklch(0.6 0.2 12)\" },\n\t];\n\n\tlet font = $state(\"default\");\n\tlet accent = $state(\"blue\");\n</script>\n\n<div class=\"grid gap-6\">\n\t<OptionGroup\n\t\tname=\"font\"\n\t\tlegend=\"Font\"\n\t\toptions={fonts}\n\t\tbind:value={font}\n\t\tonchange={() => {}}\n\t/>\n\t<OptionGroup\n\t\tname=\"accent\"\n\t\tlegend=\"Accent\"\n\t\toptions={accents}\n\t\tbind:value={accent}\n\t\tonchange={() => {}}\n\t>\n\t\t{#snippet swatch(option)}\n\t\t\t<span\n\t\t\t\tclass=\"size-5 rounded-full\"\n\t\t\t\tstyle:background={accents.find((item) => item.value === option.value)\n\t\t\t\t\t?.color}\n\t\t\t></span>\n\t\t{/snippet}\n\t</OptionGroup>\n</div>\n","examples/textarea.svelte":"<script lang=\"ts\">\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Textarea } from \"#lib/components/ui/textarea/index.js\";\n\n\tlet message = $state(\"\");\n</script>\n\n<Field.Group>\n\t<Field.Field>\n\t\t<Field.Label for=\"message\">Message</Field.Label>\n\t\t<Textarea\n\t\t\tid=\"message\"\n\t\t\tbind:value={message}\n\t\t\tmaxlength={200}\n\t\t\tplaceholder=\"Write a message...\"\n\t\t/>\n\t\t<Field.Description>{message.length} / 200 characters</Field.Description>\n\t</Field.Field>\n\t<Field.Field>\n\t\t<Field.Label for=\"archived-message\">Archived message</Field.Label>\n\t\t<Textarea id=\"archived-message\" value=\"This thread is closed.\" disabled />\n\t</Field.Field>\n</Field.Group>\n","examples/appearance.+layout.svelte":"<script lang=\"ts\">\n\timport { ModeWatcher } from \"mode-watcher\";\n\n\timport { appearanceBootScript } from \"#lib/appearance.js\";\n\n\tconst { children, data } = $props();\n</script>\n\n<svelte:head>\n\t{@html appearanceBootScript(data.appearance)}\n</svelte:head>\n\n<ModeWatcher defaultMode={data.appearance.theme} />\n{@render children()}\n","examples/slider.svelte":"<script lang=\"ts\">\n\timport { Slider } from \"#lib/components/ui/slider/index.js\";\n\n\tlet limit = $state(450);\n\tlet range = $state([20, 80]);\n</script>\n\n<div class=\"grid gap-8\">\n\t<div class=\"grid gap-3\">\n\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t<span>Storage limit</span>\n\t\t\t<span class=\"tabular\">{limit} GB</span>\n\t\t</div>\n\t\t<Slider type=\"single\" bind:value={limit} max={1000} step={10} />\n\t</div>\n\t<div class=\"grid gap-3\">\n\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t<span>File size between</span>\n\t\t\t<span class=\"tabular\">{range[0]} MB and {range[1]} MB</span>\n\t\t</div>\n\t\t<Slider type=\"multiple\" bind:value={range} max={200} step={5} />\n\t</div>\n\t<Slider type=\"single\" value={30} disabled />\n</div>\n","examples/stepper.svelte":"<script lang=\"ts\">\n\timport FolderPlusIcon from \"@lucide/svelte/icons/folder-plus\";\n\timport ListChecksIcon from \"@lucide/svelte/icons/list-checks\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport Stepper from \"#lib/components/blocks/stepper.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tconst steps = [\n\t\t{\n\t\t\tlabel: \"Basics\",\n\t\t\tdescription: \"Give the project a name people will recognize.\",\n\t\t\ticon: FolderPlusIcon,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Team\",\n\t\t\tdescription: \"Invite someone to work on it with you.\",\n\t\t\ticon: UsersIcon,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Review\",\n\t\t\tdescription: \"Check everything before creating it.\",\n\t\t\ticon: ListChecksIcon,\n\t\t},\n\t];\n\n\tlet active = $state(0);\n\tlet name = $state(\"\");\n\tlet summary = $state(\"\");\n\tlet invite = $state(\"\");\n\tlet attempted = $state(false);\n\n\tconst nameMissing = $derived(attempted && name.trim() === \"\");\n\n\tfunction onnext(step: number) {\n\t\tif (step === 0) {\n\t\t\tattempted = true;\n\t\t\treturn name.trim() !== \"\";\n\t\t}\n\t\treturn true;\n\t}\n\n\tfunction create() {\n\t\ttoast.success(\"Project created.\", { description: name });\n\t}\n</script>\n\n<Stepper {steps} bind:active {onnext}>\n\t<div class=\"grid gap-5\" hidden={active !== 0}>\n\t\t<Input\n\t\t\tlabel=\"Name\"\n\t\t\tplaceholder=\"Website redesign\"\n\t\t\terror={nameMissing ? \"Give the project a name.\" : undefined}\n\t\t\tbind:value={name}\n\t\t/>\n\t\t<Input\n\t\t\tlabel=\"Summary\"\n\t\t\tplaceholder=\"What it's about, in one line\"\n\t\t\tbind:value={summary}\n\t\t/>\n\t</div>\n\n\t<div class=\"grid gap-5\" hidden={active !== 1}>\n\t\t<Input\n\t\t\tlabel=\"Email\"\n\t\t\ttype=\"email\"\n\t\t\tplaceholder=\"sam@example.com\"\n\t\t\tdescription=\"Optional, you can invite people later.\"\n\t\t\tbind:value={invite}\n\t\t/>\n\t</div>\n\n\t<dl class=\"grid gap-3 text-sm\" hidden={active !== 2}>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Name</dt>\n\t\t\t<dd class=\"font-medium\">{name}</dd>\n\t\t</div>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Summary</dt>\n\t\t\t<dd class=\"font-medium\">{summary || \"None\"}</dd>\n\t\t</div>\n\t\t<div>\n\t\t\t<dt class=\"text-muted-foreground\">Invited</dt>\n\t\t\t<dd class=\"font-medium\">{invite || \"Nobody yet\"}</dd>\n\t\t</div>\n\t</dl>\n\n\t{#snippet finish()}\n\t\t<Button class=\"glow h-11 rounded-full px-5\" onclick={create}>\n\t\t\tCreate project\n\t\t</Button>\n\t{/snippet}\n</Stepper>\n","examples/context-menu.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport * as ContextMenu from \"#lib/components/ui/context-menu/index.js\";\n\n\tlet showArchived = $state(false);\n\tlet sort = $state(\"date\");\n</script>\n\n<ContextMenu.Root>\n\t<ContextMenu.Trigger\n\t\tclass=\"text-muted-foreground flex h-36 w-full items-center justify-center rounded-lg border border-dashed text-sm\"\n\t>\n\t\tRight-click (or long-press) the file list\n\t</ContextMenu.Trigger>\n\t<ContextMenu.Content class=\"w-56\">\n\t\t<ContextMenu.Item>\n\t\t\t<PencilIcon /> Edit\n\t\t\t<ContextMenu.Shortcut>⌘E</ContextMenu.Shortcut>\n\t\t</ContextMenu.Item>\n\t\t<ContextMenu.Item><CopyIcon /> Duplicate</ContextMenu.Item>\n\t\t<ContextMenu.Sub>\n\t\t\t<ContextMenu.SubTrigger>Move to project</ContextMenu.SubTrigger>\n\t\t\t<ContextMenu.SubContent>\n\t\t\t\t<ContextMenu.Item>Website redesign</ContextMenu.Item>\n\t\t\t\t<ContextMenu.Item>Mobile app</ContextMenu.Item>\n\t\t\t</ContextMenu.SubContent>\n\t\t</ContextMenu.Sub>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.CheckboxItem bind:checked={showArchived}>\n\t\t\tShow archived\n\t\t</ContextMenu.CheckboxItem>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.Group>\n\t\t\t<ContextMenu.GroupHeading>Sort by</ContextMenu.GroupHeading>\n\t\t\t<ContextMenu.RadioGroup bind:value={sort}>\n\t\t\t\t<ContextMenu.RadioItem value=\"date\">Date</ContextMenu.RadioItem>\n\t\t\t\t<ContextMenu.RadioItem value=\"name\">Name</ContextMenu.RadioItem>\n\t\t\t</ContextMenu.RadioGroup>\n\t\t</ContextMenu.Group>\n\t\t<ContextMenu.Separator />\n\t\t<ContextMenu.Item variant=\"destructive\"\n\t\t\t><Trash2Icon /> Delete</ContextMenu.Item\n\t\t>\n\t</ContextMenu.Content>\n</ContextMenu.Root>\n","examples/breadcrumb.svelte":"<script lang=\"ts\">\n\timport * as Breadcrumb from \"#lib/components/ui/breadcrumb/index.js\";\n</script>\n\n<Breadcrumb.Root>\n\t<Breadcrumb.List>\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Link href=\"#\">Groups</Breadcrumb.Link>\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Ellipsis />\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Link href=\"#\">Lisbon trip</Breadcrumb.Link>\n\t\t</Breadcrumb.Item>\n\t\t<Breadcrumb.Separator />\n\t\t<Breadcrumb.Item>\n\t\t\t<Breadcrumb.Page>Dinner at Ramiro</Breadcrumb.Page>\n\t\t</Breadcrumb.Item>\n\t</Breadcrumb.List>\n</Breadcrumb.Root>\n","examples/table.svelte":"<script lang=\"ts\">\n\timport * as Table from \"#lib/components/ui/table/index.js\";\n\n\tconst files = [\n\t\t{ id: 1, name: \"Roadmap.pdf\", owner: \"Alex\", date: \"Mar 12\", size: 2.4 },\n\t\t{\n\t\t\tid: 2,\n\t\t\tname: \"Brand assets.zip\",\n\t\t\towner: \"Sam\",\n\t\t\tdate: \"Mar 14\",\n\t\t\tsize: 118,\n\t\t},\n\t\t{ id: 3, name: \"Notes.md\", owner: \"Lou\", date: \"Mar 15\", size: 0.2 },\n\t];\n\n\tconst total = files.reduce((sum, file) => sum + file.size, 0);\n</script>\n\n<Table.Root>\n\t<Table.Caption>Shared files, updated in March.</Table.Caption>\n\t<Table.Header>\n\t\t<Table.Row>\n\t\t\t<Table.Head>File</Table.Head>\n\t\t\t<Table.Head>Owner</Table.Head>\n\t\t\t<Table.Head>Modified</Table.Head>\n\t\t\t<Table.Head class=\"text-right\">Size</Table.Head>\n\t\t</Table.Row>\n\t</Table.Header>\n\t<Table.Body>\n\t\t{#each files as file (file.id)}\n\t\t\t<Table.Row>\n\t\t\t\t<Table.Cell class=\"font-medium\">{file.name}</Table.Cell>\n\t\t\t\t<Table.Cell>{file.owner}</Table.Cell>\n\t\t\t\t<Table.Cell>{file.date}</Table.Cell>\n\t\t\t\t<Table.Cell class=\"text-right tabular\">\n\t\t\t\t\t{file.size.toFixed(1)} MB\n\t\t\t\t</Table.Cell>\n\t\t\t</Table.Row>\n\t\t{/each}\n\t</Table.Body>\n\t<Table.Footer>\n\t\t<Table.Row>\n\t\t\t<Table.Cell colspan={3}>Total</Table.Cell>\n\t\t\t<Table.Cell class=\"text-right tabular\">{total.toFixed(1)} MB</Table.Cell>\n\t\t</Table.Row>\n\t</Table.Footer>\n</Table.Root>\n","examples/telemetry.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: started from <code>instrumentation.server.ts</code>, which runs\n\t\tbefore the app. With <code>tracing.server</code> on, SvelteKit's own spans for\n\t\thandle, load, actions and remote functions are exported with yours, and the logger\n\t\tstamps every JSON line with the active trace.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:01:58.102</span\n\t\t> <span class=\"text-sky-400\">INFO </span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Telemetry]</span\n\t\t> Tracing on <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} endpoint: <span class=\"text-emerald-400\"\n\t\t\t\t>'http://collector:4318'</span\n\t\t\t>, serviceName: <span class=\"text-emerald-400\">'acme'</span> {\"}\"}</span\n\t\t>\n\n<span class=\"text-neutral-500\">trace 1ac71cda…</span>\n sveltekit.handle.root <span class=\"text-neutral-500\">41ms</span>\n └─ sveltekit.load <span class=\"text-neutral-500\">29ms</span>\n └─ projects.import <span class=\"text-neutral-500\">22ms</span\n\t\t></pre>\n</div>\n","examples/utils.svelte":"<script lang=\"ts\">\n\timport { cn } from \"#lib/utils.js\";\n\n\tlet urgent = $state(false);\n</script>\n\n<button\n\ttype=\"button\"\n\tonclick={() => (urgent = !urgent)}\n\tclass={cn(\n\t\t\"bg-muted rounded-xl px-4 py-2 text-sm font-medium\",\n\t\turgent && \"bg-destructive text-white\",\n\t)}\n>\n\t{urgent ? \"Urgent\" : \"Normal\"}: click to toggle\n</button>\n","examples/time-series-chart.svelte":"<script lang=\"ts\">\n\timport TimeSeriesChart, {\n\t\ttype TimeSeries,\n\t} from \"#lib/components/blocks/time-series-chart.svelte\";\n\n\tconst days = Array.from(\n\t\t{ length: 30 },\n\t\t(_, index) => new Date(2026, 8, 1 + index),\n\t);\n\n\tfunction wave(index: number, base: number, swing: number) {\n\t\tconst weekend = [0, 6].includes(days[index]?.getDay() ?? 1) ? 0.7 : 1;\n\t\tconst ripple = ((index * 37) % 11) / 11 - 0.5;\n\t\treturn Math.round(\n\t\t\t(base + swing * Math.sin(index / 4) + (swing / 2) * ripple) * weekend,\n\t\t);\n\t}\n\n\tconst traffic: TimeSeries[] = [\n\t\t{\n\t\t\tname: \"Visitors\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: wave(index, 420 + index * 4, 60),\n\t\t\t})),\n\t\t},\n\t\t{\n\t\t\tname: \"Sign-ups\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: index === 17 || index === 18 ? null : wave(index, 110, 30),\n\t\t\t})),\n\t\t},\n\t];\n\n\tconst uploads: TimeSeries[] = [\n\t\t{\n\t\t\tname: \"Uploads\",\n\t\t\tpoints: days.map((at, index) => ({\n\t\t\t\tat,\n\t\t\t\tvalue: wave(index, 64, 18),\n\t\t\t})),\n\t\t},\n\t];\n</script>\n\n<div class=\"grid w-full gap-10\">\n\t<TimeSeriesChart\n\t\ttitle=\"Visitors and sign-ups\"\n\t\tdescription=\"September, per day. Sign-ups weren't tracked on the 18th and 19th.\"\n\t\tseries={traffic}\n\t/>\n\t<TimeSeriesChart\n\t\ttitle=\"Daily uploads\"\n\t\tkind=\"bar\"\n\t\theight={200}\n\t\tseries={uploads}\n\t/>\n</div>\n","examples/toggle.svelte":"<script lang=\"ts\">\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport StarIcon from \"@lucide/svelte/icons/star\";\n\n\timport { Toggle } from \"#lib/components/ui/toggle/index.js\";\n\n\tlet starred = $state(false);\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Toggle bind:pressed={starred} aria-label=\"Star this group\">\n\t\t<StarIcon class={starred ? \"fill-current\" : \"\"} />\n\t</Toggle>\n\t<Toggle variant=\"outline\" aria-label=\"Mute notifications\">\n\t\t<BellIcon /> Mute\n\t</Toggle>\n\t<Toggle size=\"sm\" variant=\"outline\">Recurring only</Toggle>\n\t<Toggle size=\"lg\" pressed>Unpaid</Toggle>\n\t<Toggle disabled>Archived</Toggle>\n</div>\n","examples/accordion.svelte":"<script lang=\"ts\">\n\timport * as Accordion from \"#lib/components/ui/accordion/index.js\";\n</script>\n\n<Accordion.Root type=\"single\" value=\"invite\">\n\t<Accordion.Item value=\"invite\">\n\t\t<Accordion.Trigger>How do I invite team members?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tOpen the project settings and send an invite by email. They join with the\n\t\t\trole you pick.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n\t<Accordion.Item value=\"export\">\n\t\t<Accordion.Trigger>Can I export my documents?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tYes. Every document exports to PDF or Markdown from its menu.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n\t<Accordion.Item value=\"delete\">\n\t\t<Accordion.Trigger>What happens when I delete a project?</Accordion.Trigger>\n\t\t<Accordion.Content>\n\t\t\tIt stays in the trash for 30 days, then it is gone for good with all its\n\t\t\tfiles.\n\t\t</Accordion.Content>\n\t</Accordion.Item>\n</Accordion.Root>\n","examples/music-player.svelte":"<script lang=\"ts\">\n\timport MusicPlayer from \"#lib/components/blocks/music-player.svelte\";\n\n\tconst tracks = [\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/2/2a/Gymnopedie_No._1_%28ISRC_USUAN1100787%29.mp3\",\n\t\t\ttitle: \"Gymnopédie No. 1\",\n\t\t\tartist: \"Erik Satie, played by Kevin MacLeod\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/8/82/Nocturne_in_E_flat_major%2C_Op._9_no._2.mp3\",\n\t\t\ttitle: \"Nocturne in E-flat major, Op. 9 No. 2\",\n\t\t\tartist: \"Frédéric Chopin\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/6/63/Clair_de_Lune_-_Wright_Brass_-_United_States_Air_Force_Band_of_Flight.mp3\",\n\t\t\ttitle: \"Clair de Lune\",\n\t\t\tartist: \"Claude Debussy, US Air Force Band of Flight\",\n\t\t},\n\t];\n\n\tlet index = $state(0);\n\tlet paused = $state(true);\n</script>\n\n<div class=\"grid gap-5\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tIt renders in flow, as wide as its container: wrap it in a fixed bar to dock\n\t\tit at the bottom of the screen. From Wikimedia Commons: Satie by Kevin\n\t\tMacLeod under CC BY 3.0, Chopin and Debussy in the public domain.\n\t</p>\n\t<MusicPlayer {tracks} bind:index bind:paused />\n</div>\n","examples/alert.svelte":"<script lang=\"ts\">\n\timport CircleAlertIcon from \"@lucide/svelte/icons/circle-alert\";\n\timport InfoIcon from \"@lucide/svelte/icons/info\";\n\n\timport * as Alert from \"#lib/components/ui/alert/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid gap-3\">\n\t<Alert.Root>\n\t\t<InfoIcon />\n\t\t<Alert.Title>Sync runs every hour</Alert.Title>\n\t\t<Alert.Description>\n\t\t\tChanges made on your other devices show up within the hour.\n\t\t</Alert.Description>\n\t</Alert.Root>\n\t<Alert.Root variant=\"destructive\">\n\t\t<CircleAlertIcon />\n\t\t<Alert.Title>Upload failed</Alert.Title>\n\t\t<Alert.Description>\n\t\t\treport.pdf is larger than the 25 MB limit.\n\t\t</Alert.Description>\n\t\t<Alert.Action>\n\t\t\t<Button size=\"sm\" variant=\"outline\">Retry</Button>\n\t\t</Alert.Action>\n\t</Alert.Root>\n</div>\n","examples/install-prompt.+layout.svelte":"<script lang=\"ts\">\n\timport InstallPrompt from \"#lib/components/blocks/install-prompt.svelte\";\n\n\tconst { children } = $props();\n</script>\n\n{@render children()}\n<InstallPrompt appName=\"Acme\" storageKey=\"acme-install-prompt\">\n\t{#snippet brand()}\n\t\t<img src=\"/icon-192.png\" alt=\"\" class=\"size-14 rounded-2xl\" />\n\t{/snippet}\n</InstallPrompt>\n","examples/command-palette.svelte":"<script lang=\"ts\">\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport SunMoonIcon from \"@lucide/svelte/icons/sun-moon\";\n\timport UserPlusIcon from \"@lucide/svelte/icons/user-plus\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\timport { toggleMode } from \"mode-watcher\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport CommandPalette, {\n\t\ttype CommandGroup,\n\t} from \"#lib/components/blocks/command-palette.svelte\";\n\n\tconst groups: CommandGroup[] = [\n\t\t{\n\t\t\theading: \"Navigation\",\n\t\t\titems: [\n\t\t\t\t{ label: \"Home\", href: \"#home\", icon: HouseIcon },\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Team\",\n\t\t\t\t\thref: \"#team\",\n\t\t\t\t\ticon: UsersIcon,\n\t\t\t\t\tdescription: \"Members and roles\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Settings\",\n\t\t\t\t\thref: \"#settings\",\n\t\t\t\t\ticon: SettingsIcon,\n\t\t\t\t\tkeywords: [\"preferences\", \"account\"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\theading: \"Actions\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tlabel: \"New document\",\n\t\t\t\t\ticon: FileTextIcon,\n\t\t\t\t\tshortcut: \"⌘N\",\n\t\t\t\t\tonSelect: () => toast.success(\"Document created.\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Invite member\",\n\t\t\t\t\ticon: UserPlusIcon,\n\t\t\t\t\tshortcut: \"⌘I\",\n\t\t\t\t\tonSelect: () => toast.success(\"Invite sent.\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Toggle theme\",\n\t\t\t\t\ticon: SunMoonIcon,\n\t\t\t\t\tshortcut: \"⌘D\",\n\t\t\t\t\tkeywords: [\"dark\", \"light\", \"mode\"],\n\t\t\t\t\tonSelect: toggleMode,\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n</script>\n\n<CommandPalette {groups} />\n","examples/badge.svelte":"<script lang=\"ts\">\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\n\timport { Badge } from \"#lib/components/ui/badge/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Badge>Active</Badge>\n\t<Badge variant=\"secondary\">Pending</Badge>\n\t<Badge variant=\"outline\">Archived</Badge>\n\t<Badge variant=\"destructive\">Overdue</Badge>\n\t<Badge variant=\"secondary\"\n\t\t><CheckIcon data-icon=\"inline-start\" /> Completed</Badge\n\t>\n\t<Badge href=\"#\">3 new messages</Badge>\n</div>\n","examples/toast.svelte":"<script lang=\"ts\">\n\timport { enhance } from \"$app/forms\";\n\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { saveToast } from \"#lib/toast.js\";\n</script>\n\n<form\n\tmethod=\"POST\"\n\taction=\"?/save\"\n\tuse:enhance={saveToast(\"Profile\")}\n\tclass=\"grid grid-cols-1 gap-4 sm:grid-cols-[1fr_auto] sm:items-end\"\n>\n\t<Input\n\t\tlabel=\"Name\"\n\t\tname=\"name\"\n\t\tvalue=\"Alex\"\n\t\tdescription=\"Clear it to see the action's error.\"\n\t/>\n\t<Button type=\"submit\" class=\"h-11\">Save</Button>\n</form>\n","examples/radio-group.svelte":"<script lang=\"ts\">\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport * as RadioGroup from \"#lib/components/ui/radio-group/index.js\";\n\n\tlet notify = $state(\"all\");\n</script>\n\n<div class=\"flex flex-col gap-4\">\n\t<RadioGroup.Root bind:value={notify}>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"all\" id=\"notify-all\" />\n\t\t\t<Label for=\"notify-all\">All new messages</Label>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"mentions\" id=\"notify-mentions\" />\n\t\t\t<Label for=\"notify-mentions\">Mentions only</Label>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<RadioGroup.Item value=\"none\" id=\"notify-none\" />\n\t\t\t<Label for=\"notify-none\">Nothing</Label>\n\t\t</div>\n\t</RadioGroup.Root>\n\t<p class=\"text-muted-foreground text-sm\">Selected: {notify}</p>\n</div>\n","examples/spinner.svelte":"<script lang=\"ts\">\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Spinner } from \"#lib/components/ui/spinner/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<Spinner />\n\t<Spinner class=\"size-6\" />\n\t<Spinner class=\"size-8 text-primary\" />\n\t<div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n\t\t<Spinner /> Syncing accounts\n\t</div>\n\t<Button disabled><Spinner /> Importing</Button>\n</div>\n","examples/nav-cards.svelte":"<script lang=\"ts\">\n\timport BellIcon from \"@lucide/svelte/icons/bell\";\n\timport FingerprintIcon from \"@lucide/svelte/icons/fingerprint\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport NavCards, {\n\t\ttype SectionTab,\n\t} from \"#lib/components/blocks/nav-cards.svelte\";\n\n\tconst tabs: SectionTab[] = [\n\t\t{\n\t\t\thref: \"#profile\",\n\t\t\tlabel: \"Profile\",\n\t\t\tdescription: \"Your name and the email you sign in with.\",\n\t\t\ticon: UserRoundIcon,\n\t\t},\n\t\t{\n\t\t\thref: \"#security\",\n\t\t\tlabel: \"Security\",\n\t\t\tdescription: \"Password, passkeys and backup codes.\",\n\t\t\ticon: FingerprintIcon,\n\t\t},\n\t\t{\n\t\t\thref: \"#notifications\",\n\t\t\tlabel: \"Notifications\",\n\t\t\tdescription: \"Get told on this device when something happens.\",\n\t\t\ticon: BellIcon,\n\t\t},\n\t];\n</script>\n\n<p class=\"text-muted-foreground hidden text-sm md:block\">\n\tPhones only: narrow the window to see the cards. On desktop the section shows\n\tits tabs instead.\n</p>\n<NavCards {tabs} />\n","examples/document-title.+layout.svelte":"<script lang=\"ts\">\n\timport DocumentTitle from \"#lib/components/blocks/document-title.svelte\";\n\timport { providePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { children } = $props();\n\n\tprovidePageTitle();\n</script>\n\n<DocumentTitle appName=\"Acme\" />\n{@render children()}\n","examples/button.svelte":"<script lang=\"ts\">\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Spinner } from \"#lib/components/ui/spinner/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Button>Primary</Button>\n\t<Button variant=\"secondary\">Secondary</Button>\n\t<Button variant=\"outline\">Outline</Button>\n\t<Button variant=\"ghost\">Ghost</Button>\n\t<Button variant=\"destructive\">Delete</Button>\n\t<Button variant=\"link\">Link</Button>\n\t<Button disabled><Spinner /> Saving</Button>\n\t<Button size=\"icon\" aria-label=\"Add\"><PlusIcon /></Button>\n\t<Button href=\"/\">As a link</Button>\n</div>\n","examples/page-title.+page.svelte":"<script lang=\"ts\">\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport { setPageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { data } = $props();\n\n\tsetPageTitle(() => data.project.name, \"/projects\", [\n\t\t{\n\t\t\tlabel: \"New task\",\n\t\t\ticon: PlusIcon,\n\t\t\thref: \"/tasks/new\",\n\t\t\tprimary: true,\n\t\t},\n\t\t{ label: \"Edit project\", icon: PencilIcon, href: \"/projects/edit\" },\n\t]);\n</script>\n","examples/sidebar.svelte":"<script lang=\"ts\">\n\timport BoxIcon from \"@lucide/svelte/icons/box\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport * as Sidebar from \"#lib/components/ui/sidebar/index.js\";\n\n\tconst items = [\n\t\t{ title: \"Overview\", href: \"#overview\", icon: HouseIcon },\n\t\t{ title: \"Projects\", href: \"#projects\", icon: FolderIcon, badge: 12 },\n\t\t{ title: \"Members\", href: \"#members\", icon: UsersIcon },\n\t\t{ title: \"Settings\", href: \"#settings\", icon: SettingsIcon },\n\t];\n\n\tlet active = $state(\"Projects\");\n</script>\n\n<Sidebar.Provider class=\"h-96 min-h-0 overflow-hidden rounded-lg border\">\n\t<Sidebar.Root collapsible=\"none\" class=\"border-e\">\n\t\t<Sidebar.Header>\n\t\t\t<div class=\"flex items-center gap-2 p-2 font-semibold\">\n\t\t\t\t<BoxIcon class=\"size-4\" /> Acme\n\t\t\t</div>\n\t\t</Sidebar.Header>\n\t\t<Sidebar.Content>\n\t\t\t<Sidebar.Group>\n\t\t\t\t<Sidebar.GroupLabel>Workspace</Sidebar.GroupLabel>\n\t\t\t\t<Sidebar.GroupContent>\n\t\t\t\t\t<Sidebar.Menu>\n\t\t\t\t\t\t{#each items as item (item.title)}\n\t\t\t\t\t\t\t<Sidebar.MenuItem>\n\t\t\t\t\t\t\t\t<Sidebar.MenuButton isActive={active === item.title}>\n\t\t\t\t\t\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\t\t\tonclick={() => (active = item.title)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<item.icon />\n\t\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t{/snippet}\n\t\t\t\t\t\t\t\t</Sidebar.MenuButton>\n\t\t\t\t\t\t\t\t{#if item.badge}\n\t\t\t\t\t\t\t\t\t<Sidebar.MenuBadge>{item.badge}</Sidebar.MenuBadge>\n\t\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t\t</Sidebar.MenuItem>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</Sidebar.Menu>\n\t\t\t\t</Sidebar.GroupContent>\n\t\t\t</Sidebar.Group>\n\t\t</Sidebar.Content>\n\t\t<Sidebar.Footer>\n\t\t\t<div class=\"p-2 text-sm text-muted-foreground\">alex@example.com</div>\n\t\t</Sidebar.Footer>\n\t</Sidebar.Root>\n\t<div class=\"flex-1 p-6\">\n\t\t<h3 class=\"font-semibold\">{active}</h3>\n\t\t<p class=\"text-sm text-muted-foreground\">Page content goes here.</p>\n\t</div>\n</Sidebar.Provider>\n","examples/menubar.svelte":"<script lang=\"ts\">\n\timport * as Menubar from \"#lib/components/ui/menubar/index.js\";\n\n\tlet showArchived = $state(false);\n\tlet sort = $state(\"name\");\n</script>\n\n<Menubar.Root>\n\t<Menubar.Menu>\n\t\t<Menubar.Trigger>File</Menubar.Trigger>\n\t\t<Menubar.Content>\n\t\t\t<Menubar.Item\n\t\t\t\t>New file <Menubar.Shortcut>⌘N</Menubar.Shortcut></Menubar.Item\n\t\t\t>\n\t\t\t<Menubar.Item\n\t\t\t\t>Duplicate <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item\n\t\t\t>\n\t\t\t<Menubar.Sub>\n\t\t\t\t<Menubar.SubTrigger>Export</Menubar.SubTrigger>\n\t\t\t\t<Menubar.SubContent>\n\t\t\t\t\t<Menubar.Item>PDF</Menubar.Item>\n\t\t\t\t\t<Menubar.Item>Markdown</Menubar.Item>\n\t\t\t\t</Menubar.SubContent>\n\t\t\t</Menubar.Sub>\n\t\t\t<Menubar.Separator />\n\t\t\t<Menubar.Item variant=\"destructive\">Delete</Menubar.Item>\n\t\t</Menubar.Content>\n\t</Menubar.Menu>\n\t<Menubar.Menu>\n\t\t<Menubar.Trigger>View</Menubar.Trigger>\n\t\t<Menubar.Content>\n\t\t\t<Menubar.CheckboxItem bind:checked={showArchived}>\n\t\t\t\tShow hidden files\n\t\t\t</Menubar.CheckboxItem>\n\t\t\t<Menubar.Separator />\n\t\t\t<Menubar.Group>\n\t\t\t\t<Menubar.GroupHeading>Sort by</Menubar.GroupHeading>\n\t\t\t\t<Menubar.RadioGroup bind:value={sort}>\n\t\t\t\t\t<Menubar.RadioItem value=\"name\">Name</Menubar.RadioItem>\n\t\t\t\t\t<Menubar.RadioItem value=\"modified\">Date modified</Menubar.RadioItem>\n\t\t\t\t\t<Menubar.RadioItem value=\"size\">Size</Menubar.RadioItem>\n\t\t\t\t</Menubar.RadioGroup>\n\t\t\t</Menubar.Group>\n\t\t</Menubar.Content>\n\t</Menubar.Menu>\n</Menubar.Root>\n","examples/scroll-area.svelte":"<script lang=\"ts\">\n\timport { ScrollArea } from \"#lib/components/ui/scroll-area/index.js\";\n\timport { Separator } from \"#lib/components/ui/separator/index.js\";\n\n\tconst files = Array.from({ length: 30 }, (_, i) => ({\n\t\tid: i + 1,\n\t\tname: [\"Notes\", \"Roadmap\", \"Report\", \"Brief\", \"Draft\"][i % 5],\n\t\tsize: ((i * 37) % 120) + 8,\n\t}));\n</script>\n\n<ScrollArea class=\"h-72 rounded-md border\">\n\t<div class=\"p-4\">\n\t\t<h4 class=\"mb-4 text-sm font-medium\">Files</h4>\n\t\t{#each files as file (file.id)}\n\t\t\t<div class=\"flex justify-between text-sm\">\n\t\t\t\t<span>{file.name}</span>\n\t\t\t\t<span class=\"text-muted-foreground\">{file.size} KB</span>\n\t\t\t</div>\n\t\t\t<Separator class=\"my-2\" />\n\t\t{/each}\n\t</div>\n</ScrollArea>\n","examples/pagination.svelte":"<script lang=\"ts\">\n\timport * as Pagination from \"#lib/components/ui/pagination/index.js\";\n\n\tlet page = $state(1);\n</script>\n\n<Pagination.Root count={240} perPage={20} bind:page>\n\t{#snippet children({ pages, currentPage })}\n\t\t<Pagination.Content>\n\t\t\t<Pagination.Item>\n\t\t\t\t<Pagination.Previous />\n\t\t\t</Pagination.Item>\n\t\t\t{#each pages as p (p.key)}\n\t\t\t\t<Pagination.Item>\n\t\t\t\t\t{#if p.type === \"ellipsis\"}\n\t\t\t\t\t\t<Pagination.Ellipsis />\n\t\t\t\t\t{:else}\n\t\t\t\t\t\t<Pagination.Link page={p} isActive={currentPage === p.value} />\n\t\t\t\t\t{/if}\n\t\t\t\t</Pagination.Item>\n\t\t\t{/each}\n\t\t\t<Pagination.Item>\n\t\t\t\t<Pagination.Next />\n\t\t\t</Pagination.Item>\n\t\t</Pagination.Content>\n\t{/snippet}\n</Pagination.Root>\n","examples/time-range-picker.svelte":"<script lang=\"ts\">\n\timport TimeRangePicker, {\n\t\ttype TimeRange,\n\t} from \"#lib/components/blocks/time-range-picker.svelte\";\n\timport TimeSeriesChart from \"#lib/components/blocks/time-series-chart.svelte\";\n\n\tconst hour = 3_600_000;\n\tconst day = 24 * hour;\n\n\tlet range = $state<TimeRange>({\n\t\tpreset: \"7d\",\n\t\tstart: new Date(Date.now() - 7 * day),\n\t\tend: new Date(),\n\t});\n\n\tfunction buckets(start: Date, end: Date) {\n\t\tconst span = end.getTime() - start.getTime();\n\t\tconst unit = span <= 2 * day ? \"hour\" : span <= 100 * day ? \"day\" : \"month\";\n\t\tconst cursor = new Date(start);\n\t\tcursor.setMinutes(0, 0, 0);\n\t\tif (unit !== \"hour\") {\n\t\t\tcursor.setHours(0);\n\t\t}\n\t\tif (unit === \"month\") {\n\t\t\tcursor.setDate(1);\n\t\t}\n\t\tconst points: Date[] = [];\n\t\twhile (cursor <= end) {\n\t\t\tpoints.push(new Date(cursor));\n\t\t\tif (unit === \"hour\") {\n\t\t\t\tcursor.setHours(cursor.getHours() + 1);\n\t\t\t} else if (unit === \"day\") {\n\t\t\t\tcursor.setDate(cursor.getDate() + 1);\n\t\t\t} else {\n\t\t\t\tcursor.setMonth(cursor.getMonth() + 1);\n\t\t\t}\n\t\t}\n\t\treturn { unit, points };\n\t}\n\n\tfunction activeUsers(at: Date, unit: string) {\n\t\tif (unit === \"hour\") {\n\t\t\treturn Math.round(\n\t\t\t\t60 + 45 * Math.sin(((at.getHours() - 9) / 24) * 2 * Math.PI),\n\t\t\t);\n\t\t}\n\t\tconst index = Math.floor(at.getTime() / day);\n\t\tconst ripple = ((index * 37) % 11) / 11;\n\t\tconst daily = 900 + 160 * Math.sin(index / 6) + 120 * ripple;\n\t\treturn Math.round(unit === \"month\" ? daily * 30 : daily);\n\t}\n\n\tconst series = $derived.by(() => {\n\t\tconst { unit, points } = buckets(range.start, range.end);\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: \"Active users\",\n\t\t\t\tpoints: points.map((at) => ({ at, value: activeUsers(at, unit) })),\n\t\t\t},\n\t\t];\n\t});\n</script>\n\n<div class=\"grid w-full gap-6\">\n\t<TimeRangePicker bind:value={range} />\n\t<TimeSeriesChart title=\"Active users\" kind=\"area\" {series} />\n</div>\n","examples/copy-field.svelte":"<script lang=\"ts\">\n\timport CopyField from \"#lib/components/blocks/copy-field.svelte\";\n</script>\n\n<CopyField label=\"Copy the token\" value=\"oc_4f9a2c81d7e3b605\" />\n","examples/separator.svelte":"<script lang=\"ts\">\n\timport { Separator } from \"#lib/components/ui/separator/index.js\";\n</script>\n\n<div class=\"grid gap-4\">\n\t<div class=\"grid gap-1\">\n\t\t<h4 class=\"text-sm font-medium\">Marketing site</h4>\n\t\t<p class=\"text-sm text-muted-foreground\">4 members, 23 tasks</p>\n\t</div>\n\t<Separator />\n\t<div class=\"flex h-5 items-center gap-4 text-sm\">\n\t\t<a href=\"#overview\">Overview</a>\n\t\t<Separator orientation=\"vertical\" />\n\t\t<a href=\"#tasks\">Tasks</a>\n\t\t<Separator orientation=\"vertical\" />\n\t\t<a href=\"#settings\">Settings</a>\n\t</div>\n</div>\n","examples/command.svelte":"<script lang=\"ts\">\n\timport CalendarIcon from \"@lucide/svelte/icons/calendar\";\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\timport SearchIcon from \"@lucide/svelte/icons/search\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Command from \"#lib/components/ui/command/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div class=\"grid gap-4\">\n\t<Command.Root class=\"rounded-lg border\">\n\t\t<Command.Input placeholder=\"Search projects and documents...\" />\n\t\t<Command.List>\n\t\t\t<Command.Empty>No results.</Command.Empty>\n\t\t\t<Command.Group heading=\"Projects\">\n\t\t\t\t<Command.Item><FolderIcon /> Website redesign</Command.Item>\n\t\t\t\t<Command.Item><FolderIcon /> Mobile app</Command.Item>\n\t\t\t</Command.Group>\n\t\t\t<Command.Separator />\n\t\t\t<Command.Group heading=\"Documents\">\n\t\t\t\t<Command.Item><FileTextIcon /> Quarterly report</Command.Item>\n\t\t\t\t<Command.Item><FileTextIcon /> Meeting notes</Command.Item>\n\t\t\t</Command.Group>\n\t\t</Command.List>\n\t</Command.Root>\n\n\t<Button variant=\"outline\" class=\"w-fit\" onclick={() => (open = true)}>\n\t\t<SearchIcon /> Open command palette\n\t</Button>\n\t<Command.Dialog bind:open>\n\t\t<Command.Input placeholder=\"Type a command...\" />\n\t\t<Command.List>\n\t\t\t<Command.Empty>No results.</Command.Empty>\n\t\t\t<Command.Group heading=\"Actions\">\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<PlusIcon /> New document\n\t\t\t\t\t<Command.Shortcut>⌘N</Command.Shortcut>\n\t\t\t\t</Command.Item>\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<CalendarIcon /> Schedule a meeting\n\t\t\t\t</Command.Item>\n\t\t\t\t<Command.Item onSelect={() => (open = false)}>\n\t\t\t\t\t<SettingsIcon /> Settings\n\t\t\t\t\t<Command.Shortcut>⌘,</Command.Shortcut>\n\t\t\t\t</Command.Item>\n\t\t\t</Command.Group>\n\t\t</Command.List>\n\t</Command.Dialog>\n</div>\n","examples/page-title.app-bar.svelte":"<script lang=\"ts\">\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<header class=\"flex h-14 items-center gap-2 px-4\">\n\t{#if title.backHref}\n\t\t<a href={title.backHref}>Back</a>\n\t{/if}\n\t<h1 class=\"truncate font-semibold\">{title.current}</h1>\n</header>\n","examples/auth-shell.svelte":"<script lang=\"ts\">\n\timport AuthShell from \"#lib/components/blocks/auth-shell.svelte\";\n\timport Input from \"#lib/components/kit/input.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<AuthShell heading=\"Sign in\" subheading=\"Welcome back.\">\n\t{#snippet brand()}\n\t\t<div class=\"bg-primary glow size-12 rounded-2xl\"></div>\n\t{/snippet}\n\t<form class=\"grid gap-4\">\n\t\t<Input label=\"Email\" name=\"email\" type=\"email\" autocomplete=\"email\" />\n\t\t<Button type=\"submit\" class=\"h-11\">Continue</Button>\n\t</form>\n\t{#snippet footer()}\n\t\tNo account? Ask your admin.\n\t{/snippet}\n</AuthShell>\n","examples/select.svelte":"<script lang=\"ts\">\n\timport * as Select from \"#lib/components/ui/select/index.js\";\n\n\tconst roles = [\n\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t{ value: \"admin\", label: \"Admin\" },\n\t\t{ value: \"owner\", label: \"Owner\" },\n\t];\n\n\tlet role = $state(\"\");\n\tconst label = $derived(\n\t\troles.find((r) => r.value === role)?.label ?? \"Pick a role\",\n\t);\n</script>\n\n<Select.Root type=\"single\" bind:value={role}>\n\t<Select.Trigger class=\"w-56\">{label}</Select.Trigger>\n\t<Select.Content>\n\t\t<Select.Group>\n\t\t\t<Select.Label>Roles</Select.Label>\n\t\t\t{#each roles as r (r.value)}\n\t\t\t\t<Select.Item value={r.value} label={r.label}>{r.label}</Select.Item>\n\t\t\t{/each}\n\t\t</Select.Group>\n\t</Select.Content>\n</Select.Root>\n","examples/resizable.svelte":"<script lang=\"ts\">\n\timport * as Resizable from \"#lib/components/ui/resizable/index.js\";\n</script>\n\n<div class=\"h-72 rounded-md border\">\n\t<Resizable.PaneGroup direction=\"horizontal\">\n\t\t<Resizable.Pane defaultSize={25} minSize={15}>\n\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t<span class=\"font-medium\">Services</span>\n\t\t\t</div>\n\t\t</Resizable.Pane>\n\t\t<Resizable.Handle withHandle />\n\t\t<Resizable.Pane defaultSize={75}>\n\t\t\t<Resizable.PaneGroup direction=\"vertical\">\n\t\t\t\t<Resizable.Pane defaultSize={60}>\n\t\t\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t\t\t<span class=\"font-medium\">Details</span>\n\t\t\t\t\t</div>\n\t\t\t\t</Resizable.Pane>\n\t\t\t\t<Resizable.Handle withHandle />\n\t\t\t\t<Resizable.Pane defaultSize={40}>\n\t\t\t\t\t<div class=\"flex h-full items-center justify-center p-4\">\n\t\t\t\t\t\t<span class=\"font-medium\">Logs</span>\n\t\t\t\t\t</div>\n\t\t\t\t</Resizable.Pane>\n\t\t\t</Resizable.PaneGroup>\n\t\t</Resizable.Pane>\n\t</Resizable.PaneGroup>\n</div>\n","examples/sonner.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tfunction syncFiles() {\n\t\treturn new Promise((resolve) => setTimeout(resolve, 1500));\n\t}\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<Button variant=\"outline\" onclick={() => toast(\"File uploaded.\")}>\n\t\tDefault\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() =>\n\t\t\ttoast.success(\"Invite sent.\", {\n\t\t\t\tdescription: \"Sam will get an email shortly.\",\n\t\t\t})}\n\t>\n\t\tSuccess\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() => toast.error(\"Couldn't reach the server.\")}\n\t>\n\t\tError\n\t</Button>\n\t<Button\n\t\tvariant=\"outline\"\n\t\tonclick={() =>\n\t\t\ttoast.promise(syncFiles(), {\n\t\t\t\tloading: \"Syncing files...\",\n\t\t\t\tsuccess: \"Files up to date.\",\n\t\t\t\terror: \"Sync failed.\",\n\t\t\t})}\n\t>\n\t\tPromise\n\t</Button>\n</div>\n","examples/checkbox.svelte":"<script lang=\"ts\">\n\timport { Checkbox } from \"#lib/components/ui/checkbox/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\n\tlet notify = $state(true);\n</script>\n\n<Field.Group>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"notify\" bind:checked={notify} />\n\t\t<Field.Label for=\"notify\">Email me when someone comments</Field.Label>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"weekly\" />\n\t\t<Field.Content>\n\t\t\t<Field.Label for=\"weekly\">Weekly digest</Field.Label>\n\t\t\t<Field.Description>A summary of activity every Monday.</Field.Description>\n\t\t</Field.Content>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\">\n\t\t<Checkbox id=\"share\" indeterminate />\n\t\t<Field.Label for=\"share\">Share with everyone</Field.Label>\n\t</Field.Field>\n\t<Field.Field orientation=\"horizontal\" data-disabled>\n\t\t<Checkbox id=\"archived\" disabled />\n\t\t<Field.Label for=\"archived\">Include archived projects</Field.Label>\n\t</Field.Field>\n</Field.Group>\n","examples/empty-state.svelte":"<script lang=\"ts\">\n\timport InboxIcon from \"@lucide/svelte/icons/inbox\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\n\timport EmptyState from \"#lib/components/blocks/empty-state.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<EmptyState\n\ticon={InboxIcon}\n\ttitle=\"No messages yet\"\n\tsubtitle=\"Start a conversation and it shows up here.\"\n>\n\t<Button><PlusIcon /> New message</Button>\n</EmptyState>\n","examples/password.svelte":"<script lang=\"ts\">\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { passwordRules, passwordScore } from \"#lib/password.js\";\n\n\tlet password = $state(\"\");\n\n\tconst rules = $derived(passwordRules(password, \"alex@example.com\"));\n\tconst score = $derived(passwordScore(password, \"alex@example.com\"));\n</script>\n\n<div class=\"grid gap-3\">\n\t<Input\n\t\ttype=\"text\"\n\t\tplaceholder=\"Type a password\"\n\t\taria-label=\"Password\"\n\t\tbind:value={password}\n\t/>\n\t<p class=\"text-sm\">Score: {score} / 4</p>\n\t<ul class=\"text-sm\">\n\t\t{#each rules as rule (rule.id)}\n\t\t\t<li class={rule.passed ? \"text-positive\" : \"text-muted-foreground\"}>\n\t\t\t\t{rule.passed ? \"✓\" : \"✗\"}\n\t\t\t\t{rule.label}\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</div>\n","examples/icon-button.svelte":"<script lang=\"ts\">\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport IconButton from \"#lib/components/blocks/icon-button.svelte\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-2\">\n\t<IconButton label=\"Edit\" icon={PencilIcon} />\n\t<IconButton label=\"Settings\" icon={SettingsIcon} href=\"#\" variant=\"outline\" />\n\t<IconButton label=\"Delete\" icon={Trash2Icon} variant=\"destructive\" />\n</div>\n","examples/logger.svelte":"<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tServer only: what a <code>new Logger(\"Projects\")</code> writes. Console\n\t\tformat in development, one JSON line per entry with\n\t\t<code>LOG_FORMAT=json</code>, the active trace and span ids included so a\n\t\tline leads to its trace.\n\t</p>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-200\"><span\n\t\t\tclass=\"text-neutral-500\">14:02:11.408</span\n\t\t> <span class=\"text-sky-400\">INFO </span> <span class=\"text-fuchsia-400\"\n\t\t\t>[Projects]</span\n\t\t> Project created <span class=\"text-neutral-400\"\n\t\t\t>{\"{\"} projectId: <span class=\"text-emerald-400\">'p_81f2'</span\n\t\t\t> {\"}\"}</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:11.412</span> <span class=\"text-sky-400\"\n\t\t\t>INFO </span> <span class=\"text-fuchsia-400\">[Http]</span> <b>POST</b\n\t\t> /projects <span class=\"text-emerald-400\">201</span> <span\n\t\t\tclass=\"text-neutral-500\">38ms</span\n\t\t>\n<span class=\"text-neutral-500\">14:02:15.020</span> <span class=\"text-red-400\"\n\t\t\t>ERROR</span\n\t\t> <span class=\"text-fuchsia-400\">[Http]</span> <b>GET</b> /api/stats <span\n\t\t\tclass=\"text-red-400\">500</span\n\t\t> <span class=\"text-neutral-500\">12ms</span></pre>\n\t<pre\n\t\tclass=\"overflow-x-auto rounded-xl bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-300\">{`{\"time\":\"2026-10-29T14:02:11.408Z\",\"level\":\"info\",\"scope\":\"Projects\",\"message\":\"Project created\",\"trace_id\":\"1ac71cdacfc998b028cb0a12aee24333\",\"span_id\":\"c26a99096a72dd42\",\"projectId\":\"p_81f2\"}`}</pre>\n</div>\n","examples/bottom-nav.+layout.svelte":"<script lang=\"ts\">\n\timport HouseIcon from \"@lucide/svelte/icons/house\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport BottomNav from \"#lib/components/blocks/bottom-nav.svelte\";\n\n\tconst { children } = $props();\n\n\tconst items = [\n\t\t{ href: \"/\", label: \"Home\", icon: HouseIcon },\n\t\t{ href: \"/groups\", label: \"Groups\", icon: UsersIcon },\n\t\t{ href: \"/account\", label: \"Account\", icon: UserRoundIcon },\n\t];\n</script>\n\n<main class=\"min-h-dvh pb-32 md:pb-10\">\n\t{@render children()}\n</main>\n<BottomNav {items} />\n","examples/page-title.+layout.svelte":"<script lang=\"ts\">\n\timport { providePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst { children } = $props();\n\n\tprovidePageTitle();\n</script>\n\n{@render children()}\n","examples/new-password-fields.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nimport { passwordRules } from \"#lib/password.js\";\n\nexport const actions = {\n\tdefault: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tconst password = String(form.get(\"password\") ?? \"\");\n\t\tconst failed = passwordRules(\n\t\t\tpassword,\n\t\t\tString(form.get(\"email\") ?? \"\"),\n\t\t).filter((rule) => !rule.passed);\n\t\tif (failed.length > 0) {\n\t\t\treturn fail(400, {\n\t\t\t\terrors: { password: failed.map((rule) => rule.label) },\n\t\t\t});\n\t\t}\n\t\tif (form.get(\"confirmPassword\") !== password) {\n\t\t\treturn fail(400, {\n\t\t\t\terrors: { confirmPassword: [\"The passwords don't match.\"] },\n\t\t\t});\n\t\t}\n\t\treturn { saved: true };\n\t},\n} satisfies Actions;\n","examples/switch.svelte":"<script lang=\"ts\">\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n\timport { Switch } from \"#lib/components/ui/switch/index.js\";\n\n\tlet emails = $state(true);\n\tlet digest = $state(false);\n</script>\n\n<div class=\"grid gap-4\">\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"emails\" bind:checked={emails} />\n\t\t<Label for=\"emails\">Email notifications</Label>\n\t</div>\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"digest\" size=\"sm\" bind:checked={digest} />\n\t\t<Label for=\"digest\">Weekly digest {digest ? \"on\" : \"off\"}</Label>\n\t</div>\n\t<div class=\"flex items-center gap-3\">\n\t\t<Switch id=\"sso\" disabled />\n\t\t<Label for=\"sso\">Single sign-on (Pro plan)</Label>\n\t</div>\n</div>\n","examples/label.svelte":"<script lang=\"ts\">\n\timport { Checkbox } from \"#lib/components/ui/checkbox/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Label } from \"#lib/components/ui/label/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-end gap-6\">\n\t<div class=\"flex flex-col gap-2\">\n\t\t<Label for=\"project-name\">Project name</Label>\n\t\t<Input id=\"project-name\" placeholder=\"Marketing site\" />\n\t</div>\n\t<div class=\"flex h-9 items-center gap-2\">\n\t\t<Checkbox id=\"project-notify\" />\n\t\t<Label for=\"project-notify\">Notify team members</Label>\n\t</div>\n</div>\n","examples/page-title.svelte":"<script lang=\"ts\">\n\timport { usePageTitle } from \"#lib/page-title.svelte.js\";\n\n\tconst title = usePageTitle();\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tThis page set its title to <strong>{title.current}</strong> and its back\n\tbutton to <code>{title.backHref}</code>. The phone app bar, the desktop header\n\tand the browser tab all read it.\n</p>\n","examples/setting-switch.svelte":"<script lang=\"ts\">\n\timport SettingSwitch from \"#lib/components/blocks/setting-switch.svelte\";\n</script>\n\n<form method=\"POST\" action=\"?/save\">\n\t<SettingSwitch\n\t\tname=\"push\"\n\t\tlabel=\"Push notifications\"\n\t\tdescription=\"On this device only.\"\n\t\tchecked\n\t/>\n\t<SettingSwitch\n\t\tname=\"digest\"\n\t\tlabel=\"Weekly digest\"\n\t\tdescription=\"Every Monday morning.\"\n\t\tchecked={false}\n\t/>\n</form>\n","examples/error-page.svelte":"<script lang=\"ts\">\n\timport ErrorPage from \"#lib/components/blocks/error-page.svelte\";\n\timport * as Tabs from \"#lib/components/ui/tabs/index.js\";\n\n\tlet status = $state(\"404\");\n</script>\n\n<Tabs.Root bind:value={status}>\n\t<Tabs.List>\n\t\t<Tabs.Trigger value=\"404\">404</Tabs.Trigger>\n\t\t<Tabs.Trigger value=\"500\">500</Tabs.Trigger>\n\t</Tabs.List>\n</Tabs.Root>\n<ErrorPage\n\thomeHref=\"/\"\n\tstatus={Number(status)}\n\terror={{\n\t\tmessage: \"The database didn't answer in time.\",\n\t\tstatus: Number(status),\n\t\terrorId: \"7f3a9c21\",\n\t}}\n\tclass=\"min-h-96\"\n/>\n","examples/dialog.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Dialog from \"#lib/components/ui/dialog/index.js\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\n\tlet open = $state(false);\n\n\tfunction save(event: SubmitEvent) {\n\t\tevent.preventDefault();\n\t\topen = false;\n\t\ttoast.success(\"Project renamed.\");\n\t}\n</script>\n\n<Dialog.Root bind:open>\n\t<Dialog.Trigger>\n\t\t{#snippet child({ props })}\n\t\t\t<Button {...props} variant=\"outline\">Rename project</Button>\n\t\t{/snippet}\n\t</Dialog.Trigger>\n\t<Dialog.Content>\n\t\t<form class=\"grid gap-6\" onsubmit={save}>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>Rename project</Dialog.Title>\n\t\t\t\t<Dialog.Description>\n\t\t\t\t\tEvery member sees the new name right away.\n\t\t\t\t</Dialog.Description>\n\t\t\t</Dialog.Header>\n\t\t\t<Field.Field>\n\t\t\t\t<Field.Label for=\"project-name\">Name</Field.Label>\n\t\t\t\t<Input id=\"project-name\" value=\"Website redesign\" />\n\t\t\t</Field.Field>\n\t\t\t<Dialog.Footer>\n\t\t\t\t<Dialog.Close>\n\t\t\t\t\t{#snippet child({ props })}\n\t\t\t\t\t\t<Button {...props} variant=\"outline\">Cancel</Button>\n\t\t\t\t\t{/snippet}\n\t\t\t\t</Dialog.Close>\n\t\t\t\t<Button type=\"submit\">Save</Button>\n\t\t\t</Dialog.Footer>\n\t\t</form>\n\t</Dialog.Content>\n</Dialog.Root>\n","examples/button-group.svelte":"<script lang=\"ts\">\n\timport ChevronLeftIcon from \"@lucide/svelte/icons/chevron-left\";\n\timport ChevronRightIcon from \"@lucide/svelte/icons/chevron-right\";\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\n\timport * as ButtonGroup from \"#lib/components/ui/button-group/index.js\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n</script>\n\n<div class=\"flex flex-wrap items-center gap-4\">\n\t<ButtonGroup.Root>\n\t\t<Button variant=\"outline\">Day</Button>\n\t\t<Button variant=\"outline\">Week</Button>\n\t\t<Button variant=\"outline\">Month</Button>\n\t</ButtonGroup.Root>\n\t<ButtonGroup.Root>\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Previous month\">\n\t\t\t<ChevronLeftIcon />\n\t\t</Button>\n\t\t<ButtonGroup.Text>October 2026</ButtonGroup.Text>\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Next month\">\n\t\t\t<ChevronRightIcon />\n\t\t</Button>\n\t</ButtonGroup.Root>\n\t<ButtonGroup.Root>\n\t\t<ButtonGroup.Text>https://</ButtonGroup.Text>\n\t\t<Input value=\"acme.com\" aria-label=\"Domain\" />\n\t\t<Button variant=\"outline\" size=\"icon\" aria-label=\"Copy\">\n\t\t\t<CopyIcon />\n\t\t</Button>\n\t</ButtonGroup.Root>\n</div>\n","examples/field.svelte":"<script lang=\"ts\">\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n\timport { Switch } from \"#lib/components/ui/switch/index.js\";\n\n\tlet estimate = $state(\"\");\n\tconst invalid = $derived(estimate !== \"\" && Number(estimate) <= 0);\n</script>\n\n<Field.Set>\n\t<Field.Legend>New task</Field.Legend>\n\t<Field.Description>Visible to everyone in the project.</Field.Description>\n\t<Field.Group class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n\t\t<Field.Field>\n\t\t\t<Field.Label for=\"task-title\">Title</Field.Label>\n\t\t\t<Input id=\"task-title\" placeholder=\"Write the release notes\" />\n\t\t</Field.Field>\n\t\t<Field.Field data-invalid={invalid}>\n\t\t\t<Field.Label for=\"task-estimate\">Estimate</Field.Label>\n\t\t\t<Input\n\t\t\t\tid=\"task-estimate\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tplaceholder=\"0\"\n\t\t\t\taria-invalid={invalid}\n\t\t\t\tbind:value={estimate}\n\t\t\t/>\n\t\t\t{#if invalid}\n\t\t\t\t<Field.Error>The estimate must be greater than zero.</Field.Error>\n\t\t\t{:else}\n\t\t\t\t<Field.Description>In hours.</Field.Description>\n\t\t\t{/if}\n\t\t</Field.Field>\n\t\t<Field.Field orientation=\"horizontal\">\n\t\t\t<Switch id=\"task-recurring\" />\n\t\t\t<Field.Label for=\"task-recurring\">Repeat every week</Field.Label>\n\t\t</Field.Field>\n\t</Field.Group>\n</Field.Set>\n","examples/telemetry.instrumentation.server.ts":"import { Telemetry } from \"#lib/server/telemetry.js\";\n\nnew Telemetry({\n\tserviceName: \"acme\",\n\tserviceVersion: process.env.APP_VERSION,\n\tendpoint: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,\n}).start();\n","examples/fab.svelte":"<script lang=\"ts\">\n\timport PlusIcon from \"@lucide/svelte/icons/plus\";\n\timport { toast } from \"svelte-sonner\";\n\n\timport Fab from \"#lib/components/blocks/fab.svelte\";\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tPhones only: narrow the window and it floats bottom right, above the tab bar.\n\tOn desktop the same action is a primary button in the page header.\n</p>\n<Fab label=\"New task\" icon={PlusIcon} onclick={() => toast(\"Fab tapped.\")} />\n","examples/tab-section.svelte":"<script lang=\"ts\">\n\timport { resolve } from \"$app/paths\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n</script>\n\n<div class=\"grid justify-items-start gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\tOne real route per tab, under a layout that renders the section. The live\n\t\tdemo below is the code on this page: on desktop it opens the first tab, on\n\t\tphones it lists the tabs as cards.\n\t</p>\n\t<Button href={resolve(\"/section\")}>Open the demo section</Button>\n</div>\n","examples/accent-toggle.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport AccentToggle from \"#lib/components/blocks/accent-toggle.svelte\";\n</script>\n\n<AccentToggle onchange={(accent) => toast(`Accent: ${accent}.`)} />\n","examples/hooks.hooks.server.ts":"import { sequence } from \"@sveltejs/kit/hooks\";\n\nimport { requestLog, unexpectedErrors } from \"#lib/server/hooks.js\";\nimport { Logger } from \"#lib/server/logger.js\";\n\nexport const handle = sequence(requestLog(new Logger(\"Http\")));\n\nexport const handleError = unexpectedErrors(\n\tnew Logger(\"Server\"),\n\t\"Something went wrong.\",\n);\n","examples/tab-nav.svelte":"<script lang=\"ts\">\n\timport FingerprintIcon from \"@lucide/svelte/icons/fingerprint\";\n\timport PaletteIcon from \"@lucide/svelte/icons/palette\";\n\timport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\n\timport TabNav from \"#lib/components/blocks/tab-nav.svelte\";\n\n\tconst tabs = [\n\t\t{ href: \"/blocks/tab-nav\", label: \"Profile\", icon: UserRoundIcon },\n\t\t{ href: \"/account/appearance\", label: \"Appearance\", icon: PaletteIcon },\n\t\t{ href: \"/account/security\", label: \"Security\", icon: FingerprintIcon },\n\t];\n</script>\n\n<TabNav {tabs} />\n","examples/responsive-sheet.svelte":"<script lang=\"ts\">\n\timport ResponsiveSheet from \"#lib/components/blocks/responsive-sheet.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet open = $state(false);\n</script>\n\n<div>\n\t<Button variant=\"outline\" onclick={() => (open = true)}>Edit profile</Button>\n</div>\n<ResponsiveSheet\n\tbind:open\n\ttitle=\"Edit profile\"\n\tdescription=\"A dialog on desktop, a drawer on phones.\"\n>\n\t<p class=\"pb-6 text-sm\">Resize the window to see it switch.</p>\n</ResponsiveSheet>\n","examples/card.svelte":"<script lang=\"ts\">\n\timport EllipsisIcon from \"@lucide/svelte/icons/ellipsis\";\n\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\timport * as Card from \"#lib/components/ui/card/index.js\";\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3\">\n\t<Card.Root>\n\t\t<Card.Header>\n\t\t\t<Card.Title>Website redesign</Card.Title>\n\t\t\t<Card.Description>4 members · 48 files</Card.Description>\n\t\t\t<Card.Action>\n\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"More\">\n\t\t\t\t\t<EllipsisIcon />\n\t\t\t\t</Button>\n\t\t\t</Card.Action>\n\t\t</Card.Header>\n\t\t<Card.Content>\n\t\t\t<p class=\"text-2xl font-semibold tabular-nums\">12 of 20 tasks</p>\n\t\t\t<p class=\"text-muted-foreground\">Due in 5 days</p>\n\t\t</Card.Content>\n\t\t<Card.Footer class=\"gap-2\">\n\t\t\t<Button variant=\"outline\">Share</Button>\n\t\t\t<Button>New task</Button>\n\t\t</Card.Footer>\n\t</Card.Root>\n\t<Card.Root size=\"sm\">\n\t\t<Card.Header>\n\t\t\t<Card.Title>Quarterly report</Card.Title>\n\t\t\t<Card.Description>Edited 12 minutes ago</Card.Description>\n\t\t</Card.Header>\n\t\t<Card.Content class=\"text-muted-foreground\">\n\t\t\tShared with 3 team members.\n\t\t</Card.Content>\n\t</Card.Root>\n</div>\n","examples/components/date-field.svelte":"<script lang=\"ts\">\n\timport DateField from \"#lib/components/kit/date-field.svelte\";\n\n\tlet start = $state(\"\");\n\tlet due = $state(\"2026-06-15\");\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n\t<DateField\n\t\tlabel=\"Start date\"\n\t\tname=\"start\"\n\t\tdescription=\"The first day of the project.\"\n\t\tbind:value={start}\n\t/>\n\t<DateField\n\t\tlabel=\"Due date\"\n\t\tname=\"due\"\n\t\tmin=\"2026-01-01\"\n\t\tmax=\"2026-12-31\"\n\t\trequired\n\t\tbind:value={due}\n\t/>\n\t<DateField\n\t\tlabel=\"Review\"\n\t\tname=\"review\"\n\t\terror=\"Pick a date after the start.\"\n\t/>\n\t<DateField label=\"Created\" value=\"2026-03-02\" disabled />\n</div>\n","examples/components/file-dropzone.svelte":"<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\n\timport FileDropzone, {\n\t\ttype FileRejection,\n\t} from \"#lib/components/kit/file-dropzone.svelte\";\n\n\tconst reasons: Record<FileRejection, string> = {\n\t\t\"too-large\": \"is over 10 MB\",\n\t\t\"too-many\": \"is one file too many\",\n\t\ttype: \"isn't an image or a PDF\",\n\t};\n\n\tlet files = $state<File[]>([]);\n</script>\n\n<FileDropzone\n\tlabel=\"Attachments\"\n\tname=\"attachments\"\n\tdescription=\"Images or PDFs, shared with the whole team.\"\n\taccept=\"image/*,.pdf\"\n\tmaxFiles={5}\n\tmaxFileSize={10 * 1024 * 1024}\n\tfolders\n\tbind:files\n\tonreject={({ file, reason }) =>\n\t\ttoast.error(`${file.name} ${reasons[reason]}.`)}\n/>\n","examples/components/avatar-group.svelte":"<script lang=\"ts\">\n\timport AvatarGroup from \"#lib/components/kit/avatar-group.svelte\";\n\n\tconst members = [\n\t\t{ name: \"Alex Martin\" },\n\t\t{ name: \"Sam Lee\" },\n\t\t{ name: \"Jordan Kim\" },\n\t\t{ name: \"Robin Diaz\" },\n\t\t{ name: \"Casey Moreau\" },\n\t\t{ name: \"Taylor Nguyen\" },\n\t];\n</script>\n\n<div class=\"flex flex-wrap items-center gap-6\">\n\t<AvatarGroup people={members} size=\"sm\" />\n\t<AvatarGroup people={members} max={3} />\n\t<AvatarGroup people={members.slice(0, 2)} size=\"lg\" />\n</div>\n","examples/components/radio-list.svelte":"<script lang=\"ts\">\n\timport RadioList from \"#lib/components/kit/radio-list.svelte\";\n\n\tlet visibility = $state(\"team\");\n\tlet plan = $state(\"standard\");\n</script>\n\n<div class=\"grid gap-6\">\n\t<RadioList\n\t\tlabel=\"Visibility\"\n\t\tname=\"visibility\"\n\t\tdescription=\"You can change this later.\"\n\t\toptions={[\n\t\t\t{ value: \"private\", label: \"Private\", description: \"Only you.\" },\n\t\t\t{ value: \"team\", label: \"Team\", description: \"Everyone in your team.\" },\n\t\t\t{\n\t\t\t\tvalue: \"public\",\n\t\t\t\tlabel: \"Public\",\n\t\t\t\tdescription: \"Anyone with the link.\",\n\t\t\t\tdisabled: true,\n\t\t\t},\n\t\t]}\n\t\tbind:value={visibility}\n\t/>\n\t<RadioList\n\t\tlabel=\"Plan\"\n\t\tname=\"plan\"\n\t\tvariant=\"cards\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"starter\",\n\t\t\t\tlabel: \"Starter\",\n\t\t\t\tdescription: \"One project, three members.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"standard\",\n\t\t\t\tlabel: \"Standard\",\n\t\t\t\tdescription: \"Ten projects, unlimited members.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"enterprise\",\n\t\t\t\tlabel: \"Enterprise\",\n\t\t\t\tdescription: \"Single sign-on and audit log.\",\n\t\t\t},\n\t\t]}\n\t\tbind:value={plan}\n\t/>\n</div>\n","examples/components/input.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n\n\tlet email = $state(\"\");\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n\t<Input\n\t\tlabel=\"Email\"\n\t\tname=\"email\"\n\t\ttype=\"email\"\n\t\tautocomplete=\"email\"\n\t\trequired\n\t\tdescription=\"We send the sign-in link here.\"\n\t\tbind:value={email}\n\t/>\n\t<Input label=\"Password\" name=\"password\" type=\"password\" />\n\t<Input label=\"Project name\" name=\"project\" error=\"This name is taken.\" />\n\t<Input label=\"Read only\" value=\"acme-workspace\" disabled />\n</div>\n","examples/components/menu.svelte":"<script lang=\"ts\">\n\timport CopyIcon from \"@lucide/svelte/icons/copy\";\n\timport ExternalLinkIcon from \"@lucide/svelte/icons/external-link\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport Trash2Icon from \"@lucide/svelte/icons/trash-2\";\n\n\timport Menu from \"#lib/components/kit/menu.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet lastAction = $state(\"Nothing yet\");\n</script>\n\n<div class=\"grid gap-4\">\n\t<div\n\t\tclass=\"bg-card flex w-full items-center justify-between gap-3 rounded-xl border p-3 pl-4\"\n\t>\n\t\t<div class=\"min-w-0\">\n\t\t\t<p class=\"truncate font-medium\">Website redesign</p>\n\t\t\t<p class=\"text-muted-foreground text-sm\">Updated 2 hours ago</p>\n\t\t</div>\n\t\t<Menu\n\t\t\ttitle=\"Website redesign\"\n\t\t\titems={[\n\t\t\t\t{ label: \"Open\", icon: ExternalLinkIcon, href: \"#open\" },\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Rename\",\n\t\t\t\t\ticon: PencilIcon,\n\t\t\t\t\tshortcut: \"R\",\n\t\t\t\t\tonSelect: () => (lastAction = \"Rename\"),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Duplicate\",\n\t\t\t\t\ticon: CopyIcon,\n\t\t\t\t\tshortcut: \"⌘D\",\n\t\t\t\t\tonSelect: () => (lastAction = \"Duplicate\"),\n\t\t\t\t},\n\t\t\t\t{ label: \"Archive\", disabled: true },\n\t\t\t\t\"separator\",\n\t\t\t\t{\n\t\t\t\t\tlabel: \"Delete\",\n\t\t\t\t\ticon: Trash2Icon,\n\t\t\t\t\tdestructive: true,\n\t\t\t\t\tonSelect: () => (lastAction = \"Delete\"),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</div>\n\t<div class=\"flex flex-wrap items-center gap-3\">\n\t\t<Menu\n\t\t\titems={[\n\t\t\t\t{ label: \"Members\", href: \"#members\" },\n\t\t\t\t{ label: \"Settings\", href: \"#settings\" },\n\t\t\t]}\n\t\t>\n\t\t\t{#snippet trigger({ props })}\n\t\t\t\t<Button {...props} variant=\"outline\" class=\"h-11 rounded-xl md:h-9\">\n\t\t\t\t\tTeam\n\t\t\t\t</Button>\n\t\t\t{/snippet}\n\t\t</Menu>\n\t\t<p class=\"text-muted-foreground text-sm\">Last action: {lastAction}</p>\n\t</div>\n</div>\n","examples/components/status-badge.svelte":"<script lang=\"ts\">\n\timport StatusBadge from \"#lib/components/kit/status-badge.svelte\";\n\n\tconst statuses = [\"running\", \"syncing\", \"paused\", \"failed\", \"draft\"] as const;\n</script>\n\n<div class=\"flex flex-wrap gap-2\">\n\t{#each statuses as status (status)}\n\t\t<StatusBadge\n\t\t\t{status}\n\t\t\tpulse={status === \"syncing\"}\n\t\t\ttones={{\n\t\t\t\trunning: \"positive\",\n\t\t\t\tsyncing: \"info\",\n\t\t\t\tpaused: \"warning\",\n\t\t\t\tfailed: \"negative\",\n\t\t\t}}\n\t\t\tlabels={{\n\t\t\t\trunning: \"Running\",\n\t\t\t\tsyncing: \"Syncing\",\n\t\t\t\tpaused: \"Paused\",\n\t\t\t\tfailed: \"Failed\",\n\t\t\t\tdraft: \"Draft\",\n\t\t\t}}\n\t\t/>\n\t{/each}\n</div>\n","examples/components/tabs.svelte":"<script lang=\"ts\">\n\timport FolderIcon from \"@lucide/svelte/icons/folder\";\n\timport SettingsIcon from \"@lucide/svelte/icons/settings\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport Tabs from \"#lib/components/kit/tabs.svelte\";\n\n\tlet tab = $state(\"files\");\n\n\tconst panels: Record<string, string> = {\n\t\tfiles: \"12 files, last edited this morning.\",\n\t\tmembers: \"5 members can edit this project.\",\n\t\tactivity: \"No activity this week.\",\n\t\tsettings: \"Visibility, integrations and danger zone.\",\n\t\tarchive: \"Nothing archived.\",\n\t};\n</script>\n\n<Tabs\n\tbind:value={tab}\n\titems={[\n\t\t{ value: \"files\", label: \"Files\", icon: FolderIcon, badge: 12 },\n\t\t{ value: \"members\", label: \"Members\", icon: UsersIcon, badge: 5 },\n\t\t{ value: \"activity\", label: \"Activity\" },\n\t\t{ value: \"settings\", label: \"Settings\", icon: SettingsIcon },\n\t\t{ value: \"archive\", label: \"Archive\", disabled: true },\n\t]}\n>\n\t{#snippet children(value)}\n\t\t<p class=\"text-muted-foreground rounded-xl border p-4\">{panels[value]}</p>\n\t{/snippet}\n</Tabs>\n","examples/components/textarea.svelte":"<script lang=\"ts\">\n\timport Textarea from \"#lib/components/kit/textarea.svelte\";\n\n\tlet bio = $state(\"\");\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n\t<Textarea\n\t\tlabel=\"Bio\"\n\t\tname=\"bio\"\n\t\tmaxlength={160}\n\t\tdescription=\"Shown on your public profile.\"\n\t\tbind:value={bio}\n\t/>\n\t<Textarea label=\"Notes\" name=\"notes\" rows={4} />\n\t<Textarea\n\t\tlabel=\"Feedback\"\n\t\tname=\"feedback\"\n\t\trequired\n\t\terror=\"Tell us a little more.\"\n\t/>\n\t<Textarea label=\"Read only\" value=\"Archived on import.\" disabled />\n</div>\n","examples/components/accordion.svelte":"<script lang=\"ts\">\n\timport Accordion from \"#lib/components/kit/accordion.svelte\";\n\n\tlet open = $state(\"Who can see a project?\");\n</script>\n\n<Accordion\n\tbind:value={open}\n\titems={[\n\t\t{\n\t\t\ttitle: \"Who can see a project?\",\n\t\t\tcontent:\n\t\t\t\t\"Every member of the workspace. Guests only see the projects they were invited to.\",\n\t\t},\n\t\t{\n\t\t\ttitle: \"Can I restore a deleted file?\",\n\t\t\tcontent:\n\t\t\t\t\"Yes, for 30 days.\\nOpen the project's trash and pick the file to bring back.\",\n\t\t},\n\t\t{\n\t\t\ttitle: \"How do I invite a member?\",\n\t\t\tcontent: \"Open the members page and send an invitation by email.\",\n\t\t},\n\t]}\n/>\n","examples/components/bar-list.svelte":"<script lang=\"ts\">\n\timport FileIcon from \"@lucide/svelte/icons/file\";\n\timport FileImageIcon from \"@lucide/svelte/icons/file-image\";\n\timport FileTextIcon from \"@lucide/svelte/icons/file-text\";\n\timport FileVideoIcon from \"@lucide/svelte/icons/file-video\";\n\n\timport BarList from \"#lib/components/kit/bar-list.svelte\";\n</script>\n\n<BarList\n\tmax={4}\n\tformat={(value) => `${value} files`}\n\titems={[\n\t\t{ label: \"Images\", value: 412, icon: FileImageIcon, href: \"#images\" },\n\t\t{ label: \"Documents\", value: 268, icon: FileTextIcon, href: \"#documents\" },\n\t\t{ label: \"Videos\", value: 54, icon: FileVideoIcon, href: \"#videos\" },\n\t\t{ label: \"Spreadsheets\", value: 131, icon: FileIcon },\n\t\t{ label: \"Archives\", value: 17, icon: FileIcon },\n\t\t{ label: \"Other\", value: 9, icon: FileIcon },\n\t]}\n/>\n","examples/components/pagination.svelte":"<script lang=\"ts\">\n\timport Pagination from \"#lib/components/kit/pagination.svelte\";\n\n\tlet page = $state(1);\n\tconst files = Array.from({ length: 236 }, (_, index) => `File ${index + 1}`);\n\tconst perPage = 20;\n\tconst visible = $derived(files.slice((page - 1) * perPage, page * perPage));\n</script>\n\n<div class=\"grid gap-4\">\n\t<p class=\"text-muted-foreground text-sm\">\n\t\t{visible[0]} to {visible.at(-1)}\n\t</p>\n\t<Pagination bind:page total={files.length} {perPage} />\n\t<Pagination\n\t\tpage={3}\n\t\ttotal={95}\n\t\tperPage={10}\n\t\thref={(target) => `#page-${target}`}\n\t/>\n</div>\n","examples/components/form.svelte":"<script lang=\"ts\">\n\timport Form, { type FormField } from \"#lib/components/kit/form.svelte\";\n\n\tconst fields: FormField[] = [\n\t\t{ name: \"name\", label: \"Project name\", required: true },\n\t\t{\n\t\t\tname: \"owner\",\n\t\t\ttype: \"email\",\n\t\t\tlabel: \"Owner\",\n\t\t\tautocomplete: \"email\",\n\t\t\tdescription: \"They get the invitations and the weekly digest.\",\n\t\t},\n\t\t{\n\t\t\tname: \"visibility\",\n\t\t\ttype: \"segmented\",\n\t\t\tlabel: \"Visibility\",\n\t\t\toptions: [\n\t\t\t\t{ value: \"private\", label: \"Private\" },\n\t\t\t\t{ value: \"team\", label: \"Team\" },\n\t\t\t\t{ value: \"public\", label: \"Public\" },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tname: \"role\",\n\t\t\ttype: \"select\",\n\t\t\tlabel: \"Default role\",\n\t\t\toptions: [\n\t\t\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t\t\t{ value: \"admin\", label: \"Admin\" },\n\t\t\t],\n\t\t},\n\t\t{ name: \"due\", type: \"date\", label: \"Due date\" },\n\t\t{\n\t\t\tname: \"notify\",\n\t\t\ttype: \"switch\",\n\t\t\tlabel: \"Notify the team\",\n\t\t\tdescription: \"Send an email when the project is created.\",\n\t\t},\n\t\t{\n\t\t\tname: \"description\",\n\t\t\ttype: \"textarea\",\n\t\t\tlabel: \"Description\",\n\t\t\tmaxlength: 280,\n\t\t},\n\t];\n</script>\n\n<Form\n\t{fields}\n\taction=\"?/createProject\"\n\tvalues={{ visibility: \"team\", role: \"editor\", notify: true }}\n\tmessages={{\n\t\tsubmit: \"Create project\",\n\t\tloading: \"Creating the project\",\n\t\tsuccess: \"Project created.\",\n\t}}\n/>\n","examples/components/select.svelte":"<script lang=\"ts\">\n\timport GlobeIcon from \"@lucide/svelte/icons/globe\";\n\timport LockIcon from \"@lucide/svelte/icons/lock\";\n\timport UsersIcon from \"@lucide/svelte/icons/users\";\n\n\timport Select from \"#lib/components/kit/select.svelte\";\n\n\tlet role = $state(\"editor\");\n\tlet visibility = $state(\"\");\n\tlet country = $state(\"\");\n\n\tconst countries = [\n\t\t\"Belgium\",\n\t\t\"Canada\",\n\t\t\"France\",\n\t\t\"Germany\",\n\t\t\"Italy\",\n\t\t\"Japan\",\n\t\t\"Spain\",\n\t\t\"Switzerland\",\n\t].map((name) => ({ value: name.toLowerCase(), label: name }));\n</script>\n\n<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n\t<Select\n\t\tlabel=\"Role\"\n\t\tname=\"role\"\n\t\toptions={[\n\t\t\t{ value: \"viewer\", label: \"Viewer\" },\n\t\t\t{ value: \"editor\", label: \"Editor\" },\n\t\t\t{ value: \"owner\", label: \"Owner\", disabled: true },\n\t\t]}\n\t\tbind:value={role}\n\t/>\n\t<Select\n\t\tlabel=\"Visibility\"\n\t\tname=\"visibility\"\n\t\tplaceholder=\"Who can see it\"\n\t\tdescription=\"You can change this later.\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"private\",\n\t\t\t\tlabel: \"Private\",\n\t\t\t\tdescription: \"Only you\",\n\t\t\t\ticon: LockIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"team\",\n\t\t\t\tlabel: \"Team\",\n\t\t\t\tdescription: \"Everyone in the workspace\",\n\t\t\t\ticon: UsersIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"public\",\n\t\t\t\tlabel: \"Public\",\n\t\t\t\tdescription: \"Anyone with the link\",\n\t\t\t\ticon: GlobeIcon,\n\t\t\t},\n\t\t]}\n\t\tbind:value={visibility}\n\t/>\n\t<Select\n\t\tlabel=\"Country\"\n\t\tname=\"country\"\n\t\tsearchable\n\t\trequired\n\t\toptions={countries}\n\t\tbind:value={country}\n\t/>\n\t<Select label=\"Region\" options={[]} error=\"Pick a country first.\" disabled />\n</div>\n","examples/components/checkbox.svelte":"<script lang=\"ts\">\n\timport Checkbox from \"#lib/components/kit/checkbox.svelte\";\n\n\tlet digest = $state(true);\n</script>\n\n<div class=\"grid grid-cols-1 gap-2 md:grid-cols-2\">\n\t<Checkbox\n\t\tlabel=\"Weekly digest\"\n\t\tname=\"digest\"\n\t\tdescription=\"A summary of the week's activity, every Monday.\"\n\t\tbind:checked={digest}\n\t/>\n\t<Checkbox\n\t\tlabel=\"I accept the terms\"\n\t\tname=\"terms\"\n\t\trequired\n\t\terror=\"Accept the terms to continue.\"\n\t/>\n\t<Checkbox label=\"Product announcements\" name=\"announcements\" disabled />\n</div>\n","examples/components/switch.svelte":"<script lang=\"ts\">\n\timport Switch from \"#lib/components/kit/switch.svelte\";\n\n\tlet mentions = $state(true);\n\tlet reminders = $state(false);\n</script>\n\n<div class=\"grid grid-cols-1 gap-2 md:grid-cols-2\">\n\t<Switch\n\t\tlabel=\"Mentions\"\n\t\tname=\"mentions\"\n\t\tdescription=\"Notify me when someone mentions me.\"\n\t\tbind:checked={mentions}\n\t/>\n\t<Switch\n\t\tlabel=\"Reminders\"\n\t\tname=\"reminders\"\n\t\tdescription=\"A nudge the day before a due date.\"\n\t\tbind:checked={reminders}\n\t/>\n\t<Switch\n\t\tlabel=\"Read receipts\"\n\t\tname=\"receipts\"\n\t\tdescription=\"Managed by your administrator.\"\n\t\tchecked\n\t\tdisabled\n\t/>\n</div>\n","examples/components/data-table.svelte":"<script lang=\"ts\">\n\timport DataTable from \"#lib/components/kit/data-table.svelte\";\n\timport StatusBadge from \"#lib/components/kit/status-badge.svelte\";\n\n\tinterface Project {\n\t\tname: string;\n\t\towner: string;\n\t\tstatus: \"active\" | \"paused\" | \"archived\";\n\t\tfiles: number;\n\t\tupdated: Date;\n\t}\n\n\tconst projects: Project[] = [\n\t\t{\n\t\t\tname: \"Website refresh\",\n\t\t\towner: \"Alex Martin\",\n\t\t\tstatus: \"active\",\n\t\t\tfiles: 128,\n\t\t\tupdated: new Date(\"2026-10-21\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Onboarding guide\",\n\t\t\towner: \"Sam Lee\",\n\t\t\tstatus: \"paused\",\n\t\t\tfiles: 42,\n\t\t\tupdated: new Date(\"2026-09-30\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Brand assets\",\n\t\t\towner: \"Jordan Kim\",\n\t\t\tstatus: \"active\",\n\t\t\tfiles: 310,\n\t\t\tupdated: new Date(\"2026-10-27\"),\n\t\t},\n\t\t{\n\t\t\tname: \"Annual report\",\n\t\t\towner: \"Robin Diaz\",\n\t\t\tstatus: \"archived\",\n\t\t\tfiles: 76,\n\t\t\tupdated: new Date(\"2026-03-14\"),\n\t\t},\n\t];\n\n\tconst dateFormat = new Intl.DateTimeFormat(\"en\", {\n\t\tdateStyle: \"medium\",\n\t\ttimeZone: \"UTC\",\n\t});\n</script>\n\n<DataTable\n\trows={projects}\n\trowHref={(project) => `#${project.name.toLowerCase().replaceAll(\" \", \"-\")}`}\n\tcolumns={[\n\t\t{ key: \"name\", label: \"Project\", sortable: true },\n\t\t{ key: \"owner\", label: \"Owner\", hideOnMobile: true },\n\t\t{ key: \"status\", label: \"Status\" },\n\t\t{ key: \"files\", label: \"Files\", align: \"right\", sortable: true },\n\t\t{\n\t\t\tkey: \"updated\",\n\t\t\tlabel: \"Updated\",\n\t\t\talign: \"right\",\n\t\t\tsortable: true,\n\t\t\tformat: (value) => dateFormat.format(value),\n\t\t},\n\t]}\n>\n\t{#snippet cell(project, column, text)}\n\t\t{#if column.key === \"status\"}\n\t\t\t<StatusBadge\n\t\t\t\tstatus={project.status}\n\t\t\t\ttones={{ active: \"positive\", paused: \"warning\", archived: \"neutral\" }}\n\t\t\t\tlabels={{ active: \"Active\", paused: \"Paused\", archived: \"Archived\" }}\n\t\t\t/>\n\t\t{:else}\n\t\t\t{text}\n\t\t{/if}\n\t{/snippet}\n</DataTable>\n","examples/components/breadcrumbs.svelte":"<script lang=\"ts\">\n\timport Breadcrumbs from \"#lib/components/kit/breadcrumbs.svelte\";\n</script>\n\n<div class=\"grid gap-4\">\n\t<Breadcrumbs\n\t\titems={[{ label: \"Projects\", href: \"#projects\" }, { label: \"Website\" }]}\n\t/>\n\t<Breadcrumbs\n\t\titems={[\n\t\t\t{ label: \"Files\", href: \"#files\" },\n\t\t\t{ label: \"Shared\", href: \"#shared\" },\n\t\t\t{ label: \"Design\", href: \"#design\" },\n\t\t\t{ label: \"Assets\", href: \"#assets\" },\n\t\t\t{ label: \"Icons\", href: \"#icons\" },\n\t\t\t{ label: \"Navigation icons\" },\n\t\t]}\n\t/>\n</div>\n","examples/components/checkbox-list.svelte":"<script lang=\"ts\">\n\timport CheckboxList from \"#lib/components/kit/checkbox-list.svelte\";\n\n\tlet channels = $state([\"email\"]);\n\tlet days = $state<string[]>([]);\n</script>\n\n<div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n\t<CheckboxList\n\t\tlabel=\"Notify me by\"\n\t\tname=\"channels\"\n\t\tdescription=\"Pick as many as you like.\"\n\t\toptions={[\n\t\t\t{\n\t\t\t\tvalue: \"email\",\n\t\t\t\tlabel: \"Email\",\n\t\t\t\tdescription: \"Sent to your account address.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"push\",\n\t\t\t\tlabel: \"Push\",\n\t\t\t\tdescription: \"On every signed-in device.\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: \"sms\",\n\t\t\t\tlabel: \"Text message\",\n\t\t\t\tdescription: \"Add a phone number first.\",\n\t\t\t\tdisabled: true,\n\t\t\t},\n\t\t]}\n\t\tbind:value={channels}\n\t/>\n\t<CheckboxList\n\t\tlabel=\"Working days\"\n\t\tname=\"days\"\n\t\torientation=\"horizontal\"\n\t\trequired\n\t\terror={days.length === 0 ? \"Pick at least one day.\" : undefined}\n\t\toptions={[\n\t\t\t{ value: \"mon\", label: \"Mon\" },\n\t\t\t{ value: \"tue\", label: \"Tue\" },\n\t\t\t{ value: \"wed\", label: \"Wed\" },\n\t\t\t{ value: \"thu\", label: \"Thu\" },\n\t\t\t{ value: \"fri\", label: \"Fri\" },\n\t\t]}\n\t\tbind:value={days}\n\t/>\n</div>\n","examples/components/segmented-control.svelte":"<script lang=\"ts\">\n\timport EyeIcon from \"@lucide/svelte/icons/eye\";\n\timport PencilIcon from \"@lucide/svelte/icons/pencil\";\n\timport ShieldIcon from \"@lucide/svelte/icons/shield\";\n\n\timport SegmentedControl from \"#lib/components/kit/segmented-control.svelte\";\n\n\tlet role = $state(\"editor\");\n\tlet period = $state(\"week\");\n</script>\n\n<div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n\t<SegmentedControl\n\t\tlabel=\"Role\"\n\t\tname=\"role\"\n\t\tdescription=\"Admins can invite and remove members.\"\n\t\toptions={[\n\t\t\t{ value: \"viewer\", label: \"Viewer\", icon: EyeIcon },\n\t\t\t{ value: \"editor\", label: \"Editor\", icon: PencilIcon },\n\t\t\t{ value: \"admin\", label: \"Admin\", icon: ShieldIcon },\n\t\t]}\n\t\tbind:value={role}\n\t/>\n\t<SegmentedControl\n\t\tlabel=\"Period\"\n\t\tname=\"period\"\n\t\toptions={[\n\t\t\t{ value: \"day\", label: \"Day\" },\n\t\t\t{ value: \"week\", label: \"Week\" },\n\t\t\t{ value: \"month\", label: \"Month\" },\n\t\t]}\n\t\tbind:value={period}\n\t/>\n</div>\n","examples/components/form.+page.server.ts":"import { type Actions, fail } from \"@sveltejs/kit\";\n\nexport const actions = {\n\tcreateProject: async ({ request }) => {\n\t\tconst form = await request.formData();\n\t\tconst name = String(form.get(\"name\") ?? \"\").trim();\n\t\tconst owner = String(form.get(\"owner\") ?? \"\").trim();\n\t\tconst errors: Record<string, string[]> = {};\n\t\tif (!name) {\n\t\t\terrors.name = [\"Give the project a name.\"];\n\t\t}\n\t\tif (owner && !owner.includes(\"@\")) {\n\t\t\terrors.owner = [\"That doesn't look like an email address.\"];\n\t\t}\n\t\tif (Object.keys(errors).length > 0) {\n\t\t\treturn fail(400, { errors });\n\t\t}\n\t\treturn { created: name };\n\t},\n} satisfies Actions;\n","examples/components/confirm-dialog.svelte":"<script lang=\"ts\">\n\timport ConfirmDialog from \"#lib/components/kit/confirm-dialog.svelte\";\n\timport { Button } from \"#lib/components/ui/button/index.js\";\n\n\tlet archiveOpen = $state(false);\n\tlet deleteOpen = $state(false);\n\tlet status = $state(\"3 files in this folder\");\n\n\tfunction wait(milliseconds: number) {\n\t\treturn new Promise((resolve) => setTimeout(resolve, milliseconds));\n\t}\n</script>\n\n<div class=\"flex flex-wrap items-center gap-3\">\n\t<Button\n\t\tvariant=\"outline\"\n\t\tclass=\"h-11 rounded-xl md:h-9\"\n\t\tonclick={() => (archiveOpen = true)}\n\t>\n\t\tArchive project\n\t</Button>\n\t<Button\n\t\tvariant=\"destructive\"\n\t\tclass=\"h-11 rounded-xl md:h-9\"\n\t\tonclick={() => (deleteOpen = true)}\n\t>\n\t\tDelete folder\n\t</Button>\n\t<p class=\"text-muted-foreground text-sm\">{status}</p>\n</div>\n\n<ConfirmDialog\n\tbind:open={archiveOpen}\n\ttitle=\"Archive this project?\"\n\tdescription=\"Members keep read access. You can restore it later.\"\n\tconfirmLabel=\"Archive\"\n\tonconfirm={() => (status = \"Project archived\")}\n/>\n\n<ConfirmDialog\n\tbind:open={deleteOpen}\n\ttitle=\"Delete this folder?\"\n\tdescription=\"The folder and its 3 files are removed for every member.\"\n\tconfirmLabel=\"Delete\"\n\tdestructive\n\tonconfirm={async () => {\n\t\tawait wait(1500);\n\t\tstatus = \"Folder deleted\";\n\t}}\n/>\n","routes/section/tabs.ts":"import { resolve } from \"$app/paths\";\nimport PaletteIcon from \"@lucide/svelte/icons/palette\";\nimport UserRoundIcon from \"@lucide/svelte/icons/user-round\";\n\nimport type { SectionTab } from \"#lib/components/blocks/nav-cards.svelte\";\n\nexport const tabs: SectionTab[] = [\n\t{\n\t\thref: resolve(\"/section/profile\"),\n\t\tlabel: \"Profile\",\n\t\tdescription: \"Your name and the email you sign in with.\",\n\t\ticon: UserRoundIcon,\n\t},\n\t{\n\t\thref: resolve(\"/section/appearance\"),\n\t\tlabel: \"Appearance\",\n\t\tdescription: \"Light, dark, or whatever the device says.\",\n\t\ticon: PaletteIcon,\n\t},\n];\n","routes/section/+layout.svelte":"<script lang=\"ts\">\n\timport { resolve } from \"$app/paths\";\n\n\timport TabSection from \"#lib/components/blocks/tab-section.svelte\";\n\n\timport { tabs } from \"./tabs.js\";\n\n\tconst { children } = $props();\n</script>\n\n<TabSection\n\ttitle=\"Section\"\n\tindexHref={resolve(\"/section\")}\n\tbackHref={resolve(\"/[group]/[slug]\", {\n\t\tgroup: \"blocks\",\n\t\tslug: \"tab-section\",\n\t})}\n\t{tabs}\n>\n\t{@render children()}\n</TabSection>\n","routes/section/+page.svelte":"<script lang=\"ts\">\n\timport NavCards from \"#lib/components/blocks/nav-cards.svelte\";\n\n\timport { tabs } from \"./tabs.js\";\n</script>\n\n<NavCards {tabs} />\n","routes/section/appearance/+page.svelte":"<script lang=\"ts\">\n\timport ThemePicker from \"#lib/components/blocks/theme-picker.svelte\";\n</script>\n\n<ThemePicker />\n","routes/section/profile/+page.svelte":"<script lang=\"ts\">\n\timport Input from \"#lib/components/kit/input.svelte\";\n</script>\n\n<div class=\"grid grid-cols-1 gap-5 md:grid-cols-2\">\n\t<Input label=\"Name\" name=\"name\" value=\"Alex\" />\n\t<Input label=\"Email\" name=\"email\" type=\"email\" value=\"alex@example.com\" />\n</div>\n"}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orochibraru/ui",
3
- "version": "1.0.3-canary.1",
3
+ "version": "1.0.3",
4
4
  "description": "Svelte 5 components and theme shared by OpenCount, LocalAssistant, Homerun, Sergio's, Nuvio Web and Penombre.",
5
5
  "license": "MIT",
6
6
  "repository": {