@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/gooey-popover/gooey-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gooey-popover.js","names":[],"sources":["../../../src/components/gooey-popover/gooey-popover.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Gooey Popover (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  type PopoverContentProps,\n} from \"@/components/popover\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A round trigger whose popover pours out of it: the panel starts as a circle\n * over the trigger and stretches into a rectangle, while an SVG \"goo\" filter\n * (blur + alpha threshold) melts the two shapes together where they meet.\n *\n * The source ran this on a GSAP timeline and positioned itself by hand. Here\n * Radix Popover (through Dowel's `popover`) owns placement, collision, focus\n * and dismissal, and the timeline is CSS keyframes driven by data-state:\n * Radix's Presence waits for the content's own exit animation — a \"hold\" as\n * long as the whole close sequence — before unmounting it.\n *\n * Because the content is portalled, the blob that sits under the trigger is\n * drawn inside the portal too, at the trigger's measured position, with an\n * aria-hidden copy of the trigger's icon on top so nothing visibly changes.\n * Under reduced motion the goo layer is dropped and the panel simply appears.\n */\n\nconst STYLES = `\n@keyframes dowel-gooey-popover-grow {\n  from {\n    left: calc(var(--gooey-x, var(--gooey-gx)) - var(--gooey-size) / 2);\n    top: calc(var(--gooey-y, var(--gooey-gy)) - var(--gooey-size) / 2);\n    width: var(--gooey-size); height: var(--gooey-size); border-radius: calc(var(--gooey-size) / 2);\n  }\n  to { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--gooey-radius); }\n}\n@keyframes dowel-gooey-popover-shrink {\n  from { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--gooey-radius); opacity: 1; }\n  70% { opacity: 1; }\n  to {\n    left: calc(var(--gooey-x, var(--gooey-gx)) - var(--gooey-size) / 2);\n    top: calc(var(--gooey-y, var(--gooey-gy)) - var(--gooey-size) / 2);\n    width: var(--gooey-size); height: var(--gooey-size); border-radius: calc(var(--gooey-size) / 2);\n    opacity: 0;\n  }\n}\n@keyframes dowel-gooey-popover-reveal {\n  from { opacity: 0; translate: 0 1rem; }\n  to { opacity: 1; translate: 0 0; }\n}\n@keyframes dowel-gooey-popover-conceal {\n  from { opacity: 1; translate: 0 0; }\n  to { opacity: 0; translate: 0 0.5rem; }\n}\n@keyframes dowel-gooey-popover-hold {\n  from { opacity: 1; }\n  to { opacity: 1; }\n}\n[data-slot=\"gooey-popover-content\"][data-state=\"open\"] { animation: none; }\n[data-slot=\"gooey-popover-content\"][data-state=\"closed\"] {\n  animation: dowel-gooey-popover-hold calc(var(--gooey-speed) * 1.2 * var(--motion-scale)) linear both;\n}\n[data-slot=\"gooey-popover-content\"][data-state=\"open\"] [data-slot=\"gooey-popover-shape\"] {\n  animation: dowel-gooey-popover-grow calc(var(--gooey-speed) * var(--motion-scale))\n    var(--ease-in-out-quint) both;\n}\n[data-slot=\"gooey-popover-content\"][data-state=\"closed\"] [data-slot=\"gooey-popover-shape\"] {\n  animation: dowel-gooey-popover-shrink calc(var(--gooey-speed) * var(--motion-scale))\n    var(--ease-in-quint) calc(var(--gooey-speed) * 0.2 * var(--motion-scale)) both;\n}\n[data-slot=\"gooey-popover-content\"][data-state=\"open\"] [data-slot=\"gooey-popover-body\"] {\n  animation: dowel-gooey-popover-reveal calc(var(--gooey-speed) * 0.75 * var(--motion-scale))\n    var(--ease-out-quint) calc(var(--gooey-speed) * 0.575 * var(--motion-scale)) both;\n}\n[data-slot=\"gooey-popover-content\"][data-state=\"closed\"] [data-slot=\"gooey-popover-body\"] {\n  animation: dowel-gooey-popover-conceal calc(var(--gooey-speed) * 0.4 * var(--motion-scale))\n    var(--ease-in-quint) both;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-slot=\"gooey-popover-goo\"], [data-slot=\"gooey-popover-ghost\"] { display: none; }\n}\n`;\n\nconst gooeyPopoverVariants = cva(\"\", {\n  variants: {\n    tone: {\n      /** The source's near-black blob on a light page, inverted in dark mode. */\n      inverted: \"bg-foreground text-background\",\n      primary: \"bg-primary text-primary-foreground\",\n      card: \"bg-card text-card-foreground\",\n    },\n  },\n  defaultVariants: {\n    tone: \"inverted\",\n  },\n});\n\nexport interface GooeyPopoverProps\n  extends\n    Omit<PopoverContentProps, \"children\" | \"content\">,\n    VariantProps<typeof gooeyPopoverVariants> {\n  /** The popover's content. */\n  children: ReactNode;\n  /** The trigger's icon. A plus by default. */\n  trigger?: ReactNode;\n  /** The trigger's accessible name — it is icon-only. Also names the content by default. */\n  triggerLabel: string;\n  /** The trigger's diameter in pixels. */\n  triggerSize?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The content's width. Numbers are pixels. */\n  contentWidth?: number | string;\n  /** Length of the morph in milliseconds; the rest of the sequence scales with it. */\n  duration?: number;\n  /** Classes for the trigger button. */\n  triggerClassName?: string;\n}\n\nconst PLUS = (\n  <svg\n    viewBox=\"0 0 24 24\"\n    width={20}\n    height={20}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M12 5v14M5 12h14\" />\n  </svg>\n);\n\n/** Where the trigger's centre sits relative to the content, before measuring. */\nfunction guess(side: GooeyPopoverProps[\"side\"], offset: number) {\n  switch (side) {\n    case \"bottom\":\n      return { x: \"50%\", y: `${String(-offset)}px` };\n    case \"left\":\n      return { x: `calc(100% + ${String(offset)}px)`, y: \"50%\" };\n    case \"right\":\n      return { x: `${String(-offset)}px`, y: \"50%\" };\n    default:\n      return { x: \"50%\", y: `calc(100% + ${String(offset)}px)` };\n  }\n}\n\n/** A popover that pours out of its round trigger through an SVG goo filter. */\nexport function GooeyPopover({\n  ref,\n  className,\n  style,\n  children,\n  trigger = PLUS,\n  triggerLabel,\n  triggerSize = 44,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  contentWidth = 240,\n  duration = 250,\n  side = \"top\",\n  sideOffset = 24,\n  tone,\n  triggerClassName,\n  ...props\n}: GooeyPopoverProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const filterId = `dowel-goo-${useId().replace(/:/g, \"\")}`;\n\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  };\n\n  const setContentRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  // Measure the trigger's centre relative to the placed content.\n  useLayoutEffect(() => {\n    if (!open) return;\n    let frames = 0;\n    let handle = 0;\n    const measure = () => {\n      const content = contentRef.current;\n      const button = triggerRef.current;\n      if (content && button) {\n        const c = content.getBoundingClientRect();\n        const t = button.getBoundingClientRect();\n        content.style.setProperty(\"--gooey-x\", `${String(t.left + t.width / 2 - c.left)}px`);\n        content.style.setProperty(\"--gooey-y\", `${String(t.top + t.height / 2 - c.top)}px`);\n      }\n      // The portal mounts, then Radix places the content, over the next frames.\n      if (++frames < 4) handle = requestAnimationFrame(measure);\n    };\n    measure();\n    return () => cancelAnimationFrame(handle);\n  }, [open]);\n\n  const tones = gooeyPopoverVariants({ tone });\n  const initial = guess(side, sideOffset + triggerSize / 2);\n  const atTrigger: CSSProperties = {\n    left: `calc(var(--gooey-x, var(--gooey-gx)) - ${String(triggerSize / 2)}px)`,\n    top: `calc(var(--gooey-y, var(--gooey-gy)) - ${String(triggerSize / 2)}px)`,\n    width: triggerSize,\n    height: triggerSize,\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <style href=\"dowel-gooey-popover\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <PopoverTrigger asChild>\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          aria-label={triggerLabel}\n          data-slot=\"gooey-popover-trigger\"\n          className={cn(\n            \"relative inline-flex shrink-0 items-center justify-center rounded-full transition-[scale] duration-[var(--duration-fast)] active:scale-95\",\n            tones,\n            focusRing,\n            triggerClassName,\n          )}\n          style={{ width: triggerSize, height: triggerSize }}\n        >\n          {trigger}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        ref={setContentRef}\n        side={side}\n        sideOffset={sideOffset}\n        aria-label={props[\"aria-labelledby\"] ? undefined : triggerLabel}\n        {...props}\n        data-slot=\"gooey-popover-content\"\n        className={cn(\n          \"relative w-auto overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none\",\n          className,\n        )}\n        style={\n          {\n            width: contentWidth,\n            \"--gooey-size\": `${String(triggerSize)}px`,\n            \"--gooey-speed\": `${String(duration)}ms`,\n            \"--gooey-gx\": initial.x,\n            \"--gooey-gy\": initial.y,\n            ...style,\n          } as CSSProperties\n        }\n      >\n        <svg aria-hidden=\"true\" className=\"absolute size-0\">\n          <defs>\n            <filter id={filterId} x=\"-100%\" y=\"-100%\" width=\"300%\" height=\"300%\">\n              <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" />\n              <feColorMatrix\n                in=\"blur\"\n                type=\"matrix\"\n                values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -10\"\n                result=\"goo\"\n              />\n              <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n            </filter>\n          </defs>\n        </svg>\n        <div\n          aria-hidden=\"true\"\n          data-slot=\"gooey-popover-goo\"\n          className=\"pointer-events-none absolute inset-0\"\n          style={{ filter: `url(#${filterId})` }}\n        >\n          <div className={cn(\"absolute rounded-full\", tones)} style={atTrigger} />\n          <div\n            data-slot=\"gooey-popover-shape\"\n            className={cn(\"absolute\", tones)}\n            style={{ \"--gooey-radius\": \"0px\" } as CSSProperties}\n          />\n        </div>\n        <div\n          aria-hidden=\"true\"\n          data-slot=\"gooey-popover-shape\"\n          className={cn(\"pointer-events-none absolute\", tones)}\n          style={{ \"--gooey-radius\": \"1.125rem\" } as CSSProperties}\n        />\n        <div\n          aria-hidden=\"true\"\n          data-slot=\"gooey-popover-ghost\"\n          className={cn(\n            \"pointer-events-none absolute flex items-center justify-center rounded-full\",\n            tones,\n          )}\n          style={atTrigger}\n        >\n          {trigger}\n        </div>\n        <div\n          data-slot=\"gooey-popover-body\"\n          className={cn(\"relative p-4\", tones, \"bg-transparent\")}\n        >\n          {children}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { gooeyPopoverVariants };\n"],"mappings":";;;;;;;;AAwCA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDf,MAAM,uBAAuB,IAAI,IAAI;CACnC,UAAU,EACR,MAAM;;EAEJ,UAAU;EACV,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,MAAM,WACR;AACF,CAAC;AAyBD,MAAM,OACJ,oBAAC,OAAD;CACE,SAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAa;CACb,eAAc;CACd,eAAY;CAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;AACzB,CAAA;;AAIP,SAAS,MAAM,MAAiC,QAAgB;CAC9D,QAAQ,MAAR;EACE,KAAK,UACH,OAAO;GAAE,GAAG;GAAO,GAAG,GAAG,OAAO,CAAC,MAAM,EAAE;EAAI;EAC/C,KAAK,QACH,OAAO;GAAE,GAAG,eAAe,OAAO,MAAM,EAAE;GAAM,GAAG;EAAM;EAC3D,KAAK,SACH,OAAO;GAAE,GAAG,GAAG,OAAO,CAAC,MAAM,EAAE;GAAK,GAAG;EAAM;EAC/C,SACE,OAAO;GAAE,GAAG;GAAO,GAAG,eAAe,OAAO,MAAM,EAAE;EAAK;CAC7D;AACF;;AAGA,SAAgB,aAAa,EAC3B,KACA,WACA,OACA,UACA,UAAU,MACV,cACA,cAAc,IACd,MAAM,UACN,cAAc,OACd,cACA,eAAe,KACf,WAAW,KACX,OAAO,OACP,aAAa,IACb,MACA,kBACA,GAAG,SACiB;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,OAAO,YAAY;CACzB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,aAAa,OAA8B,IAAI;CACrD,MAAM,WAAW,aAAa,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAEtD,MAAM,WAAW,SAAkB;EACjC,IAAI,aAAa,KAAA,GAAW,gBAAgB,IAAI;EAChD,eAAe,IAAI;CACrB;CAEA,MAAM,gBAAgB,aACnB,SAAgC;EAC/B,WAAW,UAAU;EACrB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAGA,sBAAsB;EACpB,IAAI,CAAC,MAAM;EACX,IAAI,SAAS;EACb,IAAI,SAAS;EACb,MAAM,gBAAgB;GACpB,MAAM,UAAU,WAAW;GAC3B,MAAM,SAAS,WAAW;GAC1B,IAAI,WAAW,QAAQ;IACrB,MAAM,IAAI,QAAQ,sBAAsB;IACxC,MAAM,IAAI,OAAO,sBAAsB;IACvC,QAAQ,MAAM,YAAY,aAAa,GAAG,OAAO,EAAE,OAAO,EAAE,QAAQ,IAAI,EAAE,IAAI,EAAE,GAAG;IACnF,QAAQ,MAAM,YAAY,aAAa,GAAG,OAAO,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE,GAAG,EAAE,GAAG;GACpF;GAEA,IAAI,EAAE,SAAS,GAAG,SAAS,sBAAsB,OAAO;EAC1D;EACA,QAAQ;EACR,aAAa,qBAAqB,MAAM;CAC1C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,qBAAqB,EAAE,KAAK,CAAC;CAC3C,MAAM,UAAU,MAAM,MAAM,aAAa,cAAc,CAAC;CACxD,MAAM,YAA2B;EAC/B,MAAM,0CAA0C,OAAO,cAAc,CAAC,EAAE;EACxE,KAAK,0CAA0C,OAAO,cAAc,CAAC,EAAE;EACvE,OAAO;EACP,QAAQ;CACV;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA;GACE,oBAAC,SAAD;IAAO,MAAK;IAAsB,YAAW;IAC1C,UAAA;GACI,CAAA;GACP,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,oBAAC,UAAD;KACE,KAAK;KACL,MAAK;KACL,cAAY;KACZ,aAAU;KACV,WAAW,GACT,6IACA,OACA,WACA,gBACF;KACA,OAAO;MAAE,OAAO;MAAa,QAAQ;KAAY;KAEhD,UAAA;IACK,CAAA;GACM,CAAA;GAChB,qBAAC,gBAAD;IACE,KAAK;IACC;IACM;IACZ,cAAY,MAAM,qBAAqB,KAAA,IAAY;IACnD,GAAI;IACJ,aAAU;IACV,WAAW,GACT,yFACA,SACF;IACA,OACE;KACE,OAAO;KACP,gBAAgB,GAAG,OAAO,WAAW,EAAE;KACvC,iBAAiB,GAAG,OAAO,QAAQ,EAAE;KACrC,cAAc,QAAQ;KACtB,cAAc,QAAQ;KACtB,GAAG;IACL;IAnBJ,UAAA;KAsBE,oBAAC,OAAD;MAAK,eAAY;MAAO,WAAU;MAChC,UAAA,oBAAC,QAAD,EAAA,UACE,qBAAC,UAAD;OAAQ,IAAI;OAAU,GAAE;OAAQ,GAAE;OAAQ,OAAM;OAAO,QAAO;OAA9D,UAAA;QACE,oBAAC,kBAAD;SAAgB,IAAG;SAAgB,cAAa;SAAK,QAAO;QAAQ,CAAA;QACpE,oBAAC,iBAAD;SACE,IAAG;SACH,MAAK;SACL,QAAO;SACP,QAAO;QACR,CAAA;QACD,oBAAC,eAAD;SAAa,IAAG;SAAgB,KAAI;SAAM,UAAS;QAAQ,CAAA;OACrD;MACJ,CAAA,EAAA,CAAA;KACH,CAAA;KACL,qBAAC,OAAD;MACE,eAAY;MACZ,aAAU;MACV,WAAU;MACV,OAAO,EAAE,QAAQ,QAAQ,SAAS,GAAG;MAJvC,UAAA,CAME,oBAAC,OAAD;OAAK,WAAW,GAAG,yBAAyB,KAAK;OAAG,OAAO;MAAY,CAAA,GACvE,oBAAC,OAAD;OACE,aAAU;OACV,WAAW,GAAG,YAAY,KAAK;OAC/B,OAAO,EAAE,kBAAkB,MAAM;MAClC,CAAA,CACE;;KACL,oBAAC,OAAD;MACE,eAAY;MACZ,aAAU;MACV,WAAW,GAAG,gCAAgC,KAAK;MACnD,OAAO,EAAE,kBAAkB,WAAW;KACvC,CAAA;KACD,oBAAC,OAAD;MACE,eAAY;MACZ,aAAU;MACV,WAAW,GACT,8EACA,KACF;MACA,OAAO;MAEN,UAAA;KACE,CAAA;KACL,oBAAC,OAAD;MACE,aAAU;MACV,WAAW,GAAG,gBAAgB,OAAO,gBAAgB;MAEpD;KACE,CAAA;IACS;;EACT;;AAEb"}

