@orochibraru/ui 0.0.0 → 1.0.0-canary.1

package/dist/mcp-content.json

@@ -0,0 +1 @@
+{"version":"1.0.0-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## 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| `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| `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/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- `data-accent` picks a preset: `bordeaux`, `green`, `blue`, `violet`, `rose`,\n  `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, primitive 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\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 OtpField from \"#lib/components/blocks/otp-field.svelte\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n</script>\n\n<Field.Field>\n\t<Field.Label for=\"otp-code\">Code from your authenticator app</Field.Label>\n\t<OtpField id=\"otp-code\" oncomplete={(code) => toast(`Verifying ${code}.`)} />\n</Field.Field>\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\"\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\"\n\t\tchapters={[\n\t\t\t{ start: 0, title: \"Opening\" },\n\t\t\t{ start: 240, title: \"Middle\" },\n\t\t\t{ start: 490, title: \"Credits\" },\n\t\t]}\n\t\tbind:currentTime\n\t/>\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 PasswordInput from \"#lib/components/blocks/password-input.svelte\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n</script>\n\n<Field.Field>\n\t<Field.Label for=\"sign-in-password\">Password</Field.Label>\n\t<PasswordInput id=\"sign-in-password\" required />\n</Field.Field>\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":"<p class=\"text-muted-foreground text-sm\">\n\tMounted once in the root layout, it opens by itself the first time the browser\n\tcan install the app: the native prompt where there is one, the Share steps on\n\tiOS, the browser menu steps elsewhere. <code>storageKey</code> remembers it was\n\tshown so it never comes back.\n</p>\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 ?? \"blue\",\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/top-loading-bar.svelte":"<p class=\"text-muted-foreground text-sm\">\n\tClick any link in the sidebar: the bar at the top of the screen creeps while\n\tSvelteKit loads the next page and completes when it lands. It respects the\n\tnotch on installed apps.\n</p>\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/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 NewPasswordFields from \"#lib/components/blocks/new-password-fields.svelte\";\n\timport * as Field from \"#lib/components/ui/field/index.js\";\n</script>\n\n<Field.Group>\n\t<NewPasswordFields email=\"alex@example.com\" />\n</Field.Group>\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":"<p class=\"text-muted-foreground text-sm\">\n\tLook at this browser tab: the root layout renders it once and every page's\n\t<code>setPageTitle</code> feeds it. A title that already names the app is kept as\n\tis, an empty one shows the app name alone.\n</p>\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":"<p class=\"text-muted-foreground text-sm\">\n\tPhones only, fixed to the bottom of the screen: this site's own tab bar is\n\tone, narrow the window to see it. Leave about 8rem of bottom padding on the\n\tpage so the last row isn't hidden behind it; the <code>Fab</code> sits right\n\tabove it. Pass <code>isActive</code> when a destination owns paths outside its own\n\thref.\n</p>\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/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/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/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/0/03/Music_to_Delight_%28ISRC_USUAN1200023%29.mp3\",\n\t\t\ttitle: \"Music to Delight\",\n\t\t\tartist: \"Kevin MacLeod\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/9/9c/Music_Box_Theme_%28ISRC_USUAN1100417%29.mp3\",\n\t\t\ttitle: \"Music Box Theme\",\n\t\t\tartist: \"Kevin MacLeod\",\n\t\t},\n\t\t{\n\t\t\tsrc: \"https://upload.wikimedia.org/wikipedia/commons/c/c4/Industrial_Music_Box_%28ISRC_USUAN1100812%29.mp3\",\n\t\t\ttitle: \"Industrial Music Box\",\n\t\t\tartist: \"Kevin MacLeod\",\n\t\t},\n\t];\n\n\tlet index = $state(0);\n\tlet paused = $state(true);\n</script>\n\n<p class=\"text-muted-foreground text-sm\">\n\tIt renders in flow, as wide as its container: wrap it in a fixed bar to dock\n\tit at the bottom of the screen. Tracks by Kevin MacLeod, CC BY 3.0, from\n\tWikimedia Commons.\n</p>\n<MusicPlayer {tracks} bind:index bind:paused />\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/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 { 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 { 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<Field.Field>\n\t\t<Field.Label for=\"toast-name\">Name</Field.Label>\n\t\t<Input id=\"toast-name\" name=\"name\" value=\"Alex\" />\n\t\t<Field.Description>Clear it to see the action's error.</Field.Description>\n\t</Field.Field>\n\t<Button type=\"submit\">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/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 { 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</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<Field.Field>\n\t\t\t<Field.Label for=\"auth-email\">Email</Field.Label>\n\t\t\t<Input id=\"auth-email\" type=\"email\" autocomplete=\"email\" />\n\t\t</Field.Field>\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/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":"<p class=\"text-muted-foreground text-sm\">\n\tIt fills the screen, so it lives in the app's root <code>+error.svelte</code>.\n\tA 404 says the page doesn't exist; any other status shows the error's message\n\tand its id. Open a page that doesn't exist to see this site's.\n</p>\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/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/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","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 * as Field from \"#lib/components/ui/field/index.js\";\n\timport { Input } from \"#lib/components/ui/input/index.js\";\n</script>\n\n<Field.Group>\n\t<Field.Field>\n\t\t<Field.Label for=\"name\">Name</Field.Label>\n\t\t<Input id=\"name\" value=\"Alex\" />\n\t</Field.Field>\n\t<Field.Field>\n\t\t<Field.Label for=\"profile-email\">Email</Field.Label>\n\t\t<Input id=\"profile-email\" type=\"email\" value=\"alex@example.com\" />\n\t</Field.Field>\n</Field.Group>\n"}}