@inklu/docs 0.2.0

package/dist/index.mjs

@@ -0,0 +1,2368 @@
+"use client";
+
+// src/components/content/changelog-content.tsx
+import { motion, useReducedMotion } from "motion/react";
+
+// src/components/ui/badge.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { SmoothCorners } from "@lisse/react";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatChangelogDate(date) {
+  return new Date(date).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+
+// src/components/ui/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex h-4 items-center justify-center px-1.5 text-[10px] font-mono uppercase tracking-wide transition-all whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-muted-foreground hover:text-foreground",
+        outline: "border border-border text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SmoothCorners, { asChild: true, corners: { radius: 4, smoothing: 1 }, children: useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ variant }), className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  }) });
+}
+
+// src/lib/constants.ts
+var CHANGELOG = [
+  {
+    version: "1.1.0",
+    title: "The Components Update",
+    date: "2024-03-15",
+    summary: "Introduced a new suite of reusable components to accelerate your workflow.",
+    changes: [
+      {
+        kind: "new",
+        text: "Added generic button component with variants."
+      },
+      {
+        kind: "new",
+        text: "Added customizable dialog and modal components."
+      },
+      {
+        kind: "improved",
+        text: "Enhanced accessibility across all interactive elements."
+      }
+    ]
+  },
+  {
+    version: "1.0.1",
+    title: "Bug Fixes",
+    date: "2024-01-10",
+    summary: "Minor fixes and performance improvements.",
+    changes: [
+      {
+        kind: "fixed",
+        text: "Fixed hydration error on initial load."
+      },
+      {
+        kind: "improved",
+        text: "Optimized font loading for better Core Web Vitals."
+      }
+    ]
+  },
+  {
+    version: "1.0.0",
+    title: "Initial Release",
+    date: "2024-01-01",
+    summary: "First version of the project.",
+    changes: [
+      {
+        kind: "new",
+        text: "Added initial template architecture."
+      },
+      {
+        kind: "new",
+        text: "Established monochromatic Liquid Glass design tokens."
+      }
+    ]
+  }
+];
+
+// src/lib/motions.ts
+var EASE_OUT = [0.22, 1, 0.36, 1];
+var REVEAL_DURATION = 0.28;
+var HERO_STAGGER = 0.06;
+var heroChild = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: REVEAL_DURATION, ease: EASE_OUT }
+  }
+};
+var colReveal = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: REVEAL_DURATION, ease: EASE_OUT }
+  }
+};
+
+// src/components/content/changelog-content.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Col({ children }) {
+  const reduced = useReducedMotion() ?? false;
+  return /* @__PURE__ */ jsx2(
+    motion.div,
+    {
+      className: "mx-auto w-full",
+      initial: reduced ? false : "hidden",
+      whileInView: "show",
+      viewport: { once: true, margin: "0px 0px -64px 0px" },
+      variants: colReveal,
+      children
+    }
+  );
+}
+var KIND_LABEL = {
+  new: "New",
+  improved: "Improved",
+  fixed: "Fixed"
+};
+function KindTag({ kind }) {
+  return /* @__PURE__ */ jsx2(Badge, { variant: "secondary", className: "align-top mt-0.5", children: KIND_LABEL[kind] });
+}
+function ChangelogContent() {
+  return /* @__PURE__ */ jsx2("div", { className: "w-full", children: /* @__PURE__ */ jsx2("div", { className: "relative mx-auto w-full", children: /* @__PURE__ */ jsxs("main", { className: "typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full", children: [
+    /* @__PURE__ */ jsx2("section", { id: "changelog-header", className: "scroll-mt-24", children: /* @__PURE__ */ jsxs(Col, { children: [
+      /* @__PURE__ */ jsx2("h1", { className: "tracking-tight mb-2", children: "Changelog" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/60 mb-8 mt-0", children: "16 February, 2026" })
+    ] }) }),
+    CHANGELOG.map((entry) => /* @__PURE__ */ jsx2(
+      "section",
+      {
+        id: `v${entry.version}`,
+        className: "scroll-mt-24",
+        children: /* @__PURE__ */ jsxs(Col, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "not-typeset mt-16 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx2(
+              Badge,
+              {
+                variant: "secondary",
+                className: "text-foreground align-middle",
+                children: entry.version === "next" ? "Up next" : `v${entry.version}`
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: entry.date ? formatChangelogDate(entry.date) : "In progress" })
+          ] }),
+          /* @__PURE__ */ jsx2("h2", { children: entry.title }),
+          /* @__PURE__ */ jsx2("p", { children: entry.summary }),
+          /* @__PURE__ */ jsx2("div", { className: "not-typeset mt-4 overflow-hidden rounded-2xl bg-card", children: entry.changes.map(
+            (change, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex gap-3 px-4 py-3",
+                  i > 0 && "border-t border-border"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx2(KindTag, { kind: change.kind }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: change.text })
+                ]
+              },
+              change.text
+            )
+          ) })
+        ] })
+      },
+      entry.version
+    )),
+    /* @__PURE__ */ jsx2(Col, { children: /* @__PURE__ */ jsxs("p", { className: "mt-16", children: [
+      "Full commit history lives on",
+      " ",
+      /* @__PURE__ */ jsx2(
+        "a",
+        {
+          href: "https://github.com/your-username/your-repo",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "GitHub"
+        }
+      ),
+      "."
+    ] }) })
+  ] }) }) });
+}
+
+// src/components/content/code-block.tsx
+import * as React from "react";
+
+// src/components/shared/command-block.tsx
+import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/ui/button.tsx
+import { mergeProps as mergeProps2, useRender as useRender2 } from "@base-ui/react";
+import { SmoothCorners as SmoothCorners2 } from "@lisse/react";
+import { cva as cva2 } from "class-variance-authority";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "group/button inline-flex shrink-0 items-center justify-center border border-transparent font-medium whitespace-nowrap transition duration-[160ms] ease-out outline-none select-none focus-visible:ring-2 focus-visible:ring-white/20 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground border-transparent hover:bg-primary/90",
+        outline: "border-border text-foreground hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "text-foreground underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+        icon: "size-9 sm:size-8",
+        "icon-lg": "size-10 sm:size-9",
+        "icon-sm": "size-8 sm:size-7",
+        "icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size = "default",
+  render,
+  children,
+  loading = false,
+  disabled: disabledProp,
+  ...props
+}) {
+  const isDisabled = Boolean(loading || disabledProp);
+  const typeValue = render ? void 0 : "button";
+  const defaultProps = {
+    children: /* @__PURE__ */ jsxs2(Fragment, { children: [
+      children,
+      loading && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "pointer-events-none absolute",
+          "data-slot": "button-loading-indicator"
+        }
+      )
+    ] }),
+    className: cn(buttonVariants({ className, size, variant })),
+    "aria-disabled": loading || void 0,
+    "data-loading": loading ? "" : void 0,
+    "data-slot": "button",
+    disabled: isDisabled,
+    type: typeValue
+  };
+  let radius = 8;
+  if (size === "default") radius = 8;
+  else if (size === "sm") radius = 7;
+  else if (size === "xs") radius = 5;
+  else if (size === "lg") radius = 10;
+  else if (size === "xl") radius = 12;
+  else if (size === "icon") radius = 8;
+  else if (size === "icon-lg") radius = 10;
+  else if (size === "icon-sm") radius = 7;
+  else if (size === "icon-xl") radius = 12;
+  else if (size === "icon-xs") radius = 5;
+  return /* @__PURE__ */ jsx3(SmoothCorners2, { asChild: true, corners: { radius, smoothing: 1 }, children: useRender2({
+    defaultTagName: "button",
+    props: mergeProps2(defaultProps, props),
+    render
+  }) });
+}
+
+// src/components/ui/toast.tsx
+import { Toast } from "@base-ui/react/toast";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+  ReloadIcon
+} from "@radix-ui/react-icons";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TOAST_ICONS = {
+  error: CrossCircledIcon,
+  info: InfoCircledIcon,
+  loading: ReloadIcon,
+  success: CheckCircledIcon,
+  warning: ExclamationTriangleIcon
+};
+function getSwipeDirection(position) {
+  const verticalDirection = position.startsWith("top") ? "up" : "down";
+  if (position.includes("center")) {
+    return [verticalDirection];
+  }
+  if (position.includes("left")) {
+    return ["left", verticalDirection];
+  }
+  return ["right", verticalDirection];
+}
+function upsertReplayClassName(toast) {
+  const k = toast.updateKey ?? 0;
+  if (k <= 0) return void 0;
+  const isEven = k % 2 === 0;
+  if (toast.type === "error") {
+    return isEven ? "animate-toast-error-even" : "animate-toast-error-odd";
+  }
+  return isEven ? "animate-toast-success-even" : "animate-toast-success-odd";
+}
+function Toasts({
+  position,
+  portalProps
+}) {
+  const { toasts } = Toast.useToastManager();
+  const swipeDirection = getSwipeDirection(position);
+  return /* @__PURE__ */ jsx4(Toast.Portal, { "data-slot": "toast-portal", ...portalProps, children: /* @__PURE__ */ jsx4(
+    Toast.Viewport,
+    {
+      className: cn(
+        "fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]",
+        // Vertical positioning
+        "data-[position*=top]:top-(--toast-inset)",
+        "data-[position*=bottom]:bottom-(--toast-inset)",
+        // Horizontal positioning
+        "data-[position*=left]:left-(--toast-inset)",
+        "data-[position*=right]:right-(--toast-inset)",
+        "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"
+      ),
+      "data-position": position,
+      "data-slot": "toast-viewport",
+      children: toasts.map((toast) => {
+        const Icon = toast.type ? TOAST_ICONS[toast.type] : null;
+        const toastData = toast.data;
+        return /* @__PURE__ */ jsx4(
+          Toast.Root,
+          {
+            className: cn(
+              "absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover text-popover-foreground [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s]",
+              // Base positioning using data-position
+              "data-[position*=right]:right-0 data-[position*=right]:left-auto",
+              "data-[position*=left]:right-auto data-[position*=left]:left-0",
+              "data-[position*=center]:right-0 data-[position*=center]:left-0",
+              "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]",
+              "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]",
+              // Gap fill for hover
+              "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full",
+              "data-[position*=top]:after:top-full",
+              "data-[position*=bottom]:after:bottom-full",
+              // Define some variables
+              "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]",
+              // Define offset-y variable
+              "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]",
+              "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]",
+              // Default state transform
+              "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+              "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+              // Limited state
+              "data-limited:opacity-0",
+              // Expanded state
+              "data-expanded:h-(--toast-height)",
+              "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]",
+              // Starting and ending animations
+              "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+              "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
+              "data-ending-style:opacity-0",
+              // Ending animations (direction-aware)
+              "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+              "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+              "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+              "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+              "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+              // Ending animations (expanded)
+              "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+              "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+              "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+              "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+              upsertReplayClassName(toast)
+            ),
+            ...toastData?.rootProps,
+            "data-position": position,
+            swipeDirection,
+            toast,
+            children: /* @__PURE__ */ jsxs3(Toast.Content, { className: "pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
+                Icon && /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                    "data-slot": "toast-icon",
+                    children: /* @__PURE__ */ jsx4(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx4(
+                    Toast.Title,
+                    {
+                      className: "font-medium",
+                      "data-slot": "toast-title"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    Toast.Description,
+                    {
+                      className: "text-muted-foreground",
+                      "data-slot": "toast-description"
+                    }
+                  )
+                ] })
+              ] }),
+              toast.actionProps && /* @__PURE__ */ jsx4(
+                Toast.Action,
+                {
+                  className: buttonVariants({ size: "xs" }),
+                  "data-slot": "toast-action",
+                  children: toast.actionProps.children
+                }
+              )
+            ] })
+          },
+          toast.id
+        );
+      })
+    }
+  ) });
+}
+function AnchoredToasts({
+  portalProps
+}) {
+  const { toasts } = Toast.useToastManager();
+  return /* @__PURE__ */ jsx4(Toast.Portal, { "data-slot": "toast-portal-anchored", ...portalProps, children: /* @__PURE__ */ jsx4(
+    Toast.Viewport,
+    {
+      className: "outline-none",
+      "data-slot": "toast-viewport-anchored",
+      children: toasts.map((toast) => {
+        const Icon = toast.type ? TOAST_ICONS[toast.type] : null;
+        const toastData = toast.data;
+        const tooltipStyle = toastData?.tooltipStyle ?? false;
+        const positionerProps = toast.positionerProps;
+        if (!positionerProps?.anchor) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx4(
+          Toast.Positioner,
+          {
+            className: "z-50 max-w-[min(--spacing(64),var(--available-width))]",
+            "data-slot": "toast-positioner",
+            sideOffset: positionerProps.sideOffset ?? 4,
+            toast,
+            children: /* @__PURE__ */ jsx4(
+              Toast.Root,
+              {
+                className: cn(
+                  "relative text-balance border bg-popover text-popover-foreground text-xs transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
+                  tooltipStyle ? "rounded-md" : "rounded-lg",
+                  upsertReplayClassName(toast)
+                ),
+                ...toastData?.rootProps,
+                "data-slot": "toast-popup",
+                toast,
+                children: tooltipStyle ? /* @__PURE__ */ jsx4(Toast.Content, { className: "pointer-events-auto px-2 py-1", children: /* @__PURE__ */ jsx4(Toast.Title, { "data-slot": "toast-title" }) }) : /* @__PURE__ */ jsxs3(Toast.Content, { className: "pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
+                    Icon && /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                        "data-slot": "toast-icon",
+                        children: /* @__PURE__ */ jsx4(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0.5", children: [
+                      /* @__PURE__ */ jsx4(
+                        Toast.Title,
+                        {
+                          className: "font-medium",
+                          "data-slot": "toast-title"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        Toast.Description,
+                        {
+                          className: "text-muted-foreground",
+                          "data-slot": "toast-description"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  toast.actionProps && /* @__PURE__ */ jsx4(
+                    Toast.Action,
+                    {
+                      className: buttonVariants({ size: "xs" }),
+                      "data-slot": "toast-action",
+                      children: toast.actionProps.children
+                    }
+                  )
+                ] })
+              }
+            )
+          },
+          toast.id
+        );
+      })
+    }
+  ) });
+}
+var toastManager = Toast.createToastManager();
+var anchoredToastManager = Toast.createToastManager();
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  portalProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(Toast.Provider, { toastManager, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx4(Toasts, { portalProps, position })
+  ] });
+}
+function AnchoredToastProvider({
+  children,
+  portalProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(Toast.Provider, { toastManager: anchoredToastManager, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx4(AnchoredToasts, { portalProps })
+  ] });
+}
+
+// src/hooks/use-copy-to-clipboard.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCopyToClipboard(options = {}) {
+  const { timeout = 2e3, onCopy } = options;
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const copyToClipboard = useCallback(
+    async (value) => {
+      if (!value || typeof window === "undefined" || !navigator.clipboard) {
+        return false;
+      }
+      try {
+        if (timeoutRef.current) {
+          window.clearTimeout(timeoutRef.current);
+        }
+        await navigator.clipboard.writeText(value);
+        setIsCopied(true);
+        onCopy?.();
+        if (timeout > 0) {
+          timeoutRef.current = window.setTimeout(() => {
+            setIsCopied(false);
+          }, timeout);
+        }
+        return true;
+      } catch (error) {
+        console.error("Failed to copy to clipboard", error);
+        return false;
+      }
+    },
+    [timeout, onCopy]
+  );
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    copyToClipboard,
+    isCopied
+  };
+}
+
+// src/lib/utils/audio.ts
+function playBeep(frequency, duration, type = "sine") {
+  if (typeof window === "undefined" || // biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
+  !window.AudioContext && !window.webkitAudioContext)
+    return;
+  try {
+    const AudioContext = (
+      // biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
+      window.AudioContext || window.webkitAudioContext
+    );
+    const ctx = new AudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = type;
+    osc.frequency.setValueAtTime(frequency, ctx.currentTime);
+    gain.gain.setValueAtTime(0.1, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(1e-3, ctx.currentTime + duration);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start();
+    osc.stop(ctx.currentTime + duration);
+  } catch (_e) {
+  }
+}
+function tap() {
+  playBeep(400, 0.1);
+}
+function turn(direction) {
+  if (direction === "forward") {
+    playBeep(600, 0.1);
+  } else {
+    playBeep(300, 0.1);
+  }
+}
+function copy() {
+  playBeep(800, 0.15, "triangle");
+}
+function deny() {
+  playBeep(150, 0.2, "sawtooth");
+}
+
+// src/components/motion-primitives/text-morph.tsx
+import {
+  AnimatePresence,
+  motion as motion2
+} from "motion/react";
+import { useId, useMemo } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TextMorph({
+  children,
+  as: Component = "p",
+  className,
+  style,
+  variants,
+  transition
+}) {
+  const uniqueId = useId();
+  const characters = useMemo(() => {
+    const charCounts = {};
+    return children.split("").map((char) => {
+      const lowerChar = char.toLowerCase();
+      charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
+      return {
+        id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
+        label: char === " " ? "\xA0" : char
+      };
+    });
+  }, [children, uniqueId]);
+  const defaultVariants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+  const defaultTransition = {
+    type: "spring",
+    bounce: 0,
+    duration: 0.3
+  };
+  return /* @__PURE__ */ jsx5(Component, { className: cn(className), "aria-label": children, style, children: /* @__PURE__ */ jsx5(AnimatePresence, { mode: "popLayout", initial: false, children: characters.map((character) => /* @__PURE__ */ jsx5(
+    motion2.span,
+    {
+      layoutId: character.id,
+      className: "inline-block",
+      "aria-hidden": "true",
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: variants || defaultVariants,
+      transition: transition || defaultTransition,
+      children: character.label
+    },
+    character.id
+  )) }) });
+}
+
+// src/components/shared/command-block.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SLIDE_SPRING = { type: "spring", stiffness: 520, damping: 34 };
+var MORPH_EASE = { duration: 0.16, ease: "easeOut" };
+function CopyMorphIcon({ copied }) {
+  const reduced = useReducedMotion2() ?? false;
+  const t = reduced ? { duration: 0 } : MORPH_EASE;
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "relative grid size-3.5 place-items-center",
+      children: /* @__PURE__ */ jsx6(AnimatePresence2, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ jsx6(
+        motion3.svg,
+        {
+          "aria-hidden": "true",
+          width: "15",
+          height: "15",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          className: "absolute text-foreground",
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: t,
+          children: /* @__PURE__ */ jsx6(
+            motion3.path,
+            {
+              d: "M1.83398 10.0625L6.00065 13.5L14.1673 2.5",
+              stroke: "currentColor",
+              strokeWidth: "1.25",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              initial: { pathLength: reduced ? 1 : 0 },
+              animate: { pathLength: 1 },
+              transition: reduced ? { duration: 0 } : { duration: 0.18, ease: "easeOut" }
+            }
+          )
+        },
+        "check"
+      ) : /* @__PURE__ */ jsx6(
+        motion3.svg,
+        {
+          "aria-hidden": "true",
+          width: "15",
+          height: "15",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          className: "absolute",
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: t,
+          children: /* @__PURE__ */ jsx6(
+            "path",
+            {
+              d: "M10.1667 3.16634H12.8334V14.1663H3.16675V3.16634H5.83341M5.83341 1.83301H10.1667V4.83301H5.83341V1.83301Z",
+              stroke: "currentColor",
+              strokeWidth: "1.25",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        },
+        "copy"
+      ) })
+    }
+  );
+}
+function CommandBlock({
+  items
+}) {
+  const [active, setActive] = useState2(0);
+  const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 2e3 });
+  const reduced = useReducedMotion2() ?? false;
+  const cur = items[active];
+  const copyButtonRef = useRef2(null);
+  const handleCopy = async () => {
+    const success = await copyToClipboard(cur.command);
+    if (success) {
+      tap();
+      anchoredToastManager.add({
+        title: "Copied!",
+        positionerProps: {
+          anchor: copyButtonRef.current,
+          sideOffset: 6
+        },
+        data: {
+          tooltipStyle: true
+        },
+        timeout: 2e3
+      });
+    } else {
+      deny();
+      anchoredToastManager.add({
+        title: "Failed to copy",
+        positionerProps: {
+          anchor: copyButtonRef.current,
+          sideOffset: 6
+        },
+        data: {
+          tooltipStyle: true
+        },
+        timeout: 2e3
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "not-typeset mt-6 rounded-2xl border-0 bg-code overflow-hidden", children: [
+    items.length > 1 && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-0.5 px-3 pb-1.5 pt-3 justify-between", children: [
+      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-0.5 ", children: items.map((it, i) => {
+        const isActive = i === active;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActive(i),
+            className: cn(
+              "relative cursor-pointer rounded-md px-1.5 py-0.5 font-mono outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+              isActive ? "text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+            ),
+            children: [
+              isActive && /* @__PURE__ */ jsx6(
+                motion3.span,
+                {
+                  "aria-hidden": "true",
+                  layoutId: "pkg-tab-active",
+                  transition: reduced ? { duration: 0 } : SLIDE_SPRING,
+                  className: "absolute inset-0 rounded-md bg-accent"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { className: "relative", children: it.id })
+            ]
+          },
+          it.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          ref: copyButtonRef,
+          variant: "ghost",
+          size: "icon",
+          onClick: handleCopy,
+          className: "ml-auto text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring",
+          title: "Copy to clipboard",
+          "aria-label": "Copy install command",
+          children: /* @__PURE__ */ jsx6(CopyMorphIcon, { copied: isCopied })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx6("div", { className: "flex-1 overflow-x-auto", children: /* @__PURE__ */ jsx6("pre", { className: "flex items-center overflow-x-auto px-5 py-4 font-mono text-foreground", children: /* @__PURE__ */ jsx6("code", { children: /* @__PURE__ */ jsx6(TextMorph, { children: cur.command }) }) }) }),
+      items.length === 1 && /* @__PURE__ */ jsx6(
+        Button,
+        {
+          ref: copyButtonRef,
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleCopy,
+          className: "mr-2 text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring",
+          title: "Copy to clipboard",
+          "aria-label": "Copy install command",
+          children: /* @__PURE__ */ jsx6(CopyMorphIcon, { copied: isCopied })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/content/code-block.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function CodeBlock({ html, code, className }) {
+  const buttonRef = React.useRef(null);
+  const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1800 });
+  async function handleCopy() {
+    const success = await copyToClipboard(code);
+    if (success) {
+      copy();
+      anchoredToastManager.add({
+        title: "Copied!",
+        positionerProps: {
+          anchor: buttonRef.current,
+          sideOffset: 6
+        },
+        data: {
+          tooltipStyle: true
+        },
+        timeout: 2e3
+      });
+    } else {
+      anchoredToastManager.add({
+        title: "Failed to copy",
+        positionerProps: {
+          anchor: buttonRef.current,
+          sideOffset: 6
+        },
+        data: {
+          tooltipStyle: true
+        },
+        timeout: 2e3
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "group relative mt-6 overflow-hidden rounded-xl not-typeset",
+        "bg-code",
+        "transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            ref: buttonRef,
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: handleCopy,
+            className: cn(
+              "absolute right-3 top-3 z-20 rounded-lg",
+              "bg-transparent",
+              "text-muted-foreground",
+              "opacity-0",
+              "translate-y-1",
+              "transition-all duration-200",
+              "group-hover:translate-y-0",
+              "group-hover:opacity-100",
+              "hover:bg-code-foreground/10",
+              "hover:text-code-foreground",
+              "focus-visible:translate-y-0",
+              "focus-visible:opacity-100"
+            ),
+            children: /* @__PURE__ */ jsx7(CopyMorphIcon, { copied: isCopied })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: cn(
+              "[&_pre]:m-0",
+              "[&_pre]:overflow-x-auto",
+              "[&_pre]:bg-transparent!",
+              "[&_pre]:px-5",
+              "[&_pre]:py-4",
+              "[&_pre]:font-mono",
+              "[&_pre]:leading-relaxed",
+              "[&_code]:bg-transparent!",
+              "[&_code]:p-0",
+              "[&_code]:font-inherit",
+              "[&_.line]:min-h-6",
+              "[&_pre::-webkit-scrollbar]:h-2",
+              "[&_pre::-webkit-scrollbar-track]:bg-transparent",
+              "[&_pre::-webkit-scrollbar-thumb]:rounded-full",
+              "[&_pre::-webkit-scrollbar-thumb]:bg-code-foreground/10",
+              "[&_pre::-webkit-scrollbar-thumb:hover]:bg-code-foreground/20"
+            ),
+            dangerouslySetInnerHTML: {
+              __html: html
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/content/docs-content.tsx
+import { motion as motion5, useReducedMotion as useReducedMotion3 } from "motion/react";
+
+// src/components/shared/scroll-fade.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ScrollFade() {
+  const [visible, setVisible] = useState3(false);
+  useEffect2(() => {
+    const handleScroll = () => setVisible(window.scrollY > 50);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: `pointer-events-none fixed inset-x-0 top-0 z-(--z-scroll-fade) h-20 bg-gradient-to-b from-background to-transparent transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`
+    }
+  );
+}
+
+// src/components/motion-primitives/text-effect.tsx
+import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
+import React2 from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultStaggerTimes = {
+  char: 0.03,
+  word: 0.05,
+  line: 0.1
+};
+var defaultContainerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05
+    }
+  },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 }
+  }
+};
+var defaultItemVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1
+  },
+  exit: { opacity: 0 }
+};
+var presetVariants = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: "blur(12px)" },
+      visible: { opacity: 1, filter: "blur(0px)" },
+      exit: { opacity: 0, filter: "blur(12px)" }
+    }
+  },
+  "fade-in-blur": {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 8, filter: "blur(12px)" },
+      visible: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: { opacity: 0, y: 8, filter: "blur(12px)" }
+    }
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0.95 },
+      visible: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 }
+    }
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+      exit: { opacity: 0 }
+    }
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 8 },
+      visible: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 8 }
+    }
+  }
+};
+var AnimationComponent = React2.memo(({ segment, variants, per, segmentWrapperClassName }) => {
+  const content = per === "line" ? /* @__PURE__ */ jsx9(motion4.span, { variants, className: "block", children: segment }) : per === "word" ? /* @__PURE__ */ jsx9(
+    motion4.span,
+    {
+      "aria-hidden": "true",
+      variants,
+      className: "inline-block whitespace-pre",
+      children: segment
+    }
+  ) : /* @__PURE__ */ jsx9(motion4.span, { className: "inline-block whitespace-pre", children: segment.split("").map((char, charIndex) => /* @__PURE__ */ jsx9(
+    motion4.span,
+    {
+      "aria-hidden": "true",
+      variants,
+      className: "inline-block whitespace-pre",
+      children: char
+    },
+    `char-${charIndex}`
+  )) });
+  if (!segmentWrapperClassName) {
+    return content;
+  }
+  const defaultWrapperClassName = per === "line" ? "block" : "inline-block";
+  return /* @__PURE__ */ jsx9("span", { className: cn(defaultWrapperClassName, segmentWrapperClassName), children: content });
+});
+AnimationComponent.displayName = "AnimationComponent";
+var splitText = (text, per) => {
+  if (per === "line") return text.split("\n");
+  return text.split(/(\s+)/);
+};
+var hasTransition = (variant) => {
+  if (!variant) return false;
+  return typeof variant === "object" && "transition" in variant;
+};
+var createVariantsWithTransition = (baseVariants, transition) => {
+  if (!transition) return baseVariants;
+  const { exit: _, ...mainTransition } = transition;
+  return {
+    ...baseVariants,
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...hasTransition(baseVariants.visible) ? baseVariants.visible.transition : {},
+        ...mainTransition
+      }
+    },
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...hasTransition(baseVariants.exit) ? baseVariants.exit.transition : {},
+        ...mainTransition,
+        staggerDirection: -1
+      }
+    }
+  };
+};
+function TextEffect({
+  children,
+  per = "word",
+  as = "p",
+  variants,
+  className,
+  preset = "fade",
+  delay = 0,
+  speedReveal = 1,
+  speedSegment = 1,
+  trigger = true,
+  onAnimationComplete,
+  onAnimationStart,
+  segmentWrapperClassName,
+  containerTransition,
+  segmentTransition,
+  style
+}) {
+  const segments = splitText(children, per);
+  const MotionTag = motion4[as];
+  const baseVariants = preset ? presetVariants[preset] : { container: defaultContainerVariants, item: defaultItemVariants };
+  const stagger = defaultStaggerTimes[per] / speedReveal;
+  const baseDuration = 0.3 / speedSegment;
+  const customStagger = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.staggerChildren : void 0;
+  const customDelay = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.delayChildren : void 0;
+  const computedVariants = {
+    container: createVariantsWithTransition(
+      variants?.container || baseVariants.container,
+      {
+        staggerChildren: customStagger ?? stagger,
+        delayChildren: customDelay ?? delay,
+        ...containerTransition,
+        exit: {
+          staggerChildren: customStagger ?? stagger,
+          staggerDirection: -1
+        }
+      }
+    ),
+    item: createVariantsWithTransition(variants?.item || baseVariants.item, {
+      duration: baseDuration,
+      ...segmentTransition
+    })
+  };
+  return /* @__PURE__ */ jsx9(AnimatePresence3, { mode: "popLayout", children: trigger && /* @__PURE__ */ jsxs6(
+    MotionTag,
+    {
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      variants: computedVariants.container,
+      className,
+      onAnimationComplete,
+      onAnimationStart,
+      style,
+      children: [
+        per !== "line" ? /* @__PURE__ */ jsx9("span", { className: "sr-only", children }) : null,
+        segments.map((segment, index) => /* @__PURE__ */ jsx9(
+          AnimationComponent,
+          {
+            segment,
+            variants: computedVariants.item,
+            per,
+            segmentWrapperClassName
+          },
+          `${per}-${index}-${segment}`
+        ))
+      ]
+    }
+  ) });
+}
+
+// src/components/content/docs-content.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function DocsCol({ children }) {
+  const reduced = useReducedMotion3() ?? false;
+  return /* @__PURE__ */ jsx10(
+    motion5.div,
+    {
+      className: "mx-auto w-full",
+      initial: reduced ? false : "hidden",
+      whileInView: "show",
+      viewport: { once: true, margin: "0px 0px -64px 0px" },
+      variants: colReveal,
+      children
+    }
+  );
+}
+function DocsFrame({ children }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "relative min-h-screen overflow-x-clip pb-24", children: [
+    /* @__PURE__ */ jsx10(ScrollFade, {}),
+    /* @__PURE__ */ jsx10("style", { children: `.docs-code .shiki{margin:0;padding:16px 18px;overflow-x:auto;line-height:1.65;background:transparent !important;font-size:var(--typeset-size)}.docs-code .shiki code{background:transparent;padding:0}` }),
+    /* @__PURE__ */ jsx10("div", { className: "w-full", children: /* @__PURE__ */ jsx10("div", { className: "relative mx-auto w-full", children: /* @__PURE__ */ jsx10("main", { className: "typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full", children }) }) })
+  ] });
+}
+function DocsHeader({
+  title,
+  date,
+  children
+}) {
+  return /* @__PURE__ */ jsx10("section", { id: "docs-header", className: "scroll-mt-24", children: /* @__PURE__ */ jsxs7(DocsCol, { children: [
+    /* @__PURE__ */ jsx10("h1", { className: "tracking-tight mb-2", children: /* @__PURE__ */ jsx10(TextEffect, { preset: "fade-in-blur", per: "word", children: title }) }),
+    /* @__PURE__ */ jsx10("p", { className: "text-muted-foreground/60 mb-8 mt-0", children: date }),
+    children
+  ] }) });
+}
+function DocsOverview({ children }) {
+  return /* @__PURE__ */ jsx10("section", { id: "overview", className: "scroll-mt-24", children: /* @__PURE__ */ jsx10(DocsCol, { children }) });
+}
+function DocsSection({
+  id,
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsx10("section", { id, className: "scroll-mt-24 mt-12", children: /* @__PURE__ */ jsxs7(DocsCol, { children: [
+    title && /* @__PURE__ */ jsx10("h2", { children: title }),
+    children
+  ] }) });
+}
+function DocsInstallation({
+  install
+}) {
+  return /* @__PURE__ */ jsxs7(DocsSection, { id: "installation", title: "Installation", children: [
+    /* @__PURE__ */ jsx10("p", { children: "Install the package using your preferred package manager:" }),
+    /* @__PURE__ */ jsx10(CommandBlock, { items: install })
+  ] });
+}
+function DocsCode({ code, html }) {
+  return /* @__PURE__ */ jsx10(CodeBlock, { code, html });
+}
+
+// src/components/layout/docs-layout.tsx
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
+import { motion as motion7, useMotionValueEvent, useScroll } from "motion/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React3 from "react";
+
+// src/components/motion-primitives/sliding-number.tsx
+import {
+  motion as motion6,
+  motionValue,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { useEffect as useEffect3, useId as useId2 } from "react";
+import useMeasure from "react-use-measure";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var TRANSITION = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.3
+};
+function Digit({ value, place }) {
+  const valueRoundedToPlace = Math.floor(value / place) % 10;
+  const initial = motionValue(valueRoundedToPlace);
+  const animatedValue = useSpring(initial, TRANSITION);
+  useEffect3(() => {
+    animatedValue.set(valueRoundedToPlace);
+  }, [animatedValue, valueRoundedToPlace]);
+  return /* @__PURE__ */ jsxs8("div", { className: "relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums", children: [
+    /* @__PURE__ */ jsx11("div", { className: "invisible", children: "0" }),
+    Array.from({ length: 10 }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: order is static
+      /* @__PURE__ */ jsx11(SlidingDigitNumber, { mv: animatedValue, number: i }, `digit-${i}`)
+    ))
+  ] });
+}
+function SlidingDigitNumber({
+  mv,
+  number
+}) {
+  const uniqueId = useId2();
+  const [ref, bounds] = useMeasure();
+  const y = useTransform(mv, (latest) => {
+    if (!bounds.height) return 0;
+    const placeValue = latest % 10;
+    const offset = (10 + number - placeValue) % 10;
+    let memo = offset * bounds.height;
+    if (offset > 5) {
+      memo -= 10 * bounds.height;
+    }
+    return memo;
+  });
+  if (!bounds.height) {
+    return /* @__PURE__ */ jsx11("span", { ref, className: "invisible absolute", children: number });
+  }
+  return /* @__PURE__ */ jsx11(
+    motion6.span,
+    {
+      style: { y },
+      layoutId: `${uniqueId}-${number}`,
+      className: "absolute inset-0 flex items-center justify-center",
+      transition: TRANSITION,
+      ref,
+      children: number
+    }
+  );
+}
+function SlidingNumber({
+  value,
+  padStart = false,
+  decimalSeparator = "."
+}) {
+  const absValue = Math.abs(value);
+  const [integerPart, decimalPart] = absValue.toString().split(".");
+  const integerValue = parseInt(integerPart, 10);
+  const paddedInteger = padStart && integerValue < 10 ? `0${integerPart}` : integerPart;
+  const integerDigits = paddedInteger.split("");
+  const integerPlaces = integerDigits.map(
+    (_, i) => 10 ** (integerDigits.length - i - 1)
+  );
+  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center", children: [
+    value < 0 && "-",
+    integerDigits.map((_, index) => /* @__PURE__ */ jsx11(
+      Digit,
+      {
+        value: integerValue,
+        place: integerPlaces[index]
+      },
+      `pos-${integerPlaces[index]}`
+    )),
+    decimalPart && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx11("span", { children: decimalSeparator }),
+      decimalPart.split("").map((_, index) => {
+        const place = 10 ** (decimalPart.length - index - 1);
+        return /* @__PURE__ */ jsx11(
+          Digit,
+          {
+            value: parseInt(decimalPart, 10),
+            place
+          },
+          `decimal-${place}`
+        );
+      })
+    ] })
+  ] });
+}
+
+// src/components/layout/docs-layout.tsx
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function DocsLayout({
+  children,
+  links,
+  indexUrl = "/",
+  indexLabel = "Index",
+  header
+}) {
+  const pathname = usePathname();
+  const [activeHash, setActiveHash] = React3.useState("");
+  const { scrollYProgress } = useScroll();
+  const [progress, setProgress] = React3.useState(0);
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    setProgress(Math.round(latest * 100));
+  });
+  React3.useEffect(() => {
+    const currentPathLinks = links.flatMap(
+      (g) => g.items.filter((i) => i.isAnchor && i.url.startsWith(pathname))
+    );
+    const sections = currentPathLinks.map((i) => i.url.split("#")[1]);
+    if (!sections.length) {
+      setActiveHash("");
+      return;
+    }
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px",
+      // Trigger when the section occupies the main focal area
+      threshold: 0
+    };
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setActiveHash(`#${entry.target.id}`);
+        }
+      }
+    }, observerOptions);
+    for (const id of sections) {
+      if (id) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      }
+    }
+    if (typeof window !== "undefined" && window.location.hash) {
+      setActiveHash(window.location.hash);
+    } else {
+      setActiveHash(`#${sections[0]}`);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [links, pathname]);
+  const handleAnchorClick = (e, url) => {
+    if (!url.includes("#")) return;
+    const hash = url.split("#")[1];
+    const element = document.getElementById(hash);
+    if (element && url.startsWith(pathname)) {
+      e.preventDefault();
+      element.scrollIntoView({ behavior: "smooth" });
+      window.history.pushState(null, "", `#${hash}`);
+      setActiveHash(`#${hash}`);
+    }
+  };
+  const isLinkActive = (url, isAnchor) => {
+    if (isAnchor) {
+      if (!url.startsWith(pathname)) return false;
+      const hash = url.split("#")[1];
+      if (activeHash) {
+        return activeHash === `#${hash}`;
+      }
+      return false;
+    }
+    return pathname === url;
+  };
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(ScrollFade, {}),
+    header,
+    /* @__PURE__ */ jsxs9("div", { className: "mx-auto w-full max-w-(--layout-max-width) px-6 py-12 md:py-24 flex flex-col md:flex-row gap-10 md:gap-16", children: [
+      /* @__PURE__ */ jsxs9("aside", { className: "w-full md:w-48 shrink-0 md:sticky md:top-24 md:self-start flex flex-col gap-6 md:gap-8", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs9(
+            Link,
+            {
+              href: indexUrl,
+              className: "text-sm text-muted-foreground hover:text-foreground flex items-center gap-1.5 transition-opacity duration-200 select-none opacity-60 hover:opacity-100",
+              children: [
+                /* @__PURE__ */ jsx12(ArrowLeftIcon, { className: "size-3.5" }),
+                indexLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9("div", { className: "text-xs font-mono text-muted-foreground opacity-50 flex items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx12(SlidingNumber, { value: progress }),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx12("div", { className: "flex flex-row flex-wrap gap-x-6 gap-y-2 md:flex-col md:gap-y-4", children: links.map((group) => /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-1.5 md:gap-2", children: /* @__PURE__ */ jsx12("nav", { className: "flex flex-row flex-wrap gap-x-1 gap-y-1 md:flex-col md:gap-y-1", children: group.items.map((link) => {
+          const active = isLinkActive(link.url, link.isAnchor);
+          return /* @__PURE__ */ jsxs9(
+            Link,
+            {
+              href: link.url,
+              onClick: (e) => handleAnchorClick(e, link.url),
+              className: `relative text-sm transition-colors duration-200 px-2 py-1.5 -ml-2 rounded-md ${active ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground"}`,
+              children: [
+                active && /* @__PURE__ */ jsx12(
+                  motion7.div,
+                  {
+                    layoutId: "activeDocsLinkBg",
+                    className: "absolute inset-0 bg-secondary/50 rounded-md",
+                    transition: {
+                      type: "spring",
+                      duration: 0.3,
+                      bounce: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx12("span", { className: "relative z-10", children: link.title })
+              ]
+            },
+            link.title
+          );
+        }) }) }, group.group)) })
+      ] }),
+      /* @__PURE__ */ jsx12("main", { className: "flex-1 min-w-0", children })
+    ] })
+  ] });
+}
+function DocsNavbar({
+  logo,
+  right
+}) {
+  return /* @__PURE__ */ jsxs9("header", { className: "sticky top-4 z-(--z-header) mx-auto flex w-full max-w-(--layout-max-width) items-center justify-between px-(--layout-padding) py-3", children: [
+    logo,
+    right
+  ] });
+}
+
+// src/components/layout/site-header.tsx
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { motion as motion10 } from "motion/react";
+import Link2 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
+
+// src/components/layout/theme-switcher.tsx
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+import { useEffect as useEffect5, useState as useState5 } from "react";
+
+// src/components/motion-primitives/morph-icon.tsx
+import { AnimatePresence as AnimatePresence4, motion as motion8 } from "motion/react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function MorphIcon({
+  isActive,
+  activeIcon,
+  inactiveIcon,
+  className,
+  variant = "rotate"
+}) {
+  const variants = {
+    scale: {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 }
+    },
+    rotate: {
+      initial: { opacity: 0, rotate: -90, scale: 0.95 },
+      animate: { opacity: 1, rotate: 0, scale: 1 },
+      exit: { opacity: 0, rotate: 90, scale: 0.95 }
+    },
+    slide: {
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 10 }
+    }
+  };
+  return /* @__PURE__ */ jsx13(AnimatePresence4, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx13(
+    motion8.span,
+    {
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: variants[variant],
+      transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] },
+      className: `inline-flex items-center justify-center ${className ?? ""}`,
+      children: isActive ? activeIcon : inactiveIcon
+    },
+    isActive ? "active" : "inactive"
+  ) });
+}
+
+// src/components/layout/theme-switcher.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ThemeSwitcher() {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState5(false);
+  useEffect5(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx14(SunIcon, { "aria-hidden": "true" }) });
+  }
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  return /* @__PURE__ */ jsx14(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon-sm",
+      onClick: () => setTheme(currentTheme === "dark" ? "light" : "dark"),
+      "aria-label": "Toggle theme",
+      children: /* @__PURE__ */ jsx14(
+        MorphIcon,
+        {
+          isActive: currentTheme === "dark",
+          activeIcon: /* @__PURE__ */ jsx14(MoonIcon, { "aria-hidden": "true" }),
+          inactiveIcon: /* @__PURE__ */ jsx14(SunIcon, { "aria-hidden": "true" }),
+          variant: "rotate"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/brand-logo.tsx
+import { AnimatePresence as AnimatePresence5, motion as motion9 } from "motion/react";
+import { forwardRef, useState as useState6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var BrandLogo = forwardRef(
+  ({ className = "", ...props }, ref) => {
+    const [isHovered, setIsHovered] = useState6(false);
+    const springConfig = {
+      type: "spring",
+      duration: 0.5,
+      bounce: 0.2
+    };
+    const easeOut = [0.23, 1, 0.32, 1];
+    return /* @__PURE__ */ jsx15(
+      motion9.div,
+      {
+        ref,
+        className: `relative flex items-center justify-center overflow-hidden transition-shadow ${className}`,
+        onHoverStart: () => setIsHovered(true),
+        onHoverEnd: () => setIsHovered(false),
+        whileTap: { scale: 0.97 },
+        layout: true,
+        transition: springConfig,
+        style: {
+          height: 24,
+          // Keeps vertical rhythm stable
+          cursor: "pointer"
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx15(AnimatePresence5, { mode: "popLayout", initial: false, children: isHovered ? /* @__PURE__ */ jsx15(
+          motion9.span,
+          {
+            initial: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
+            animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
+            transition: { duration: 0.2, ease: easeOut },
+            className: "whitespace-nowrap font-sans text-[16px] font-extrabold lowercase leading-none tracking-tight text-slate-900 dark:text-white",
+            children: "inklu"
+          },
+          "text"
+        ) : /* @__PURE__ */ jsx15(
+          motion9.div,
+          {
+            initial: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
+            animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
+            transition: { duration: 0.2, ease: easeOut },
+            className: "h-4 w-4 rounded-sm bg-slate-900 dark:bg-white"
+          },
+          "icon"
+        ) })
+      }
+    );
+  }
+);
+BrandLogo.displayName = "BrandLogo";
+
+// src/components/ui/hover-card.tsx
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function HoverCard({ ...props }) {
+  return /* @__PURE__ */ jsx16(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx16(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx16(
+    PreviewCardPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx16(
+        PreviewCardPrimitive.Popup,
+        {
+          "data-slot": "hover-card-content",
+          className: cn(
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-200 ease-out 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",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/ui/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+    TooltipPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs10(
+        TooltipPrimitive.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 duration-150 ease-out data-instant:duration-0 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/layout/site-header.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function SiteHeader({
+  navItems = [],
+  logo = /* @__PURE__ */ jsx18(BrandLogo, {}),
+  version = "v0.1",
+  githubUrl = "https://github.com/your-username/your-repo",
+  right
+}) {
+  const pathname = usePathname2();
+  const isActive = (href) => href === "/" ? pathname === "/" : pathname?.startsWith(href) ?? false;
+  return /* @__PURE__ */ jsxs11("header", { className: "sticky top-4 z-(--z-header) flex w-full items-center justify-between rounded-xl", children: [
+    /* @__PURE__ */ jsx18(
+      Link2,
+      {
+        href: "/",
+        "aria-label": "Home",
+        className: "flex items-center text-foreground transition-opacity hover:opacity-80",
+        children: logo
+      }
+    ),
+    /* @__PURE__ */ jsx18("nav", { className: "absolute left-1/2 flex -translate-x-1/2 items-center gap-4 md:gap-5", children: navItems.map((item) => {
+      const active = isActive(item.href);
+      return /* @__PURE__ */ jsxs11(
+        Link2,
+        {
+          href: item.href,
+          "aria-current": active ? "page" : void 0,
+          onClick: () => {
+            if (!active) turn(item.href === "/" ? "back" : "forward");
+          },
+          className: cn(
+            "relative font-medium text-sm leading-5 transition-colors px-3 py-1.5 rounded-full",
+            active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            active && /* @__PURE__ */ jsx18(
+              motion10.div,
+              {
+                layoutId: "activeHeaderNavBg",
+                className: "absolute inset-0 bg-secondary/60 rounded-full",
+                transition: { type: "spring", duration: 0.3, bounce: 0 }
+              }
+            ),
+            /* @__PURE__ */ jsx18("span", { className: "relative z-10", children: item.label })
+          ]
+        },
+        item.href
+      );
+    }) }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
+      version && /* @__PURE__ */ jsxs11(HoverCard, { children: [
+        /* @__PURE__ */ jsx18(
+          HoverCardTrigger,
+          {
+            render: /* @__PURE__ */ jsx18(
+              Badge,
+              {
+                variant: "secondary",
+                className: "align-middle cursor-default hover:bg-secondary/80 transition-colors",
+                children: version
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          HoverCardContent,
+          {
+            side: "bottom",
+            sideOffset: 8,
+            align: "center",
+            className: "w-64 p-2",
+            children: /* @__PURE__ */ jsxs11("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs11("h1", { className: " font-medium", children: [
+                "Release ",
+                version
+              ] }),
+              /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: "You are viewing the documentation for the latest release." })
+            ] })
+          }
+        )
+      ] }),
+      right,
+      githubUrl && /* @__PURE__ */ jsx18(TooltipProvider, { delay: 200, children: /* @__PURE__ */ jsxs11(Tooltip, { children: [
+        /* @__PURE__ */ jsx18(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsxs11(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                render: (props) => /* @__PURE__ */ jsx18(
+                  "a",
+                  {
+                    ...props,
+                    href: githubUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    onClick: (e) => {
+                      props.onClick?.(e);
+                      tap();
+                    }
+                  }
+                ),
+                children: [
+                  /* @__PURE__ */ jsx18(GitHubLogoIcon, {}),
+                  /* @__PURE__ */ jsx18("span", { className: "hidden sm:inline", children: "GitHub" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx18(TooltipContent, { side: "bottom", sideOffset: 6, children: "View source on GitHub" })
+      ] }) }),
+      /* @__PURE__ */ jsx18(ThemeSwitcher, {})
+    ] })
+  ] });
+}
+
+// src/components/layout/site-layout.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function SiteLayout({ children, header, footer }) {
+  return /* @__PURE__ */ jsxs12("div", { className: "relative flex flex-col items-center min-h-screen pb-24 overflow-x-clip", children: [
+    /* @__PURE__ */ jsx19(ScrollFade, {}),
+    /* @__PURE__ */ jsxs12("section", { className: "w-full px-6 flex flex-col gap-3 pt-3", children: [
+      header,
+      children
+    ] }),
+    footer && /* @__PURE__ */ jsx19("div", { className: "flex flex-col gap-10 items-center text-center mt-32 px-4", children: footer })
+  ] });
+}
+
+// src/components/ui/direction.tsx
+import {
+  DirectionProvider,
+  useDirection
+} from "@base-ui/react/direction-provider";
+
+// src/components/layout/theme-provider.tsx
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ThemeProvider(props) {
+  return /* @__PURE__ */ jsx20(NextThemesProvider, { ...props });
+}
+
+// src/components/layout/site-provider.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function SiteProvider({ children }) {
+  return /* @__PURE__ */ jsx21(
+    ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme: "dark",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      children: /* @__PURE__ */ jsx21(DirectionProvider, { direction: "ltr", children: /* @__PURE__ */ jsx21(ToastProvider, { position: "bottom-right", children: /* @__PURE__ */ jsx21(AnchoredToastProvider, { children }) }) })
+    }
+  );
+}
+
+// src/components/layout/site-template.tsx
+import { motion as motion11, useReducedMotion as useReducedMotion4 } from "motion/react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function SiteTemplate({ children }) {
+  const reduced = useReducedMotion4();
+  return /* @__PURE__ */ jsx22(
+    motion11.div,
+    {
+      initial: reduced ? false : { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: reduced ? { duration: 0 } : { duration: 0.24, ease: [0.22, 1, 0.36, 1] },
+      children
+    }
+  );
+}
+
+// src/components/ui/button-group.tsx
+import { mergeProps as mergeProps3 } from "@base-ui/react/merge-props";
+import { useRender as useRender3 } from "@base-ui/react/use-render";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx23(
+    SeparatorPrimitive,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/button-group.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var buttonGroupVariants = cva3(
+  "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-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0",
+        vertical: "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"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: Button group pattern
+    /* @__PURE__ */ jsx24(
+      "div",
+      {
+        role: "group",
+        "data-slot": "button-group",
+        "data-orientation": orientation,
+        className: cn(buttonGroupVariants({ orientation }), className),
+        ...props
+      }
+    )
+  );
+}
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}) {
+  return useRender3({
+    defaultTagName: "div",
+    props: mergeProps3(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text"
+    }
+  });
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx24(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/card.tsx
+import { SmoothCorners as SmoothCorners3 } from "@lisse/react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(SmoothCorners3, { asChild: true, corners: { radius: 24, smoothing: 1 }, children: /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "group/card flex flex-col overflow-hidden bg-card hover:bg-accent transition-colors text-card-foreground",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn("flex flex-col gap-1.5 mb-4", className),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("font-medium leading-none tracking-tight", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center pt-4", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/item.tsx
+import { mergeProps as mergeProps4 } from "@base-ui/react/merge-props";
+import { useRender as useRender4 } from "@base-ui/react/use-render";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function ItemGroup({ className, ...props }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: ARIA list pattern
+    /* @__PURE__ */ jsx26(
+      "div",
+      {
+        role: "list",
+        "data-slot": "item-group",
+        className: cn(
+          "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+          className
+        ),
+        ...props
+      }
+    )
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva4(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition duration-[160ms] ease-out outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted active:scale-[0.97]",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}) {
+  return useRender4({
+    defaultTagName: "div",
+    props: mergeProps4(
+      {
+        className: cn(itemVariants({ variant, size, className }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size
+    }
+  });
+}
+var itemMediaVariants = cva4(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  AnchoredToastProvider,
+  Badge,
+  BrandLogo,
+  Button,
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChangelogContent,
+  CodeBlock,
+  CommandBlock,
+  CopyMorphIcon,
+  DirectionProvider,
+  DocsCode,
+  DocsCol,
+  DocsFrame,
+  DocsHeader,
+  DocsInstallation,
+  DocsLayout,
+  DocsNavbar,
+  DocsOverview,
+  DocsSection,
+  EASE_OUT,
+  HERO_STAGGER,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+  REVEAL_DURATION,
+  ScrollFade,
+  Separator,
+  SiteHeader,
+  SiteLayout,
+  SiteProvider,
+  SiteTemplate,
+  SlidingNumber,
+  TextEffect,
+  TextMorph,
+  ThemeProvider,
+  ThemeSwitcher,
+  Toast as ToastPrimitive,
+  ToastProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  anchoredToastManager,
+  badgeVariants,
+  buttonGroupVariants,
+  buttonVariants,
+  colReveal,
+  heroChild,
+  toastManager,
+  useDirection
+};
+//# sourceMappingURL=index.mjs.map