package/dist/components/gooey-popover/index.d.ts

@@ -0,0 +1,2 @@
+import { GooeyPopover, GooeyPopoverProps, gooeyPopoverVariants } from "./gooey-popover.js";
+export { GooeyPopover, type GooeyPopoverProps, gooeyPopoverVariants };

package/dist/components/gooey-popover/index.js

@@ -0,0 +1,2 @@
+import { GooeyPopover, gooeyPopoverVariants } from "./gooey-popover.js";
+export { GooeyPopover, gooeyPopoverVariants };

package/dist/components/gooey-popover/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/gooey-popover/meta.ts
+const meta = defineMeta({
+	name: "gooey-popover",
+	title: "Gooey Popover",
+	description: "A round trigger whose popover pours out of it, melted together by an SVG goo filter.",
+	category: "overlay",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["popover"],
+	files: ["gooey-popover.tsx"],
+	a11y: "Built on Dowel's Popover (Radix): the icon-only trigger is named by `triggerLabel` and exposes aria-expanded; the content is a role=\"dialog\" named by `triggerLabel` unless given aria-label or aria-labelledby. Opens from pointer or keyboard, moves focus into the content, closes on Escape or an outside press, and returns focus to the trigger. The blob, goo layer and the copy of the trigger icon drawn over it are aria-hidden and ignore the pointer. Under reduced motion the goo layer is dropped and the panel appears in place."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/gooey-popover/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/gooey-popover/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"gooey-popover\",\n  title: \"Gooey Popover\",\n  description:\n    \"A round trigger whose popover pours out of it, melted together by an SVG goo filter.\",\n  category: \"overlay\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"popover\"],\n  files: [\"gooey-popover.tsx\"],\n  a11y:\n    \"Built on Dowel's Popover (Radix): the icon-only trigger is named by `triggerLabel` and exposes \" +\n    'aria-expanded; the content is a role=\"dialog\" named by `triggerLabel` unless given aria-label or ' +\n    \"aria-labelledby. Opens from pointer or keyboard, moves focus into the content, closes on Escape or an \" +\n    \"outside press, and returns focus to the trigger. The blob, goo layer and the copy of the trigger icon \" +\n    \"drawn over it are aria-hidden and ignore the pointer. Under reduced motion the goo layer is dropped and \" +\n    \"the panel appears in place.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,SAAS;CAChC,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAMJ,CAAC"}

package/dist/components/gradient-orb/gradient-orb.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/gradient-orb/gradient-orb.d.ts
+type GradientOrbState = "idle" | "listening" | "thinking" | "streaming" | "speaking" | "done" | "error";
+interface GradientOrbColors {
+  /** The field behind the mesh, and the dot screen over it. */
+  bg?: string;
+  c1?: string;
+  c2?: string;
+  c3?: string;
+  /** Fourth mesh stop. More stops means fewer visible repeats per turn. */
+  c4?: string;
+  /** Specular sheen and the lit top edge. */
+  highlight?: string;
+}
+interface GradientOrbProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Diameter. A number is pixels; a string is any CSS length. */
+  size?: number | string;
+  /**
+   * Shared AI state: changes tempo, scale, saturation and bloom. Omit it for
+   * plain decoration at the base tempo.
+   */
+  state?: GradientOrbState;
+  /**
+   * Live audio level, 0–1. Tightens the blur and swells the disc while the
+   * state listens (`listening`, `streaming`, `speaking`, and — faintly —
+   * `thinking`). For a 60fps signal, skip the re-render: set the
+   * `--orb-amplitude` custom property on the element through its ref.
+   */
+  amplitude?: number;
+  /** Seconds per rotation of the mesh at the base tempo. */
+  duration?: number;
+  /** Any CSS colours — tokens by default. */
+  colors?: GradientOrbColors;
+}
+/** An animated gradient orb — the voice-assistant blob. Decorative. */
+declare function GradientOrb({ className, size, state, amplitude, duration, colors, style, ...props }: GradientOrbProps): import("react").JSX.Element;
+//#endregion
+export { GradientOrb, GradientOrbColors, GradientOrbProps, GradientOrbState };
+//# sourceMappingURL=gradient-orb.d.ts.map

