@nikala-ui/core 0.12.1 → 0.12.2-nightly.ce75abc

package/README.md

@@ -112,7 +112,6 @@ The registry must be regenerated before publishing changes to the core package.
 
 - `@nikala-ui/cli` installs and updates registry items in a consuming project.
 - `@nikala-ui/hooks` publishes the standalone reactive primitives package.
-- `@nikala-ui/docs` bundles registry and source snapshots to initialize independent documentation projects without requiring `@nikala-ui/core` at runtime.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.12.1",
+  "version": "0.12.2-nightly.ce75abc",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,
@@ -72,6 +72,8 @@
     "@tiptap/extension-underline": "^3.31.0",
     "@tiptap/starter-kit": "^3.31.0",
     "lucide-solid": "^1.28.0",
+    "@shikijs/langs": "^4.4.3",
+    "@shikijs/themes": "^4.4.3",
     "shiki": "^4.4.3",
     "tiptap-markdown": "^0.9.0"
   }

package/registry/code-block.json

@@ -7,7 +7,9 @@
     "clsx",
     "tailwind-merge",
     "lucide-solid",
-    "shiki"
+    "shiki",
+    "@shikijs/langs",
+    "@shikijs/themes"
   ],
   "registryDependencies": [
     "button",
@@ -19,7 +21,7 @@
   "files": [
     {
       "path": "ui/code-block.tsx",
-      "content": "import {\n  createSignal,\n  createEffect,\n  createMemo,\n  splitProps,\n  For,\n  Show,\n  type JSX,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Check, Copy } from \"lucide-solid\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { createClipboard } from \"@/hooks/create-clipboard\";\nimport { cn } from \"@/lib/cn\";\n\nexport type CodeBlockPackageManager = \"bunx\" | \"npx\" | \"pnpm\" | \"yarn\";\n\nexport interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The raw source code text to display and copy */\n  code?: string;\n  /** File name to display in the header bar (e.g. \"App.tsx\", \"main.rs\") */\n  filename?: string;\n  /** Programming language badge (e.g. \"tsx\", \"rust\", \"bash\") */\n  language?: string;\n  /** Alias for language */\n  lang?: string;\n  /** Whether the code snippet is an executable CLI command */\n  isCli?: boolean;\n  /** Shows the interactive package manager runner tabs (bunx, npx, pnpm, yarn) */\n  showPmSwitcher?: boolean;\n  /** List of package manager runners to show */\n  managers?: CodeBlockPackageManager[];\n  /** Whether the copy button is enabled. Defaults to true. */\n  copyable?: boolean;\n  class?: string;\n}\n\nlet shikiHighlighterPromise: Promise<any> | null = null;\n\nasync function getShikiHighlighter() {\n  if (typeof window === \"undefined\") return null;\n  if (!shikiHighlighterPromise) {\n    try {\n      const { createHighlighter } = await import(\"shiki\");\n      shikiHighlighterPromise = createHighlighter({\n        themes: [\"github-dark\", \"github-light\"],\n        langs: [\n          \"typescript\",\n          \"javascript\",\n          \"tsx\",\n          \"jsx\",\n          \"bash\",\n          \"json\",\n          \"css\",\n          \"html\",\n          \"rust\",\n        ],\n      });\n    } catch (e) {\n      console.warn(\"Failed to load Shiki highlighter\", e);\n      return null;\n    }\n  }\n  return shikiHighlighterPromise;\n}\n\nfunction highlightCliCommand(code: string): string {\n  const trimmed = code.trim();\n  const parts = trimmed.split(/\\s+/);\n  if (parts.length === 0) return code;\n\n  const isRunner = [\"bunx\", \"npx\", \"pnpm\", \"yarn\", \"bun\", \"npm\", \"cargo\", \"deno\"].includes(parts[0]);\n  if (!isRunner) return `<span class=\"text-foreground\">${escapeHtml(trimmed)}</span>`;\n\n  return parts\n    .map((part, index) => {\n      if (index === 0) {\n        return `<span class=\"text-amber-500 dark:text-amber-400 font-bold\">${escapeHtml(part)}</span>`;\n      }\n      if (part.startsWith(\"-\")) {\n        return `<span class=\"text-purple-400 dark:text-purple-300\">${escapeHtml(part)}</span>`;\n      }\n      if (part.startsWith(\"@\")) {\n        return `<span class=\"text-emerald-400 dark:text-emerald-300 font-medium\">${escapeHtml(part)}</span>`;\n      }\n      if (index === 1 && [\"add\", \"install\", \"init\", \"create\", \"run\"].includes(part)) {\n        return `<span class=\"text-sky-500 dark:text-sky-400 font-medium\">${escapeHtml(part)}</span>`;\n      }\n      return `<span class=\"text-foreground/90\">${escapeHtml(part)}</span>`;\n    })\n    .join(\" \");\n}\n\nfunction transformCommandForPm(cmd: string, pm: CodeBlockPackageManager): string {\n  const trimmed = cmd.trim();\n  const runners = [\"bunx\", \"npx\", \"pnpm dlx\", \"pnpm\", \"yarn dlx\", \"yarn\", \"bun\", \"npm\"];\n\n  let base = trimmed;\n  for (const r of runners) {\n    if (trimmed.startsWith(r)) {\n      base = trimmed.slice(r.length).trim();\n      break;\n    }\n  }\n\n  switch (pm) {\n    case \"bunx\":\n      return `bunx ${base}`;\n    case \"npx\":\n      return `npx ${base}`;\n    case \"pnpm\":\n      return `pnpm dlx ${base}`;\n    case \"yarn\":\n      return `yarn dlx ${base}`;\n    default:\n      return `${pm} ${base}`;\n  }\n}\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n}\n\nexport const CodeBlock: ParentComponent<CodeBlockProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"id\",\n    \"code\",\n    \"filename\",\n    \"language\",\n    \"lang\",\n    \"isCli\",\n    \"showPmSwitcher\",\n    \"managers\",\n    \"copyable\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const clipboard = createClipboard();\n  const [activePm, setActivePm] = createSignal<CodeBlockPackageManager>(\"bunx\");\n  const [highlightedHtml, setHighlightedHtml] = createSignal(\"\");\n\n  const effectiveLang = () => (local.lang || local.language || \"tsx\").toLowerCase();\n  const copyable = () => local.copyable ?? true;\n  const defaultManagers: CodeBlockPackageManager[] = [\"bunx\", \"npx\", \"pnpm\", \"yarn\"];\n  const managersList = () => local.managers || defaultManagers;\n\n  const isBashCli = () => {\n    const l = effectiveLang();\n    return l === \"bash\" || l === \"sh\" || l === \"shell\" || Boolean(local.isCli);\n  };\n\n  const cleanCode = createMemo(() => {\n    const raw = (local.code || \"\").trim();\n    if (local.isCli || local.showPmSwitcher) {\n      return transformCommandForPm(raw, activePm());\n    }\n    return raw;\n  });\n\n  createEffect(() => {\n    const codeStr = cleanCode();\n    const lang = effectiveLang();\n\n    if (isBashCli()) {\n      setHighlightedHtml(highlightCliCommand(codeStr));\n      return;\n    }\n\n    if (!codeStr) {\n      setHighlightedHtml(\"\");\n      return;\n    }\n\n    // Attempt Shiki highlighting\n    getShikiHighlighter().then((highlighter) => {\n      if (highlighter) {\n        try {\n          const html = highlighter.codeToHtml(codeStr, {\n            lang: lang === \"js\" ? \"javascript\" : lang === \"ts\" ? \"typescript\" : lang,\n            themes: {\n              light: \"github-light\",\n              dark: \"github-dark\",\n            },\n          });\n          setHighlightedHtml(html);\n          return;\n        } catch (err) {\n          console.warn(`Shiki failed for language: ${lang}`, err);\n        }\n      }\n      // Fallback\n      setHighlightedHtml(`<pre class=\"text-foreground/90\"><code>${escapeHtml(codeStr)}</code></pre>`);\n    });\n  });\n\n  const handleCopy = async () => {\n    let textToCopy = cleanCode();\n    if (!textToCopy && typeof window !== \"undefined\") {\n      const target = document.querySelector(`[data-code-block-id=\"${local.id}\"]`);\n      if (target) textToCopy = target.textContent || \"\";\n    }\n\n    if (!textToCopy) return;\n    await clipboard.copy(textToCopy);\n  };\n\n  const shouldShowSwitcher = () => Boolean(local.showPmSwitcher || local.isCli);\n  const hasHeader = () => Boolean(shouldShowSwitcher() || local.filename || effectiveLang());\n\n  return (\n    <div\n      class={cn(\n        \"group relative my-4 w-full overflow-hidden rounded-lg border border-border bg-muted/40 font-mono text-sm shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      {/* Code Header Bar */}\n      <Show when={hasHeader()}>\n        <div class=\"flex h-9 items-center justify-between border-b border-border/70 bg-muted/70 px-3.5 text-xs text-muted-foreground select-none\">\n          <div class=\"flex items-center gap-2\">\n            <Show when={shouldShowSwitcher()}>\n              <Tabs\n                value={activePm()}\n                onChange={(val) => setActivePm(val as CodeBlockPackageManager)}\n                class=\"w-auto flex-none\"\n              >\n                <TabsList class=\"w-auto inline-flex h-auto bg-background/60 p-0.5 border border-border/50 gap-0.5 rounded-md font-mono\">\n                  <For each={managersList()}>\n                    {(pm) => (\n                      <TabsTrigger\n                        value={pm}\n                        class=\"rounded-xs px-2 py-0.5 text-[11px] font-mono transition-colors cursor-pointer data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:font-semibold data-[state=active]:shadow-2xs\"\n                      >\n                        {pm}\n                      </TabsTrigger>\n                    )}\n                  </For>\n                </TabsList>\n              </Tabs>\n            </Show>\n\n            <Show when={local.filename}>\n              <span class=\"font-medium text-foreground tracking-tight\">{local.filename}</span>\n            </Show>\n\n            <Show when={effectiveLang() && !shouldShowSwitcher() && !local.filename}>\n              <Badge variant=\"outline\" class=\"uppercase text-[10px] px-1.5 py-0 h-4 font-mono font-semibold\">\n                {effectiveLang()}\n              </Badge>\n            </Show>\n          </div>\n\n          <Show when={copyable() && (local.code || cleanCode())}>\n            <Tooltip>\n              <TooltipTrigger\n                as={Button}\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleCopy}\n                aria-label={clipboard.copied() ? \"Copied code\" : \"Copy code\"}\n                class=\"size-6 p-0 rounded-xs text-muted-foreground hover:bg-background hover:text-foreground cursor-pointer\"\n              >\n                <Show when={clipboard.copied()} fallback={<Copy class=\"size-3.5\" />}>\n                  <Check class=\"size-3.5 text-emerald-500 dark:text-emerald-400\" />\n                </Show>\n              </TooltipTrigger>\n              <TooltipContent class=\"text-[10px] py-1 px-2\">\n                {clipboard.copied() ? \"Copied!\" : \"Copy code\"}\n              </TooltipContent>\n            </Tooltip>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Floating Copy Button (if no header bar is present) */}\n      <Show when={!hasHeader() && copyable() && (local.code || cleanCode())}>\n        <div class=\"absolute right-2.5 top-2.5 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100\">\n          <Tooltip>\n            <TooltipTrigger\n              as={Button}\n              variant=\"outline\"\n              size=\"icon\"\n              onClick={handleCopy}\n              aria-label={clipboard.copied() ? \"Copied code\" : \"Copy code\"}\n              class=\"size-7 rounded-md border-border/80 bg-background/90 text-muted-foreground backdrop-blur-xs hover:bg-muted hover:text-foreground cursor-pointer shadow-2xs\"\n            >\n              <Show when={clipboard.copied()} fallback={<Copy class=\"size-3.5\" />}>\n                <Check class=\"size-3.5 text-emerald-500 dark:text-emerald-400\" />\n              </Show>\n            </TooltipTrigger>\n            <TooltipContent class=\"text-[10px] py-1 px-2\">\n              {clipboard.copied() ? \"Copied!\" : \"Copy code\"}\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </Show>\n\n      {/* Code Container */}\n      <div class=\"overflow-x-auto p-4 text-[13px] leading-relaxed [scrollbar-width:thin]\">\n        <Show\n          when={local.children}\n          fallback={\n            <div\n              class=\"font-mono text-sm leading-relaxed overflow-x-auto [&>pre]:!bg-transparent [&>pre]:!p-0 [&>pre]:!m-0 [&>pre]:!border-none\"\n              innerHTML={highlightedHtml() || `<pre class=\"text-foreground/90\"><code>${escapeHtml(cleanCode())}</code></pre>`}\n            />\n          }\n        >\n          <pre class=\"shiki nikala-code-block m-0 overflow-x-auto bg-transparent p-0 font-mono text-xs\">\n            {local.children}\n          </pre>\n        </Show>\n      </div>\n    </div>\n  );\n};\n",
+      "content": "import {\n  createSignal,\n  createEffect,\n  createMemo,\n  splitProps,\n  For,\n  Show,\n  type JSX,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Check, Copy } from \"lucide-solid\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { createClipboard } from \"@/hooks/create-clipboard\";\nimport { cn } from \"@/lib/cn\";\n\nexport type CodeBlockPackageManager = \"bunx\" | \"npx\" | \"pnpm\" | \"yarn\";\n\nexport interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The raw source code text to display and copy */\n  code?: string;\n  /** File name to display in the header bar (e.g. \"App.tsx\", \"main.rs\") */\n  filename?: string;\n  /** Programming language badge (e.g. \"tsx\", \"rust\", \"bash\") */\n  language?: string;\n  /** Alias for language */\n  lang?: string;\n  /** Whether the code snippet is an executable CLI command */\n  isCli?: boolean;\n  /** Shows the interactive package manager runner tabs (bunx, npx, pnpm, yarn) */\n  showPmSwitcher?: boolean;\n  /** List of package manager runners to show */\n  managers?: CodeBlockPackageManager[];\n  /** Whether the copy button is enabled. Defaults to true. */\n  copyable?: boolean;\n  class?: string;\n}\n\nlet shikiHighlighterPromise: Promise<any> | null = null;\n\nasync function getShikiHighlighter() {\n  if (typeof window === \"undefined\") return null;\n  if (!shikiHighlighterPromise) {\n    try {\n      const [{ createBundledHighlighter }, { createJavaScriptRegexEngine }] = await Promise.all([\n        import(\"shiki/core\"),\n        import(\"shiki/engine/javascript\"),\n      ]);\n      const createHighlighter = createBundledHighlighter({\n        langs: {\n          typescript: () => import(\"@shikijs/langs/typescript\"),\n          javascript: () => import(\"@shikijs/langs/javascript\"),\n          tsx: () => import(\"@shikijs/langs/tsx\"),\n          jsx: () => import(\"@shikijs/langs/jsx\"),\n          bash: () => import(\"@shikijs/langs/shellscript\"),\n          json: () => import(\"@shikijs/langs/json\"),\n          css: () => import(\"@shikijs/langs/css\"),\n          html: () => import(\"@shikijs/langs/html\"),\n          rust: () => import(\"@shikijs/langs/rust\"),\n        },\n        themes: {\n          \"github-dark\": () => import(\"@shikijs/themes/github-dark\"),\n          \"github-light\": () => import(\"@shikijs/themes/github-light\"),\n        },\n        engine: () => createJavaScriptRegexEngine(),\n      });\n      shikiHighlighterPromise = createHighlighter({\n        themes: [\"github-dark\", \"github-light\"],\n        langs: [\n          \"typescript\",\n          \"javascript\",\n          \"tsx\",\n          \"jsx\",\n          \"bash\",\n          \"json\",\n          \"css\",\n          \"html\",\n          \"rust\",\n        ],\n      });\n    } catch (e) {\n      console.warn(\"Failed to load Shiki highlighter\", e);\n      return null;\n    }\n  }\n  return shikiHighlighterPromise;\n}\n\nfunction highlightCliCommand(code: string): string {\n  const trimmed = code.trim();\n  const parts = trimmed.split(/\\s+/);\n  if (parts.length === 0) return code;\n\n  const isRunner = [\"bunx\", \"npx\", \"pnpm\", \"yarn\", \"bun\", \"npm\", \"cargo\", \"deno\"].includes(parts[0]);\n  if (!isRunner) return `<span class=\"text-foreground\">${escapeHtml(trimmed)}</span>`;\n\n  return parts\n    .map((part, index) => {\n      if (index === 0) {\n        return `<span class=\"text-amber-500 dark:text-amber-400 font-bold\">${escapeHtml(part)}</span>`;\n      }\n      if (part.startsWith(\"-\")) {\n        return `<span class=\"text-purple-400 dark:text-purple-300\">${escapeHtml(part)}</span>`;\n      }\n      if (part.startsWith(\"@\")) {\n        return `<span class=\"text-emerald-400 dark:text-emerald-300 font-medium\">${escapeHtml(part)}</span>`;\n      }\n      if (index === 1 && [\"add\", \"install\", \"init\", \"create\", \"run\"].includes(part)) {\n        return `<span class=\"text-sky-500 dark:text-sky-400 font-medium\">${escapeHtml(part)}</span>`;\n      }\n      return `<span class=\"text-foreground/90\">${escapeHtml(part)}</span>`;\n    })\n    .join(\" \");\n}\n\nfunction transformCommandForPm(cmd: string, pm: CodeBlockPackageManager): string {\n  const trimmed = cmd.trim();\n  const runners = [\"bunx\", \"npx\", \"pnpm dlx\", \"pnpm\", \"yarn dlx\", \"yarn\", \"bun\", \"npm\"];\n\n  let base = trimmed;\n  for (const r of runners) {\n    if (trimmed.startsWith(r)) {\n      base = trimmed.slice(r.length).trim();\n      break;\n    }\n  }\n\n  switch (pm) {\n    case \"bunx\":\n      return `bunx ${base}`;\n    case \"npx\":\n      return `npx ${base}`;\n    case \"pnpm\":\n      return `pnpm dlx ${base}`;\n    case \"yarn\":\n      return `yarn dlx ${base}`;\n    default:\n      return `${pm} ${base}`;\n  }\n}\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n}\n\nexport const CodeBlock: ParentComponent<CodeBlockProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"id\",\n    \"code\",\n    \"filename\",\n    \"language\",\n    \"lang\",\n    \"isCli\",\n    \"showPmSwitcher\",\n    \"managers\",\n    \"copyable\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const clipboard = createClipboard();\n  const [activePm, setActivePm] = createSignal<CodeBlockPackageManager>(\"bunx\");\n  const [highlightedHtml, setHighlightedHtml] = createSignal(\"\");\n\n  const effectiveLang = () => (local.lang || local.language || \"tsx\").toLowerCase();\n  const copyable = () => local.copyable ?? true;\n  const defaultManagers: CodeBlockPackageManager[] = [\"bunx\", \"npx\", \"pnpm\", \"yarn\"];\n  const managersList = () => local.managers || defaultManagers;\n\n  const isBashCli = () => {\n    const l = effectiveLang();\n    return l === \"bash\" || l === \"sh\" || l === \"shell\" || Boolean(local.isCli);\n  };\n\n  const cleanCode = createMemo(() => {\n    const raw = (local.code || \"\").trim();\n    if (local.isCli || local.showPmSwitcher) {\n      return transformCommandForPm(raw, activePm());\n    }\n    return raw;\n  });\n\n  createEffect(() => {\n    const codeStr = cleanCode();\n    const lang = effectiveLang();\n\n    if (isBashCli()) {\n      setHighlightedHtml(highlightCliCommand(codeStr));\n      return;\n    }\n\n    if (!codeStr) {\n      setHighlightedHtml(\"\");\n      return;\n    }\n\n    // Attempt Shiki highlighting\n    getShikiHighlighter().then((highlighter) => {\n      if (highlighter) {\n        try {\n          const html = highlighter.codeToHtml(codeStr, {\n            lang: lang === \"js\" ? \"javascript\" : lang === \"ts\" ? \"typescript\" : lang,\n            themes: {\n              light: \"github-light\",\n              dark: \"github-dark\",\n            },\n          });\n          setHighlightedHtml(html);\n          return;\n        } catch (err) {\n          console.warn(`Shiki failed for language: ${lang}`, err);\n        }\n      }\n      // Fallback\n      setHighlightedHtml(`<pre class=\"text-foreground/90\"><code>${escapeHtml(codeStr)}</code></pre>`);\n    });\n  });\n\n  const handleCopy = async () => {\n    let textToCopy = cleanCode();\n    if (!textToCopy && typeof window !== \"undefined\") {\n      const target = document.querySelector(`[data-code-block-id=\"${local.id}\"]`);\n      if (target) textToCopy = target.textContent || \"\";\n    }\n\n    if (!textToCopy) return;\n    await clipboard.copy(textToCopy);\n  };\n\n  const shouldShowSwitcher = () => Boolean(local.showPmSwitcher || local.isCli);\n  const hasHeader = () => Boolean(shouldShowSwitcher() || local.filename || effectiveLang());\n\n  return (\n    <div\n      class={cn(\n        \"group relative my-4 w-full overflow-hidden rounded-lg border border-border bg-muted/40 font-mono text-sm shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      {/* Code Header Bar */}\n      <Show when={hasHeader()}>\n        <div class=\"flex h-9 items-center justify-between border-b border-border/70 bg-muted/70 px-3.5 text-xs text-muted-foreground select-none\">\n          <div class=\"flex items-center gap-2\">\n            <Show when={shouldShowSwitcher()}>\n              <Tabs\n                value={activePm()}\n                onChange={(val) => setActivePm(val as CodeBlockPackageManager)}\n                class=\"w-auto flex-none\"\n              >\n                <TabsList class=\"w-auto inline-flex h-auto bg-background/60 p-0.5 border border-border/50 gap-0.5 rounded-md font-mono\">\n                  <For each={managersList()}>\n                    {(pm) => (\n                      <TabsTrigger\n                        value={pm}\n                        class=\"rounded-xs px-2 py-0.5 text-[11px] font-mono transition-colors cursor-pointer data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:font-semibold data-[state=active]:shadow-2xs\"\n                      >\n                        {pm}\n                      </TabsTrigger>\n                    )}\n                  </For>\n                </TabsList>\n              </Tabs>\n            </Show>\n\n            <Show when={local.filename}>\n              <span class=\"font-medium text-foreground tracking-tight\">{local.filename}</span>\n            </Show>\n\n            <Show when={effectiveLang() && !shouldShowSwitcher() && !local.filename}>\n              <Badge variant=\"outline\" class=\"uppercase text-[10px] px-1.5 py-0 h-4 font-mono font-semibold\">\n                {effectiveLang()}\n              </Badge>\n            </Show>\n          </div>\n\n          <Show when={copyable() && (local.code || cleanCode())}>\n            <Tooltip>\n              <TooltipTrigger\n                as={Button}\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleCopy}\n                aria-label={clipboard.copied() ? \"Copied code\" : \"Copy code\"}\n                class=\"size-6 p-0 rounded-xs text-muted-foreground hover:bg-background hover:text-foreground cursor-pointer\"\n              >\n                <Show when={clipboard.copied()} fallback={<Copy class=\"size-3.5\" />}>\n                  <Check class=\"size-3.5 text-emerald-500 dark:text-emerald-400\" />\n                </Show>\n              </TooltipTrigger>\n              <TooltipContent class=\"text-[10px] py-1 px-2\">\n                {clipboard.copied() ? \"Copied!\" : \"Copy code\"}\n              </TooltipContent>\n            </Tooltip>\n          </Show>\n        </div>\n      </Show>\n\n      {/* Floating Copy Button (if no header bar is present) */}\n      <Show when={!hasHeader() && copyable() && (local.code || cleanCode())}>\n        <div class=\"absolute right-2.5 top-2.5 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100\">\n          <Tooltip>\n            <TooltipTrigger\n              as={Button}\n              variant=\"outline\"\n              size=\"icon\"\n              onClick={handleCopy}\n              aria-label={clipboard.copied() ? \"Copied code\" : \"Copy code\"}\n              class=\"size-7 rounded-md border-border/80 bg-background/90 text-muted-foreground backdrop-blur-xs hover:bg-muted hover:text-foreground cursor-pointer shadow-2xs\"\n            >\n              <Show when={clipboard.copied()} fallback={<Copy class=\"size-3.5\" />}>\n                <Check class=\"size-3.5 text-emerald-500 dark:text-emerald-400\" />\n              </Show>\n            </TooltipTrigger>\n            <TooltipContent class=\"text-[10px] py-1 px-2\">\n              {clipboard.copied() ? \"Copied!\" : \"Copy code\"}\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </Show>\n\n      {/* Code Container */}\n      <div class=\"overflow-x-auto p-4 text-[13px] leading-relaxed [scrollbar-width:thin]\">\n        <Show\n          when={local.children}\n          fallback={\n            <div\n              class=\"font-mono text-sm leading-relaxed overflow-x-auto [&>pre]:!bg-transparent [&>pre]:!p-0 [&>pre]:!m-0 [&>pre]:!border-none\"\n              innerHTML={highlightedHtml() || `<pre class=\"text-foreground/90\"><code>${escapeHtml(cleanCode())}</code></pre>`}\n            />\n          }\n        >\n          <pre class=\"shiki nikala-code-block m-0 overflow-x-auto bg-transparent p-0 font-mono text-xs\">\n            {local.children}\n          </pre>\n        </Show>\n      </div>\n    </div>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/index.json

@@ -170,7 +170,9 @@
       "clsx",
       "tailwind-merge",
       "lucide-solid",
-      "shiki"
+      "shiki",
+      "@shikijs/langs",
+      "@shikijs/themes"
     ],
     "registryDependencies": [
       "button",

package/registry/sidebar.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "ui/sidebar.tsx",
-      "content": "import {\n  createContext,\n  createSignal,\n  createMemo,\n  createEffect,\n  useContext,\n  splitProps,\n  onMount,\n  onCleanup,\n  type Component,\n  type JSX,\n  type ParentComponent,\n  type Accessor,\n  Show,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeft, PanelRight } from \"lucide-solid\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Constants --- */\nconst SIDEBAR_COOKIE_NAME = \"nikala_sidebar_state\";\nconst SIDEBAR_WIDTH = \"17rem\";\nconst SIDEBAR_WIDTH_ICON = \"3.5rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\n/* --- 1. Context & Types --- */\nexport type SidebarState = \"expanded\" | \"collapsed\";\nexport type SidebarSide = \"left\" | \"right\";\n\nexport interface SidebarContextValue {\n  state: Accessor<SidebarState>;\n  open: Accessor<boolean>;\n  setOpen: (open: boolean) => void;\n  openMobile: Accessor<boolean>;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: Accessor<boolean>;\n  toggleSidebar: () => void;\n  side: Accessor<SidebarSide>;\n  setSide: (side: SidebarSide) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>();\n\nconst fallbackSidebarContext: SidebarContextValue = {\n  state: () => \"expanded\",\n  open: () => true,\n  setOpen: () => {},\n  openMobile: () => false,\n  setOpenMobile: () => {},\n  isMobile: () => false,\n  toggleSidebar: () => {},\n  side: () => \"left\",\n  setSide: () => {},\n};\n\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  return context ?? fallbackSidebarContext;\n}\n\n/* --- 2. SidebarProvider --- */\nexport interface SidebarProviderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  defaultOpen?: boolean;\n  open?: Accessor<boolean>;\n  onOpenChange?: (open: boolean) => void;\n  side?: SidebarSide;\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\nexport const SidebarProvider: ParentComponent<SidebarProviderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"defaultOpen\",\n    \"open\",\n    \"onOpenChange\",\n    \"side\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [internalOpen, setInternalOpen] = createSignal<boolean>(local.defaultOpen ?? true);\n  const [openMobile, setOpenMobile] = createSignal<boolean>(false);\n  const [isMobile, setIsMobile] = createSignal<boolean>(false);\n  const [side, setSide] = createSignal<SidebarSide>(local.side ?? \"left\");\n\n  createEffect(() => {\n    if (local.side) {\n      setSide(local.side);\n    }\n  });\n\n  const open = () => (local.open !== undefined ? local.open() : internalOpen());\n\n  const setOpen = (value: boolean) => {\n    if (local.open === undefined) {\n      setInternalOpen(value);\n    }\n    local.onOpenChange?.(value);\n\n    if (typeof document !== \"undefined\") {\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;\n    }\n  };\n\n  const toggleSidebar = () => {\n    setOpen(!open());\n  };\n\n  const state = createMemo<SidebarState>(() => (open() ? \"expanded\" : \"collapsed\"));\n\n  onMount(() => {\n    if (typeof window === \"undefined\") return;\n\n    const checkMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n\n    checkMobile();\n    window.addEventListener(\"resize\", checkMobile, { passive: true });\n\n    // Keyboard shortcut (⌘B / Ctrl+B)\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (\n        (e.metaKey || e.ctrlKey) &&\n        e.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&\n        !e.defaultPrevented\n      ) {\n        e.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    onCleanup(() => {\n      window.removeEventListener(\"resize\", checkMobile);\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    });\n  });\n\n  const contextValue: SidebarContextValue = {\n    state,\n    open,\n    setOpen,\n    openMobile,\n    setOpenMobile,\n    isMobile,\n    toggleSidebar,\n    side,\n    setSide,\n  };\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          ...(typeof local.style === \"object\" ? local.style : {}),\n        } as JSX.CSSProperties}\n        class={cn(\n          \"group/sidebar-wrapper relative flex w-full max-w-full\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n\n/* --- 3. Sidebar Root --- */\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  side?: SidebarSide;\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  class?: string;\n}\n\nexport const Sidebar: ParentComponent<SidebarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"side\",\n    \"variant\",\n    \"collapsible\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const side = () => local.side ?? sidebar.side();\n  const variant = () => local.variant ?? \"sidebar\";\n  const collapsible = () => local.collapsible ?? \"icon\";\n\n  createEffect(() => {\n    if (local.side) {\n      sidebar.setSide(local.side);\n    }\n  });\n\n  const isCollapsed = () => sidebar.state() === \"collapsed\" && collapsible() !== \"none\";\n\n  return (\n    <div\n      data-state={isCollapsed() ? \"collapsed\" : \"expanded\"}\n      data-collapsible={isCollapsed() ? collapsible() : \"\"}\n      data-variant={variant()}\n      data-side={side()}\n      class={cn(\n        \"group relative flex flex-col bg-card text-card-foreground transition-[width,opacity] duration-200 ease-in-out shrink-0\",\n        !isCollapsed()\n          ? \"w-[var(--sidebar-width,17rem)]\"\n          : collapsible() === \"icon\"\n          ? \"w-[var(--sidebar-width-icon,3.5rem)]\"\n          : \"w-0 overflow-hidden opacity-0 border-none\",\n        // Side borders\n        variant() === \"sidebar\" && (side() === \"left\" ? \"border-r border-border\" : \"border-l border-border\"),\n        // Floating variant\n        variant() === \"floating\" && \"m-2 rounded-lg border border-border shadow-md\",\n        // Inset variant\n        variant() === \"inset\" && \"m-2 rounded-lg border border-border/80 bg-card shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col overflow-hidden\"\n      >\n        {local.children}\n      </div>\n    </div>\n  );\n};\n\n/* --- 4. SidebarTrigger --- */\nexport interface SidebarTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarTrigger: Component<SidebarTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"onClick\"]);\n  const { toggleSidebar, side } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Toggle Sidebar\"\n      onClick={(e) => {\n        if (typeof local.onClick === \"function\") {\n          local.onClick(e);\n        }\n        toggleSidebar();\n      }}\n      class={cn(\n        \"inline-flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-foreground hover:bg-muted focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring cursor-pointer transition-colors shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={side() === \"right\"} fallback={<PanelLeft class=\"size-4\" />}>\n        <PanelRight class=\"size-4\" />\n      </Show>\n      <span class=\"sr-only\">Toggle Sidebar</span>\n    </button>\n  );\n};\n\n/* --- 5. SidebarRail --- */\nexport interface SidebarRailProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarRail: Component<SidebarRailProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar Rail\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      class={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex cursor-w-resize\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\n/* --- 6. SidebarInset --- */\nexport interface SidebarInsetProps extends JSX.HTMLAttributes<HTMLElement> {\n  class?: string;\n}\n\nexport const SidebarInset: ParentComponent<SidebarInsetProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <main\n      class={cn(\n        \"relative flex min-h-0 flex-1 flex-col bg-background\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </main>\n  );\n};\n\n/* --- 7. Sidebar Structural Sections --- */\nexport interface SidebarSectionProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarHeader: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"header\"\n      class={cn(\"flex flex-col gap-2 p-3 border-b border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarFooter: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"footer\"\n      class={cn(\"flex flex-col gap-2 p-3 mt-auto border-t border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarSeparator: Component<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <Separator\n      data-sidebar=\"separator\"\n      class={cn(\"mx-2 w-auto bg-border/50 my-1 group-data-[collapsible=icon]:mx-1\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const SidebarContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"content\"\n      class={cn(\n        \"flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2 group-data-[collapsible=icon]:p-1 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:items-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 8. Sidebar Groups --- */\nexport const SidebarGroup: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group\"\n      class={cn(\"relative flex w-full min-w-0 flex-col p-1 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarGroupLabel: ParentComponent<SidebarGroupLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-label\"\n      class={cn(\n        \"flex h-7 shrink-0 items-center rounded-md px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground outline-hidden transition-all duration-200 ease-linear group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarGroupAction: ParentComponent<SidebarGroupActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"group-action\"\n      class={cn(\n        \"absolute right-3 top-3 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport const SidebarGroupContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-content\"\n      class={cn(\"w-full text-sm\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 9. Sidebar Menu --- */\nexport interface SidebarMenuProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenu: ParentComponent<SidebarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu\"\n      class={cn(\"flex w-full min-w-0 flex-col gap-1 list-none p-0 m-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport interface SidebarMenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  class?: string;\n}\n\nexport const SidebarMenuItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li\n      data-sidebar=\"menu-item\"\n      class={cn(\"group/menu-item relative flex w-full justify-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </li>\n  );\n};\n\n/* --- 10. SidebarMenuButton --- */\nexport const sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-sm font-medium outline-hidden ring-sidebar-ring transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 active:bg-muted disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-muted data-[active=true]:font-semibold data-[active=true]:text-foreground group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span]:hidden cursor-pointer select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-muted hover:text-foreground\",\n        outline: \"bg-background shadow-2xs hover:bg-muted hover:text-foreground border border-border\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-10 text-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface SidebarMenuButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof sidebarMenuButtonVariants> {\n  isActive?: boolean;\n  tooltip?: string;\n  class?: string;\n}\n\nexport const SidebarMenuButton: ParentComponent<SidebarMenuButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"isActive\",\n    \"tooltip\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const isCollapsed = () => sidebar.state() === \"collapsed\";\n  const tooltipPlacement = () => (sidebar.side() === \"right\" ? \"left\" : \"right\");\n\n  const buttonElement = () => (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-button\"\n      data-size={local.size}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        sidebarMenuButtonVariants({ variant: local.variant, size: local.size }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n\n  return (\n    <Show\n      when={local.tooltip && isCollapsed() && !sidebar.isMobile()}\n      fallback={buttonElement()}\n    >\n      <Tooltip placement={tooltipPlacement()} gutter={8} openDelay={100}>\n        <TooltipTrigger as=\"div\" class=\"w-full flex items-center justify-center\">\n          {buttonElement()}\n        </TooltipTrigger>\n        <TooltipContent>\n          {local.tooltip}\n        </TooltipContent>\n      </Tooltip>\n    </Show>\n  );\n};\n\n/* --- 11. SidebarMenuAction & Badge --- */\nexport interface SidebarMenuActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  showOnHover?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuAction: ParentComponent<SidebarMenuActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showOnHover\", \"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-action\"\n      class={cn(\n        \"absolute right-1 top-1.5 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.showOnHover && \"opacity-0 group-hover/menu-item:opacity-100 transition-opacity\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport interface SidebarMenuBadgeProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarMenuBadge: ParentComponent<SidebarMenuBadgeProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-badge\"\n      class={cn(\n        \"pointer-events-none absolute right-1.5 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1.5 text-[11px] font-medium tabular-nums bg-muted text-muted-foreground group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarMenuSkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  showIcon?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showIcon\", \"class\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-skeleton\"\n      class={cn(\"flex h-8 items-center gap-2 rounded-md px-2 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center\", local.class)}\n      {...rest}\n    >\n      <Show when={local.showIcon ?? true}>\n        <Skeleton class=\"size-4 rounded-md shrink-0\" />\n      </Show>\n      <Skeleton class=\"h-4 flex-1 max-w-[80%] group-data-[collapsible=icon]:hidden\" />\n    </div>\n  );\n};\n\n/* --- 12. Nested Submenus --- */\nexport interface SidebarMenuSubProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenuSub: ParentComponent<SidebarMenuSubProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu-sub\"\n      class={cn(\n        \"mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border/60 px-2.5 py-0.5 list-none group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport const SidebarMenuSubItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li class={cn(\"relative\", local.class)} {...rest}>\n      {local.children}\n    </li>\n  );\n};\n\nexport interface SidebarMenuSubButtonProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  isActive?: boolean;\n  size?: \"sm\" | \"md\";\n  class?: string;\n}\n\nexport const SidebarMenuSubButton: ParentComponent<SidebarMenuSubButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"isActive\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <a\n      data-sidebar=\"menu-sub-button\"\n      data-size={local.size ?? \"md\"}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-xs text-muted-foreground outline-hidden hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring data-[active=true]:bg-muted data-[active=true]:font-medium data-[active=true]:text-foreground\",\n        local.size === \"sm\" && \"text-[11px]\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n",
+      "content": "import {\n  createContext,\n  createSignal,\n  createMemo,\n  createEffect,\n  useContext,\n  splitProps,\n  onMount,\n  onCleanup,\n  type Component,\n  type JSX,\n  type ParentComponent,\n  type Accessor,\n  Show,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeft, PanelRight } from \"lucide-solid\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/cn\";\n\n/* --- Constants --- */\nconst SIDEBAR_COOKIE_NAME = \"nikala_sidebar_state\";\nconst SIDEBAR_WIDTH = \"17rem\";\nconst SIDEBAR_WIDTH_ICON = \"3.5rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\n/* --- 1. Context & Types --- */\nexport type SidebarState = \"expanded\" | \"collapsed\";\nexport type SidebarSide = \"left\" | \"right\";\n\nexport interface SidebarContextValue {\n  state: Accessor<SidebarState>;\n  open: Accessor<boolean>;\n  setOpen: (open: boolean) => void;\n  openMobile: Accessor<boolean>;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: Accessor<boolean>;\n  toggleSidebar: () => void;\n  side: Accessor<SidebarSide>;\n  setSide: (side: SidebarSide) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>();\n\nconst fallbackSidebarContext: SidebarContextValue = {\n  state: () => \"expanded\",\n  open: () => true,\n  setOpen: () => {},\n  openMobile: () => false,\n  setOpenMobile: () => {},\n  isMobile: () => false,\n  toggleSidebar: () => {},\n  side: () => \"left\",\n  setSide: () => {},\n};\n\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  return context ?? fallbackSidebarContext;\n}\n\n/* --- 2. SidebarProvider --- */\nexport interface SidebarProviderProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  defaultOpen?: boolean;\n  open?: Accessor<boolean>;\n  onOpenChange?: (open: boolean) => void;\n  side?: SidebarSide;\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\nexport const SidebarProvider: ParentComponent<SidebarProviderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"defaultOpen\",\n    \"open\",\n    \"onOpenChange\",\n    \"side\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [internalOpen, setInternalOpen] = createSignal<boolean>(local.defaultOpen ?? true);\n  const [openMobile, setOpenMobile] = createSignal<boolean>(false);\n  const [isMobile, setIsMobile] = createSignal<boolean>(false);\n  const [side, setSide] = createSignal<SidebarSide>(local.side ?? \"left\");\n\n  createEffect(() => {\n    if (local.side) {\n      setSide(local.side);\n    }\n  });\n\n  const open = () => (local.open !== undefined ? local.open() : internalOpen());\n\n  const setOpen = (value: boolean) => {\n    if (local.open === undefined) {\n      setInternalOpen(value);\n    }\n    local.onOpenChange?.(value);\n\n    if (typeof document !== \"undefined\") {\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;\n    }\n  };\n\n  const toggleSidebar = () => {\n    setOpen(!open());\n  };\n\n  const state = createMemo<SidebarState>(() => (open() ? \"expanded\" : \"collapsed\"));\n\n  onMount(() => {\n    if (typeof window === \"undefined\") return;\n\n    const checkMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n\n    checkMobile();\n    window.addEventListener(\"resize\", checkMobile, { passive: true });\n\n    // Keyboard shortcut (⌘B / Ctrl+B)\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (\n        (e.metaKey || e.ctrlKey) &&\n        e.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&\n        !e.defaultPrevented\n      ) {\n        e.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    onCleanup(() => {\n      window.removeEventListener(\"resize\", checkMobile);\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    });\n  });\n\n  const contextValue: SidebarContextValue = {\n    state,\n    open,\n    setOpen,\n    openMobile,\n    setOpenMobile,\n    isMobile,\n    toggleSidebar,\n    side,\n    setSide,\n  };\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          ...(typeof local.style === \"object\" ? local.style : {}),\n        } as JSX.CSSProperties}\n        class={cn(\n          \"group/sidebar-wrapper relative flex w-full max-w-full\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n\n/* --- 3. Sidebar Root --- */\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  side?: SidebarSide;\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  class?: string;\n}\n\nexport const Sidebar: ParentComponent<SidebarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"side\",\n    \"variant\",\n    \"collapsible\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const side = () => local.side ?? sidebar.side();\n  const variant = () => local.variant ?? \"sidebar\";\n  const collapsible = () => local.collapsible ?? \"icon\";\n\n  createEffect(() => {\n    if (local.side) {\n      sidebar.setSide(local.side);\n    }\n  });\n\n  const isCollapsed = () => sidebar.state() === \"collapsed\" && collapsible() !== \"none\";\n\n  return (\n    <div\n      data-state={isCollapsed() ? \"collapsed\" : \"expanded\"}\n      data-collapsible={isCollapsed() ? collapsible() : \"\"}\n      data-variant={variant()}\n      data-side={side()}\n      class={cn(\n        \"group relative flex flex-col bg-card text-card-foreground transition-[width,opacity] duration-200 ease-in-out shrink-0\",\n        !isCollapsed()\n          ? \"w-[var(--sidebar-width,17rem)]\"\n          : collapsible() === \"icon\"\n          ? \"w-[var(--sidebar-width-icon,3.5rem)]\"\n          : \"w-0 overflow-hidden opacity-0 border-none\",\n        // Side borders\n        variant() === \"sidebar\" && (side() === \"left\" ? \"border-r border-border\" : \"border-l border-border\"),\n        // Floating variant\n        variant() === \"floating\" && \"m-2 rounded-lg border border-border shadow-md\",\n        // Inset variant\n        variant() === \"inset\" && \"m-2 rounded-lg border border-border/80 bg-card shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col overflow-hidden\"\n      >\n        {local.children}\n      </div>\n    </div>\n  );\n};\n\n/* --- 4. SidebarTrigger --- */\nexport interface SidebarTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarTrigger: Component<SidebarTriggerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"onClick\"]);\n  const { toggleSidebar, side, isMobile, openMobile, setOpenMobile } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Toggle Sidebar\"\n      onClick={(e) => {\n        if (typeof local.onClick === \"function\") local.onClick(e);\n        if (isMobile()) setOpenMobile(!openMobile());\n        else toggleSidebar();\n      }}\n      class={cn(\n        \"inline-flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-foreground hover:bg-muted focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring cursor-pointer transition-colors shadow-2xs\",\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={side() === \"right\"} fallback={<PanelLeft class=\"size-4\" />}>\n        <PanelRight class=\"size-4\" />\n      </Show>\n      <span class=\"sr-only\">Toggle Sidebar</span>\n    </button>\n  );\n};\n\n/* --- 5. SidebarRail --- */\nexport interface SidebarRailProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarRail: Component<SidebarRailProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar Rail\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      class={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex cursor-w-resize\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\n/* --- 6. SidebarInset --- */\nexport interface SidebarInsetProps extends JSX.HTMLAttributes<HTMLElement> {\n  class?: string;\n}\n\nexport const SidebarInset: ParentComponent<SidebarInsetProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <main\n      class={cn(\n        \"relative flex min-h-0 flex-1 flex-col bg-background\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </main>\n  );\n};\n\n/* --- 7. Sidebar Structural Sections --- */\nexport interface SidebarSectionProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarHeader: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"header\"\n      class={cn(\"flex flex-col gap-2 p-3 border-b border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarFooter: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"footer\"\n      class={cn(\"flex flex-col gap-2 p-3 mt-auto border-t border-border/40 shrink-0 group-data-[collapsible=icon]:p-2 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport const SidebarSeparator: Component<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <Separator\n      data-sidebar=\"separator\"\n      class={cn(\"mx-2 w-auto bg-border/50 my-1 group-data-[collapsible=icon]:mx-1\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const SidebarContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"content\"\n      class={cn(\n        \"flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2 group-data-[collapsible=icon]:p-1 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:items-center\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 8. Sidebar Groups --- */\nexport const SidebarGroup: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group\"\n      class={cn(\"relative flex w-full min-w-0 flex-col p-1 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarGroupLabel: ParentComponent<SidebarGroupLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-label\"\n      class={cn(\n        \"flex h-7 shrink-0 items-center rounded-md px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground outline-hidden transition-all duration-200 ease-linear group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarGroupActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  class?: string;\n}\n\nexport const SidebarGroupAction: ParentComponent<SidebarGroupActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"group-action\"\n      class={cn(\n        \"absolute right-3 top-3 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport const SidebarGroupContent: ParentComponent<SidebarSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"group-content\"\n      class={cn(\"w-full text-sm\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\n/* --- 9. Sidebar Menu --- */\nexport interface SidebarMenuProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenu: ParentComponent<SidebarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu\"\n      class={cn(\"flex w-full min-w-0 flex-col gap-1 list-none p-0 m-0 group-data-[collapsible=icon]:items-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport interface SidebarMenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  class?: string;\n}\n\nexport const SidebarMenuItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li\n      data-sidebar=\"menu-item\"\n      class={cn(\"group/menu-item relative flex w-full justify-center\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </li>\n  );\n};\n\n/* --- 10. SidebarMenuButton --- */\nexport const sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-sm font-medium outline-hidden ring-sidebar-ring transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 active:bg-muted disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-muted data-[active=true]:font-semibold data-[active=true]:text-foreground group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span]:hidden cursor-pointer select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-muted hover:text-foreground\",\n        outline: \"bg-background shadow-2xs hover:bg-muted hover:text-foreground border border-border\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-10 text-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface SidebarMenuButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof sidebarMenuButtonVariants> {\n  isActive?: boolean;\n  tooltip?: string;\n  class?: string;\n}\n\nexport const SidebarMenuButton: ParentComponent<SidebarMenuButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"isActive\",\n    \"tooltip\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const sidebar = useSidebar();\n  const isCollapsed = () => sidebar.state() === \"collapsed\";\n  const tooltipPlacement = () => (sidebar.side() === \"right\" ? \"left\" : \"right\");\n\n  const buttonElement = () => (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-button\"\n      data-size={local.size}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        sidebarMenuButtonVariants({ variant: local.variant, size: local.size }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n\n  return (\n    <Show\n      when={local.tooltip && isCollapsed() && !sidebar.isMobile()}\n      fallback={buttonElement()}\n    >\n      <Tooltip placement={tooltipPlacement()} gutter={8} openDelay={100}>\n        <TooltipTrigger as=\"div\" class=\"w-full flex items-center justify-center\">\n          {buttonElement()}\n        </TooltipTrigger>\n        <TooltipContent>\n          {local.tooltip}\n        </TooltipContent>\n      </Tooltip>\n    </Show>\n  );\n};\n\n/* --- 11. SidebarMenuAction & Badge --- */\nexport interface SidebarMenuActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  showOnHover?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuAction: ParentComponent<SidebarMenuActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showOnHover\", \"class\", \"children\"]);\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-action\"\n      class={cn(\n        \"absolute right-1 top-1.5 flex size-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-hidden transition-transform hover:bg-muted hover:text-foreground cursor-pointer group-data-[collapsible=icon]:hidden\",\n        local.showOnHover && \"opacity-0 group-hover/menu-item:opacity-100 transition-opacity\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n\nexport interface SidebarMenuBadgeProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const SidebarMenuBadge: ParentComponent<SidebarMenuBadgeProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-badge\"\n      class={cn(\n        \"pointer-events-none absolute right-1.5 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1.5 text-[11px] font-medium tabular-nums bg-muted text-muted-foreground group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n\nexport interface SidebarMenuSkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  showIcon?: boolean;\n  class?: string;\n}\n\nexport const SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"showIcon\", \"class\"]);\n\n  return (\n    <div\n      data-sidebar=\"menu-skeleton\"\n      class={cn(\"flex h-8 items-center gap-2 rounded-md px-2 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center\", local.class)}\n      {...rest}\n    >\n      <Show when={local.showIcon ?? true}>\n        <Skeleton class=\"size-4 rounded-md shrink-0\" />\n      </Show>\n      <Skeleton class=\"h-4 flex-1 max-w-[80%] group-data-[collapsible=icon]:hidden\" />\n    </div>\n  );\n};\n\n/* --- 12. Nested Submenus --- */\nexport interface SidebarMenuSubProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  class?: string;\n}\n\nexport const SidebarMenuSub: ParentComponent<SidebarMenuSubProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <ul\n      data-sidebar=\"menu-sub\"\n      class={cn(\n        \"mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border/60 px-2.5 py-0.5 list-none group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </ul>\n  );\n};\n\nexport const SidebarMenuSubItem: ParentComponent<SidebarMenuItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <li class={cn(\"relative\", local.class)} {...rest}>\n      {local.children}\n    </li>\n  );\n};\n\nexport interface SidebarMenuSubButtonProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n  isActive?: boolean;\n  size?: \"sm\" | \"md\";\n  class?: string;\n}\n\nexport const SidebarMenuSubButton: ParentComponent<SidebarMenuSubButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"isActive\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <a\n      data-sidebar=\"menu-sub-button\"\n      data-size={local.size ?? \"md\"}\n      data-active={local.isActive ? \"true\" : \"false\"}\n      class={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-xs text-muted-foreground outline-hidden hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring data-[active=true]:bg-muted data-[active=true]:font-medium data-[active=true]:text-foreground\",\n        local.size === \"sm\" && \"text-[11px]\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </a>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/table-of-contents.json

@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "ui/table-of-contents.tsx",
-      "content": "// src/components/ui/table-of-contents.tsx\nimport {\n  splitProps,\n  createSignal,\n  createEffect,\n  onMount,\n  onCleanup,\n  For,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { List, ListHeader, ListItem } from \"@/components/ui/list\";\nimport { cn } from \"@/lib/cn\";\nimport { createScrollPosition } from \"@/hooks/create-scroll-position\";\n\nexport interface TocItem {\n  id: string;\n  text: string;\n  depth: number;\n}\n\nexport interface TableOfContentsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  items: TocItem[];\n  title?: string | false;\n  activeId?: string;\n  onItemClick?: (id: string) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI TableOfContents Component.\n * Pure composition of ScrollArea, ListHeader, List, and ListItem with active ScrollSpy tracking.\n */\nexport const TableOfContents: Component<TableOfContentsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"items\",\n    \"title\",\n    \"activeId\",\n    \"onItemClick\",\n    \"class\",\n  ]);\n\n  const [activeId, setActiveId] = createSignal<string>(local.activeId || \"\");\n  const scrollPosition = createScrollPosition();\n\n  onMount(() => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n    const headings = (local.items || [])\n      .map((item) => document.getElementById(item.id))\n      .filter((element): element is HTMLElement => Boolean(element));\n\n    const updateActiveHeading = () => {\n      if (headings.length === 0) return;\n\n      const atPageBottom = scrollPosition.isAtBottom();\n      if (atPageBottom) {\n        setActiveId(headings[headings.length - 1].id);\n        return;\n      }\n\n      const heading = [...headings]\n        .reverse()\n        .find((element) => element.getBoundingClientRect().top <= 120);\n\n      setActiveId(heading?.id || headings[0].id);\n    };\n\n    createEffect(() => {\n      scrollPosition.y();\n      scrollPosition.isAtBottom();\n      updateActiveHeading();\n    });\n\n    window.addEventListener(\"resize\", updateActiveHeading);\n    onCleanup(() => window.removeEventListener(\"resize\", updateActiveHeading));\n  });\n\n  const handleClick = (e: MouseEvent, id: string) => {\n    if (typeof document !== \"undefined\") {\n      const el = document.getElementById(id);\n      if (el) {\n        e.preventDefault();\n        el.scrollIntoView({ behavior: \"smooth\" });\n        setActiveId(id);\n        if (typeof window !== \"undefined\") {\n          window.history.pushState(null, \"\", `#${id}`);\n        }\n      }\n    }\n    local.onItemClick?.(id);\n  };\n\n  return (\n    <ScrollArea class={cn(\"h-full py-2\", local.class)} {...rest}>\n      <Show when={local.title !== false}>\n        <ListHeader\n          title={typeof local.title === \"string\" ? local.title : \"On this page\"}\n          class=\"px-3 pb-1\"\n        />\n      </Show>\n\n      <List class=\"gap-0.5 p-1\">\n        <For each={local.items}>\n          {(item) => (\n            <ListItem\n              title={item.text}\n              href={`#${item.id}`}\n              active={activeId() === item.id}\n              size=\"sm\"\n              hoverVariant=\"muted\"\n              class={cn(\n                \"text-xs transition-colors py-1 h-auto min-h-0\",\n                item.depth === 3 && \"pl-5 text-muted-foreground/80\",\n                item.depth > 3 && \"pl-7 text-muted-foreground/60\",\n                activeId() === item.id\n                  ? \"text-primary font-medium bg-primary/10\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n              onClick={(e: MouseEvent) => handleClick(e, item.id)}\n            />\n          )}\n        </For>\n      </List>\n    </ScrollArea>\n  );\n};\n\nexport const Toc = TableOfContents;\n",
+      "content": "// src/components/ui/table-of-contents.tsx\nimport {\n  splitProps,\n  createSignal,\n  createEffect,\n  onMount,\n  onCleanup,\n  For,\n  Show,\n  type Component,\n  type JSX,\n} from \"solid-js\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { List, ListHeader, ListItem } from \"@/components/ui/list\";\nimport { cn } from \"@/lib/cn\";\nimport { createScrollPosition } from \"@/hooks/create-scroll-position\";\n\nexport interface TocItem {\n  id: string;\n  text: string;\n  depth: number;\n}\n\nexport interface TableOfContentsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  items: TocItem[];\n  title?: string | false;\n  activeId?: string;\n  onActiveChange?: (id: string) => void;\n  onItemClick?: (id: string) => void;\n  class?: string;\n}\n\n/**\n * Nikala UI TableOfContents Component.\n * Pure composition of ScrollArea, ListHeader, List, and ListItem with active ScrollSpy tracking.\n */\nexport const TableOfContents: Component<TableOfContentsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"items\",\n    \"title\",\n  \"activeId\",\n  \"onActiveChange\",\n  \"onItemClick\",\n    \"class\",\n  ]);\n\n  const [activeId, setActiveId] = createSignal<string>(local.activeId || \"\");\n  const setCurrentActiveId = (id: string) => {\n    setActiveId(id);\n    local.onActiveChange?.(id);\n  };\n  const scrollPosition = createScrollPosition();\n\n  onMount(() => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n    const headings = (local.items || [])\n      .map((item) => document.getElementById(item.id))\n      .filter((element): element is HTMLElement => Boolean(element));\n\n    const updateActiveHeading = () => {\n      if (headings.length === 0) return;\n\n      const atPageBottom = scrollPosition.isAtBottom();\n      if (atPageBottom) {\n        setCurrentActiveId(headings[headings.length - 1].id);\n        return;\n      }\n\n      const heading = [...headings]\n        .reverse()\n        .find((element) => element.getBoundingClientRect().top <= 120);\n\n      setCurrentActiveId(heading?.id || headings[0].id);\n    };\n\n    createEffect(() => {\n      scrollPosition.y();\n      scrollPosition.isAtBottom();\n      updateActiveHeading();\n    });\n\n    window.addEventListener(\"resize\", updateActiveHeading);\n    onCleanup(() => window.removeEventListener(\"resize\", updateActiveHeading));\n  });\n\n  const handleClick = (e: MouseEvent, id: string) => {\n    if (typeof document !== \"undefined\") {\n      const el = document.getElementById(id);\n      if (el) {\n        e.preventDefault();\n        el.scrollIntoView({ behavior: \"smooth\" });\n        setCurrentActiveId(id);\n        if (typeof window !== \"undefined\") {\n          window.history.pushState(null, \"\", `#${id}`);\n        }\n      }\n    }\n    local.onItemClick?.(id);\n  };\n\n  return (\n    <ScrollArea class={cn(\"h-full py-2\", local.class)} {...rest}>\n      <Show when={local.title !== false}>\n        <ListHeader\n          title={typeof local.title === \"string\" ? local.title : \"On this page\"}\n          class=\"px-3 pb-1\"\n        />\n      </Show>\n\n      <List class=\"gap-0.5 p-1\">\n        <For each={local.items}>\n          {(item) => (\n            <ListItem\n              title={item.text}\n              href={`#${item.id}`}\n              active={activeId() === item.id}\n              size=\"sm\"\n              hoverVariant=\"muted\"\n              class={cn(\n                \"text-xs transition-colors py-1 h-auto min-h-0\",\n                item.depth === 3 && \"pl-5 text-muted-foreground/80\",\n                item.depth > 3 && \"pl-7 text-muted-foreground/60\",\n                activeId() === item.id\n                  ? \"text-primary font-medium bg-primary/10\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n              onClick={(e: MouseEvent) => handleClick(e, item.id)}\n            />\n          )}\n        </For>\n      </List>\n    </ScrollArea>\n  );\n};\n\nexport const Toc = TableOfContents;\n",
       "type": "registry:ui"
     }
   ]

package/src/registry/components/ui/code-block.tsx

@@ -44,7 +44,28 @@ async function getShikiHighlighter() {
   if (typeof window === "undefined") return null;
   if (!shikiHighlighterPromise) {
     try {
-      const { createHighlighter } = await import("shiki");
+      const [{ createBundledHighlighter }, { createJavaScriptRegexEngine }] = await Promise.all([
+        import("shiki/core"),
+        import("shiki/engine/javascript"),
+      ]);
+      const createHighlighter = createBundledHighlighter({
+        langs: {
+          typescript: () => import("@shikijs/langs/typescript"),
+          javascript: () => import("@shikijs/langs/javascript"),
+          tsx: () => import("@shikijs/langs/tsx"),
+          jsx: () => import("@shikijs/langs/jsx"),
+          bash: () => import("@shikijs/langs/shellscript"),
+          json: () => import("@shikijs/langs/json"),
+          css: () => import("@shikijs/langs/css"),
+          html: () => import("@shikijs/langs/html"),
+          rust: () => import("@shikijs/langs/rust"),
+        },
+        themes: {
+          "github-dark": () => import("@shikijs/themes/github-dark"),
+          "github-light": () => import("@shikijs/themes/github-light"),
+        },
+        engine: () => createJavaScriptRegexEngine(),
+      });
       shikiHighlighterPromise = createHighlighter({
         themes: ["github-dark", "github-light"],
         langs: [

package/src/registry/components/ui/sidebar.tsx

@@ -244,17 +244,16 @@ export interface SidebarTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButton
 
 export const SidebarTrigger: Component<SidebarTriggerProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "onClick"]);
-  const { toggleSidebar, side } = useSidebar();
+  const { toggleSidebar, side, isMobile, openMobile, setOpenMobile } = useSidebar();
 
   return (
     <button
       type="button"
       aria-label="Toggle Sidebar"
       onClick={(e) => {
-        if (typeof local.onClick === "function") {
-          local.onClick(e);
-        }
-        toggleSidebar();
+        if (typeof local.onClick === "function") local.onClick(e);
+        if (isMobile()) setOpenMobile(!openMobile());
+        else toggleSidebar();
       }}
       class={cn(
         "inline-flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-foreground hover:bg-muted focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring cursor-pointer transition-colors shadow-2xs",

package/src/registry/components/ui/table-of-contents.tsx

@@ -25,6 +25,7 @@ export interface TableOfContentsProps extends Omit<JSX.HTMLAttributes<HTMLDivEle
   items: TocItem[];
   title?: string | false;
   activeId?: string;
+  onActiveChange?: (id: string) => void;
   onItemClick?: (id: string) => void;
   class?: string;
 }
@@ -37,12 +38,17 @@ export const TableOfContents: Component<TableOfContentsProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "items",
     "title",
-    "activeId",
-    "onItemClick",
+  "activeId",
+  "onActiveChange",
+  "onItemClick",
     "class",
   ]);
 
   const [activeId, setActiveId] = createSignal<string>(local.activeId || "");
+  const setCurrentActiveId = (id: string) => {
+    setActiveId(id);
+    local.onActiveChange?.(id);
+  };
   const scrollPosition = createScrollPosition();
 
   onMount(() => {
@@ -57,7 +63,7 @@ export const TableOfContents: Component<TableOfContentsProps> = (props) => {
 
       const atPageBottom = scrollPosition.isAtBottom();
       if (atPageBottom) {
-        setActiveId(headings[headings.length - 1].id);
+        setCurrentActiveId(headings[headings.length - 1].id);
         return;
       }
 
@@ -65,7 +71,7 @@ export const TableOfContents: Component<TableOfContentsProps> = (props) => {
         .reverse()
         .find((element) => element.getBoundingClientRect().top <= 120);
 
-      setActiveId(heading?.id || headings[0].id);
+      setCurrentActiveId(heading?.id || headings[0].id);
     };
 
     createEffect(() => {
@@ -84,7 +90,7 @@ export const TableOfContents: Component<TableOfContentsProps> = (props) => {
       if (el) {
         e.preventDefault();
         el.scrollIntoView({ behavior: "smooth" });
-        setActiveId(id);
+        setCurrentActiveId(id);
         if (typeof window !== "undefined") {
           window.history.pushState(null, "", `#${id}`);
         }

package/src/registry/metadata.ts

@@ -433,7 +433,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
   "code-block": {
     title: "Code Block",
     description: "A code block container with filename header, language indicator, and interactive copy to clipboard button.",
-    dependencies: ["clsx", "tailwind-merge", "lucide-solid", "shiki"],
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid", "shiki", "@shikijs/langs", "@shikijs/themes"],
     registryDependencies: ["button", "badge", "tooltip", "tabs", "create-clipboard"],
   },
   "package-manager-tabs": {

package/src/shiki-modules.d.ts

@@ -0,0 +1,9 @@
+declare module "@shikijs/langs/*" {
+  const language: any;
+  export default language;
+}
+
+declare module "@shikijs/themes/*" {
+  const theme: any;
+  export default theme;
+}