fulldev-ui 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Fulldev UI
 
+## 0.13.0
+
+### Minor Changes
+
+- [#197](https://github.com/fulldotdev/ui/pull/197) [`9ca89fb`](https://github.com/fulldotdev/ui/commit/9ca89fbb09bcf99fb380b9ddc6f1637759bd7a2d) Thanks [@silveltman](https://github.com/silveltman)! - Complete Data Slot component coverage with Drawer, Toast, Toggle Group and Resizable, and upgrade all Data Slot packages to 1.0.2. Add Attachment, Button Group, Pagination and Aspect Ratio as Astro components without their own client scripts.
+
+  Replace the Embla Carousel with Data Slot's native scrolling carousel. This is a breaking change: replace `opts` with `defaultIndex`, `orientation`, `drag` and `loop`; use `CarouselController` and `CarouselOptions` instead of Embla types; replace `carousel:init` and `carousel:select` with `carousel:change` and `carousel:set`. Carousel now displays one full-width slide at a time. Remove fractional slide widths and the old content/item spacing pattern. Examples and the reviews block use the new API.
+
+  Adopt shadcn Typeset for rendered prose while preserving the existing Typography component exports. Typography sizes now control the prose rhythm, with updated heading spacing, nested content styling and semantic tables. Keep docs-specific code controls out of installable Typography styles.
+
+  Improve Combobox trigger and clear focus styling, align Select popper placement and Slider thumb positioning with shadcn, and use a consistent 8px default Navigation Menu gap.
+
 ## 0.12.0
 
 ### Minor Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -50,24 +50,29 @@
   "dependencies": {
     "@astrojs/mdx": "^5.0.6",
     "@astrojs/sitemap": "^3.7.3",
-    "@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",
+    "@data-slot/accordion": "^1.0.2",
+    "@data-slot/alert-dialog": "^1.0.2",
+    "@data-slot/carousel": "^1.0.2",
+    "@data-slot/collapsible": "^1.0.2",
+    "@data-slot/combobox": "^1.0.2",
+    "@data-slot/command": "^1.0.2",
+    "@data-slot/core": "^1.0.2",
+    "@data-slot/dialog": "^1.0.2",
+    "@data-slot/drawer": "^1.0.2",
+    "@data-slot/dropdown-menu": "^1.0.2",
+    "@data-slot/hover-card": "^1.0.2",
+    "@data-slot/navigation-menu": "^1.0.2",
+    "@data-slot/popover": "^1.0.2",
+    "@data-slot/radio-group": "^1.0.2",
+    "@data-slot/resizable": "^1.0.2",
+    "@data-slot/select": "^1.0.2",
+    "@data-slot/slider": "^1.0.2",
+    "@data-slot/switch": "^1.0.2",
+    "@data-slot/tabs": "^1.0.2",
+    "@data-slot/toast": "^1.0.2",
+    "@data-slot/toggle": "^1.0.2",
+    "@data-slot/toggle-group": "^1.0.2",
+    "@data-slot/tooltip": "^1.0.2",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@lexingtonthemes/seo": "^0.2.0",
@@ -79,7 +84,6 @@
     "astro-robots-txt": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "embla-carousel": "^8.6.0",
     "lucide-static": "^1.22.0",
     "shadcn": "^4.12.0",
     "simple-icons": "^16.24.1",

package/public/r/accordion.json

@@ -4,7 +4,7 @@
   "title": "Accordion",
   "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
   "dependencies": [
-    "@data-slot/accordion@^1.0.1",
+    "@data-slot/accordion@^1.0.2",
     "@lucide/astro"
   ],
   "files": [

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@^1.0.1"
+    "@data-slot/alert-dialog@^1.0.2"
   ],
   "registryDependencies": [
     "@fulldev/button"

package/public/r/aspect-ratio.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "title": "Aspect Ratio",
+  "description": "Displays content within a desired ratio.",
+  "files": [
+    {
+      "path": "src/components/ui/aspect-ratio/aspect-ratio.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  ratio: number\n}\n\nconst { class: className, ratio, style, ...props } = Astro.props\n\nconst resolvedStyle =\n  typeof style === \"string\"\n    ? `--ratio: ${ratio}; ${style}`\n    : { \"--ratio\": ratio, ...(style ?? {}) }\n---\n\n<div\n  data-slot=\"aspect-ratio\"\n  style={resolvedStyle}\n  class={cn(\"relative aspect-(--ratio)\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/aspect-ratio/index.ts",
+      "content": "export { default as AspectRatio } from \"./aspect-ratio.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/aspect-ratio/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/attachment.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "attachment",
+  "title": "Attachment",
+  "description": "Displays a file or image attachment with media, metadata, state, and actions.",
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/attachment/attachment-action.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { Button, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst { as, variant = \"ghost\", size = \"icon-xs\", ...props } = Astro.props\n---\n\n<Button\n  as={as}\n  data-slot=\"attachment-action\"\n  variant={variant}\n  size={size}\n  {...props}\n>\n  <slot />\n</Button>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-actions.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-actions\"\n  class={cn(\n    \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-content\"\n  class={cn(\n    \"max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-description.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  data-slot=\"attachment-description\"\n  class={cn(\n    \"text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block max-w-full min-w-0 truncate text-xs\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-group.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-group\"\n  class={cn(\n    \"flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-media.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst attachmentMediaVariants = cva(\n  \"bg-muted text-foreground group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof attachmentMediaVariants>\n\nconst { class: className, variant = \"icon\", ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-media\"\n  data-variant={variant}\n  class={cn(attachmentMediaVariants({ variant }), className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-title.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  data-slot=\"attachment-title\"\n  class={cn(\n    \"block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-trigger.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }>\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\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=\"attachment-trigger\"\n  class={cn(\"absolute inset-0 z-10 outline-none\", className)}\n  {...attributes}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst attachmentVariants = cva(\n  \"group/attachment bg-card text-card-foreground focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2\",\n        sm: \"gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5\",\n        xs: \"gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\"\n  }\n\nconst {\n  class: className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"attachment\"\n  data-state={state}\n  data-size={size}\n  data-orientation={orientation}\n  class={cn(attachmentVariants({ size, orientation }), className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/index.ts",
+      "content": "export { default as Attachment } from \"./attachment.astro\"\nexport { default as AttachmentAction } from \"./attachment-action.astro\"\nexport { default as AttachmentActions } from \"./attachment-actions.astro\"\nexport { default as AttachmentContent } from \"./attachment-content.astro\"\nexport { default as AttachmentDescription } from \"./attachment-description.astro\"\nexport { default as AttachmentGroup } from \"./attachment-group.astro\"\nexport { default as AttachmentMedia } from \"./attachment-media.astro\"\nexport { default as AttachmentTitle } from \"./attachment-title.astro\"\nexport { default as AttachmentTrigger } from \"./attachment-trigger.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/attachment/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/button-group.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group",
+  "title": "Button Group",
+  "description": "Groups related controls with connected edges and consistent focus behavior.",
+  "registryDependencies": [
+    "@fulldev/separator"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/button-group/button-group-separator.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\"\n  decorative?: boolean\n}\n\nconst {\n  class: className,\n  orientation = \"vertical\",\n  decorative = true,\n  ...props\n} = Astro.props\n---\n\n<Separator\n  data-slot=\"button-group-separator\"\n  orientation={orientation}\n  decorative={decorative}\n  class={cn(\n    \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n    className\n  )}\n  {...props}\n/>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group-text.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props<Tag extends HTMLTag = \"div\"> = Polymorphic<{ as: Tag }>\n\nconst { as: Tag = \"div\", class: className, ...props } = Astro.props\n---\n\n<Tag\n  data-slot=\"button-group-text\"\n  class={cn(\n    \"bg-muted flex items-center gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group-variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nexport type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  buttonGroupVariants,\n  type ButtonGroupVariantProps,\n} from \"./button-group-variants\"\n\ntype Props<Tag extends HTMLTag = \"div\"> = Polymorphic<{ as: Tag }> &\n  ButtonGroupVariantProps\n\nconst {\n  as: Tag = \"div\",\n  class: className,\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n---\n\n<Tag\n  role=\"group\"\n  data-slot=\"button-group\"\n  data-orientation={orientation}\n  class={cn(buttonGroupVariants({ orientation }), className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/index.ts",
+      "content": "export { default as ButtonGroup } from \"./button-group.astro\"\nexport { default as ButtonGroupSeparator } from \"./button-group-separator.astro\"\nexport { default as ButtonGroupText } from \"./button-group-text.astro\"\nexport {\n  buttonGroupVariants,\n  type ButtonGroupVariantProps,\n} from \"./button-group-variants\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/button-group/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/carousel.json

@@ -2,9 +2,9 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "carousel",
   "title": "Carousel",
-  "description": "A carousel with motion and swipe built using Embla.",
+  "description": "An accessible carousel built on native scrolling with Data Slot.",
   "dependencies": [
-    "embla-carousel",
+    "@data-slot/carousel@^1.0.2",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -13,32 +13,32 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<div\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  type CarouselInstance = {\n    cleanup: () => void\n  }\n\n  type CarouselStore = Map<CarouselRoot, CarouselInstance>\n\n  declare global {\n    interface Window {\n      __fulldevCarouselInitialized?: boolean\n      __fulldevCarouselStore?: CarouselStore\n    }\n  }\n\n  if (!window.__fulldevCarouselInitialized) {\n    window.__fulldevCarouselInitialized = true\n    window.__fulldevCarouselStore ??= new Map<CarouselRoot, CarouselInstance>()\n\n    const store = window.__fulldevCarouselStore\n\n    const getDetails = (api: EmblaCarouselType) => ({\n      api,\n      canScrollPrev: api.canScrollPrev(),\n      canScrollNext: api.canScrollNext(),\n      selectedScrollSnap: api.selectedScrollSnap(),\n      scrollSnapList: api.scrollSnapList(),\n    })\n\n    const emit = (\n      root: CarouselRoot,\n      type: \"carousel:init\" | \"carousel:select\",\n      api: EmblaCarouselType\n    ) => {\n      root.dispatchEvent(\n        new CustomEvent(type, {\n          detail: getDetails(api),\n        })\n      )\n    }\n\n    const parseOptions = (root: CarouselRoot): EmblaOptionsType => {\n      const rawOptions = root.getAttribute(\"data-carousel-options\")\n\n      if (!rawOptions) {\n        return {}\n      }\n\n      try {\n        return JSON.parse(rawOptions) as EmblaOptionsType\n      } catch {\n        return {}\n      }\n    }\n\n    const syncButton = (button: Element | null, enabled: boolean) => {\n      if (!(button instanceof HTMLButtonElement)) {\n        return\n      }\n\n      if (button.dataset.manualDisabled === \"true\") {\n        button.disabled = true\n        return\n      }\n\n      button.disabled = !enabled\n    }\n\n    const cleanupDisconnectedCarousels = () => {\n      for (const [root, instance] of store.entries()) {\n        if (document.contains(root)) {\n          continue\n        }\n\n        instance.cleanup()\n        store.delete(root)\n      }\n    }\n\n    const initCarousel = (root: Element) => {\n      if (!(root instanceof HTMLElement) || store.has(root)) {\n        return\n      }\n\n      const carouselRoot = root as CarouselRoot\n      const viewport = carouselRoot.querySelector(\n        '[data-slot=\"carousel-content\"]'\n      )\n      const prevButton = carouselRoot.querySelector(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const nextButton = carouselRoot.querySelector(\n        '[data-slot=\"carousel-next\"]'\n      )\n\n      if (!(viewport instanceof HTMLElement)) {\n        return\n      }\n\n      const api = EmblaCarousel(viewport, parseOptions(carouselRoot))\n\n      const sync = () => {\n        const details = getDetails(api)\n\n        carouselRoot.dataset.canScrollPrev = details.canScrollPrev\n          ? \"true\"\n          : \"false\"\n        carouselRoot.dataset.canScrollNext = details.canScrollNext\n          ? \"true\"\n          : \"false\"\n        carouselRoot.dataset.selectedScrollSnap = String(\n          details.selectedScrollSnap\n        )\n\n        syncButton(prevButton, details.canScrollPrev)\n        syncButton(nextButton, details.canScrollNext)\n\n        emit(carouselRoot, \"carousel:select\", api)\n      }\n\n      const onPrevClick = () => {\n        api.scrollPrev()\n      }\n\n      const onNextClick = () => {\n        api.scrollNext()\n      }\n\n      const onKeyDown = (event: KeyboardEvent) => {\n        const isVertical = carouselRoot.dataset.orientation === \"vertical\"\n\n        if (!isVertical && event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          api.scrollPrev()\n        }\n\n        if (!isVertical && event.key === \"ArrowRight\") {\n          event.preventDefault()\n          api.scrollNext()\n        }\n\n        if (isVertical && event.key === \"ArrowUp\") {\n          event.preventDefault()\n          api.scrollPrev()\n        }\n\n        if (isVertical && event.key === \"ArrowDown\") {\n          event.preventDefault()\n          api.scrollNext()\n        }\n      }\n\n      if (prevButton instanceof HTMLElement) {\n        prevButton.addEventListener(\"click\", onPrevClick)\n      }\n\n      if (nextButton instanceof HTMLElement) {\n        nextButton.addEventListener(\"click\", onNextClick)\n      }\n\n      carouselRoot.addEventListener(\"keydown\", onKeyDown, true)\n\n      api.on(\"reInit\", sync)\n      api.on(\"select\", sync)\n\n      carouselRoot.__fulldevCarouselApi = api\n\n      sync()\n      requestAnimationFrame(() => emit(carouselRoot, \"carousel:init\", api))\n\n      store.set(carouselRoot, {\n        cleanup: () => {\n          api.off(\"reInit\", sync)\n          api.off(\"select\", sync)\n\n          if (prevButton instanceof HTMLElement) {\n            prevButton.removeEventListener(\"click\", onPrevClick)\n          }\n\n          if (nextButton instanceof HTMLElement) {\n            nextButton.removeEventListener(\"click\", onNextClick)\n          }\n\n          carouselRoot.removeEventListener(\"keydown\", onKeyDown, true)\n          delete carouselRoot.__fulldevCarouselApi\n          api.destroy()\n        },\n      })\n    }\n\n    const initCarousels = () => {\n      cleanupDisconnectedCarousels()\n\n      document\n        .querySelectorAll('[data-slot=\"carousel\"]')\n        .forEach((root) => initCarousel(root))\n    }\n\n    initCarousels()\n    document.addEventListener(\"astro:page-load\", initCarousels)\n  }\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultIndex?: number\n  orientation?: \"horizontal\" | \"vertical\"\n  drag?: boolean\n  loop?: boolean\n}\n\nconst {\n  class: className,\n  defaultIndex,\n  orientation = \"horizontal\",\n  drag,\n  loop,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel\"\n  data-default-index={defaultIndex}\n  data-orientation={orientation}\n  data-drag={drag}\n  data-loop={loop}\n  class={cn(\"group/carousel relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/carousel\"\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/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-content\"\n  class={cn(\n    \"no-scrollbar flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain\",\n    \"group-data-[dragging=true]/carousel:cursor-grabbing\",\n    \"group-data-[orientation=vertical]/carousel:snap-y group-data-[orientation=vertical]/carousel:flex-col group-data-[orientation=vertical]/carousel:overflow-x-hidden group-data-[orientation=vertical]/carousel:overflow-y-auto group-data-[orientation=vertical]/carousel:overscroll-y-contain\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full snap-start\",\n    \"group-data-[orientation=vertical]/carousel:min-h-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/index.ts",
-      "content": "export type {\n  EmblaCarouselType as CarouselApi,\n  EmblaOptionsType as CarouselOptions,\n  EmblaPluginType as CarouselPlugin,\n} from \"embla-carousel\"\n\nexport { default as Carousel } from \"./carousel.astro\"\nexport { default as CarouselContent } from \"./carousel-content.astro\"\nexport { default as CarouselItem } from \"./carousel-item.astro\"\nexport { default as CarouselPrevious } from \"./carousel-previous.astro\"\nexport { default as CarouselNext } from \"./carousel-next.astro\"\n",
+      "content": "export type { CarouselController, CarouselOptions } from \"@data-slot/carousel\"\n\nexport { default as Carousel } from \"./carousel.astro\"\nexport { default as CarouselContent } from \"./carousel-content.astro\"\nexport { default as CarouselItem } from \"./carousel-item.astro\"\nexport { default as CarouselPrevious } from \"./carousel-previous.astro\"\nexport { default as CarouselNext } from \"./carousel-next.astro\"\n",
       "type": "registry:ui"
     }
   ],

package/public/r/collapsible.json

@@ -4,7 +4,7 @@
   "title": "Collapsible",
   "description": "An interactive component which expands/collapses a panel.",
   "dependencies": [
-    "@data-slot/collapsible@^1.0.1"
+    "@data-slot/collapsible@^1.0.2"
   ],
   "files": [
     {

package/public/r/combobox.json

@@ -4,8 +4,8 @@
   "title": "Combobox",
   "description": "Autocomplete input with a list of suggestions.",
   "dependencies": [
-    "@data-slot/combobox@^1.0.1",
-    "@data-slot/core@^1.0.1",
+    "@data-slot/combobox@^1.0.2",
+    "@data-slot/core@^1.0.2",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/combobox/combobox-input.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupAddon from \"@/components/ui/input-group/input-group-addon.astro\"\nimport InputGroupInput from \"@/components/ui/input-group/input-group-input.astro\"\nimport InputGroup from \"@/components/ui/input-group/input-group.astro\"\n\nimport ComboboxTrigger from \"./combobox-trigger.astro\"\n\ntype Props = HTMLAttributes<\"input\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n}\n\nconst {\n  class: className,\n  type = \"text\",\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n} = Astro.props\n---\n\n<InputGroup class={cn(\"w-auto\", className)}>\n  <InputGroupInput\n    type={type}\n    data-slot=\"combobox-input\"\n    disabled={disabled}\n    {...props}\n  />\n  <InputGroupAddon align=\"inline-end\">\n    {\n      showTrigger && (\n        <ComboboxTrigger\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n          disabled={disabled}\n        />\n      )\n    }\n    {\n      showClear && (\n        <button\n          type=\"button\"\n          data-slot=\"combobox-clear\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          disabled={disabled}\n        >\n          <XIcon class=\"pointer-events-none\" />\n        </button>\n      )\n    }\n  </InputGroupAddon>\n  <slot />\n</InputGroup>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupAddon from \"@/components/ui/input-group/input-group-addon.astro\"\nimport InputGroupButton from \"@/components/ui/input-group/input-group-button.astro\"\nimport InputGroupInput from \"@/components/ui/input-group/input-group-input.astro\"\nimport InputGroup from \"@/components/ui/input-group/input-group.astro\"\n\nimport ComboboxTrigger from \"./combobox-trigger.astro\"\n\ntype Props = HTMLAttributes<\"input\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n}\n\nconst {\n  class: className,\n  type = \"text\",\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n} = Astro.props\n---\n\n<InputGroup\n  class={cn(\n    \"has-[[data-slot=combobox-input]:focus-visible]:border-ring has-[[data-slot=combobox-input]:focus-visible]:ring-ring/50 w-auto has-[[data-slot=combobox-input]:focus-visible]:ring-3\",\n    className\n  )}\n>\n  <InputGroupInput\n    type={type}\n    data-slot=\"combobox-input\"\n    disabled={disabled}\n    {...props}\n  />\n  <InputGroupAddon align=\"inline-end\">\n    {\n      showTrigger && (\n        <ComboboxTrigger\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n          disabled={disabled}\n        />\n      )\n    }\n    {\n      showClear && (\n        <InputGroupButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          data-slot=\"combobox-clear\"\n          disabled={disabled}\n        >\n          <XIcon class=\"pointer-events-none\" />\n        </InputGroupButton>\n      )\n    }\n  </InputGroupAddon>\n  <slot />\n</InputGroup>\n",
       "type": "registry:ui"
     },
     {
@@ -59,7 +59,7 @@
     },
     {
       "path": "src/components/ui/combobox/combobox-trigger.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  showIcon?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  showIcon = true,\n  ...props\n} = Astro.props\n---\n\n<button\n  type={type}\n  data-slot=\"combobox-trigger\"\n  class={cn(\n    \"[&_svg]:text-muted-foreground inline-flex size-6 shrink-0 items-center justify-center gap-2 rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {\n    showIcon && (\n      <ChevronDownIcon class=\"text-muted-foreground pointer-events-none size-4\" />\n    )\n  }\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupButton from \"@/components/ui/input-group/input-group-button.astro\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  showIcon?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  showIcon = true,\n  ...props\n} = Astro.props\n---\n\n<InputGroupButton\n  type={type ?? \"button\"}\n  variant=\"ghost\"\n  size=\"icon-xs\"\n  data-slot=\"combobox-trigger\"\n  class={cn(\"[&_svg]:text-muted-foreground\", className)}\n  {...props}\n>\n  <slot />\n  {\n    showIcon && (\n      <ChevronDownIcon class=\"text-muted-foreground pointer-events-none size-4\" />\n    )\n  }\n</InputGroupButton>\n",
       "type": "registry:ui"
     },
     {

package/public/r/command.json

@@ -4,9 +4,9 @@
   "title": "Command",
   "description": "Command menu for search and quick actions.",
   "dependencies": [
-    "@data-slot/command@^1.0.1",
+    "@data-slot/command@^1.0.2",
     "@lucide/astro",
-    "@data-slot/core@^1.0.1"
+    "@data-slot/core@^1.0.2"
   ],
   "registryDependencies": [
     "@fulldev/dialog"

package/public/r/components.json

@@ -7,11 +7,14 @@
     "@fulldev/accordion",
     "@fulldev/alert",
     "@fulldev/alert-dialog",
+    "@fulldev/aspect-ratio",
+    "@fulldev/attachment",
     "@fulldev/avatar",
     "@fulldev/badge",
     "@fulldev/banner",
     "@fulldev/breadcrumb",
     "@fulldev/button",
+    "@fulldev/button-group",
     "@fulldev/card",
     "@fulldev/carousel",
     "@fulldev/checkbox",
@@ -19,6 +22,7 @@
     "@fulldev/combobox",
     "@fulldev/command",
     "@fulldev/dialog",
+    "@fulldev/drawer",
     "@fulldev/dropdown-menu",
     "@fulldev/empty",
     "@fulldev/field",
@@ -36,10 +40,12 @@
     "@fulldev/marquee",
     "@fulldev/native-select",
     "@fulldev/navigation-menu",
+    "@fulldev/pagination",
     "@fulldev/popover",
     "@fulldev/price",
     "@fulldev/radio-group",
     "@fulldev/rating",
+    "@fulldev/resizable",
     "@fulldev/section",
     "@fulldev/select",
     "@fulldev/separator",
@@ -53,8 +59,10 @@
     "@fulldev/tabs",
     "@fulldev/textarea",
     "@fulldev/theme-toggle",
+    "@fulldev/toast",
     "@fulldev/toc",
     "@fulldev/toggle",
+    "@fulldev/toggle-group",
     "@fulldev/tooltip",
     "@fulldev/typography",
     "@fulldev/video"

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@^1.0.1",
+    "@data-slot/dialog@^1.0.2",
     "@lucide/astro"
   ],
   "registryDependencies": [

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  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",
+      "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<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\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        wrapper.dataset.notTypeset = \"\"\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"
     }
   ],