package/dist/components/gradient-orb/gradient-orb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-orb.d.ts","names":[],"sources":["../../../src/components/gradient-orb/gradient-orb.tsx"],"mappings":";;KA8CY;UAuCK;;EAEf;EACA;EACA;EACA;;EAEA;;EAEA;;UAsDe,yBAAyB,KAAK;;EAE7C;;;;;EAKA,QAAQ;;;;;;;EAOR;;EAEA;;EAEA,SAAS;;;iBAIK,cACd,WACA,MACA,OACA,WACA,UACA,QACA,UACG,SACF,mCAAgB,IAAA"}

package/dist/components/gradient-orb/gradient-orb.js

@@ -0,0 +1,185 @@
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/gradient-orb/gradient-orb.tsx
+const PREFIX = "dowel-gradient-orb";
+/** A duration in milliseconds, scaled so reduced motion collapses it. */
+function scaled(ms) {
+	return `calc(${ms.toFixed(0)}ms * var(--motion-scale, 1))`;
+}
+const STYLES = `
+@property --${PREFIX}-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
+.${PREFIX}{position:relative;display:inline-block;flex-shrink:0;width:var(--orb-size);height:var(--orb-size)}
+.${PREFIX}[data-state=idle]{animation:${PREFIX}-breathe var(--orb-breathe) var(--ease-in-out-quint) infinite}
+.${PREFIX}[data-state=error]{animation:${PREFIX}-shake var(--orb-shake) var(--ease-in-out-quint) 1}
+.${PREFIX} [data-slot=gradient-orb-glow]{position:absolute;inset:-12%;border-radius:9999px;pointer-events:none;background:radial-gradient(circle at 50% 50%,var(--orb-c2) 0%,transparent 64%);filter:blur(calc(var(--orb-size) * .28));opacity:var(--orb-glow);transition:opacity var(--duration-slow) var(--ease-out-quint)}
+.${PREFIX} [data-slot=gradient-orb-disc]{position:relative;display:grid;width:100%;height:100%;overflow:hidden;border-radius:9999px;isolation:isolate;filter:saturate(var(--orb-saturation)) hue-rotate(var(--orb-hue));scale:calc(var(--orb-scale) + var(--orb-amplitude) * var(--orb-reactivity) * .12);transition:scale var(--duration-slow) var(--ease-out-quint),filter var(--duration-slow) var(--ease-out-quint)}
+.${PREFIX} [data-slot=gradient-orb-disc]::before,.${PREFIX} [data-slot=gradient-orb-disc]::after,.${PREFIX} [data-slot=gradient-orb-disc]>span{content:"";display:block;grid-area:1/1;width:100%;height:100%;border-radius:9999px}
+.${PREFIX} [data-slot=gradient-orb-disc]::before{background:conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 25% 70%,var(--orb-c3),transparent 20% 80%,var(--orb-c3)),conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 45% 75%,var(--orb-c2),transparent 30% 60%,var(--orb-c2)),conic-gradient(from calc(var(--${PREFIX}-angle) * -3) at 80% 20%,var(--orb-c1),transparent 40% 60%,var(--orb-c1)),conic-gradient(from calc(var(--${PREFIX}-angle) * 1.5) at 60% 35%,var(--orb-c4),transparent 25% 75%,var(--orb-c4)),conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 15% 5%,var(--orb-c2),transparent 10% 90%,var(--orb-c2)),conic-gradient(from calc(var(--${PREFIX}-angle) * 1) at 20% 80%,var(--orb-c1),transparent 10% 90%,var(--orb-c1)),conic-gradient(from calc(var(--${PREFIX}-angle) * -2) at 85% 10%,var(--orb-c3),transparent 20% 80%,var(--orb-c3));box-shadow:inset var(--orb-bg) 0 0 var(--orb-shadow) calc(var(--orb-shadow) * .2);filter:blur(calc(var(--orb-blur) * (1 - var(--orb-amplitude) * var(--orb-reactivity) * .45))) contrast(var(--orb-contrast)) saturate(1.4);animation:${PREFIX}-rotate var(--orb-period) linear infinite}
+.${PREFIX} [data-slot=gradient-orb-disc]::after{background-image:radial-gradient(circle at center,var(--orb-bg) var(--orb-dot),transparent var(--orb-dot));background-size:calc(var(--orb-dot) * 2) calc(var(--orb-dot) * 2);backdrop-filter:blur(calc(var(--orb-blur) * 2)) contrast(calc(var(--orb-contrast) * 2));mix-blend-mode:overlay;mask-image:radial-gradient(var(--orb-c1) var(--orb-mask),transparent 75%)}
+.${PREFIX}[data-tiny] [data-slot=gradient-orb-disc]::after{mask-image:none}
+.${PREFIX} [data-slot=gradient-orb-sheen]{background:radial-gradient(circle at 30% 24%,color-mix(in oklab,var(--orb-highlight) 32%,transparent),transparent 34%),radial-gradient(circle at 72% 80%,color-mix(in oklab,var(--orb-highlight) 7%,transparent),transparent 48%);mix-blend-mode:screen;animation:${PREFIX}-drift var(--orb-drift) var(--ease-in-out-quint) infinite alternate}
+.${PREFIX} [data-slot=gradient-orb-rim]{pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--orb-highlight) 16%,transparent),inset 0 var(--orb-rim) calc(var(--orb-rim) * 2) color-mix(in oklab,var(--orb-highlight) 22%,transparent),inset 0 calc(var(--orb-rim) * -1.2) calc(var(--orb-rim) * 2.4) color-mix(in oklab,var(--color-overlay) 40%,transparent)}
+@keyframes ${PREFIX}-rotate{to{--${PREFIX}-angle:360deg}}
+@keyframes ${PREFIX}-drift{0%{transform:translate(-6%,-4%) scale(1.05)}100%{transform:translate(7%,6%) scale(1.12)}}
+@keyframes ${PREFIX}-breathe{0%,100%{scale:1}50%{scale:1.035}}
+@keyframes ${PREFIX}-shake{0%,100%{translate:0}33%{translate:-3px}66%{translate:3px}}
+`;
+/** No state: plain decoration at its base tempo, with no bloom. */
+const AMBIENT = {
+	speed: 1,
+	scale: 1,
+	saturation: 1,
+	hue: 0,
+	glow: 0,
+	reactivity: .6
+};
+/** SmoothUI's shared AI state presets, as the orb reads them. */
+const STATES = {
+	idle: {
+		speed: .6,
+		scale: .94,
+		saturation: .75,
+		hue: 0,
+		glow: .15,
+		reactivity: 0
+	},
+	listening: {
+		speed: 1,
+		scale: 1.06,
+		saturation: 1.05,
+		hue: 0,
+		glow: .6,
+		reactivity: 1
+	},
+	thinking: {
+		speed: 2.4,
+		scale: 1,
+		saturation: 1,
+		hue: 18,
+		glow: .35,
+		reactivity: .15
+	},
+	streaming: {
+		speed: 1.4,
+		scale: 1.02,
+		saturation: 1,
+		hue: -10,
+		glow: .45,
+		reactivity: .6
+	},
+	speaking: {
+		speed: 1.4,
+		scale: 1.02,
+		saturation: 1,
+		hue: -10,
+		glow: .45,
+		reactivity: .6
+	},
+	done: {
+		speed: .8,
+		scale: 1.1,
+		saturation: 1,
+		hue: 0,
+		glow: .7,
+		reactivity: 0
+	},
+	error: {
+		speed: 1,
+		scale: .96,
+		saturation: .3,
+		hue: 0,
+		glow: .25,
+		reactivity: 0
+	}
+};
+/** Theme tokens, so the orb follows the palette and dark mode. */
+const DEFAULT_COLORS = {
+	bg: "color-mix(in oklab, var(--color-primary) 12%, var(--color-background))",
+	c1: "var(--color-primary)",
+	c2: "var(--color-info)",
+	c3: "color-mix(in oklab, var(--color-primary) 55%, var(--color-info))",
+	c4: "color-mix(in oklab, var(--color-info) 60%, var(--color-success))",
+	highlight: "var(--color-info)"
+};
+/**
+* Size-dependent tuning. At 24px the large-orb blur and dot screen turn it to
+* mud, so small sizes get less of each — exact when `size` is a number.
+*/
+function geometry(size) {
+	if (typeof size === "string") return {
+		"--orb-blur": "max(calc(var(--orb-size) * .015), 4px)",
+		"--orb-contrast": "1.5",
+		"--orb-dot": "max(calc(var(--orb-size) * .008), .1px)",
+		"--orb-shadow": "max(calc(var(--orb-size) * .008), 2px)",
+		"--orb-mask": "25%",
+		"--orb-rim": "max(calc(var(--orb-size) * .06), 1.5px)",
+		tiny: false
+	};
+	const small = size < 50;
+	const contrast = small ? Math.max(size * .004, 1.2) : Math.max(size * .008, 1.5);
+	const px = (value) => `${value.toFixed(2)}px`;
+	return {
+		"--orb-blur": px(small ? Math.max(size * .008, 1) : Math.max(size * .015, 4)),
+		"--orb-contrast": (size < 30 ? 1.1 : small ? Math.max(contrast * 1.2, 1.3) : contrast).toFixed(3),
+		"--orb-dot": px(small ? Math.max(size * .004, .05) : Math.max(size * .008, .1)),
+		"--orb-shadow": px(small ? Math.max(size * .004, .5) : Math.max(size * .008, 2)),
+		"--orb-mask": size < 30 ? "0%" : small ? "5%" : size < 100 ? "15%" : "25%",
+		"--orb-rim": px(Math.max(size * .06, 1.5)),
+		tiny: size < 30
+	};
+}
+/** An animated gradient orb — the voice-assistant blob. Decorative. */
+function GradientOrb({ className, size = 192, state, amplitude = 0, duration = 20, colors, style, ...props }) {
+	const preset = state ? STATES[state] : AMBIENT;
+	const palette = {
+		...DEFAULT_COLORS,
+		...colors
+	};
+	const { tiny, ...tuning } = geometry(size);
+	const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+	const variables = {
+		"--orb-size": typeof size === "number" ? `${String(size)}px` : size,
+		"--orb-bg": palette.bg,
+		"--orb-c1": palette.c1,
+		"--orb-c2": palette.c2,
+		"--orb-c3": palette.c3,
+		"--orb-c4": palette.c4,
+		"--orb-highlight": palette.highlight,
+		"--orb-period": scaled(duration * 1e3 / preset.speed),
+		"--orb-drift": scaled(12 / (1 + preset.speed) * 2 * 1e3),
+		"--orb-breathe": scaled(5500),
+		"--orb-shake": scaled(180),
+		"--orb-scale": String(preset.scale),
+		"--orb-saturation": String(preset.saturation),
+		"--orb-hue": `${String(preset.hue)}deg`,
+		"--orb-glow": String(preset.glow),
+		"--orb-reactivity": String(preset.reactivity),
+		"--orb-amplitude": String(Math.min(1, Math.max(0, amplitude))),
+		...tuning
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("div", {
+		"data-slot": "gradient-orb",
+		"data-state": state,
+		"data-tiny": tiny ? "" : void 0,
+		role: named ? "img" : void 0,
+		"aria-hidden": named ? void 0 : true,
+		className: cn(PREFIX, className),
+		style: {
+			...variables,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { "data-slot": "gradient-orb-glow" }), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "gradient-orb-disc",
+			children: [/* @__PURE__ */ jsx("span", { "data-slot": "gradient-orb-sheen" }), /* @__PURE__ */ jsx("span", { "data-slot": "gradient-orb-rim" })]
+		})]
+	})] });
+}
+//#endregion
+export { GradientOrb };
+
+//# sourceMappingURL=gradient-orb.js.map

