init

2026-04-08 04:29:35 +02:00
commit 8254a28baa
480 changed files with 13386 additions and 0 deletions
--- a/.devenv.flake.nix
+++ b/.devenv.flake.nix
@@ -0,0 +1,513 @@
+{
+  inputs =
+    let
+      vars = {
+  version = "1.11.2";
+  system = "x86_64-linux";
+  devenv_root = "/home/anon/Dev/glstack";
+  project_input_ref = "path:/home/anon/Dev/glstack";
+  devenv_dotfile = "/home/anon/Dev/glstack/.devenv";
+  devenv_dotfile_path = ./.devenv;
+  devenv_tmpdir = "/run/user/1000";
+  devenv_runtime = "/run/user/1000/devenv-5149e7a";
+  devenv_istesting = false;
+  devenv_direnvrc_latest_version = 1;
+  container_name = null;
+  active_profiles = [
+  ];
+  hostname = "debian";
+  username = "anon";
+  git_root = null;
+  secretspec = null;
+};
+    in
+    {
+      git-hooks.url = "github:cachix/git-hooks.nix";
+      git-hooks.inputs.nixpkgs.follows = "nixpkgs";
+      pre-commit-hooks.follows = "git-hooks";
+      nixpkgs.url = "github:cachix/devenv-nixpkgs/rolling";
+      devenv.url = "github:cachix/devenv?dir=src/modules";
+    }
+    // (
+      if builtins.pathExists (vars.devenv_dotfile_path + "/flake.json") then
+        builtins.fromJSON (builtins.readFile (vars.devenv_dotfile_path + "/flake.json"))
+      else
+        { }
+    );
+
+  outputs =
+    { nixpkgs, ... }@inputs:
+    let
+      vars = {
+  version = "1.11.2";
+  system = "x86_64-linux";
+  devenv_root = "/home/anon/Dev/glstack";
+  project_input_ref = "path:/home/anon/Dev/glstack";
+  devenv_dotfile = "/home/anon/Dev/glstack/.devenv";
+  devenv_dotfile_path = ./.devenv;
+  devenv_tmpdir = "/run/user/1000";
+  devenv_runtime = "/run/user/1000/devenv-5149e7a";
+  devenv_istesting = false;
+  devenv_direnvrc_latest_version = 1;
+  container_name = null;
+  active_profiles = [
+  ];
+  hostname = "debian";
+  username = "anon";
+  git_root = null;
+  secretspec = null;
+};
+      devenv =
+        if builtins.pathExists (vars.devenv_dotfile_path + "/devenv.json") then
+          builtins.fromJSON (builtins.readFile (vars.devenv_dotfile_path + "/devenv.json"))
+        else
+          { };
+
+      systems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+
+      # Function to create devenv configuration for a specific system with profiles support
+      mkDevenvForSystem =
+        targetSystem:
+        let
+          getOverlays =
+            inputName: inputAttrs:
+            map (
+              overlay:
+              let
+                input =
+                  inputs.${inputName} or (throw "No such input `${inputName}` while trying to configure overlays.");
+              in
+              input.overlays.${overlay}
+                or (throw "Input `${inputName}` has no overlay called `${overlay}`. Supported overlays: ${nixpkgs.lib.concatStringsSep ", " (builtins.attrNames input.overlays)}")
+            ) inputAttrs.overlays or [ ];
+          overlays = nixpkgs.lib.flatten (nixpkgs.lib.mapAttrsToList getOverlays (devenv.inputs or { }));
+          permittedUnfreePackages =
+            devenv.nixpkgs.per-platform."${targetSystem}".permittedUnfreePackages
+              or devenv.nixpkgs.permittedUnfreePackages or [ ];
+          pkgs = import nixpkgs {
+            system = targetSystem;
+            config = {
+              allowUnfree =
+                devenv.nixpkgs.per-platform."${targetSystem}".allowUnfree or devenv.nixpkgs.allowUnfree
+                  or devenv.allowUnfree or false;
+              allowBroken =
+                devenv.nixpkgs.per-platform."${targetSystem}".allowBroken or devenv.nixpkgs.allowBroken
+                  or devenv.allowBroken or false;
+              cudaSupport =
+                devenv.nixpkgs.per-platform."${targetSystem}".cudaSupport or devenv.nixpkgs.cudaSupport or false;
+              cudaCapabilities =
+                devenv.nixpkgs.per-platform."${targetSystem}".cudaCapabilities or devenv.nixpkgs.cudaCapabilities
+                  or [ ];
+              permittedInsecurePackages =
+                devenv.nixpkgs.per-platform."${targetSystem}".permittedInsecurePackages
+                  or devenv.nixpkgs.permittedInsecurePackages or devenv.permittedInsecurePackages or [ ];
+              allowUnfreePredicate =
+                if (permittedUnfreePackages != [ ]) then
+                  (pkg: builtins.elem (nixpkgs.lib.getName pkg) permittedUnfreePackages)
+                else
+                  (_: false);
+            };
+            inherit overlays;
+          };
+          inherit (pkgs) lib;
+          importModule =
+            path:
+            if lib.hasPrefix "./" path then
+              if lib.hasSuffix ".nix" path then
+                ./. + (builtins.substring 1 255 path)
+              else
+                ./. + (builtins.substring 1 255 path) + "/devenv.nix"
+            else if lib.hasPrefix "../" path then
+              # For parent directory paths, concatenate with /.
+              # ./. refers to the directory containing this file (project root)
+              # So ./. + "/../shared" = <project-root>/../shared
+              if lib.hasSuffix ".nix" path then ./. + "/${path}" else ./. + "/${path}/devenv.nix"
+            else
+              let
+                paths = lib.splitString "/" path;
+                name = builtins.head paths;
+                input = inputs.${name} or (throw "Unknown input ${name}");
+                subpath = "/${lib.concatStringsSep "/" (builtins.tail paths)}";
+                devenvpath = "${input}" + subpath;
+                devenvdefaultpath = devenvpath + "/devenv.nix";
+              in
+              if lib.hasSuffix ".nix" devenvpath then
+                devenvpath
+              else if builtins.pathExists devenvdefaultpath then
+                devenvdefaultpath
+              else
+                throw (devenvdefaultpath + " file does not exist for input ${name}.");
+
+          # Phase 1: Base evaluation to extract profile definitions
+          baseProject = pkgs.lib.evalModules {
+            specialArgs = inputs // {
+              inherit inputs;
+            };
+            modules = [
+              (
+                { config, ... }:
+                {
+                  _module.args.pkgs = pkgs.appendOverlays (config.overlays or [ ]);
+                }
+              )
+              (inputs.devenv.modules + /top-level.nix)
+              (
+                { options, ... }:
+                {
+                  config.devenv = lib.mkMerge [
+                    {
+                      cliVersion = vars.version;
+                      root = vars.devenv_root;
+                      dotfile = vars.devenv_dotfile;
+                    }
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "tmpdir" options.devenv) {
+                      tmpdir = vars.devenv_tmpdir;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "isTesting" options.devenv) {
+                      isTesting = vars.devenv_istesting;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "runtime" options.devenv) {
+                      runtime = vars.devenv_runtime;
+                    })
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "direnvrcLatestVersion" options.devenv) {
+                      direnvrcLatestVersion = vars.devenv_direnvrc_latest_version;
+                    })
+                  ];
+                }
+              )
+              (
+                { options, ... }:
+                {
+                  config = lib.mkMerge [
+                    (pkgs.lib.optionalAttrs (builtins.hasAttr "git" options) {
+                      git.root = vars.git_root;
+                    })
+                  ];
+                }
+              )
+              (pkgs.lib.optionalAttrs (vars.container_name != null) {
+                container.isBuilding = pkgs.lib.mkForce true;
+                containers.${vars.container_name}.isBuilding = true;
+              })
+            ]
+            ++ (map importModule (devenv.imports or [ ]))
+            ++ [
+              (if builtins.pathExists ./devenv.nix then ./devenv.nix else { })
+              (devenv.devenv or { })
+              (if builtins.pathExists ./devenv.local.nix then ./devenv.local.nix else { })
+              (
+                if builtins.pathExists (vars.devenv_dotfile_path + "/cli-options.nix") then
+                  import (vars.devenv_dotfile_path + "/cli-options.nix")
+                else
+                  { }
+              )
+            ];
+          };
+
+          # Phase 2: Extract and apply profiles using extendModules with priority overrides
+          project =
+            let
+              # Build ordered list of profile names: hostname -> user -> manual
+              manualProfiles = vars.active_profiles;
+              currentHostname = vars.hostname;
+              currentUsername = vars.username;
+              hostnameProfiles = lib.optional (
+                currentHostname != ""
+                && builtins.hasAttr currentHostname (baseProject.config.profiles.hostname or { })
+              ) "hostname.${currentHostname}";
+              userProfiles = lib.optional (
+                currentUsername != "" && builtins.hasAttr currentUsername (baseProject.config.profiles.user or { })
+              ) "user.${currentUsername}";
+
+              # Ordered list of profiles to activate
+              orderedProfiles = hostnameProfiles ++ userProfiles ++ manualProfiles;
+
+              # Resolve profile extends with cycle detection
+              resolveProfileExtends =
+                profileName: visited:
+                if builtins.elem profileName visited then
+                  throw "Circular dependency detected in profile extends: ${lib.concatStringsSep " -> " visited} -> ${profileName}"
+                else
+                  let
+                    profile = getProfileConfig profileName;
+                    extends = profile.extends or [ ];
+                    newVisited = visited ++ [ profileName ];
+                    extendedProfiles = lib.flatten (map (name: resolveProfileExtends name newVisited) extends);
+                  in
+                  extendedProfiles ++ [ profileName ];
+
+              # Get profile configuration by name from baseProject
+              getProfileConfig =
+                profileName:
+                if lib.hasPrefix "hostname." profileName then
+                  let
+                    name = lib.removePrefix "hostname." profileName;
+                  in
+                  baseProject.config.profiles.hostname.${name}
+                else if lib.hasPrefix "user." profileName then
+                  let
+                    name = lib.removePrefix "user." profileName;
+                  in
+                  baseProject.config.profiles.user.${name}
+                else
+                  let
+                    availableProfiles = builtins.attrNames (baseProject.config.profiles or { });
+                    hostnameProfiles = map (n: "hostname.${n}") (
+                      builtins.attrNames (baseProject.config.profiles.hostname or { })
+                    );
+                    userProfiles = map (n: "user.${n}") (builtins.attrNames (baseProject.config.profiles.user or { }));
+                    allAvailableProfiles = availableProfiles ++ hostnameProfiles ++ userProfiles;
+                  in
+                  baseProject.config.profiles.${profileName}
+                    or (throw "Profile '${profileName}' not found. Available profiles: ${lib.concatStringsSep ", " allAvailableProfiles}");
+
+              # Fold over ordered profiles to build final list with extends
+              expandedProfiles = lib.foldl' (
+                acc: profileName:
+                let
+                  allProfileNames = resolveProfileExtends profileName [ ];
+                in
+                acc ++ allProfileNames
+              ) [ ] orderedProfiles;
+
+              # Map over expanded profiles and apply priorities
+              allPrioritizedModules = lib.imap0 (
+                index: profileName:
+                let
+                  # Decrement priority for each profile (lower = higher precedence)
+                  # Start with the next lowest priority after the default priority for values (100)
+                  profilePriority = (lib.modules.defaultOverridePriority - 1) - index;
+                  profileConfig = getProfileConfig profileName;
+
+                  # Check if an option type needs explicit override to resolve conflicts
+                  # Only apply overrides to LEAF values (scalars), not collection types that can merge
+                  typeNeedsOverride =
+                    type:
+                    if type == null then
+                      false
+                    else
+                      let
+                        typeName = type.name or type._type or "";
+
+                        # True leaf types that need priority resolution when they conflict
+                        isLeafType = builtins.elem typeName [
+                          "str"
+                          "int"
+                          "bool"
+                          "enum"
+                          "path"
+                          "package"
+                          "float"
+                          "anything"
+                        ];
+                      in
+                      if isLeafType then
+                        true
+                      else if typeName == "nullOr" then
+                        # For nullOr, check the wrapped type recursively
+                        let
+                          innerType =
+                            type.elemType
+                              or (if type ? nestedTypes && type.nestedTypes ? elemType then type.nestedTypes.elemType else null);
+                        in
+                        if innerType != null then typeNeedsOverride innerType else false
+                      else
+                        # Everything else (collections, submodules, etc.) should merge naturally
+                        false;
+
+                  # Check if a config path needs explicit override
+                  pathNeedsOverride =
+                    optionPath:
+                    let
+                      # Try direct option first
+                      directOption = lib.attrByPath optionPath null baseProject.options;
+                    in
+                    if directOption != null && lib.isOption directOption then
+                      typeNeedsOverride directOption.type
+                    else if optionPath != [ ] then
+                      # Check parent for freeform type
+                      let
+                        parentPath = lib.init optionPath;
+                        parentOption = lib.attrByPath parentPath null baseProject.options;
+                      in
+                      if parentOption != null && lib.isOption parentOption then
+                        let
+                          # Look for freeform type:
+                          # 1. Standard location: type.freeformType (primary)
+                          # 2. Nested location: type.nestedTypes.freeformType (evaluated form)
+                          freeformType = parentOption.type.freeformType or parentOption.type.nestedTypes.freeformType or null;
+                          elementType =
+                            if freeformType ? elemType then
+                              freeformType.elemType
+                            else if freeformType ? nestedTypes && freeformType.nestedTypes ? elemType then
+                              freeformType.nestedTypes.elemType
+                            else
+                              freeformType;
+                        in
+                        typeNeedsOverride elementType
+                      else
+                        false
+                    else
+                      false;
+
+                  # Support overriding both plain attrset modules and functions
+                  applyModuleOverride =
+                    config:
+                    if builtins.isFunction config then
+                      let
+                        wrapper = args: applyOverrideRecursive (config args) [ ];
+                      in
+                      lib.mirrorFunctionArgs config wrapper
+                    else
+                      applyOverrideRecursive config [ ];
+
+                  # Apply overrides recursively based on option types
+                  applyOverrideRecursive =
+                    config: optionPath:
+                    if lib.isAttrs config && config ? _type then
+                      config # Don't touch values with existing type metadata
+                    else if lib.isAttrs config then
+                      lib.mapAttrs (name: value: applyOverrideRecursive value (optionPath ++ [ name ])) config
+                    else if pathNeedsOverride optionPath then
+                      lib.mkOverride profilePriority config
+                    else
+                      config;
+
+                  # Apply priority overrides recursively to the deferredModule imports structure
+                  prioritizedConfig = (
+                    profileConfig.module
+                    // {
+                      imports = lib.map (
+                        importItem:
+                        importItem
+                        // {
+                          imports = lib.map (nestedImport: applyModuleOverride nestedImport) (importItem.imports or [ ]);
+                        }
+                      ) (profileConfig.module.imports or [ ]);
+                    }
+                  );
+                in
+                prioritizedConfig
+              ) expandedProfiles;
+            in
+            if allPrioritizedModules == [ ] then
+              baseProject
+            else
+              baseProject.extendModules { modules = allPrioritizedModules; };
+
+          config = project.config;
+
+          options = pkgs.nixosOptionsDoc {
+            options = builtins.removeAttrs project.options [ "_module" ];
+            warningsAreErrors = false;
+            # Unpack Nix types, e.g. literalExpression, mDoc.
+            transformOptions =
+              let
+                isDocType =
+                  v:
+                  builtins.elem v [
+                    "literalDocBook"
+                    "literalExpression"
+                    "literalMD"
+                    "mdDoc"
+                  ];
+              in
+              lib.attrsets.mapAttrs (
+                _: v:
+                if v ? _type && isDocType v._type then
+                  v.text
+                else if v ? _type && v._type == "derivation" then
+                  v.name
+                else
+                  v
+              );
+          };
+
+          # Recursively search for outputs in the config.
+          # This is used when not building a specific output by attrpath.
+          build =
+            options: config:
+            lib.concatMapAttrs (
+              name: option:
+              if lib.isOption option then
+                let
+                  typeName = option.type.name or "";
+                in
+                if
+                  builtins.elem typeName [
+                    "output"
+                    "outputOf"
+                  ]
+                then
+                  { ${name} = config.${name}; }
+                else
+                  { }
+              else if builtins.isAttrs option && !lib.isDerivation option then
+                let
+                  v = build option config.${name};
+                in
+                if v != { } then
+                  {
+                    ${name} = v;
+                  }
+                else
+                  { }
+              else
+                { }
+            ) options;
+        in
+        {
+          inherit
+            config
+            options
+            build
+            project
+            ;
+          shell = config.shell;
+          packages = {
+            optionsJSON = options.optionsJSON;
+            # deprecated
+            inherit (config)
+              info
+              procfileScript
+              procfileEnv
+              procfile
+              ;
+            ci = config.ciDerivation;
+          };
+        };
+
+      # Generate per-system devenv configurations
+      perSystem = nixpkgs.lib.genAttrs systems mkDevenvForSystem;
+
+      # Default devenv for the current system
+      currentSystemDevenv = perSystem.${vars.system};
+    in
+    {
+      devShell = nixpkgs.lib.genAttrs systems (s: perSystem.${s}.shell);
+      packages = nixpkgs.lib.genAttrs systems (s: perSystem.${s}.packages);
+
+      # Per-system devenv configurations
+      devenv = {
+        # Default devenv for the current system
+        inherit (currentSystemDevenv)
+          config
+          options
+          build
+          shell
+          packages
+          project
+          ;
+        # Per-system devenv configurations
+        inherit perSystem;
+      };
+
+      # Legacy build output
+      build = currentSystemDevenv.build currentSystemDevenv.options currentSystemDevenv.config;
+    };
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+.devenv
+devenv.lock
--- a/.helix/languages.toml
+++ b/.helix/languages.toml
@@ -0,0 +1,4 @@
+[[language]]
+name="typescript"
+roots = ["package.json"]
+language-servers = ["typescript-language-server"]
--- a/.ignore
+++ b/.ignore
@@ -0,0 +1,2 @@
+node_modules
+.devenv
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,106 @@
+
+Default to using Bun instead of Node.js.
+
+- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
+- Use `bun test` instead of `jest` or `vitest`
+- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
+- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
+- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
+- Use `bunx <package> <command>` instead of `npx <package> <command>`
+- Bun automatically loads .env, so don't use dotenv.
+
+## APIs
+
+- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
+- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
+- `Bun.redis` for Redis. Don't use `ioredis`.
+- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
+- `WebSocket` is built-in. Don't use `ws`.
+- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
+- Bun.$`ls` instead of execa.
+
+## Testing
+
+Use `bun test` to run tests.
+
+```ts#index.test.ts
+import { test, expect } from "bun:test";
+
+test("hello world", () => {
+  expect(1).toBe(1);
+});
+```
+
+## Frontend
+
+Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
+
+Server:
+
+```ts#index.ts
+import index from "./index.html"
+
+Bun.serve({
+  routes: {
+    "/": index,
+    "/api/users/:id": {
+      GET: (req) => {
+        return new Response(JSON.stringify({ id: req.params.id }));
+      },
+    },
+  },
+  // optional websocket support
+  websocket: {
+    open: (ws) => {
+      ws.send("Hello, world!");
+    },
+    message: (ws, message) => {
+      ws.send(message);
+    },
+    close: (ws) => {
+      // handle close
+    }
+  },
+  development: {
+    hmr: true,
+    console: true,
+  }
+})
+```
+
+HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
+
+```html#index.html
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
+```
+
+With the following `frontend.tsx`:
+
+```tsx#frontend.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+// import .css files directly and it works
+import './index.css';
+
+const root = createRoot(document.body);
+
+export default function Frontend() {
+  return <h1>Hello, world!</h1>;
+}
+
+root.render(<Frontend />);
+```
+
+Then, run index.ts
+
+```sh
+bun --hot ./index.ts
+```
+
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,15 @@
+# glstack
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
--- a/bun.lock
+++ b/bun.lock
@@ -0,0 +1,47 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "glstack",
+      "dependencies": {
+        "@clack/prompts": "^1.2.0",
+        "@gregorlohaus/tdir": "^0.1.1",
+        "zod": "^4.3.6",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@clack/core": ["@clack/core@1.2.0", "", { "dependencies": { "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-qfxof/3T3t9DPU/Rj3OmcFyZInceqj/NVtO9rwIuJqCUgh32gwPjpFQQp/ben07qKlhpwq7GzfWpST4qdJ5Drg=="],
+
+    "@clack/prompts": ["@clack/prompts@1.2.0", "", { "dependencies": { "@clack/core": "1.2.0", "fast-string-width": "^1.1.0", "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-4jmztR9fMqPMjz6H/UZXj0zEmE43ha1euENwkckKKel4XpSfokExPo5AiVStdHSAlHekz4d0CA/r45Ok1E4D3w=="],
+
+    "@gregorlohaus/tdir": ["@gregorlohaus/tdir@0.1.1", "", { "peerDependencies": { "zod": "^4" } }, "sha512-4NlHif5Pn6Vh1TzCj8B1d+pz8ab5/CodC2Cq9HVr1wHdFlgXM/yjtZEDLdBMtwqz1n1oCCEjzV7XYbin2ywsjQ=="],
+
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@types/node": ["@types/node@25.5.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg=="],
+
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "fast-string-truncated-width": ["fast-string-truncated-width@1.2.1", "", {}, "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow=="],
+
+    "fast-string-width": ["fast-string-width@1.1.0", "", { "dependencies": { "fast-string-truncated-width": "^1.2.0" } }, "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ=="],
+
+    "fast-wrap-ansi": ["fast-wrap-ansi@0.1.6", "", { "dependencies": { "fast-string-width": "^1.1.0" } }, "sha512-HlUwET7a5gqjURj70D5jl7aC3Zmy4weA1SHUfM0JFI0Ptq987NH2TwbBFLoERhfwk+E+eaq4EK3jXoT+R3yp3w=="],
+
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
+  }
+}
--- a/devenv.nix
+++ b/devenv.nix
@@ -0,0 +1,7 @@
+{ pkgs, lib, config, inputs, ... }:
+
+{
+  packages = [ pkgs.bun pkgs.nodejs_24];
+  languages.typescript.enable = true;
+
+}
--- a/index.ts
+++ b/index.ts
@@ -0,0 +1,56 @@
+#!/usr/bin/env bun
+
+import * as p from "@clack/prompts";
+import { initRenderer } from '@gregorlohaus/tdir'
+import { z } from 'zod'
+import join from "node:path";
+
+p.intro("create-glstack");
+
+const project = await p.group(
+  {
+    name: () =>
+      p.text({
+        message: "What would you like to name your project?",
+        placeholder: "glstack-test",
+        defaultValue: "glstack-test",
+        validate: (value) => {
+          return undefined
+        },
+      }),
+    goprefix: () =>
+      p.text({
+        message: "What would you like to use as a go package prefix?",
+        placeholder: "github.com/glstack-test",
+        defaultValue: "github.com/glstack-test",
+        validate: (value) => {
+          return undefined
+        },
+      }),
+  },
+  {
+    onCancel: () => {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    },
+  }
+);
+const createRenderer = initRenderer('./template')
+const render = createRenderer(z.object({
+  project: z.object({
+    name: z.string(),
+    goprefix: z.string()
+  })
+}))
+const destDir = join.join("./",project.name);
+render(destDir,{project})
+// TODO: template rendering — copy/generate files into destDir
+
+const s = p.spinner();
+s.start("Installing dependencies");
+await Bun.$`bun install`.cwd(join.join(destDir)).quiet();
+await Bun.$`bun install`.cwd(join.join(destDir,'packages','rpc')).quiet();
+await Bun.$`bun install`.cwd(join.join(destDir,'apps','web')).quiet();
+s.stop("Dependencies installed.");
+
+p.outro("You're all set!");
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "create-glstack",
+  "version": "0.0.1",
+  "module": "index.ts",
+  "type": "module",
+  "bin": {
+    "create-glstack": "./index.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.2.0",
+    "@gregorlohaus/tdir": "^0.1.1",
+    "zod": "^4.3.6"
+  }
+}
--- a/template/.envrc
+++ b/template/.envrc
@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+export DIRENV_WARN_TIMEOUT=20s
+
+eval "$(devenv direnvrc)"
+
+# `use devenv` supports the same options as the `devenv shell` command.
+#
+# To silence all output, use `--quiet`.
+#
+# Example usage: use devenv --quiet --impure --option services.postgres.enable:bool true
+use devenv
--- a/template/.gitignore
+++ b/template/.gitignore
@@ -0,0 +1,12 @@
+# Devenv
+.devenv*
+devenv.local.nix
+devenv.local.yaml
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml
+node_modules
+scripts/node_modules
--- a/template/.ignore
+++ b/template/.ignore
@@ -0,0 +1,10 @@
+# Devenv
+.devenv*
+devenv.local.nix
+devenv.local.yaml
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml
--- a/template/apps/web/.gitignore
+++ b/template/apps/web/.gitignore
@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+# Paraglide
+src/lib/paraglide
+project.inlang/cache/
--- a/template/apps/web/.ignore
+++ b/template/apps/web/.ignore
@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+# Paraglide
+src/lib/paraglide
+project.inlang/cache/
--- a/template/apps/web/.npmrc
+++ b/template/apps/web/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/template/apps/web/.prettierignore
+++ b/template/apps/web/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/template/apps/web/.prettierrc
+++ b/template/apps/web/.prettierrc
@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/routes/layout.css"
+}
--- a/template/apps/web/.vscode/extensions.json
+++ b/template/apps/web/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss"]
+}
--- a/template/apps/web/.vscode/settings.json
+++ b/template/apps/web/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"*.css": "tailwindcss"
+	}
+}
--- a/template/apps/web/README.md
+++ b/template/apps/web/README.md
@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+bun x sv@0.14.0 create --template minimal --types ts --add prettier tailwindcss="plugins:typography" paraglide="languageTags:en, de-De+demo:no" --install bun web
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/template/apps/web/components.json
+++ b/template/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/routes/layout.css",
+		"baseColor": "mist"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "lyra",
+	"iconLibrary": "lucide",
+	"menuColor": "default",
+	"menuAccent": "subtle"
+}
--- a/template/apps/web/messages/de-de.json
+++ b/template/apps/web/messages/de-de.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from de-de!"
+}
--- a/template/apps/web/messages/en.json
+++ b/template/apps/web/messages/en.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}
--- a/template/apps/web/package.json
+++ b/template/apps/web/package.json
@@ -0,0 +1,59 @@
+{
+	"name": "web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@fontsource-variable/roboto": "^5.2.10",
+		"@inlang/paraglide-js": "^2.10.0",
+		"@internationalized/date": "^3.12.0",
+		"@lucide/svelte": "^0.577.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"@tanstack/table-core": "^8.21.3",
+		"bits-ui": "^2.16.3",
+		"clsx": "^2.1.1",
+		"embla-carousel-svelte": "^8.6.0",
+		"formsnap": "^2.0.1",
+		"layerchart": "2.0.0-next.48",
+		"mode-watcher": "^1.1.0",
+		"paneforge": "^1.0.2",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"shadcn-svelte": "^1.2.7",
+		"svelte": "^5.54.0",
+		"svelte-check": "^4.4.2",
+		"svelte-sonner": "^1.1.0",
+		"sveltekit-superforms": "^2.30.0",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"vaul-svelte": "^1.0.0-next.7",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@bufbuild/protobuf": "^2.11.0",
+		"@connectrpc/connect": "^2.1.1",
+		"@connectrpc/connect-web": "^2.1.1",
+		"@<@var(context.project.name)>/rpc": "workspace:*",
+		"@tanstack/query-db-collection": "^1.0.33",
+		"@tanstack/svelte-db": "^0.1.79",
+		"@tanstack/svelte-query": "^6.1.13"
+	}
+}
--- a/template/apps/web/project.inlang/settings.json
+++ b/template/apps/web/project.inlang/settings.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	},
+	"baseLocale": "en",
+	"locales": ["en", "de-de"]
+}
--- a/template/apps/web/src/app.html
+++ b/template/apps/web/src/app.html
@@ -0,0 +1,16 @@
+<!doctype html>
+
+<html lang="%paraglide.lang%" dir="%paraglide.dir%">
+	<head>
+		<meta charset="utf-8" />
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/template/apps/web/src/hooks.server.ts
+++ b/template/apps/web/src/hooks.server.ts
@@ -0,0 +1,17 @@
+import type { Handle } from '@sveltejs/kit';
+import { getTextDirection } from '$lib/paraglide/runtime';
+import { paraglideMiddleware } from '$lib/paraglide/server';
+
+const handleParaglide: Handle = ({ event, resolve }) =>
+	paraglideMiddleware(event.request, ({ request, locale }) => {
+		event.request = request;
+
+		return resolve(event, {
+			transformPageChunk: ({ html }) =>
+				html
+					.replace('%paraglide.lang%', locale)
+					.replace('%paraglide.dir%', getTextDirection(locale))
+		});
+	});
+
+export const handle: Handle = handleParaglide;
--- a/template/apps/web/src/hooks.ts
+++ b/template/apps/web/src/hooks.ts
@@ -0,0 +1,4 @@
+import type { Reroute } from '@sveltejs/kit';
+import { deLocalizeUrl } from '$lib/paraglide/runtime';
+
+export const reroute: Reroute = (request) => deLocalizeUrl(request.url).pathname;
--- a/template/apps/web/src/lib/assets/favicon.svg
+++ b/template/apps/web/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
--- a/template/apps/web/src/lib/components/todos/CreateTodo.svelte
+++ b/template/apps/web/src/lib/components/todos/CreateTodo.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Todo } from "@<@var(context.project.name)>/rpc";
+	import type { ExtractPayload } from "$lib/utils"
+	import Input from "$lib/components/ui/input/input.svelte";
+	import Button from "$lib/components/ui/button/button.svelte"
+	import * as Field from "$lib/components/ui/field/index"
+	import { getTodoCollection } from "$lib/todocollectionscontext";
+	const todoCollection = getTodoCollection();
+  let todo = $state<ExtractPayload<Todo>>({id: crypto.randomUUID() ,task: "",done:false})
+  let create = () => {
+    todoCollection.insert(todo)
+    todo = { id: crypto.randomUUID(), task: "", done:false }
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <Field.FieldGroup class="w-50">
+  <Field.Field>
+    <Field.Label>
+      Todo
+    </Field.Label>
+    <Input bind:value={todo.task}/>
+  </Field.Field>
+  <Button variant="outline" onclick={create} > Create </Button>
+  </Field.FieldGroup>
+</div>
--- a/template/apps/web/src/lib/components/todos/ListTodos.svelte
+++ b/template/apps/web/src/lib/components/todos/ListTodos.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { getTodoCollection } from '$lib/todocollectionscontext';
+	import { useLiveQuery } from '@tanstack/svelte-db';
+	import { tick } from 'svelte';
+	import { ScrollArea } from '../ui/scroll-area/index';
+	import type { Todo as TodoRpc } from '@<@var(context.project.name)>/rpc';
+	import { browser } from '$app/environment';
+	import Todo from './Todo.svelte';
+
+	let { initialTodos }: { initialTodos: TodoRpc[] } = $props();
+	const todoCollection = getTodoCollection();
+	const data = useLiveQuery((q) => q.from({ todos: todoCollection }));
+	const todos = $derived.by(() => {
+		const res = data.data.toSorted((a, b) => {
+			if (a.done != b.done) {
+				return a.done ? -1 : 1;
+			}
+			if (!a.done && !b.done) {
+				let adate = a.createdAt ? new Date(a.createdAt) : new Date(Date.now());
+				let bdate = b.createdAt ? new Date(b.createdAt) : new Date(Date.now());
+				return  bdate.getTime() - adate.getTime();
+			}
+			return 0;
+		});
+		return res;
+	});
+	let scrollerRef = $state<HTMLElement | null>(null);
+	$effect(() => {
+		todos;
+		tick().then(() => {
+			scrollerRef?.scrollTo({ top: scrollerRef.scrollHeight, behavior: 'smooth' });
+		});
+	});
+</script>
+
+<ScrollArea
+	bind:viewportRef={scrollerRef}
+	id="scroller"
+	class="flex h-[80%] w-full flex-col items-center justify-center lg:w-[30%]"
+>
+	{#if browser}
+		{#each todos as todo (todo.id)}
+			<Todo {todo} />
+		{/each}
+	{:else}
+		{#each initialTodos as todo}
+			<Todo {todo} />
+		{/each}
+	{/if}
+</ScrollArea>
--- a/template/apps/web/src/lib/components/todos/Todo.svelte
+++ b/template/apps/web/src/lib/components/todos/Todo.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { type Todo } from "@<@var(context.project.name)>/rpc";
+  import { getTodoCollection } from "$lib/todocollectionscontext";
+	import * as Card from "../ui/card/index";
+	import * as Field from "../ui/field/index";
+	import Input from "../ui/input/input.svelte";
+	import type { ExtractPayload } from "$lib/utils";
+	import Checkbox from "../ui/checkbox/checkbox.svelte";
+	import Button from "../ui/button/button.svelte";
+	import { DeleteIcon } from "@lucide/svelte"
+  let { todo } : { todo:ExtractPayload<Todo> } = $props();
+  let todoState = $state(todo)
+  const todoCollection = getTodoCollection();
+  const update = () => {
+    todoCollection.update(todoState.id,(draft) => {
+      draft.done = todoState.done;
+      draft.task = todoState.task;
+    })
+  }
+  const del = () => {
+    if (todoState.id) {
+      todoCollection.delete(todoState.id)
+    }
+  }
+</script>
+
+<Card.Card class="p-5" onkeydown={()=>update()}>
+  <Card.CardContent>
+    <Field.FieldSet>
+      <Field.Field>
+        <Field.Label>
+          task
+        </Field.Label>
+        <Field.FieldContent>
+          <Input bind:value={todoState.task}/>
+        </Field.FieldContent>
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>
+          done
+        </Field.Label>
+        <Field.FieldContent onclick={()=>update()}>
+          <Checkbox bind:checked={todoState.done}/>
+        </Field.FieldContent>
+      </Field.Field>
+      <div class="flex flex-row">
+      <Field.Field>
+        <Field.Label>
+          Created
+        </Field.Label>
+        <Field.FieldContent>
+          {(new Date(todoState.createdAt||"now")).toLocaleString()}
+        </Field.FieldContent>
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>
+          Updated
+        </Field.Label>
+        <Field.FieldContent>
+          {(new Date(todoState.updatesAt||"now")).toLocaleString()}
+        </Field.FieldContent>
+      </Field.Field>
+      <Button variant='destructive' onclick={del}>
+        <DeleteIcon/>
+      </Button>
+      </div>
+    </Field.FieldSet>
+  </Card.CardContent>
+</Card.Card>
+
--- a/template/apps/web/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden"
+	{...restProps}
+>
+	<div
+		class={cn(
+			"pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>
--- a/template/apps/web/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("not-last:border-b", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
--- a/template/apps/web/src/lib/components/ui/accordion/accordion.svelte
+++ b/template/apps/web/src/lib/components/ui/accordion/accordion.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	class={cn("cn-accordion flex w-full flex-col", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/accordion/index.ts
+++ b/template/apps/web/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,16 @@
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-none p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
--- a/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
--- a/template/apps/web/src/lib/components/ui/alert-dialog/index.ts
+++ b/template/apps/web/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,40 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Media from "./alert-dialog-media.svelte";
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Media,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+	Media as AlertDialogMedia,
+};
--- a/template/apps/web/src/lib/components/ui/alert/alert-action.svelte
+++ b/template/apps/web/src/lib/components/ui/alert/alert-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert/alert-description.svelte
+++ b/template/apps/web/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert/alert-title.svelte
+++ b/template/apps/web/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert/alert.svelte
+++ b/template/apps/web/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/alert/index.ts
+++ b/template/apps/web/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,17 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Action from "./alert-action.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};
--- a/template/apps/web/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
+++ b/template/apps/web/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
--- a/template/apps/web/src/lib/components/ui/aspect-ratio/index.ts
+++ b/template/apps/web/src/lib/components/ui/aspect-ratio/index.ts
@@ -0,0 +1,3 @@
+import Root from "./aspect-ratio.svelte";
+
+export { Root, Root as AspectRatio };
--- a/template/apps/web/src/lib/components/ui/avatar/avatar-badge.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="avatar-badge"
+	class={cn(
+		"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+		"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+		"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+		"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
--- a/template/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn(
+		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/avatar/avatar-group-count.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-group-count.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group-count"
+	class={cn(
+		"bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/avatar/avatar-group.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-group.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group"
+	class={cn(
+		"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("rounded-full aspect-square size-full object-cover", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/avatar/avatar.svelte
+++ b/template/apps/web/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		size = "default",
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps & {
+		size?: "default" | "sm" | "lg";
+	} = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/avatar/index.ts
+++ b/template/apps/web/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,22 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Badge from "./avatar-badge.svelte";
+import Group from "./avatar-group.svelte";
+import GroupCount from "./avatar-group-count.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	Badge,
+	Group,
+	GroupCount,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+	Badge as AvatarBadge,
+	Group as AvatarGroup,
+	GroupCount as AvatarGroupCount,
+};
--- a/template/apps/web/src/lib/components/ui/badge/badge.svelte
+++ b/template/apps/web/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
--- a/template/apps/web/src/lib/components/ui/badge/index.ts
+++ b/template/apps/web/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<MoreHorizontalIcon  />
+	<span class="sr-only">More</span>
+</span>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
+		class: cn("hover:text-foreground transition-colors", className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={cn("text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("text-foreground font-normal", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRightIcon  />
+	{/if}
+</li>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	aria-label="breadcrumb"
+	class={cn("cn-breadcrumb", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>
--- a/template/apps/web/src/lib/components/ui/breadcrumb/index.ts
+++ b/template/apps/web/src/lib/components/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};
--- a/template/apps/web/src/lib/components/ui/button-group/button-group-separator.svelte
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn(
+		"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/button-group/button-group-text.svelte
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group-text.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn("bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className),
+		"data-slot": "button-group-text",
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}
--- a/template/apps/web/src/lib/components/ui/button-group/button-group.svelte
+++ b/template/apps/web/src/lib/components/ui/button-group/button-group.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonGroupVariants = tv({
+		base: "rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					"cn-button-group-orientation-horizontal [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+				vertical:
+					"cn-button-group-orientation-vertical flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		orientation = "horizontal",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/button-group/index.ts
+++ b/template/apps/web/src/lib/components/ui/button-group/index.ts
@@ -0,0 +1,15 @@
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from "./button-group.svelte";
+import Text from "./button-group-text.svelte";
+import Separator from "./button-group-separator.svelte";
+
+export {
+	Root,
+	Text,
+	Separator,
+	buttonGroupVariants,
+	type ButtonGroupOrientation,
+	//
+	Root as ButtonGroup,
+	Text as ButtonGroupText,
+	Separator as ButtonGroupSeparator,
+};
--- a/template/apps/web/src/lib/components/ui/button/button.svelte
+++ b/template/apps/web/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-none",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
--- a/template/apps/web/src/lib/components/ui/button/index.ts
+++ b/template/apps/web/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground",
+		// Outside months
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("flex w-full border-collapse flex-col", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+		className
+	)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading
+	bind:ref
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
+	{...restProps}
+/>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex w-full flex-col gap-4", className)}>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-nav.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>
--- a/template/apps/web/src/lib/components/ui/calendar/calendar.svelte
+++ b/template/apps/web/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"p-2 [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Months>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
+								{/each}
+							</Calendar.GridRow>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>
--- a/template/apps/web/src/lib/components/ui/calendar/index.ts
+++ b/template/apps/web/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,40 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	Nav,
+	Month,
+	YearSelect,
+	MonthSelect,
+	Caption,
+	//
+	Root as Calendar,
+};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>