fulldev-ui 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Fulldev UI
 
+## 0.12.0
+
+### Minor Changes
+
+- [#195](https://github.com/fulldotdev/ui/pull/195) [`74fcc47`](https://github.com/fulldotdev/ui/commit/74fcc47a2ba855729c15ffb163af7c60beeeae78) Thanks [@silveltman](https://github.com/silveltman)! - Upgrade all Data Slot primitives and registry dependencies to 1.0.1. Use recommended
+  lazy mounting for Select, Tooltip, Hover Card and Navigation Menu, with an explicit
+  mountStrategy="eager" opt-in for integrations that query closed content. Discover nested
+  comboboxes and hover cards in retained content without duplicate initialization.
+
+  Release outgoing controllers on Astro page swaps so open overlays cannot leave stale
+  modal stacks or scroll locks. Give CommandDialog a trigger slot and correct the
+  sidebar search composition for strict nested ownership.
+
+  Use native autofocus for command palettes and native link activation for keyboard
+  commands. Align Slider defaults and Tabs values with the upstream API, and make
+  block dropdown links actual accessible menu items.
+
+  Use shadcn button defaults and consistent overlay layers so nested popups receive
+  pointer input. Form submissions should explicitly set type="submit".
+
+  Keep Data Slot modal stack layers and place floating positioners above them so
+  Select and other popups remain clickable inside dialogs.
+
+## 0.11.1
+
+### Patch Changes
+
+- [#190](https://github.com/fulldotdev/ui/pull/190) [`a7b9580`](https://github.com/fulldotdev/ui/commit/a7b9580c416a72abb4d09b721d2cba917c806f1b) Thanks [@silveltman](https://github.com/silveltman)! - Fix repeated banner initialization, render informational contact icons without inactive buttons, and improve narrow documentation headers and prose link contrast.
+
 ## 0.11.0
 
 ### Minor Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -50,24 +50,24 @@
   "dependencies": {
     "@astrojs/mdx": "^5.0.6",
     "@astrojs/sitemap": "^3.7.3",
-    "@data-slot/accordion": "^0.2.166",
-    "@data-slot/alert-dialog": "^0.2.166",
-    "@data-slot/collapsible": "^0.2.166",
-    "@data-slot/combobox": "^0.2.166",
-    "@data-slot/command": "^0.2.166",
-    "@data-slot/core": "^0.2.166",
-    "@data-slot/dialog": "^0.2.166",
-    "@data-slot/dropdown-menu": "^0.2.166",
-    "@data-slot/hover-card": "^0.2.166",
-    "@data-slot/navigation-menu": "^0.2.166",
-    "@data-slot/popover": "^0.2.166",
-    "@data-slot/radio-group": "^0.2.166",
-    "@data-slot/select": "^0.2.166",
-    "@data-slot/slider": "^0.2.166",
-    "@data-slot/switch": "^0.2.166",
-    "@data-slot/tabs": "^0.2.166",
-    "@data-slot/toggle": "^0.2.166",
-    "@data-slot/tooltip": "^0.2.166",
+    "@data-slot/accordion": "^1.0.1",
+    "@data-slot/alert-dialog": "^1.0.1",
+    "@data-slot/collapsible": "^1.0.1",
+    "@data-slot/combobox": "^1.0.1",
+    "@data-slot/command": "^1.0.1",
+    "@data-slot/core": "^1.0.1",
+    "@data-slot/dialog": "^1.0.1",
+    "@data-slot/dropdown-menu": "^1.0.1",
+    "@data-slot/hover-card": "^1.0.1",
+    "@data-slot/navigation-menu": "^1.0.1",
+    "@data-slot/popover": "^1.0.1",
+    "@data-slot/radio-group": "^1.0.1",
+    "@data-slot/select": "^1.0.1",
+    "@data-slot/slider": "^1.0.1",
+    "@data-slot/switch": "^1.0.1",
+    "@data-slot/tabs": "^1.0.1",
+    "@data-slot/toggle": "^1.0.1",
+    "@data-slot/tooltip": "^1.0.1",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@lexingtonthemes/seo": "^0.2.0",
@@ -90,10 +90,12 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
+    "@argos-ci/playwright": "^7.6.0",
     "@astrojs/check": "^0.9.9",
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@playwright/test": "^1.63.0",
     "prettier": "3.9.3",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
@@ -106,6 +108,7 @@
     "stop": "lsof -tiTCP:4321 -sTCP:LISTEN | xargs kill 2>/dev/null || true",
     "preview": "pnpm stop && pnpm build && astro preview --host 127.0.0.1 --port 4321",
     "typecheck": "astro check",
+    "test:interactions": "playwright test --config playwright.interactions.config.ts",
     "check": "pnpm format:check && pnpm typecheck",
     "build": "astro build",
     "build:prod": "pnpm check && pnpm registry:build && pnpm build",
@@ -117,6 +120,7 @@
     "format:check": "prettier --check .",
     "release": "changeset version && pnpm install --lockfile-only",
     "release:publish": "pnpm registry:check && pnpm build && changeset publish",
-    "registry:meta": "node scripts/registry-meta.mjs"
+    "registry:meta": "node scripts/registry-meta.mjs",
+    "test:visual": "pnpm build && playwright test"
   }
 }

package/public/r/accordion.json

@@ -4,13 +4,13 @@
   "title": "Accordion",
   "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
   "dependencies": [
-    "@data-slot/accordion",
+    "@data-slot/accordion@^1.0.1",
     "@lucide/astro"
   ],
   "files": [
     {
       "path": "src/components/ui/accordion/accordion.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/alert-dialog.json

@@ -4,7 +4,7 @@
   "title": "Alert Dialog",
   "description": "A modal dialog for important confirmations that expects a response.",
   "dependencies": [
-    "@data-slot/alert-dialog"
+    "@data-slot/alert-dialog@^1.0.1"
   ],
   "registryDependencies": [
     "@fulldev/button"
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/alert-dialog/alert-dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/banner-2.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"\", className)}\n  {...props}\n>\n  <BannerContainer class=\"gap-4 py-1\" showClose={false}>\n    <div\n      class=\"flex flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\"\n    >\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {\n      buttons?.length && (\n        <div class=\"flex shrink-0 items-center gap-2\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"sm\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div\n      class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\"\n    >\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {\n      buttons?.length && (\n        <div class=\"flex flex-wrap items-center gap-2\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"sm\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],

package/public/r/banner.json

@@ -6,14 +6,10 @@
   "dependencies": [
     "@lucide/astro"
   ],
-  "registryDependencies": [
-    "@fulldev/button",
-    "@fulldev/dropdown-menu"
-  ],
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"relative flex items-center py-2\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script is:inline>\n  const initializedKey = \"fulldevBannerInitialized\"\n\n  if (!document.documentElement.dataset[initializedKey]) {\n    document.documentElement.dataset[initializedKey] = \"true\"\n\n    const getStorageToken = (key) => `banner:${key}`\n\n    const syncBanners = () => {\n      document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n        if (!(banner instanceof HTMLElement)) return\n\n        const storageKey = banner.dataset.bannerStorageKey\n\n        if (\n          storageKey &&\n          sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n        ) {\n          banner.hidden = true\n        }\n      })\n    }\n\n    syncBanners()\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const closeButton = target.closest(\"[data-slot='banner-close']\")\n\n      if (!(closeButton instanceof HTMLElement)) return\n\n      const banner = closeButton.closest(\"[data-slot='banner']\")\n\n      if (!(banner instanceof HTMLElement)) return\n\n      banner.hidden = true\n\n      const storageKey = banner.dataset.bannerStorageKey\n\n      if (storageKey) {\n        sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n      }\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"relative flex items-center py-2\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/blocks-1.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <a\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </a>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>\n  const button = copyButtonId ? document.getElementById(copyButtonId) : null\n\n  if (button instanceof HTMLButtonElement) {\n    button.addEventListener(\"click\", async () => {\n      const source = button.dataset.source\n\n      if (!source) return\n\n      try {\n        await navigator.clipboard.writeText(source)\n        button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n        window.setTimeout(() => {\n          button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n          button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n        }, 1200)\n      } catch {\n        // Ignore clipboard failures; the button remains available for retry.\n      }\n    })\n  }\n</script>\n",
+      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              data-blocks-copy\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],

package/public/r/button.json

@@ -11,7 +11,7 @@
     },
     {
       "path": "src/components/ui/button/button.astro",
-      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { buttonVariants, type ButtonVariantProps } from \"./button-variants\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  variant,\n  size,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"button\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { buttonVariants, type ButtonVariantProps } from \"./button-variants\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  variant,\n  size,\n  ...props\n} = Astro.props\n\nconst attributes: Record<string, unknown> = { ...props }\nif (Tag === \"button\") attributes.type ??= \"button\"\n---\n\n<Tag\n  data-slot=\"button\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...attributes}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {

package/public/r/collapsible.json

@@ -4,12 +4,12 @@
   "title": "Collapsible",
   "description": "An interactive component which expands/collapses a panel.",
   "dependencies": [
-    "@data-slot/collapsible"
+    "@data-slot/collapsible@^1.0.1"
   ],
   "files": [
     {
       "path": "src/components/ui/collapsible/collapsible.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  hiddenUntilFound?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  hiddenUntilFound,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"collapsible\"\n  data-default-open={defaultOpen}\n  data-hidden-until-found={hiddenUntilFound}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/collapsible\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  hiddenUntilFound?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  hiddenUntilFound,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"collapsible\"\n  data-default-open={defaultOpen}\n  data-hidden-until-found={hiddenUntilFound}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/collapsible\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/combobox.json

@@ -4,7 +4,8 @@
   "title": "Combobox",
   "description": "Autocomplete input with a list of suggestions.",
   "dependencies": [
-    "@data-slot/combobox",
+    "@data-slot/combobox@^1.0.1",
+    "@data-slot/core@^1.0.1",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -13,12 +14,12 @@
   "files": [
     {
       "path": "src/components/ui/combobox/combobox.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: string\n  defaultOpen?: boolean\n  placeholder?: string\n  disabled?: boolean\n  required?: boolean\n  name?: string\n  openOnFocus?: boolean\n  autoHighlight?: boolean\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  defaultValue,\n  defaultOpen,\n  placeholder,\n  disabled,\n  required,\n  name,\n  openOnFocus,\n  autoHighlight,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"combobox\"\n  data-default-value={defaultValue}\n  data-default-open={defaultOpen}\n  data-placeholder={placeholder}\n  data-disabled={disabled}\n  data-required={required}\n  data-name={name}\n  data-open-on-focus={openOnFocus}\n  data-auto-highlight={autoHighlight}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  class={cn(\"group/combobox relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { createCombobox } from \"@data-slot/combobox\"\n\n  const initCombobox = () => {\n    document.querySelectorAll('[data-slot=\"combobox\"]').forEach((root) => {\n      if (\n        !root.querySelector('[data-slot=\"combobox-input\"]') ||\n        !root.querySelector('[data-slot=\"combobox-content\"]')\n      ) {\n        return\n      }\n\n      createCombobox(root as HTMLElement)\n    })\n  }\n\n  initCombobox()\n\n  document.addEventListener(\"astro:page-load\", initCombobox)\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: string\n  defaultOpen?: boolean\n  placeholder?: string\n  disabled?: boolean\n  required?: boolean\n  name?: string\n  openOnFocus?: boolean\n  autoHighlight?: boolean\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  defaultValue,\n  defaultOpen,\n  placeholder,\n  disabled,\n  required,\n  name,\n  openOnFocus,\n  autoHighlight,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"combobox\"\n  data-default-value={defaultValue}\n  data-default-open={defaultOpen}\n  data-placeholder={placeholder}\n  data-disabled={disabled}\n  data-required={required}\n  data-name={name}\n  data-open-on-focus={openOnFocus}\n  data-auto-highlight={autoHighlight}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  class={cn(\"group/combobox relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/combobox\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/combobox/combobox-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  hidden = true,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"combobox-portal\">\n  <div\n    data-slot=\"combobox-positioner\"\n    data-side={side}\n    data-align={align}\n    data-side-offset={sideOffset}\n    data-align-offset={alignOffset}\n    data-avoid-collisions={avoidCollisions}\n    data-collision-padding={collisionPadding}\n    class=\"isolate z-50\"\n  >\n    <div\n      data-slot=\"combobox-content\"\n      data-side={side}\n      data-align={align}\n      data-side-offset={sideOffset}\n      data-align-offset={alignOffset}\n      data-avoid-collisions={avoidCollisions}\n      data-collision-padding={collisionPadding}\n      hidden={hidden}\n      class={cn(\n        \"group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  hidden = true,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"combobox-portal\">\n  <div\n    data-slot=\"combobox-positioner\"\n    data-side={side}\n    data-align={align}\n    data-side-offset={sideOffset}\n    data-align-offset={alignOffset}\n    data-avoid-collisions={avoidCollisions}\n    data-collision-padding={collisionPadding}\n    class=\"isolate z-[1000]\"\n  >\n    <div\n      data-slot=\"combobox-content\"\n      data-side={side}\n      data-align={align}\n      data-side-offset={sideOffset}\n      data-align-offset={alignOffset}\n      data-avoid-collisions={avoidCollisions}\n      data-collision-padding={collisionPadding}\n      hidden={hidden}\n      class={cn(\n        \"group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {

package/public/r/command.json

@@ -4,8 +4,9 @@
   "title": "Command",
   "description": "Command menu for search and quick actions.",
   "dependencies": [
-    "@data-slot/command",
-    "@lucide/astro"
+    "@data-slot/command@^1.0.1",
+    "@lucide/astro",
+    "@data-slot/core@^1.0.1"
   ],
   "registryDependencies": [
     "@fulldev/dialog"
@@ -13,12 +14,12 @@
   "files": [
     {
       "path": "src/components/ui/command/command.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  label?: string\n  defaultValue?: string\n  defaultSearch?: string\n  shouldFilter?: boolean\n  loop?: boolean\n  disablePointerSelection?: boolean\n  vimBindings?: boolean\n}\n\nconst {\n  class: className,\n  label,\n  defaultValue,\n  defaultSearch,\n  shouldFilter,\n  loop,\n  disablePointerSelection,\n  vimBindings,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"command\"\n  data-label={label}\n  data-default-value={defaultValue}\n  data-default-search={defaultSearch}\n  data-should-filter={shouldFilter}\n  data-loop={loop}\n  data-disable-pointer-selection={disablePointerSelection}\n  data-vim-bindings={vimBindings}\n  class={cn(\n    \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/command\"\n\n  const initCommand = () => {\n    create()\n\n    document.querySelectorAll(\"[data-slot=command]\").forEach((command) => {\n      if (!(command instanceof HTMLElement)) return\n      if (command.dataset.linkNavigation === \"true\") return\n\n      command.dataset.linkNavigation = \"true\"\n      command.addEventListener(\"command:select\", (event) => {\n        const { detail } = event as CustomEvent<{ value?: unknown }>\n        const value = detail?.value\n        if (typeof value !== \"string\") return\n\n        const item = Array.from(\n          command.querySelectorAll(\"[data-slot=command-item][href]\")\n        ).find((item) => item.getAttribute(\"data-value\") === value)\n        const href = item?.getAttribute(\"href\")\n\n        if (href) window.location.href = href\n      })\n    })\n  }\n\n  initCommand()\n\n  document.addEventListener(\"astro:page-load\", initCommand)\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  label?: string\n  defaultValue?: string\n  defaultSearch?: string\n  shouldFilter?: boolean\n  loop?: boolean\n  disablePointerSelection?: boolean\n  vimBindings?: boolean\n}\n\nconst {\n  class: className,\n  label,\n  defaultValue,\n  defaultSearch,\n  shouldFilter,\n  loop,\n  disablePointerSelection,\n  vimBindings,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"command\"\n  data-label={label}\n  data-default-value={defaultValue}\n  data-default-search={defaultSearch}\n  data-should-filter={shouldFilter}\n  data-loop={loop}\n  data-disable-pointer-selection={disablePointerSelection}\n  data-vim-bindings={vimBindings}\n  class={cn(\n    \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/command\"\n  import { getParts } from \"@data-slot/core\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n\n  // Data Slot selection does not activate links. Preserve native navigation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.key !== \"Enter\" ||\n        event.defaultPrevented ||\n        event.isComposing ||\n        event.keyCode === 229\n      )\n        return\n      const input = event.target\n      if (\n        !(input instanceof HTMLInputElement) ||\n        input.dataset.slot !== \"command-input\"\n      )\n        return\n      const root = input.closest('[data-slot=\"command\"]')\n      if (!root) return\n      const item = getParts<HTMLAnchorElement>(root, \"command-item\").find(\n        (item) =>\n          item.hasAttribute(\"data-selected\") &&\n          item.hasAttribute(\"href\") &&\n          item.getAttribute(\"aria-disabled\") !== \"true\"\n      )\n      if (!item) return\n      event.preventDefault()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/command/command-dialog.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\ntype Props = ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  contentClass?: string\n  showCloseButton?: boolean\n}\n\nconst {\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  contentClass,\n  showCloseButton = false,\n  ...props\n} = Astro.props\n---\n\n<Dialog {...props}>\n  <DialogContent\n    class:list={[\n      \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n      \"[&_[data-slot=command]]:border-0\",\n      \"[&_[data-slot=command]]:bg-transparent\",\n      \"[&_[data-slot=command-input-wrapper]]:h-12\",\n      \"[&_[data-slot=command-input-wrapper]_svg]:size-5\",\n      \"[&_[data-slot=command-input]]:h-12\",\n      \"[&_[data-slot=command-item]]:px-2\",\n      \"[&_[data-slot=command-item]]:py-3\",\n      \"[&_[data-slot=command-item]_svg]:size-5\",\n      \"[&_[data-slot=command-group-heading]]:text-muted-foreground\",\n      \"[&_[data-slot=command-group-heading]]:px-2\",\n      \"[&_[data-slot=command-group-heading]]:font-medium\",\n      \"[&_[data-slot=command-group]]:px-2\",\n      \"[&_[data-slot=command-group]:not([hidden])_~[data-slot=command-group]]:pt-0\",\n      contentClass,\n    ]}\n    showCloseButton={showCloseButton}\n  >\n    <div class=\"sr-only\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogDescription>{description}</DialogDescription>\n    </div>\n    <slot />\n  </DialogContent>\n</Dialog>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\ntype Props = ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  contentClass?: string\n  showCloseButton?: boolean\n}\n\nconst {\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  contentClass,\n  showCloseButton = false,\n  ...props\n} = Astro.props\n---\n\n<Dialog {...props}>\n  <slot name=\"trigger\" />\n  <DialogContent\n    class:list={[\n      \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n      \"[&_[data-slot=command]]:border-0\",\n      \"[&_[data-slot=command]]:bg-transparent\",\n      \"[&_[data-slot=command-input-wrapper]]:h-12\",\n      \"[&_[data-slot=command-input-wrapper]_svg]:size-5\",\n      \"[&_[data-slot=command-input]]:h-12\",\n      \"[&_[data-slot=command-item]]:px-2\",\n      \"[&_[data-slot=command-item]]:py-3\",\n      \"[&_[data-slot=command-item]_svg]:size-5\",\n      \"[&_[data-slot=command-group-heading]]:text-muted-foreground\",\n      \"[&_[data-slot=command-group-heading]]:px-2\",\n      \"[&_[data-slot=command-group-heading]]:font-medium\",\n      \"[&_[data-slot=command-group]]:px-2\",\n      \"[&_[data-slot=command-group]:not([hidden])_~[data-slot=command-group]]:pt-0\",\n      contentClass,\n    ]}\n    showCloseButton={showCloseButton}\n  >\n    <div class=\"sr-only\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogDescription>{description}</DialogDescription>\n    </div>\n    <slot />\n  </DialogContent>\n</Dialog>\n",
       "type": "registry:ui"
     },
     {

package/public/r/contact-1.json

@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>\n        {title}\n      </SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">\n        {description}\n      </SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        contactItems.map((item) => (\n          <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}\n                  >{form.emailLabel}</FieldLabel\n                >\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}\n                >{form.messageLabel}</FieldLabel\n              >\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n              >{form.actionLabel}</Button\n            >\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>\n        {title}\n      </SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">\n        {description}\n      </SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        contactItems.map((item) => (\n          <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}\n                  >{form.emailLabel}</FieldLabel\n                >\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}\n                >{form.messageLabel}</FieldLabel\n              >\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n              >{form.actionLabel}</Button\n            >\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],

package/public/r/contact-2.json

@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\"\n  >\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}\n                    >{form.nameLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}\n                    >{form.emailLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}\n                  >{form.messageLabel}</FieldLabel\n                >\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n                >{form.actionLabel}</Button\n              >\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {\n        contactItems.map((item) => (\n          <div class=\"flex gap-4 rounded-xl border p-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\"\n  >\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}\n                    >{form.nameLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}\n                    >{form.emailLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}\n                  >{form.messageLabel}</FieldLabel\n                >\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n                >{form.actionLabel}</Button\n              >\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {\n        contactItems.map((item) => (\n          <div class=\"flex gap-4 rounded-xl border p-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],

package/public/r/contact-3.json

@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {\n          contactItems.map((item) => (\n            <div class=\"flex gap-4\">\n              {item.href ? (\n                <Button\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-label={item.title}\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              ) : (\n                <Button\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-label={item.title}\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              )}\n              <div class=\"flex flex-col gap-1\">\n                <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {item.description}\n                </p>\n              </div>\n            </div>\n          ))\n        }\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}\n                    >{form.nameLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}\n                    >{form.emailLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}\n                  >{form.messageLabel}</FieldLabel\n                >\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n                >{form.actionLabel}</Button\n              >\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {\n          contactItems.map((item) => (\n            <div class=\"flex gap-4\">\n              {item.href ? (\n                <Button\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-label={item.title}\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              ) : (\n                <Button\n                  as=\"span\"\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  class=\"text-primary shrink-0\"\n                  aria-hidden=\"true\"\n                >\n                  <Icon name={item.icon} />\n                </Button>\n              )}\n              <div class=\"flex flex-col gap-1\">\n                <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {item.description}\n                </p>\n              </div>\n            </div>\n          ))\n        }\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}\n                    >{form.nameLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}\n                    >{form.emailLabel}</FieldLabel\n                  >\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}\n                  >{form.messageLabel}</FieldLabel\n                >\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\"\n                >{form.actionLabel}</Button\n              >\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {

package/public/r/dialog.json

@@ -4,7 +4,7 @@
   "title": "Dialog",
   "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
   "dependencies": [
-    "@data-slot/dialog",
+    "@data-slot/dialog@^1.0.1",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/doc-1.json

@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n              <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <a\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </a>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n\n  {\n    (tocItems.length > 0 || callout) && (\n      <aside class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n        <div class=\"flex flex-col gap-6\">\n          {tocItems.length > 0 && (\n            <Toc aria-label={labels.toc}>\n              <TocTitle>{labels.toc}</TocTitle>\n              <TocMenu>\n                {tocItems.map((item) => (\n                  <TocMenuItem>\n                    <TocMenuLink href={item.href} depth={item.depth}>\n                      {item.label}\n                    </TocMenuLink>\n                  </TocMenuItem>\n                ))}\n              </TocMenu>\n            </Toc>\n          )}\n\n          {callout && (\n            <Card size=\"sm\">\n              <CardHeader>\n                <CardDescription>{callout.description}</CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button\n                  as=\"a\"\n                  href={callout.button.href}\n                  variant={callout.button.variant}\n                  size=\"sm\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {callout.button.label}\n                </Button>\n              </CardFooter>\n            </Card>\n          )}\n        </div>\n      </aside>\n    )\n  }\n</SectionContainer>\n\n<script is:inline>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  document.querySelectorAll(\"[data-slot='typography'] > pre\").forEach((pre) => {\n    if (pre.closest(\".docs-code-block\")) return\n    const wrapper = document.createElement(\"div\")\n    const button = document.createElement(\"button\")\n    wrapper.className = \"docs-code-block\"\n    button.type = \"button\"\n    button.className = \"docs-code-copy\"\n    button.ariaLabel = \"Copy code\"\n    button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n    pre.before(wrapper)\n    wrapper.append(pre, button)\n  })\n  document.addEventListener(\"click\", (event) => {\n    const button = event.target?.closest?.(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!button) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n    button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n    button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n    navigator.clipboard?.writeText(source ?? \"\")\n    setTimeout(() => {\n      button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n    }, 1200)\n  })\n</script>\n",
+      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n              <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n\n  {\n    (tocItems.length > 0 || callout) && (\n      <aside class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n        <div class=\"flex flex-col gap-6\">\n          {tocItems.length > 0 && (\n            <Toc aria-label={labels.toc}>\n              <TocTitle>{labels.toc}</TocTitle>\n              <TocMenu>\n                {tocItems.map((item) => (\n                  <TocMenuItem>\n                    <TocMenuLink href={item.href} depth={item.depth}>\n                      {item.label}\n                    </TocMenuLink>\n                  </TocMenuItem>\n                ))}\n              </TocMenu>\n            </Toc>\n          )}\n\n          {callout && (\n            <Card size=\"sm\">\n              <CardHeader>\n                <CardDescription>{callout.description}</CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button\n                  as=\"a\"\n                  href={callout.button.href}\n                  variant={callout.button.variant}\n                  size=\"sm\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {callout.button.label}\n                </Button>\n              </CardFooter>\n            </Card>\n          )}\n        </div>\n      </aside>\n    )\n  }\n</SectionContainer>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],