package/dist/components/gradient-orb/gradient-orb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-orb.js","names":[],"sources":["../../../src/components/gradient-orb/gradient-orb.tsx"],"sourcesContent":["// Ported from SmoothUI Siri Orb (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A mesh of rotating conic gradients, blurred and contrast-boosted into a\n * glowing orb, with a dot screen, a drifting specular sheen and a lit rim on\n * top.\n *\n * All of it is CSS. The rotation animates a registered custom property\n * (`@property`), so the gradients turn without the element turning — nothing\n * here needs JavaScript per frame, and the component renders on the server.\n *\n * It is decoration. It is aria-hidden unless named, carries no\n * data-motion=\"indicator\", and under reduced motion the global blanket stops\n * every loop, leaving the settled first frame. An orb that is meant to report\n * that an assistant is busy should sit beside a text status, never replace one.\n */\n\nconst PREFIX = \"dowel-gradient-orb\";\n\n/** A duration in milliseconds, scaled so reduced motion collapses it. */\nfunction scaled(ms: number): string {\n  return `calc(${ms.toFixed(0)}ms * var(--motion-scale, 1))`;\n}\n\nconst STYLES = `\n@property --${PREFIX}-angle{syntax:\"<angle>\";inherits:false;initial-value:0deg}\n.${PREFIX}{position:relative;display:inline-block;flex-shrink:0;width:var(--orb-size);height:var(--orb-size)}\n.${PREFIX}[data-state=idle]{animation:${PREFIX}-breathe var(--orb-breathe) var(--ease-in-out-quint) infinite}\n.${PREFIX}[data-state=error]{animation:${PREFIX}-shake var(--orb-shake) var(--ease-in-out-quint) 1}\n.${PREFIX} [data-slot=gradient-orb-glow]{position:absolute;inset:-12%;border-radius:9999px;pointer-events:none;background:radial-gradient(circle at 50% 50%,var(--orb-c2) 0%,transparent 64%);filter:blur(calc(var(--orb-size) * .28));opacity:var(--orb-glow);transition:opacity var(--duration-slow) var(--ease-out-quint)}\n.${PREFIX} [data-slot=gradient-orb-disc]{position:relative;display:grid;width:100%;height:100%;overflow:hidden;border-radius:9999px;isolation:isolate;filter:saturate(var(--orb-saturation)) hue-rotate(var(--orb-hue));scale:calc(var(--orb-scale) + var(--orb-amplitude) * var(--orb-reactivity) * .12);transition:scale var(--duration-slow) var(--ease-out-quint),filter var(--duration-slow) var(--ease-out-quint)}\n.${PREFIX} [data-slot=gradient-orb-disc]::before,.${PREFIX} [data-slot=gradient-orb-disc]::after,.${PREFIX} [data-slot=gradient-orb-disc]>span{content:\"\";display:block;grid-area:1/1;width:100%;height:100%;border-radius:9999px}\n.${PREFIX} [data-slot=gradient-orb-disc]::before{background:conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 25% 70%,var(--orb-c3),transparent 20% 80%,var(--orb-c3)),conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 45% 75%,var(--orb-c2),transparent 30% 60%,var(--orb-c2)),conic-gradient(from calc(var(--${PREFIX}-angle) * -3) at 80% 20%,var(--orb-c1),transparent 40% 60%,var(--orb-c1)),conic-gradient(from calc(var(--${PREFIX}-angle) * 1.5) at 60% 35%,var(--orb-c4),transparent 25% 75%,var(--orb-c4)),conic-gradient(from calc(var(--${PREFIX}-angle) * 2) at 15% 5%,var(--orb-c2),transparent 10% 90%,var(--orb-c2)),conic-gradient(from calc(var(--${PREFIX}-angle) * 1) at 20% 80%,var(--orb-c1),transparent 10% 90%,var(--orb-c1)),conic-gradient(from calc(var(--${PREFIX}-angle) * -2) at 85% 10%,var(--orb-c3),transparent 20% 80%,var(--orb-c3));box-shadow:inset var(--orb-bg) 0 0 var(--orb-shadow) calc(var(--orb-shadow) * .2);filter:blur(calc(var(--orb-blur) * (1 - var(--orb-amplitude) * var(--orb-reactivity) * .45))) contrast(var(--orb-contrast)) saturate(1.4);animation:${PREFIX}-rotate var(--orb-period) linear infinite}\n.${PREFIX} [data-slot=gradient-orb-disc]::after{background-image:radial-gradient(circle at center,var(--orb-bg) var(--orb-dot),transparent var(--orb-dot));background-size:calc(var(--orb-dot) * 2) calc(var(--orb-dot) * 2);backdrop-filter:blur(calc(var(--orb-blur) * 2)) contrast(calc(var(--orb-contrast) * 2));mix-blend-mode:overlay;mask-image:radial-gradient(var(--orb-c1) var(--orb-mask),transparent 75%)}\n.${PREFIX}[data-tiny] [data-slot=gradient-orb-disc]::after{mask-image:none}\n.${PREFIX} [data-slot=gradient-orb-sheen]{background:radial-gradient(circle at 30% 24%,color-mix(in oklab,var(--orb-highlight) 32%,transparent),transparent 34%),radial-gradient(circle at 72% 80%,color-mix(in oklab,var(--orb-highlight) 7%,transparent),transparent 48%);mix-blend-mode:screen;animation:${PREFIX}-drift var(--orb-drift) var(--ease-in-out-quint) infinite alternate}\n.${PREFIX} [data-slot=gradient-orb-rim]{pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--orb-highlight) 16%,transparent),inset 0 var(--orb-rim) calc(var(--orb-rim) * 2) color-mix(in oklab,var(--orb-highlight) 22%,transparent),inset 0 calc(var(--orb-rim) * -1.2) calc(var(--orb-rim) * 2.4) color-mix(in oklab,var(--color-overlay) 40%,transparent)}\n@keyframes ${PREFIX}-rotate{to{--${PREFIX}-angle:360deg}}\n@keyframes ${PREFIX}-drift{0%{transform:translate(-6%,-4%) scale(1.05)}100%{transform:translate(7%,6%) scale(1.12)}}\n@keyframes ${PREFIX}-breathe{0%,100%{scale:1}50%{scale:1.035}}\n@keyframes ${PREFIX}-shake{0%,100%{translate:0}33%{translate:-3px}66%{translate:3px}}\n`;\n\nexport type GradientOrbState =\n  \"idle\" | \"listening\" | \"thinking\" | \"streaming\" | \"speaking\" | \"done\" | \"error\";\n\ninterface StatePreset {\n  /** Loop speed multiplier. */\n  speed: number;\n  /** Resting scale of the disc. Thinking stays at 1 so layout stays calm. */\n  scale: number;\n  saturation: number;\n  /** Degrees of hue rotation, a mood shift rather than a new palette. */\n  hue: number;\n  /** Bloom opacity, 0–1. */\n  glow: number;\n  /** How much `amplitude` reaches the surface. */\n  reactivity: number;\n}\n\n/** No state: plain decoration at its base tempo, with no bloom. */\nconst AMBIENT: StatePreset = {\n  speed: 1,\n  scale: 1,\n  saturation: 1,\n  hue: 0,\n  glow: 0,\n  reactivity: 0.6,\n};\n\n/** SmoothUI's shared AI state presets, as the orb reads them. */\nconst STATES: Record<GradientOrbState, StatePreset> = {\n  idle: { speed: 0.6, scale: 0.94, saturation: 0.75, hue: 0, glow: 0.15, reactivity: 0 },\n  listening: { speed: 1, scale: 1.06, saturation: 1.05, hue: 0, glow: 0.6, reactivity: 1 },\n  thinking: { speed: 2.4, scale: 1, saturation: 1, hue: 18, glow: 0.35, reactivity: 0.15 },\n  streaming: { speed: 1.4, scale: 1.02, saturation: 1, hue: -10, glow: 0.45, reactivity: 0.6 },\n  speaking: { speed: 1.4, scale: 1.02, saturation: 1, hue: -10, glow: 0.45, reactivity: 0.6 },\n  done: { speed: 0.8, scale: 1.1, saturation: 1, hue: 0, glow: 0.7, reactivity: 0 },\n  // Error desaturates rather than growing: a state change, not an alarm.\n  error: { speed: 1, scale: 0.96, saturation: 0.3, hue: 0, glow: 0.25, reactivity: 0 },\n};\n\nexport interface GradientOrbColors {\n  /** The field behind the mesh, and the dot screen over it. */\n  bg?: string;\n  c1?: string;\n  c2?: string;\n  c3?: string;\n  /** Fourth mesh stop. More stops means fewer visible repeats per turn. */\n  c4?: string;\n  /** Specular sheen and the lit top edge. */\n  highlight?: string;\n}\n\n/** Theme tokens, so the orb follows the palette and dark mode. */\nconst DEFAULT_COLORS: Required<GradientOrbColors> = {\n  bg: \"color-mix(in oklab, var(--color-primary) 12%, var(--color-background))\",\n  c1: \"var(--color-primary)\",\n  c2: \"var(--color-info)\",\n  c3: \"color-mix(in oklab, var(--color-primary) 55%, var(--color-info))\",\n  c4: \"color-mix(in oklab, var(--color-info) 60%, var(--color-success))\",\n  // Screen-blended, so any hue lightens: a light token would vanish in dark mode.\n  highlight: \"var(--color-info)\",\n};\n\ntype Geometry = Record<\n  \"--orb-blur\" | \"--orb-contrast\" | \"--orb-dot\" | \"--orb-shadow\" | \"--orb-mask\" | \"--orb-rim\",\n  string\n> & { tiny: boolean };\n\n/**\n * Size-dependent tuning. At 24px the large-orb blur and dot screen turn it to\n * mud, so small sizes get less of each — exact when `size` is a number.\n */\nfunction geometry(size: number | string): Geometry {\n  if (typeof size === \"string\") {\n    return {\n      \"--orb-blur\": \"max(calc(var(--orb-size) * .015), 4px)\",\n      \"--orb-contrast\": \"1.5\",\n      \"--orb-dot\": \"max(calc(var(--orb-size) * .008), .1px)\",\n      \"--orb-shadow\": \"max(calc(var(--orb-size) * .008), 2px)\",\n      \"--orb-mask\": \"25%\",\n      \"--orb-rim\": \"max(calc(var(--orb-size) * .06), 1.5px)\",\n      tiny: false,\n    };\n  }\n  const small = size < 50;\n  const contrast = small ? Math.max(size * 0.004, 1.2) : Math.max(size * 0.008, 1.5);\n  const px = (value: number) => `${value.toFixed(2)}px`;\n  return {\n    \"--orb-blur\": px(small ? Math.max(size * 0.008, 1) : Math.max(size * 0.015, 4)),\n    \"--orb-contrast\": (size < 30\n      ? 1.1\n      : small\n        ? Math.max(contrast * 1.2, 1.3)\n        : contrast\n    ).toFixed(3),\n    \"--orb-dot\": px(small ? Math.max(size * 0.004, 0.05) : Math.max(size * 0.008, 0.1)),\n    \"--orb-shadow\": px(small ? Math.max(size * 0.004, 0.5) : Math.max(size * 0.008, 2)),\n    \"--orb-mask\": size < 30 ? \"0%\" : small ? \"5%\" : size < 100 ? \"15%\" : \"25%\",\n    \"--orb-rim\": px(Math.max(size * 0.06, 1.5)),\n    tiny: size < 30,\n  };\n}\n\nexport interface GradientOrbProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** Diameter. A number is pixels; a string is any CSS length. */\n  size?: number | string;\n  /**\n   * Shared AI state: changes tempo, scale, saturation and bloom. Omit it for\n   * plain decoration at the base tempo.\n   */\n  state?: GradientOrbState;\n  /**\n   * Live audio level, 0–1. Tightens the blur and swells the disc while the\n   * state listens (`listening`, `streaming`, `speaking`, and — faintly —\n   * `thinking`). For a 60fps signal, skip the re-render: set the\n   * `--orb-amplitude` custom property on the element through its ref.\n   */\n  amplitude?: number;\n  /** Seconds per rotation of the mesh at the base tempo. */\n  duration?: number;\n  /** Any CSS colours — tokens by default. */\n  colors?: GradientOrbColors;\n}\n\n/** An animated gradient orb — the voice-assistant blob. Decorative. */\nexport function GradientOrb({\n  className,\n  size = 192,\n  state,\n  amplitude = 0,\n  duration = 20,\n  colors,\n  style,\n  ...props\n}: GradientOrbProps) {\n  const preset = state ? STATES[state] : AMBIENT;\n  const palette = { ...DEFAULT_COLORS, ...colors };\n  const { tiny, ...tuning } = geometry(size);\n  const named = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n\n  const variables = {\n    \"--orb-size\": typeof size === \"number\" ? `${String(size)}px` : size,\n    \"--orb-bg\": palette.bg,\n    \"--orb-c1\": palette.c1,\n    \"--orb-c2\": palette.c2,\n    \"--orb-c3\": palette.c3,\n    \"--orb-c4\": palette.c4,\n    \"--orb-highlight\": palette.highlight,\n    \"--orb-period\": scaled((duration * 1000) / preset.speed),\n    \"--orb-drift\": scaled((12 / (1 + preset.speed)) * 2 * 1000),\n    \"--orb-breathe\": scaled(5500),\n    \"--orb-shake\": scaled(180),\n    \"--orb-scale\": String(preset.scale),\n    \"--orb-saturation\": String(preset.saturation),\n    \"--orb-hue\": `${String(preset.hue)}deg`,\n    \"--orb-glow\": String(preset.glow),\n    \"--orb-reactivity\": String(preset.reactivity),\n    \"--orb-amplitude\": String(Math.min(1, Math.max(0, amplitude))),\n    ...tuning,\n  } as CSSProperties;\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"gradient-orb\"\n        data-state={state}\n        data-tiny={tiny ? \"\" : undefined}\n        role={named ? \"img\" : undefined}\n        aria-hidden={named ? undefined : true}\n        className={cn(PREFIX, className)}\n        style={{ ...variables, ...style }}\n        {...props}\n      >\n        <span data-slot=\"gradient-orb-glow\" />\n        <span data-slot=\"gradient-orb-disc\">\n          <span data-slot=\"gradient-orb-sheen\" />\n          <span data-slot=\"gradient-orb-rim\" />\n        </span>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;AAoBA,MAAM,SAAS;;AAGf,SAAS,OAAO,IAAoB;CAClC,OAAO,QAAQ,GAAG,QAAQ,CAAC,EAAE;AAC/B;AAEA,MAAM,SAAS;cACD,OAAO;GAClB,OAAO;GACP,OAAO,8BAA8B,OAAO;GAC5C,OAAO,+BAA+B,OAAO;GAC7C,OAAO;GACP,OAAO;GACP,OAAO,0CAA0C,OAAO,yCAAyC,OAAO;GACxG,OAAO,mFAAmF,OAAO,0GAA0G,OAAO,0GAA0G,OAAO,2GAA2G,OAAO,4GAA4G,OAAO,yGAAyG,OAAO,0GAA0G,OAAO,kTAAkT,OAAO;GAClkC,OAAO;GACP,OAAO;GACP,OAAO,oSAAoS,OAAO;GAClT,OAAO;aACG,OAAO,eAAe,OAAO;aAC7B,OAAO;aACP,OAAO;aACP,OAAO;;;AAqBpB,MAAM,UAAuB;CAC3B,OAAO;CACP,OAAO;CACP,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY;AACd;;AAGA,MAAM,SAAgD;CACpD,MAAM;EAAE,OAAO;EAAK,OAAO;EAAM,YAAY;EAAM,KAAK;EAAG,MAAM;EAAM,YAAY;CAAE;CACrF,WAAW;EAAE,OAAO;EAAG,OAAO;EAAM,YAAY;EAAM,KAAK;EAAG,MAAM;EAAK,YAAY;CAAE;CACvF,UAAU;EAAE,OAAO;EAAK,OAAO;EAAG,YAAY;EAAG,KAAK;EAAI,MAAM;EAAM,YAAY;CAAK;CACvF,WAAW;EAAE,OAAO;EAAK,OAAO;EAAM,YAAY;EAAG,KAAK;EAAK,MAAM;EAAM,YAAY;CAAI;CAC3F,UAAU;EAAE,OAAO;EAAK,OAAO;EAAM,YAAY;EAAG,KAAK;EAAK,MAAM;EAAM,YAAY;CAAI;CAC1F,MAAM;EAAE,OAAO;EAAK,OAAO;EAAK,YAAY;EAAG,KAAK;EAAG,MAAM;EAAK,YAAY;CAAE;CAEhF,OAAO;EAAE,OAAO;EAAG,OAAO;EAAM,YAAY;EAAK,KAAK;EAAG,MAAM;EAAM,YAAY;CAAE;AACrF;;AAeA,MAAM,iBAA8C;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,WAAW;AACb;;;;;AAWA,SAAS,SAAS,MAAiC;CACjD,IAAI,OAAO,SAAS,UAClB,OAAO;EACL,cAAc;EACd,kBAAkB;EAClB,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,aAAa;EACb,MAAM;CACR;CAEF,MAAM,QAAQ,OAAO;CACrB,MAAM,WAAW,QAAQ,KAAK,IAAI,OAAO,MAAO,GAAG,IAAI,KAAK,IAAI,OAAO,MAAO,GAAG;CACjF,MAAM,MAAM,UAAkB,GAAG,MAAM,QAAQ,CAAC,EAAE;CAClD,OAAO;EACL,cAAc,GAAG,QAAQ,KAAK,IAAI,OAAO,MAAO,CAAC,IAAI,KAAK,IAAI,OAAO,MAAO,CAAC,CAAC;EAC9E,mBAAmB,OAAO,KACtB,MACA,QACE,KAAK,IAAI,WAAW,KAAK,GAAG,IAC5B,SAAA,CACJ,QAAQ,CAAC;EACX,aAAa,GAAG,QAAQ,KAAK,IAAI,OAAO,MAAO,GAAI,IAAI,KAAK,IAAI,OAAO,MAAO,EAAG,CAAC;EAClF,gBAAgB,GAAG,QAAQ,KAAK,IAAI,OAAO,MAAO,EAAG,IAAI,KAAK,IAAI,OAAO,MAAO,CAAC,CAAC;EAClF,cAAc,OAAO,KAAK,OAAO,QAAQ,OAAO,OAAO,MAAM,QAAQ;EACrE,aAAa,GAAG,KAAK,IAAI,OAAO,KAAM,GAAG,CAAC;EAC1C,MAAM,OAAO;CACf;AACF;;AAwBA,SAAgB,YAAY,EAC1B,WACA,OAAO,KACP,OACA,YAAY,GACZ,WAAW,IACX,QACA,OACA,GAAG,SACgB;CACnB,MAAM,SAAS,QAAQ,OAAO,SAAS;CACvC,MAAM,UAAU;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC/C,MAAM,EAAE,MAAM,GAAG,WAAW,SAAS,IAAI;CACzC,MAAM,QAAQ,MAAM,iBAAiB,QAAQ,MAAM,sBAAsB;CAEzE,MAAM,YAAY;EAChB,cAAc,OAAO,SAAS,WAAW,GAAG,OAAO,IAAI,EAAE,MAAM;EAC/D,YAAY,QAAQ;EACpB,YAAY,QAAQ;EACpB,YAAY,QAAQ;EACpB,YAAY,QAAQ;EACpB,YAAY,QAAQ;EACpB,mBAAmB,QAAQ;EAC3B,gBAAgB,OAAQ,WAAW,MAAQ,OAAO,KAAK;EACvD,eAAe,OAAQ,MAAM,IAAI,OAAO,SAAU,IAAI,GAAI;EAC1D,iBAAiB,OAAO,IAAI;EAC5B,eAAe,OAAO,GAAG;EACzB,eAAe,OAAO,OAAO,KAAK;EAClC,oBAAoB,OAAO,OAAO,UAAU;EAC5C,aAAa,GAAG,OAAO,OAAO,GAAG,EAAE;EACnC,cAAc,OAAO,OAAO,IAAI;EAChC,oBAAoB,OAAO,OAAO,UAAU;EAC5C,mBAAmB,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC,CAAC;EAC7D,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW,OAAO,KAAK,KAAA;EACvB,MAAM,QAAQ,QAAQ,KAAA;EACtB,eAAa,QAAQ,KAAA,IAAY;EACjC,WAAW,GAAG,QAAQ,SAAS;EAC/B,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;EAChC,GAAI;EARN,UAAA,CAUE,oBAAC,QAAD,EAAM,aAAU,oBAAqB,CAAA,GACrC,qBAAC,QAAD;GAAM,aAAU;GAAhB,UAAA,CACE,oBAAC,QAAD,EAAM,aAAU,qBAAsB,CAAA,GACtC,oBAAC,QAAD,EAAM,aAAU,mBAAoB,CAAA,CAChC;EACH,CAAA,CAAA;CACL,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/components/gradient-orb/index.d.ts

