@orangecheck/app-design 0.0.0-stage → 0.1.1

package/dist/index.mjs

@@ -0,0 +1,1448 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { forwardRef, createContext, useContext, useId, isValidElement, cloneElement, createElement, useState, useRef, useEffect, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { ChevronDown, Check, X, Copy, Menu, Sun, Moon, SunMoon } from 'lucide-react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import Link2 from 'next/link';
+import { useTheme } from 'next-themes';
+
+// src/tokens/index.ts
+var APP_ATTRIBUTE = "data-oc-app";
+var APP_ID = "ochk";
+var appColors = {
+  light: {
+    background: "#FAFAFA",
+    foreground: "#0A0A0A",
+    card: "#FFFFFF",
+    muted: "#F2F2F2",
+    mutedForeground: "#54585E",
+    subtleForeground: "#686C72",
+    border: "#ECECEC",
+    hairlineStrong: "#DADADA",
+    accentDisplay: "#F55819",
+    accentInk: "#C73F09"
+  },
+  dark: {
+    background: "#0A0A0A",
+    foreground: "#FAFAFA",
+    card: "#161616",
+    muted: "#1E1E1E",
+    mutedForeground: "#A3A6AA",
+    subtleForeground: "#8B8E93",
+    border: "#262626",
+    hairlineStrong: "#333333",
+    accentDisplay: "#F66D36",
+    accentInk: "#F0835A"
+  },
+  brand: {
+    orange: "#F66D36",
+    orangeLight: "#FB933C",
+    orangeDeep: "#EA580B",
+    peach: "#FED8AB",
+    ink: "#0A0A0A",
+    inkCard: "#1E1E1E"
+  }
+};
+var appFonts = {
+  sans: "'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif",
+  mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace"
+};
+var merge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "oca-type": [
+        "oca-display-1",
+        "oca-display-2",
+        "oca-display-3",
+        "oca-title",
+        "oca-title-sm",
+        "oca-eyebrow",
+        "oca-lead",
+        "oca-body",
+        "oca-numeral"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return merge(clsx(inputs));
+}
+function Spinner({ className, label }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn("size-4 animate-spin", className),
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-ui": "skeleton", className: cn("animate-pulse rounded-lg bg-muted", className), ...props });
+}
+var Separator = forwardRef(function Separator2({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-border bg-card px-1.5 font-mono text-[11px] text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function StatusDot({
+  tone = "neutral",
+  pulse = false,
+  className
+}) {
+  const color = {
+    neutral: "bg-oca-subtle",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-destructive",
+    brand: "bg-brand"
+  }[tone];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("inline-block size-2 shrink-0 rounded-full", color, pulse && "oca-animate-pulse-dot", className)
+    }
+  );
+}
+function Toaster(props) {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      position: "bottom-right",
+      toastOptions: {
+        classNames: {
+          toast: "oca-toast rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg font-sans",
+          title: "text-[0.9375rem] font-medium",
+          description: "text-sm text-muted-foreground",
+          actionButton: "rounded-full bg-primary text-primary-foreground",
+          cancelButton: "rounded-full bg-muted text-foreground"
+        }
+      },
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "active:translate-y-px disabled:pointer-events-none disabled:opacity-45",
+    "[&_svg]:pointer-events-none [&_svg]:size-[1.1em] [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/85",
+        secondary: "border border-border bg-secondary text-secondary-foreground hover:border-oca-hairline-strong hover:bg-accent",
+        brand: "bg-brand text-brand-foreground hover:bg-oca-orange-deep",
+        ghost: "text-foreground hover:bg-accent",
+        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "h-auto rounded-none px-0 text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground",
+        onInk: "bg-white text-oca-ink hover:bg-white/90",
+        onInkOutline: "border border-white/20 text-white hover:bg-white/10"
+      },
+      size: {
+        sm: "h-9 px-4 text-sm",
+        md: "h-11 px-5 text-[0.9375rem]",
+        lg: "h-14 px-7 text-[1.0625rem]",
+        icon: "size-10",
+        "icon-sm": "size-8"
+      }
+    },
+    compoundVariants: [{ variant: "link", className: "h-auto px-0" }],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = forwardRef(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, type, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-ui": "button",
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-busy": loading || void 0,
+      type: asChild ? void 0 : type ?? "button",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-[1.1em]" }) : null,
+        children
+      ] })
+    }
+  );
+});
+var badgeVariants = cva(
+  "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 text-[0.8125rem] font-medium leading-none",
+  {
+    variants: {
+      tone: {
+        neutral: "border-border bg-card text-foreground",
+        muted: "border-transparent bg-muted text-muted-foreground",
+        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        success: "border-transparent bg-[color-mix(in_oklab,var(--success)_12%,var(--card))] text-success",
+        warning: "border-transparent bg-[color-mix(in_oklab,var(--warning)_14%,var(--card))] text-warning",
+        danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
+        info: "border-transparent bg-[color-mix(in_oklab,var(--info)_12%,var(--card))] text-info",
+        ink: "border-transparent bg-oca-ink text-oca-ink-foreground",
+        onInk: "border-white/15 bg-white/5 text-white/90"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+function Badge({ className, tone, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-ui": "badge", className: cn(badgeVariants({ tone }), className), ...props });
+}
+var cardVariants = cva("relative rounded-[1.25rem] border", {
+  variants: {
+    tone: {
+      default: "border-border bg-card text-card-foreground",
+      sunken: "border-transparent bg-muted text-foreground",
+      ink: "border-oca-ink-line bg-oca-ink-card text-oca-ink-foreground",
+      outline: "border-border bg-transparent text-foreground"
+    },
+    padding: {
+      none: "",
+      sm: "p-5",
+      md: "p-6 md:p-8",
+      lg: "p-8 md:p-10"
+    },
+    interactive: {
+      true: "transition-colors hover:border-oca-hairline-strong focus-within:border-oca-hairline-strong",
+      false: ""
+    }
+  },
+  defaultVariants: { tone: "default", padding: "md", interactive: false }
+});
+var Card = forwardRef(function Card2({ className, tone, padding, interactive, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, "data-ui": "card", className: cn(cardVariants({ tone, padding, interactive }), className), ...props });
+});
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), ...props });
+}
+function CardNumeral({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("oca-numeral block", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("oca-title flex flex-wrap items-center gap-2.5", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("oca-body", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-5", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-wrap items-center gap-3", className), ...props });
+}
+var fieldBase = [
+  "w-full rounded-xl border border-input bg-card text-foreground placeholder:text-oca-subtle",
+  "text-base md:text-[0.9375rem] outline-none transition-[border-color,box-shadow]",
+  "focus:border-foreground/35 focus:ring-4 focus:ring-[color-mix(in_oklab,var(--oca-orange)_16%,transparent)]",
+  "disabled:cursor-not-allowed disabled:opacity-55",
+  "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-[color-mix(in_oklab,var(--destructive)_14%,transparent)]"
+];
+var Input = forwardRef(function Input2({ className, type = "text", ...props }, ref) {
+  return /* @__PURE__ */ jsx("input", { ref, type, "data-ui": "input", className: cn(fieldBase, "h-11 px-3.5", className), ...props });
+});
+var Textarea = forwardRef(
+  function Textarea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        "data-ui": "textarea",
+        className: cn(fieldBase, "min-h-28 px-3.5 py-3 leading-relaxed", className),
+        ...props
+      }
+    );
+  }
+);
+var Label = forwardRef(function Label2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn("text-sm font-medium leading-none text-foreground", className),
+      ...props
+    }
+  );
+});
+function Field({ label, hint, error, children, className, hideLabel }) {
+  const id = useId();
+  const hintId = hint ? `${id}-hint` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || void 0;
+  const control = isValidElement(children) ? cloneElement(children, {
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": error ? true : void 0
+  }) : children;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, className: hideLabel ? "sr-only" : void 0, children: label }),
+    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null,
+    control,
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
+  ] });
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(fieldBase, "flex h-11 items-center justify-between gap-2 px-3.5 text-left", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" }) })
+      ]
+    }
+  );
+});
+var SelectContent = forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Content,
+    {
+      ref,
+      position,
+      sideOffset: 6,
+      className: cn(
+        "oca-animate-fade z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
+    }
+  ) });
+});
+var SelectItem = forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex h-10 cursor-default select-none items-center rounded-lg pl-3 pr-9 text-[0.9375rem] outline-none",
+        "data-[highlighted]:bg-accent data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "absolute right-3", children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
+      ]
+    }
+  );
+});
+var Checkbox = forwardRef(function Checkbox2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer inline-flex size-5 shrink-0 items-center justify-center rounded-[6px] border border-input bg-card",
+        "outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 3 }) })
+    }
+  );
+});
+var Switch = forwardRef(function Switch2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent bg-input p-0.5",
+        "outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block size-5 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-5" })
+    }
+  );
+});
+var RadioGroup = forwardRef(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-3", className), ...props });
+});
+var RadioGroupItem = forwardRef(function RadioGroupItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-card",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "block size-2.5 rounded-full bg-primary" })
+    }
+  );
+});
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var overlayClass = "oca-animate-fade fixed inset-0 z-50 bg-[rgb(10_10_10/0.38)] backdrop-blur-[2px] data-[state=closed]:opacity-0";
+var DialogContent = forwardRef(function DialogContent2({ className, children, hideClose, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: overlayClass }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "oca-animate-rise fixed left-1/2 top-1/2 z-50 w-[min(92vw,34rem)] -translate-x-1/2 -translate-y-1/2",
+          "max-h-[88vh] overflow-y-auto rounded-[1.5rem] border border-border bg-popover p-6 text-popover-foreground shadow-xl md:p-8",
+          "outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          hideClose ? null : /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-5 flex flex-col gap-2 pr-8", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-7 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className), ...props });
+}
+var DialogTitle = forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      className: cn("text-[1.5rem] font-normal leading-tight tracking-[-0.02em]", className),
+      ...props
+    }
+  );
+});
+var DialogDescription = forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("oca-body", className), ...props });
+});
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetTitle = DialogTitle;
+var SheetDescription = DialogDescription;
+var sheetSide = {
+  right: "inset-y-0 right-0 h-full w-[min(88vw,24rem)] border-l",
+  left: "inset-y-0 left-0 h-full w-[min(88vw,24rem)] border-r",
+  bottom: "inset-x-0 bottom-0 max-h-[88vh] rounded-t-[1.5rem] border-t"
+};
+var SheetContent = forwardRef(function SheetContent2({ className, children, side = "right", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: overlayClass }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "oca-animate-fade fixed z-50 flex flex-col gap-4 overflow-y-auto border-border bg-popover p-6 text-popover-foreground shadow-xl outline-none",
+          sheetSide[side],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 w-72 rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 max-w-xs rounded-lg bg-oca-ink px-2.5 py-1.5 text-[0.8125rem] leading-snug text-oca-ink-foreground",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 min-w-56 overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-lg",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = forwardRef(function DropdownMenuItem2({ className, destructive, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none",
+        "data-[highlighted]:bg-accent data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:text-muted-foreground",
+        destructive && "text-destructive [&_svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DropdownMenuLabel = forwardRef(function DropdownMenuLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn("px-3 pb-1.5 pt-2 text-[0.8125rem] text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
+});
+var LookContext = createContext("pill");
+var Tabs = forwardRef(function Tabs2({ look = "pill", ...props }, ref) {
+  return /* @__PURE__ */ jsx(LookContext.Provider, { value: look, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) });
+});
+var TabsList = forwardRef(function TabsList2({ className, ...props }, ref) {
+  const look = useContext(LookContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        look === "pill" ? "inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-full bg-muted p-1" : "flex max-w-full items-center gap-6 overflow-x-auto border-b border-border",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TabsTrigger = forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  const look = useContext(LookContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-[0.9375rem] outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        look === "pill" ? "h-9 rounded-full px-4 text-muted-foreground hover:text-foreground data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm" : "-mb-px h-11 border-b-2 border-transparent text-muted-foreground hover:text-foreground data-[state=active]:border-foreground data-[state=active]:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TabsContent = forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-6 outline-none", className), ...props });
+});
+var TOP = "0,3 2,2 6,4 14,0 16,1 6,6";
+var LEFT = "0,3 6,6 6,8 0,5";
+var RIGHT = "6,6 16,1 16,3 6,8";
+var MARK_FACES = { top: "#FED8AB", left: "#FB933C", right: "#EA580B" };
+function Mark({ title, size, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 8",
+      width: size,
+      height: size ? size / 2 : void 0,
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      className: cn("shrink-0", className),
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("polygon", { points: LEFT, fill: MARK_FACES.left }),
+        /* @__PURE__ */ jsx("polygon", { points: RIGHT, fill: MARK_FACES.right }),
+        /* @__PURE__ */ jsx("polygon", { points: TOP, fill: MARK_FACES.top })
+      ]
+    }
+  );
+}
+function AppIcon({ title, size = 32, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      className: cn("shrink-0", className),
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "24",
+            height: "24",
+            rx: "6.25",
+            style: { fill: "var(--oca-icon-tile, #0A0A0A)", stroke: "var(--oca-icon-ring, transparent)" },
+            strokeWidth: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { transform: "translate(4.25 8.1) scale(0.97)", children: [
+          /* @__PURE__ */ jsx("polygon", { points: LEFT, fill: MARK_FACES.left }),
+          /* @__PURE__ */ jsx("polygon", { points: RIGHT, fill: MARK_FACES.right }),
+          /* @__PURE__ */ jsx("polygon", { points: TOP, fill: MARK_FACES.top })
+        ] })
+      ]
+    }
+  );
+}
+function Lockup({ name = "orangecheck", size = 28, className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center font-medium tracking-[-0.01em]", className),
+      style: { gap: size * 0.32, fontSize: size * 0.56 },
+      children: [
+        /* @__PURE__ */ jsx(AppIcon, { size }),
+        /* @__PURE__ */ jsx("span", { children: name })
+      ]
+    }
+  );
+}
+var SPHERE_GRADIENT = "radial-gradient(circle at 50% 42%, #fff8f3 0%, #ffe2d3 22%, #ffb48d 45%, #ff8a55 68%, #ff6a2c 100%)";
+function HalftoneSphere({ src, alt, stadium = false, float = false, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-square w-full", className), style, children: [
+    stadium ? (
+      // Measured from the deck's title slide: a rounded square, its corners
+      // 17% of the sphere, level with the sphere's foot, reaching left behind
+      // the headline. On phones a ring inside the gutter, since the offset
+      // would push the page sideways.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "oca-stadium pointer-events-none absolute inset-[-6%] rounded-full md:[inset:-12%_14%_0%_-26%] md:rounded-[17%]"
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("relative size-full overflow-hidden rounded-full", float && "oca-animate-float"),
+        style: { background: SPHERE_GRADIENT },
+        children: /* @__PURE__ */ jsx("img", { src, alt, className: "absolute inset-0 size-full select-none", draggable: false })
+      }
+    )
+  ] });
+}
+function IsoCheck({ size = 360, settle = false, shadow = true, title, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", settle && "oca-animate-settle", className), style: { width: size }, children: [
+    /* @__PURE__ */ jsx(Mark, { size, title, className: "relative z-10 block" }),
+    shadow ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute left-[8%] right-[8%] rounded-[50%] opacity-60 blur-xl",
+        style: { height: size * 0.08, bottom: -size * 0.04, background: "rgb(234 88 11 / 0.18)" }
+      }
+    ) : null
+  ] });
+}
+function Eyebrow({ className, onInk, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("oca-eyebrow", onInk && "text-oca-ink-eyebrow", className), ...props });
+}
+function Display({ level = 2, as, className, ...props }) {
+  const tag = as ?? `h${level}`;
+  return createElement(tag, { className: cn(`oca-display-${level}`, className), ...props });
+}
+function Accent({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-oca-accent-display", className), children });
+}
+function Lead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("oca-lead max-w-[40rem]", className), ...props });
+}
+function Footnote({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] text-muted-foreground", className), ...props });
+}
+function Prose({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "max-w-[42rem] text-[1.0625rem] leading-[1.7] text-muted-foreground",
+        "[&_h2]:oca-display-3 [&_h2]:mb-4 [&_h2]:mt-14 [&_h2]:text-foreground",
+        "[&_h3]:oca-title [&_h3]:mb-3 [&_h3]:mt-10 [&_h3]:text-foreground",
+        "[&_p]:my-4 [&_strong]:font-medium [&_strong]:text-foreground",
+        "[&_a]:text-foreground [&_a]:underline [&_a]:decoration-border [&_a]:underline-offset-4 hover:[&_a]:decoration-foreground",
+        "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1.5 [&_code]:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var sectionVariants = cva("relative w-full overflow-x-clip", {
+  variants: {
+    tone: {
+      canvas: "bg-background text-foreground",
+      card: "bg-card text-card-foreground",
+      ink: "bg-oca-ink text-oca-ink-foreground",
+      brand: "bg-brand text-brand-foreground"
+    },
+    space: {
+      none: "",
+      sm: "py-12 md:py-16",
+      md: "oca-section",
+      lg: "py-24 md:py-40"
+    }
+  },
+  defaultVariants: { tone: "canvas", space: "md" }
+});
+function Section({ tone, space, contained = true, className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn(sectionVariants({ tone, space }), className), ...props, children: contained ? /* @__PURE__ */ jsx("div", { className: "oca-container", children }) : children });
+}
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("oca-container", className), ...props });
+}
+function SectionIntro({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 md:gap-5",
+        align === "center" && "mx-auto items-center text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var pad = (n) => String(n + 1).padStart(2, "0");
+function StepGrid({ items, look = "cards", className }) {
+  const cols = items.length >= 3 ? "md:grid-cols-3" : items.length === 2 ? "md:grid-cols-2" : "";
+  return /* @__PURE__ */ jsx("ol", { className: cn("grid gap-4 md:gap-5", cols, className), children: items.map(
+    (it, i) => look === "plain" ? /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-3 pr-4", children: [
+      /* @__PURE__ */ jsx(CardNumeral, { children: it.numeral ?? pad(i) }),
+      /* @__PURE__ */ jsxs(CardTitle, { className: "oca-title-sm", children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oca-body text-[0.9375rem]", children: it.body })
+    ] }, i) : look === "ink" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Card, { tone: "ink", padding: "md", className: "h-full", children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "text-oca-ink-title", children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { tone: "onInk", children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 text-[1rem] leading-relaxed text-oca-ink-muted", children: it.body })
+    ] }) }, i) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Card, { padding: "md", className: "flex h-full flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(CardNumeral, { children: it.numeral ?? pad(i) }),
+      /* @__PURE__ */ jsxs(CardTitle, { children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oca-body", children: it.body })
+    ] }) }, i)
+  ) });
+}
+var KIND = {
+  package: "text-oca-code-package",
+  tag: "text-oca-code-tag",
+  link: "text-oca-code-link"
+};
+function PackageCard({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
+        className
+      ),
+      children: items.map((it, i) => {
+        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
+        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
+          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
+          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
+            it.note
+          ] }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+function CodeBlock({
+  code,
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("overflow-hidden rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card", className), children: [
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-b border-oca-ink-line px-5 py-3 text-[0.8125rem] text-oca-ink-subtle", children: caption }) : null,
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-5 font-mono text-[0.875rem] leading-relaxed text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) })
+  ] });
+}
+var LABEL = {
+  yes: "Yes",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  no: "No"
+};
+var TONE = {
+  yes: "text-oca-accent-ink",
+  testing: "text-foreground",
+  "not-yet": "text-muted-foreground",
+  no: "text-muted-foreground"
+};
+function TruthTable({
+  rows,
+  statusHeading = "Status",
+  whatHeading = "What",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "w-[30%] border-b border-oca-hairline-strong px-4 py-3 font-semibold md:w-[22%]", children: statusHeading }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "border-t border-oca-hairline-strong px-4 py-3 font-medium",
+            i === 0 && "border-t-0",
+            TONE[r.status]
+          ),
+          children: LABEL[r.status]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "border-l border-t border-oca-hairline-strong px-4 py-3 leading-relaxed",
+            i === 0 && "border-t-0"
+          ),
+          children: r.what
+        }
+      )
+    ] }, i)) })
+  ] }) });
+}
+var INT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+var COMPACT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function satsText(value, opts = {}) {
+  if (value == null || !Number.isFinite(value)) return null;
+  const whole = Math.trunc(value);
+  const body = (opts.compact ? COMPACT : INT).format(Math.abs(whole));
+  const sign = whole < 0 ? "\u2212" : opts.signed && whole > 0 ? "+" : "";
+  const unit = opts.unit === "none" ? "" : whole === 1 || whole === -1 ? " sat" : " sats";
+  return `${sign}${body}${unit}`;
+}
+function Sats({ value, unit, compact, signed, unknown = "\u2014", className, ...props }) {
+  const text = satsText(value, { unit, compact, signed });
+  if (text === null) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: unknown }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "unknown" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("oca-tabular whitespace-nowrap", className), ...props, children: text });
+}
+function UsdApprox({
+  sats,
+  usdPerBtc,
+  className
+}) {
+  if (sats == null || usdPerBtc == null || !Number.isFinite(sats) || !Number.isFinite(usdPerBtc)) return null;
+  const usd = sats / 1e8 * usdPerBtc;
+  const text = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: usd < 1 ? 4 : 2
+  }).format(usd);
+  return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
+    "\u2248 ",
+    text
+  ] });
+}
+function SatsFigure({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "oca-display-3 oca-tabular", children: [
+      /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
+    ] }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
+  ] });
+}
+function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: cn("flex flex-col gap-5 md:flex-row md:items-end md:justify-between", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex max-w-[44rem] flex-col gap-3", children: [
+      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx("h1", { className: "oca-display-3", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[1.0625rem]", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: actions }) : null
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 rounded-[1.25rem] border border-border bg-card p-5 md:p-6", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "oca-tabular text-[1.75rem] leading-tight tracking-[-0.02em]", children: value }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null
+  ] });
+}
+function StatGrid({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4", className), ...props });
+}
+function KeyValueList({ items, className }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
+    /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-[0.875rem] text-muted-foreground sm:w-48", children: it.label }),
+    /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 break-words text-[0.9375rem]", it.mono && "font-mono text-[0.875rem]"), children: it.value })
+  ] }, i)) });
+}
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  empty,
+  caption,
+  className
+}) {
+  if (rows.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto rounded-[1.25rem] border border-border bg-card", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
+    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        className: cn(
+          "whitespace-nowrap px-5 py-3 text-[0.8125rem] font-medium text-muted-foreground",
+          c.align === "end" && "text-right",
+          c.wide && "hidden md:table-cell"
+        ),
+        children: c.header
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cn(
+          "px-5 py-3.5 align-middle",
+          c.align === "end" && "text-right",
+          c.wide && "hidden md:table-cell"
+        ),
+        children: c.cell(r)
+      },
+      c.key
+    )) }, rowKey(r, i))) })
+  ] }) });
+}
+function EmptyState({
+  title,
+  children,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-4 rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-6 py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Mark, { size: 56 }),
+        /* @__PURE__ */ jsx("h3", { className: "oca-title-sm", children: title }),
+        children ? /* @__PURE__ */ jsx("div", { className: "oca-body max-w-md text-[0.9375rem]", children }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap justify-center gap-3", children: action }) : null
+      ]
+    }
+  );
+}
+var NOTICE = {
+  neutral: "border-border bg-card",
+  info: "border-[color-mix(in_oklab,var(--info)_30%,var(--border))] bg-[color-mix(in_oklab,var(--info)_6%,var(--card))]",
+  success: "border-[color-mix(in_oklab,var(--success)_30%,var(--border))] bg-[color-mix(in_oklab,var(--success)_6%,var(--card))]",
+  warning: "border-[color-mix(in_oklab,var(--warning)_35%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_7%,var(--card))]",
+  danger: "border-[color-mix(in_oklab,var(--destructive)_32%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_6%,var(--card))]",
+  brand: "border-[color-mix(in_oklab,var(--oca-orange)_35%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_7%,var(--card))]"
+};
+var NOTICE_TITLE = {
+  neutral: "text-foreground",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+  brand: "text-oca-accent-ink"
+};
+function Notice({
+  tone = "neutral",
+  title,
+  children,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "danger" || tone === "warning" ? "alert" : "note",
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
+        NOTICE[tone],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] font-medium", NOTICE_TITLE[tone]), children: title }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "text-[0.9375rem] leading-relaxed text-foreground/85", children }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+      ]
+    }
+  );
+}
+function middle(v, head, tail) {
+  return v.length <= head + tail + 1 ? v : `${v.slice(0, head)}\u2026${v.slice(-tail)}`;
+}
+function useCopy(timeoutMs = 1600) {
+  const [copied, setCopied] = useState(false);
+  const t = useRef(null);
+  useEffect(() => () => {
+    if (t.current) clearTimeout(t.current);
+  }, []);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (t.current) clearTimeout(t.current);
+        t.current = setTimeout(() => setCopied(false), timeoutMs);
+      } catch {
+        setCopied(false);
+      }
+    },
+    [timeoutMs]
+  );
+  return { copied, copy };
+}
+function CopyButton({ value, label = "Copy", className }) {
+  const { copied, copy } = useCopy();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => void copy(value),
+      "aria-label": copied ? "Copied" : label,
+      className: cn(
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: [
+        copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+      ]
+    }
+  );
+}
+function HashChip({
+  value,
+  head = 8,
+  tail = 6,
+  copy = true,
+  href,
+  className
+}) {
+  const shown = middle(value, head, tail);
+  const text = /* @__PURE__ */ jsx("span", { title: value, className: "font-mono text-[0.875rem]", children: shown });
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1", className), children: [
+    href ? /* @__PURE__ */ jsx("a", { href, className: "underline decoration-border underline-offset-4 hover:decoration-foreground", children: text }) : text,
+    copy ? /* @__PURE__ */ jsx(CopyButton, { value, label: "Copy full value" }) : null
+  ] });
+}
+function ProgressSteps({ steps, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col gap-0", className), children: steps.map((s, i) => {
+    const last = i === steps.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-4 pb-6 last:pb-0", "aria-current": s.state === "current" ? "step" : void 0, children: [
+      !last ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "absolute left-[11px] top-7 h-[calc(100%-1.5rem)] w-px",
+            s.state === "done" ? "bg-foreground/30" : "bg-border"
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-[0.75rem] oca-tabular",
+            s.state === "done" && "border-primary bg-primary text-primary-foreground",
+            s.state === "current" && "border-brand bg-card text-oca-accent-ink",
+            s.state === "upcoming" && "border-border bg-card text-muted-foreground",
+            s.state === "blocked" && "border-destructive bg-card text-destructive"
+          ),
+          children: s.state === "done" ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 3 }) : String(i + 1).padStart(2, "0")
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", s.state === "upcoming" ? "text-muted-foreground" : "font-medium"), children: s.label }),
+        s.hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: s.hint }) : null
+      ] })
+    ] }, i);
+  }) });
+}
+function ActivityList({ items, empty, className }) {
+  if (items.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  return /* @__PURE__ */ jsx("ul", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it) => {
+    const body = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[0.9375rem]", children: it.title }),
+        it.meta ? /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: it.meta }) : null
+      ] }),
+      it.trailing ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-right", children: it.trailing }) : null
+    ] });
+    return /* @__PURE__ */ jsx("li", { children: it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "block transition-colors hover:bg-accent/60", children: body }) : body }, it.id);
+  }) });
+}
+function NavLink({ item, className, onNavigate }) {
+  const cls = cn(
+    "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
+    item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+    className
+  );
+  if (item.external) {
+    return /* @__PURE__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
+  }
+  return /* @__PURE__ */ jsx(Link2, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+}
+function SiteHeader({
+  home = "/",
+  brand,
+  nav = [],
+  actions,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-40 w-full border-b border-transparent bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/70",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]", children: [
+        /* @__PURE__ */ jsx(Link2, { href: home, className: "-ml-1 rounded-lg p-1", "aria-label": "Home", children: brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }) }),
+        nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          nav.length > 0 ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsx(
+              SheetTrigger,
+              {
+                className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
+                "aria-label": "Open menu",
+                children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
+              /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsx(
+                NavLink,
+                {
+                  item: n,
+                  className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                  onNavigate: () => setOpen(false)
+                },
+                n.href
+              )) })
+            ] })
+          ] }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function SiteFooter({
+  columns = [],
+  fineprint,
+  meta,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "oca-container grid gap-10 py-14 md:grid-cols-[1.3fr_repeat(3,1fr)] md:py-16", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Lockup, { size: 26 }),
+        fineprint ? /* @__PURE__ */ jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
+      ] }),
+      columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
+        col.links.map((l) => /* @__PURE__ */ jsx(
+          NavLink,
+          {
+            item: l,
+            className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+          },
+          l.href
+        ))
+      ] }, col.heading))
+    ] }),
+    meta ? /* @__PURE__ */ jsx("div", { className: "oca-container border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) : null
+  ] });
+}
+function SideNav({ groups, onNavigate }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Sections", className: "flex flex-col gap-6", children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    g.label ? /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
+    g.items.map((it) => /* @__PURE__ */ jsxs(
+      Link2,
+      {
+        href: it.href,
+        onClick: onNavigate,
+        "aria-current": it.active ? "page" : void 0,
+        className: cn(
+          "flex h-10 items-center gap-3 rounded-xl px-3 text-[0.9375rem] transition-colors",
+          "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+          it.active ? "bg-card text-foreground shadow-sm ring-1 ring-border [&_svg]:text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+        ),
+        children: [
+          it.icon,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }),
+          it.badge ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: it.badge }) : null
+        ]
+      },
+      it.href
+    ))
+  ] }, g.label ?? gi)) });
+}
+function AppShell({
+  nav,
+  home = "/",
+  account,
+  banner,
+  footer,
+  children,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-dvh bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md lg:hidden", children: [
+      /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(
+          SheetTrigger,
+          {
+            className: "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
+            "aria-label": "Open navigation",
+            children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-4 pt-16", children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+          /* @__PURE__ */ jsx(SideNav, { groups: nav, onNavigate: () => setOpen(false) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Link2, { href: home, "aria-label": "Home", children: /* @__PURE__ */ jsx(AppIcon, { size: 28 }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center", children: account })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
+      /* @__PURE__ */ jsxs("aside", { className: "sticky top-0 hidden h-dvh w-64 shrink-0 flex-col gap-8 overflow-y-auto px-4 py-6 lg:flex", children: [
+        /* @__PURE__ */ jsx(Link2, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
+        /* @__PURE__ */ jsx(SideNav, { groups: nav }),
+        /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
+        banner ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
+        /* @__PURE__ */ jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children })
+      ] })
+    ] })
+  ] });
+}
+function AccountMenu({
+  name,
+  detail,
+  items
+}) {
+  const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        className: "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-3.5 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-label": `Account: ${name}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
+          /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: name }),
+        detail ? /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-[0.75rem]", children: detail }) : null
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      items.map(
+        (it, i) => it === "separator" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxs(Link2, { href: it.href, children: [
+          it.icon,
+          it.label
+        ] }) }, it.label) : /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
+          it.icon,
+          it.label
+        ] }, it.label)
+      )
+    ] })
+  ] });
+}
+function ThemeToggle({ className }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const current = mounted ? theme ?? "system" : "system";
+  const next = current === "light" ? "dark" : current === "dark" ? "system" : "light";
+  const Icon2 = current === "light" ? Sun : current === "dark" ? Moon : SunMoon;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(next),
+      "aria-label": `Theme: ${current}. Switch to ${next}`,
+      title: `Theme: ${current}`,
+      className: cn(
+        "inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Icon2, { className: "size-[1.125rem]" })
+    }
+  );
+}
+
+export { APP_ATTRIBUTE, APP_ID, Accent, AccountMenu, ActivityList, AppIcon, AppShell, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, CodeBlock, Container, CopyButton, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Eyebrow, Field, Footnote, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, Label, Lead, Lockup, MARK_FACES, Mark, Notice, PackageCard, PageHeader, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, Prose, RadioGroup, RadioGroupItem, SPHERE_GRADIENT, Sats, SatsFigure, Section, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SiteFooter, SiteHeader, Skeleton, Spinner, StatCard, StatGrid, StatusDot, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, satsText, sectionVariants, useCopy };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map