@@ -0,0 +1,2 @@
+import { GradientOrb, GradientOrbColors, GradientOrbProps, GradientOrbState } from "./gradient-orb.js";
+export { GradientOrb, type GradientOrbColors, type GradientOrbProps, type GradientOrbState };

package/dist/components/gradient-orb/index.js

@@ -0,0 +1,2 @@
+import { GradientOrb } from "./gradient-orb.js";
+export { GradientOrb };

package/dist/components/gradient-orb/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/gradient-orb/meta.ts
+const meta = defineMeta({
+	name: "gradient-orb",
+	title: "Gradient Orb",
+	description: "An animated gradient orb — a rotating conic mesh with a dot screen, sheen and bloom — that can follow an AI state and a live audio level.",
+	category: "effects",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["gradient-orb.tsx"],
+	a11y: "Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role=\"img\". It never reports state on its own — pair it with a text status. Pure CSS; under reduced motion every loop stops and the orb shows its settled first frame."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/gradient-orb/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/gradient-orb/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"gradient-orb\",\n  title: \"Gradient Orb\",\n  description:\n    \"An animated gradient orb — a rotating conic mesh with a dot screen, sheen and bloom — that can follow an AI state and a live audio level.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"gradient-orb.tsx\"],\n  a11y:\n    'Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role=\"img\". It never ' +\n    \"reports state on its own — pair it with a text status. Pure CSS; under reduced motion every loop stops and \" +\n    \"the orb shows its settled first frame.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAGJ,CAAC"}

package/dist/components/grid-loader/grid-loader.d.ts

@@ -0,0 +1,224 @@
+import { VariantProps } from "class-variance-authority";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/grid-loader/grid-loader.d.ts
+/** SmoothUI's presets, as the nine cells of the 3×3 grid read row by row. */
+declare const PATTERNS: {
+  readonly "solo-center": "000010000";
+  readonly "solo-tl": "100000000";
+  readonly "solo-tr": "001000000";
+  readonly "solo-bl": "000000100";
+  readonly "solo-br": "000000001";
+  readonly "line-h-top": "111000000";
+  readonly "line-h-mid": "000111000";
+  readonly "line-h-bot": "000000111";
+  readonly "line-v-left": "100100100";
+  readonly "line-v-mid": "010010010";
+  readonly "line-v-right": "001001001";
+  readonly "line-diag-1": "100010001";
+  readonly "line-diag-2": "001010100";
+  readonly corners: "101000101";
+  readonly "plus-hollow": "010101010";
+  readonly "plus-full": "010111010";
+  readonly "l-tl": "110100000";
+  readonly "l-tr": "011001000";
+  readonly "l-bl": "000100110";
+  readonly "l-br": "000001011";
+  readonly "t-top": "111010000";
+  readonly "t-bot": "000010111";
+  readonly "t-left": "100110100";
+  readonly "t-right": "001011001";
+  readonly "duo-h": "000110000";
+  readonly "duo-v": "010010000";
+  readonly "duo-diag": "100010000";
+  readonly frame: "111101111";
+  readonly "sparse-1": "100001010";
+  readonly "sparse-2": "010100001";
+  readonly "wave-lr": "110110110";
+  readonly "wave-rl": "011011011";
+  readonly "wave-tb": "111111000";
+  readonly "wave-bt": "000111111";
+  readonly "diagonal-tl": "110110000";
+  readonly "diagonal-tr": "011011000";
+  readonly "diagonal-bl": "000110110";
+  readonly "diagonal-br": "000011011";
+  readonly checkerboard: "101010101";
+  readonly "stripes-h": "111000111";
+  readonly "stripes-v": "101101101";
+  readonly "spiral-cw": "111001001";
+  readonly "spiral-ccw": "111100100";
+  readonly snake: "110010000";
+  readonly "snake-rev": "000010011";
+  readonly "rain-rev": "000010010";
+  readonly waterfall: "110000000";
+  readonly chaos: "101010100";
+};
+type Pattern = keyof typeof PATTERNS;
+/**
+ * SmoothUI names that share a matrix with a canonical pattern. They are real
+ * variants (so every source name works) but render their canonical pattern.
+ */
+declare const ALIASES: {
+  readonly breathing: "solo-center";
+  readonly "ripple-in": "solo-center";
+  readonly "corners-only": "corners";
+  readonly "corners-sync": "corners";
+  readonly diamond: "plus-hollow";
+  readonly cross: "plus-full";
+  readonly heartbeat: "plus-full";
+  readonly "frame-sync": "frame";
+  readonly border: "frame";
+  readonly "ripple-out": "frame";
+  readonly sparkle: "checkerboard";
+  readonly "x-shape": "checkerboard";
+  readonly "rows-alt": "stripes-h";
+  readonly twinkle: "sparse-1";
+  readonly "sparse-3": "line-diag-2";
+  readonly "edge-cw": "line-h-top";
+  readonly rain: "duo-v";
+};
+type Alias = keyof typeof ALIASES;
+/** Each alias variant and the canonical pattern it renders. */
+declare const gridLoaderAliases: Readonly<Record<Alias, Pattern>>;
+/** SmoothUI's `speed` presets: one pulse, or one stagger pass, in seconds. */
+declare const SPEEDS: {
+  readonly slow: 1.5;
+  readonly normal: 0.8;
+  readonly fast: 0.4;
+};
+type GridLoaderMode = "pulse" | "stagger";
+type GridLoaderSpeed = keyof typeof SPEEDS;
+interface RenderOptions {
+  /** Seconds per cycle, from `speed`. */
+  cycle: number;
+  mode: GridLoaderMode;
+}
+type Variant = {
+  /** Root layout, inline: the hoisted stylesheet outranks Tailwind utilities. */
+  root: CSSProperties;
+  render: (options: RenderOptions) => ReactNode;
+};
+declare const VARIANTS: {
+  sequence: {
+    root: {
+      width: string;
+      height: string;
+    };
+    render: (options: RenderOptions) => import("react").JSX.Element[];
+  };
+  thinking: {
+    root: {
+      gridTemplateColumns: string;
+      gap: string;
+    };
+    render: () => ReactNode[];
+  };
+  matrix: {
+    root: {
+      gridTemplateColumns: string;
+      gap: string;
+    };
+    render: () => ReactNode[];
+  };
+  breathing: Variant;
+  "ripple-in": Variant;
+  "corners-only": Variant;
+  "corners-sync": Variant;
+  diamond: Variant;
+  cross: Variant;
+  heartbeat: Variant;
+  "frame-sync": Variant;
+  border: Variant;
+  "ripple-out": Variant;
+  sparkle: Variant;
+  "x-shape": Variant;
+  "rows-alt": Variant;
+  twinkle: Variant;
+  "sparse-3": Variant;
+  "edge-cw": Variant;
+  rain: Variant;
+  "solo-center": Variant;
+  "solo-tl": Variant;
+  "solo-tr": Variant;
+  "solo-bl": Variant;
+  "solo-br": Variant;
+  "line-h-top": Variant;
+  "line-h-mid": Variant;
+  "line-h-bot": Variant;
+  "line-v-left": Variant;
+  "line-v-mid": Variant;
+  "line-v-right": Variant;
+  "line-diag-1": Variant;
+  "line-diag-2": Variant;
+  corners: Variant;
+  "plus-hollow": Variant;
+  "plus-full": Variant;
+  "l-tl": Variant;
+  "l-tr": Variant;
+  "l-bl": Variant;
+  "l-br": Variant;
+  "t-top": Variant;
+  "t-bot": Variant;
+  "t-left": Variant;
+  "t-right": Variant;
+  "duo-h": Variant;
+  "duo-v": Variant;
+  "duo-diag": Variant;
+  frame: Variant;
+  "sparse-1": Variant;
+  "sparse-2": Variant;
+  "wave-lr": Variant;
+  "wave-rl": Variant;
+  "wave-tb": Variant;
+  "wave-bt": Variant;
+  "diagonal-tl": Variant;
+  "diagonal-tr": Variant;
+  "diagonal-bl": Variant;
+  "diagonal-br": Variant;
+  checkerboard: Variant;
+  "stripes-h": Variant;
+  "stripes-v": Variant;
+  "spiral-cw": Variant;
+  "spiral-ccw": Variant;
+  snake: Variant;
+  "snake-rev": Variant;
+  "rain-rev": Variant;
+  waterfall: Variant;
+  chaos: Variant;
+};
+type GridLoaderVariant = keyof typeof VARIANTS;
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+declare const gridLoaderVariantNames: GridLoaderVariant[];
+declare const gridLoaderVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GridLoaderProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof gridLoaderVariants> {
+  /** Which pattern to play. */
+  variant?: GridLoaderVariant;
+  /**
+   * How the lit cells of a pattern move: together (`pulse`) or one by one in
+   * reading order (`stagger`). `sequence`, `thinking` and `matrix` have their
+   * own motion and ignore it.
+   */
+  mode?: GridLoaderMode;
+  /**
+   * Cycle length: `slow` 1.5s, `normal` 0.8s, `fast` 0.4s — still scaled by the
+   * indicator motion scale. `thinking` and `matrix` keep their own tempo.
+   */
+  speed?: GridLoaderSpeed;
+  /** Circular cells instead of rounded squares. */
+  rounded?: boolean;
+  /** A soft halo around each lit cell. Reads best on a dark surface. */
+  glow?: boolean;
+  /**
+   * Announced to assistive technology while the loader is visible.
+   *
+   * Omit it when the loader sits inside something that already reports its
+   * busy state — announcing twice is worse than not announcing at all.
+   */
+  label?: string;
+}
+/** An indeterminate loading indicator made of a grid of cells, in 68 variants. */
+declare function GridLoader({ className, size, variant, mode, speed, rounded, glow, label, style, ...props }: GridLoaderProps): import("react").JSX.Element;
+//#endregion
+export { GridLoader, GridLoaderMode, GridLoaderProps, GridLoaderSpeed, GridLoaderVariant, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants };
+//# sourceMappingURL=grid-loader.d.ts.map

package/dist/components/grid-loader/grid-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-loader.d.ts","names":[],"sources":["../../../src/components/grid-loader/grid-loader.tsx"],"mappings":";;;;cA4DM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmDD,uBAAuB;;;;;cAMtB;;;;;;;;;;;;;;;;;;;KAoBD,qBAAqB;;cAGb,mBAAmB,SAAS,OAAO,OAAO;;cAGjD;;;;;KAEM;KACA,+BAA+B;UAEjC;;EAER;EACA,MAAM;;KAGH;;EAEH,MAAM;EACN,SAAS,SAAS,kBAAkB;;cA2DhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDM,iCAAiC;;cAGhC,wBAAkD;cAEzD,qBAAkB;;6CAYtB;UAEe,wBAEb,KAAK,4CACL,oBAAoB;;EAEtB,UAAU;;;;;;EAMV,OAAO;;;;;EAKP,QAAQ;;EAER;;EAEA;;;;;;;EAOA;;;iBAIc,aACd,WACA,MACA,SACA,MACA,OACA,SACA,MACA,OACA,UACG,SACF,kCAAe,IAAA"}