@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/styles/theme.css

@@ -1,65 +1,62 @@
-/* Load alongside Tailwind v4 and at least one complete skin theme — nothing here paints without a pack's token values. */
-
-@custom-variant dark (&:is(.dark *));
-
-/* biome-ignore-start lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
-/* Motion collapses under OS preference; !important wins over skin-scoped tokens and editor duration overrides. */
-@media (prefers-reduced-motion: reduce) {
-  :where(:root),
-  [data-skin] {
-    --duration-fast: 0ms !important;
-    --duration-base: 0ms !important;
-    --duration-slow: 0ms !important;
-  }
-
-  :where([data-skin], [data-skin] *, [data-skin]::before, [data-skin]::after, [data-skin] *::before, [data-skin] *::after) {
-    scroll-behavior: auto !important;
-    transition-delay: 0ms !important;
-    transition-duration: 0ms !important;
-    animation-delay: 0ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
-
-/* Explicit motion kill-switch, same collapse as above but opt-in via attribute, not OS preference.
-   Skin's `motion: "reduced"` flag or the theme editor toggle stamps [data-motion="reduced"] on <html>;
-   also targets skin-scoped portals directly since their [data-skin] tokens would beat inherited root values. */
-:root[data-motion="reduced"],
-[data-motion="reduced"][data-skin],
-[data-motion="reduced"] [data-skin] {
-  --duration-fast: 0ms !important;
-  --duration-base: 0ms !important;
-  --duration-slow: 0ms !important;
-}
-
-:where(
-  [data-motion="reduced"],
-  [data-motion="reduced"] *,
-  [data-motion="reduced"]::before,
-  [data-motion="reduced"]::after,
-  [data-motion="reduced"] *::before,
-  [data-motion="reduced"] *::after
-) {
-  scroll-behavior: auto !important;
-  transition-delay: 0ms !important;
-  transition-duration: 0ms !important;
-  animation-delay: 0ms !important;
-  animation-duration: 1ms !important;
-  animation-iteration-count: 1 !important;
-}
-/* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
-
-/* Skin-root defaults at zero specificity — any pack declaration (theme.css or skin.css) wins.
-   First family: derived-tier contract tokens, re-valued by a pack only when it diverges.
-   Second family: core mechanics (math constants + aliases) that live OFF the contract entirely. */
-:where([data-skin]) {
-  /* font roles default to the skin's face; re-value one to give headings their own. */
+:where(:root, [data-skin]) {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --primary: oklch(0.2046 0 0);
+  --primary-foreground: oklch(0.9851 0 0);
+  --foreground: oklch(0.1448 0 0);
+  --secondary-foreground: oklch(0.1448 0 0);
+  --accent-foreground: oklch(0.1448 0 0);
+
+  --background: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1448 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1448 0 0);
+  --canvas: oklch(1 0 0);
+
+  --radius: 0px;
+  --shadow-size: 0;
+  --scroll-fade-size: 0px;
+  --backdrop-blur-popover: 0px;
+  --backdrop-blur-overlay: 0px;
+
+  --control-h: 36px;
+  --popover-opacity: 1;
+  --overlay-opacity: 0.2;
+  --padding-x: 16px;
+  --padding-y: 10px;
+
+  --muted: oklch(0.9425 0 0);
+  --muted-foreground: oklch(0.52 0 0);
+  --secondary: oklch(0.9425 0 0);
+  --accent: oklch(0.9295 0 0);
+  --destructive: oklch(0.568 0.1961 32);
+  --destructive-foreground: oklch(0.9852 0.0058 85);
+  --border: oklch(0.8851 0 0 / var(--ring-opacity));
+  --input: oklch(0.8851 0 0);
+  --ring: oklch(0.5 0 0);
+  --text-label: 0.75rem;
+  --radius-control: calc(var(--radius) * 2);
+  --radius-field: calc(var(--radius) * 2.2);
+  --radius-panel: calc(var(--radius) * 2.6);
+  --radius-scene: calc(var(--radius) * 2.8);
+  --radius-popup-item: calc(var(--radius-control) * 0.6);
+  --shadow-color: oklch(0.2986 0 0);
+  --shadow-opacity: 1;
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --z-overlay: 70;
+  --z-modal: 71;
+  --z-popup: 80;
+  --z-tooltip: 90;
+  --z-toast: 95;
+  --popover-padding: 0.25rem;
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
-
-  /* majority defaults measured over the shipped packs; a pack declares one only to diverge,
-     and the dark block below carries the mode-split ones */
   --primary-text: oklch(from var(--primary) 0.48 c h);
   --destructive-text: oklch(from var(--destructive) 0.48 c h);
   --ring-opacity: 1;
@@ -97,10 +94,7 @@
 
   --corner-shape: round;
   --corner-radius-fit: 0.5;
-  --radius-popover: calc(
-    var(--radius-popup-item-fit) +
-    clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding) - var(--nest-safe))
-  );
+  --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding)));
 
   --shadow-highlight: oklch(1 0 0 / 0.62);
   --shadow-y: 1;
@@ -146,27 +140,15 @@
   --badge-pink-foreground: var(--color-pink-800);
   --badge-pink-border: oklch(from var(--color-pink-500) l c h / 0.2);
   --badge-pink-hover: oklch(from var(--color-pink-500) l c h / 0.24);
-
-  /* tw-scale rungs multiply from THE radius knob; the squircle fallback below re-derives them ×fit */
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.4);
   --radius-2xl: calc(var(--radius) * 1.6);
-
-  /* Browser clamps rendered radius to half the box's short side, so at large --radius a row's visible
-     corner saturates below the --radius-popup-item token. Container must match the visible corner, not
-     the token, or it out-rounds the row and the overflow clip cuts it flat. */
   --radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2));
-  /* Sub-pixel guard for concentric nesting in ring-clipped containers. Bump to border+~2px if one ever gets a real border. */
   --nest-safe: 1px;
-  /* Corner-fit ratio = 2+sqrt(2): control at gap `g` from corner radius R is sliced once R > ratio*g.
-     Caps corners that can outgrow their content inset (code-block --radius-panel vs fixed tab inset)
-     at gap*ratio, so header controls never clip. */
   --nest-corner-ratio: 3.41421356;
   --control-h-md: var(--control-h);
-
-  /* shadcn Sidebar compat: --sidebar* aliases existing tokens; row state derives from --foreground alpha. */
   --sidebar: var(--canvas);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
@@ -177,7 +159,30 @@
   --sidebar-ring: var(--ring);
 }
 
-:where(.dark [data-skin], .dark[data-skin]) {
+:where(.dark:root, .dark[data-skin], .dark [data-skin]) {
+  --primary: oklch(0.9851 0 0);
+  --primary-foreground: oklch(0.2046 0 0);
+  --foreground: oklch(0.9851 0 0);
+  --card-foreground: oklch(0.9851 0 0);
+  --popover-foreground: oklch(0.9851 0 0);
+  --secondary-foreground: oklch(0.9851 0 0);
+  --accent-foreground: oklch(0.9851 0 0);
+  --background: oklch(0.1448 0 0);
+  --card: oklch(0.2046 0 0);
+  --popover: oklch(0.2046 0 0);
+  --canvas: oklch(0.1448 0 0);
+
+  --muted: oklch(0.2668 0 0);
+  --muted-foreground: oklch(0.7405 0 0);
+  --secondary: oklch(0.2668 0 0);
+  --accent: oklch(0.2864 0 0);
+  --destructive: oklch(0.551 0.1799 32);
+  --destructive-foreground: oklch(0.9645 0.008 84);
+  --border: oklch(0.3082 0 0 / var(--ring-opacity));
+  --input: oklch(0.3082 0 0);
+  --ring: oklch(0.66 0 0);
+  --focus-ring: oklch(0.66 0 0);
+  --shadow-color: oklch(0 0 0);
   --primary-text: oklch(from var(--primary) 0.78 c h);
   --destructive-text: oklch(from var(--destructive) 0.78 c h);
   --shadow-highlight: oklch(1 0 0 / 0.055);
@@ -214,6 +219,53 @@
   --badge-pink-hover: oklch(from var(--color-pink-400) l c h / 0.28);
 }
 
+@custom-variant dark (&:is(.dark *));
+
+/* biome-ignore-start lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
+
+@media (prefers-reduced-motion: reduce) {
+  :where(:root),
+  [data-skin] {
+    --duration-fast: 0ms !important;
+    --duration-base: 0ms !important;
+    --duration-slow: 0ms !important;
+  }
+
+  :where(:root, :root *, [data-skin], [data-skin] *, [data-skin]::before, [data-skin]::after, [data-skin] *::before, [data-skin] *::after) {
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0ms !important;
+    animation-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+:root[data-motion="reduced"],
+[data-motion="reduced"][data-skin],
+[data-motion="reduced"] [data-skin] {
+  --duration-fast: 0ms !important;
+  --duration-base: 0ms !important;
+  --duration-slow: 0ms !important;
+}
+
+:where(
+  [data-motion="reduced"],
+  [data-motion="reduced"] *,
+  [data-motion="reduced"]::before,
+  [data-motion="reduced"]::after,
+  [data-motion="reduced"] *::before,
+  [data-motion="reduced"] *::after
+) {
+  scroll-behavior: auto !important;
+  transition-delay: 0ms !important;
+  transition-duration: 0ms !important;
+  animation-delay: 0ms !important;
+  animation-duration: 1ms !important;
+  animation-iteration-count: 1 !important;
+}
+/* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
+
 @theme inline {
   --color-background: var(--background);
   --color-canvas: var(--canvas);
@@ -246,9 +298,6 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Self-references, not values: @theme merges globally across all skin packs in one Tailwind build,
-     so a value here could never differ per skin. Self-ref keeps the var alive in the emitted utility,
-     so pack-scoped declarations re-value each rung per skin (same shape as --color-primary below). */
   --radius-sm: var(--radius-sm);
   --radius-md: var(--radius-md);
   --radius-lg: var(--radius-lg);
@@ -258,7 +307,6 @@
   --radius-panel: var(--radius-panel);
   --radius-scene: var(--radius-scene);
 
-  /* Same self-reference shape; rungs + paired line-height/weight/tracking live in each skin theme. */
   --text-micro: var(--text-micro);
   --text-caption: var(--text-caption);
   --text-label: var(--text-label);
@@ -282,13 +330,9 @@
   --text-display--font-weight: var(--text-display--font-weight);
   --text-display--letter-spacing: var(--text-display--letter-spacing);
 
-  /* Generates font-body/font-display utilities off role tokens above; skin re-values one alone to re-face all headings/body. */
   --font-body: var(--font-body);
   --font-display: var(--font-display);
 
-  /* Global knobs (size/opacity/y) + tier multipliers keep control/panel/popover/modal/ambient shadows
-     distinct without per-component math. Each tier layers tight+mid+long alphas for one soft umber
-     penumbra ("soft daylight"); every length multiplies the global knobs so --shadow-size:0 flattens all. */
   --shadow-xs:
     inset 0 1px 0 oklch(from var(--shadow-highlight) l c h / calc(alpha * var(--shadow-opacity) * min(var(--shadow-size), 1))),
     0 calc(1px * var(--shadow-size) * var(--shadow-control-multiplier) * var(--shadow-y))
@@ -345,7 +389,7 @@
     0 calc(6px * var(--shadow-size) * var(--shadow-popover-multiplier) * var(--shadow-y))
     calc(14px * var(--shadow-size) * var(--shadow-popover-multiplier))
     calc(-3px * var(--shadow-size) * var(--shadow-popover-multiplier))
-    oklch(from var(--shadow-color) l c h / calc(0.07 * var(--shadow-opacity))); /* floating popovers */
+    oklch(from var(--shadow-color) l c h / calc(0.07 * var(--shadow-opacity)));
   --shadow-modal:
     inset 0 1px 0
     oklch(from var(--shadow-highlight) l c h / calc(alpha * var(--shadow-opacity) * min(var(--shadow-size), 1))),
@@ -364,7 +408,7 @@
     0 calc(7px * var(--shadow-size) * var(--shadow-modal-multiplier) * var(--shadow-y))
     calc(16px * var(--shadow-size) * var(--shadow-modal-multiplier))
     calc(-3px * var(--shadow-size) * var(--shadow-modal-multiplier))
-    oklch(from var(--shadow-color) l c h / calc(0.1 * var(--shadow-opacity))); /* dialogs and sheets */
+    oklch(from var(--shadow-color) l c h / calc(0.1 * var(--shadow-opacity)));
   --shadow-soft:
     0 calc(0.75px * var(--shadow-size) * var(--shadow-ambient-multiplier) * var(--shadow-y))
     calc(2px * var(--shadow-size) * var(--shadow-ambient-multiplier)) calc(-0.75px * var(--shadow-size) * var(--shadow-ambient-multiplier))
@@ -374,7 +418,7 @@
     oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity))),
     0 calc(4.5px * var(--shadow-size) * var(--shadow-ambient-multiplier) * var(--shadow-y))
     calc(12px * var(--shadow-size) * var(--shadow-ambient-multiplier)) calc(-2.5px * var(--shadow-size) * var(--shadow-ambient-multiplier))
-    oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity))); /* ambient lift */
+    oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity)));
 
   --shadow-inset:
     inset 0 calc(1px * var(--shadow-size) * var(--shadow-control-multiplier) * var(--shadow-y))
@@ -383,14 +427,11 @@
     inset 0 0 calc(4px * var(--shadow-size) * var(--shadow-control-multiplier))
     oklch(from var(--shadow-color) l c h / calc(0.04 * var(--shadow-opacity)));
 
-  /* bare `transition*` utilities inherit the themed curve + tempo */
   --default-transition-duration: var(--duration-fast);
   --default-transition-timing-function: var(--ease-standard);
 }
 
 @layer base {
-  /* v4 defaults border/divide color to currentColor; restore themed border (same rule shadcn v4 ships, host merge is harmless). */
-  /* border-box origin too: default padding-box origin + border-box clip + repeat tiles the gradient's far end into a translucent border ring (--border carries alpha in most packs). Escape hatch: bg-origin-padding. */
   *,
   ::after,
   ::before {
@@ -404,21 +445,14 @@
     }
   }
 
-  /* Squircle w/o corner-shape support falls back to plain round radius, reading over-rounded; shrink
-     fallback by --corner-radius-fit to track Chrome's squircle. Gated on live --corner-shape via style
-     query (fires only when squircle selected); re-declared on DA elements since skin-root tokens bake var(--radius) at their root, unreachable by descendant override. No style-query support = current fallback. */
   @supports not (corner-shape: squircle) {
     @container style(--corner-shape: squircle) {
       :where([data-control-ui][data-slot]) {
-        /* Halve base control radius; concentric popup/popover tokens re-derive from it, no second factor needed. */
         --radius-control: calc(var(--radius) * 2 * var(--corner-radius-fit));
         --radius-popup-item: calc(var(--radius-control) * 0.6);
         --radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2));
-        --radius-popover: calc(
-          var(--radius-popup-item-fit) +
-          clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding) - var(--nest-safe))
-        );
-        /* Each derives straight from --radius; must mirror the :where([data-skin]) scale above ×fit. */
+        --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding)));
+
         --radius-sm: calc(var(--radius) * 0.6 * var(--corner-radius-fit));
         --radius-md: calc(var(--radius) * 0.8 * var(--corner-radius-fit));
         --radius-lg: calc(var(--radius) * var(--corner-radius-fit));
@@ -430,16 +464,38 @@
       }
     }
   }
+
+  body {
+    font-synthesis: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :where(
+    [data-control-family]:is(
+      a[href],
+      button,
+      input,
+      label,
+      select,
+      summary,
+      textarea,
+      [role="button"],
+      [role="checkbox"],
+      [role="menuitem"],
+      [role="menuitemcheckbox"],
+      [role="menuitemradio"],
+      [role="option"],
+      [role="radio"],
+      [role="switch"],
+      [role="tab"]
+    )
+  ) {
+    touch-action: manipulation;
+  }
 }
 
 @layer components {
-  /* THE keyboard focus indicator, for every Control UI element in one rule. An outline, not a
-     box-shadow: a skin that re-paints box-shadow cannot erase it, and forced-colors mode repaints
-     outline-color with a system color while it drops box-shadow entirely. Opt OUT (a part that takes
-     programmatic focus but is not a target) by re-valuing --focus-ring-width to 0px on that part.
-     A control rendered as a <label> never takes focus itself — the input it wraps does, and a part
-     nested inside a composed control (an input inside InputGroup) lets that shell carry the ring so
-     it wraps the whole field instead of one part of it. */
   :where([data-control-family]):focus-visible,
   :where([data-control-family][data-control="true"]):has(:focus-visible) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
@@ -484,20 +540,12 @@
     }
   }
 
-  /* Cross-slide switch, shared by every surface that swaps one panel for another (tabs panels, inline
-     citation sources). Contract: the element owning the switch carries data-slide="scope", each swapped
-     child data-slide="panel" plus the lifecycle attributes — inert, data-starting-style /
-     data-ending-style, data-activation-direction. Base UI stamps those on tabs panels; inline citation
-     stamps its own. Keyed on the role, not on a component, so a new caller opts in with two attributes. */
   :where([data-slide="panel"]) {
     translate: 0 0;
-    /* No opacity fade: panels unmount, fade-in from 0 would flash empty frame; slide-only keeps content opaque. */
+
     transition: translate var(--duration-slow) var(--ease-emphasized);
   }
 
-  /* Fallback switch (no anchor positioning): the outgoing panel stays mounted+inert until its exit
-     anim finishes; two in-flow panels would stack, so the exiting one is pulled from layout the moment
-     it's inert and the entering one gets a soft directional nudge. Active panel is never `inert`. */
   :where([data-slide="panel"][inert]) {
     display: none;
   }
@@ -518,14 +566,7 @@
     translate: 0 0.35rem;
   }
 
-  /* True cross-slide (anchor positioning, Limited → @supports per the CSS-first rule): the exiting
-     panel is revived and glued edge-to-edge onto the entering panel's box (anchor = the open panel).
-     Anchor offsets track the anchor's translated box every frame, so the pair travel as ONE strip
-     driven by a single transition — the entering panel's ±100% slide — whatever wrapper the panels
-     happen to live in (they are not always the scope's direct children). */
   @supports ((anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)) {
-    /* Per-instance scope: without it the exiting panel would anchor onto the LAST open panel in the
-       whole document — another instance's panel. Nested scopes re-scope, so names never leak. */
     :where([data-slide="scope"]) {
       anchor-scope: --aui-slide-panel;
     }
@@ -534,9 +575,6 @@
       anchor-name: --aui-slide-panel;
     }
 
-    /* display:block revives the fallback-hidden panel; anchor-size clips a longer outgoing panel to
-       the incoming one's box mid-slide. The per-direction glue below does the placement; a panel with
-       direction "none" gets no glue and no hold, i.e. the instant fallback swap. */
     :where([data-slide="panel"][inert][data-ending-style]) {
       display: block;
       position: absolute;
@@ -546,15 +584,11 @@
       overflow: clip;
     }
 
-    /* The panels' direct parent turns containing block + crops the ±100% travel while a switch is in
-       flight (an absolutely positioned exiting panel escapes the overflow of non-positioned ancestors). */
     :where(:has(> [data-slide="panel"][data-ending-style])) {
       position: relative;
       overflow: clip;
     }
 
-    /* Glue = trailing edge of the strip; the hold animation is what keeps Base UI from unmounting the
-       exiting panel mid-slide (it waits on the panel's own animations, and the glue isn't one). */
     :where([data-slide="panel"][inert][data-ending-style][data-activation-direction="left"]) {
       top: anchor(top);
       left: anchor(right);
@@ -595,12 +629,6 @@
       translate: 0 100%;
     }
 
-    /* Height morph: auto→auto never transitions, so the entering panel starts at the outgoing panel's
-       measured height (--aui-slide-prev-height, stamped by the component just before the switch) and
-       eases to its own intrinsic height — calc-size() makes the auto endpoint interpolable. The glued
-       exiting panel follows via anchor-size(height), so the whole strip resizes as one; overflow
-       mid-morph is cropped by the parent clip already active for the slide. :not([inert]) keeps this
-       off the exiting panel, whose height must stay anchor-size(height). */
     @supports (height: calc-size(auto, size)) {
       :where([data-slide="panel"]:not([inert])) {
         height: calc-size(auto, size);
@@ -615,8 +643,6 @@
     }
   }
 
-  /* Visually inert 0.999→1 hold: exists purely so the exiting panel reports a running animation for
-     the slide's duration. Rides the motion tokens, so reduced motion collapses it to an instant swap. */
   @keyframes aui-slide-exit-hold {
     from {
       opacity: 0.999;

package/dist/surface-variants.d.ts

@@ -1,6 +1,5 @@
 //#region src/surface-variants.d.ts
-declare const popupItemStructureClasses = "flex select-none items-center";
-declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
-type PopupPart = (typeof popupParts)[number];
-//#endregion
-export { PopupPart, popupItemStructureClasses, popupParts };
+export declare const popupItemStructureClasses = "flex select-none items-center";
+export declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
+export type PopupPart = (typeof popupParts)[number];
+//#endregion

package/dist/task-list.d.ts

@@ -2,33 +2,32 @@ import { CollapsibleProps } from "./ui/collapsible.js";
 import { TaskListKnobStyle } from "./knob-contracts/task-list-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/task-list.d.ts
-type TaskStatus = "pending" | "active" | "completed";
-type TaskListProps = Omit<CollapsibleProps, "style"> & {
+export type TaskStatus = "pending" | "active" | "completed";
+export type TaskListProps = Omit<CollapsibleProps, "style"> & {
   style?: CSSProperties & TaskListKnobStyle;
 };
 type TaskListStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-declare function TaskList({ className, children, ...props }: TaskListProps): import("react").JSX.Element;
-type TaskListTriggerProps = TaskListStyleProps<ComponentProps<"button">, TaskListKnobStyle>;
-declare function TaskListTrigger({ className, children, ...props }: TaskListTriggerProps): import("react").JSX.Element;
-type TaskListProgressProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
-declare function TaskListProgress({ className, children, ...props }: TaskListProgressProps): import("react").JSX.Element;
-type TaskListLabelProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
-declare function TaskListLabel({ className, children, ...props }: TaskListLabelProps): import("react").JSX.Element;
-type TaskListContentProps = ComponentProps<"ol"> & {
+export declare function TaskList({ className, children, ...props }: TaskListProps): import("react").JSX.Element;
+export type TaskListTriggerProps = TaskListStyleProps<ComponentProps<"button">, TaskListKnobStyle>;
+export declare function TaskListTrigger({ className, children, ...props }: TaskListTriggerProps): import("react").JSX.Element;
+export type TaskListProgressProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
+export declare function TaskListProgress({ className, children, ...props }: TaskListProgressProps): import("react").JSX.Element;
+export type TaskListLabelProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
+export declare function TaskListLabel({ className, children, ...props }: TaskListLabelProps): import("react").JSX.Element;
+export type TaskListContentProps = ComponentProps<"ol"> & {
   style?: CSSProperties & TaskListKnobStyle;
 };
-declare function TaskListContent({ className, children, ...props }: TaskListContentProps): import("react").JSX.Element;
-type TaskListItemProps = TaskListStyleProps<Omit<ComponentProps<"li">, "children">, TaskListKnobStyle> & {
+export declare function TaskListContent({ className, children, ...props }: TaskListContentProps): import("react").JSX.Element;
+export type TaskListItemProps = TaskListStyleProps<Omit<ComponentProps<"li">, "children">, TaskListKnobStyle> & {
   label: string;
   status?: TaskStatus;
   children?: ReactNode;
 };
-declare function TaskListItem({ label, status, className, children, ...props }: TaskListItemProps): import("react").JSX.Element;
-type TaskListIndicatorProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle> & {
+export declare function TaskListItem({ label, status, className, children, ...props }: TaskListItemProps): import("react").JSX.Element;
+export type TaskListIndicatorProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle> & {
   status?: TaskStatus;
 };
-declare function TaskListIndicator({ status, className, ...props }: TaskListIndicatorProps): import("react").JSX.Element;
-//#endregion
-export { TaskList, TaskListContent, TaskListContentProps, TaskListIndicator, TaskListIndicatorProps, TaskListItem, TaskListItemProps, TaskListLabel, TaskListLabelProps, TaskListProgress, TaskListProgressProps, TaskListProps, TaskListTrigger, TaskListTriggerProps, TaskStatus };
+export declare function TaskListIndicator({ status, className, ...props }: TaskListIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/thread-rail.d.ts

@@ -2,51 +2,50 @@ import { ChatRole } from "./hooks/use-chat-message.js";
 import { ThreadRailKnobStyle } from "./knob-contracts/thread-rail-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/thread-rail.d.ts
-type ThreadRailProps = ComponentProps<"nav"> & {
+export type ThreadRailProps = ComponentProps<"nav"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-type ThreadRailItemProps = Omit<ComponentProps<"div">, "style"> & {
+export type ThreadRailItemProps = Omit<ComponentProps<"div">, "style"> & {
   from?: ChatRole;
   inView?: boolean;
   active?: boolean;
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRail({ className, children, style, ...props }: ThreadRailProps): import("react").JSX.Element;
-declare function ThreadRailItem({ from, inView, active, index, className, children, ...props }: ThreadRailItemProps & {
+export declare function ThreadRail({ className, children, style, ...props }: ThreadRailProps): import("react").JSX.Element;
+export declare function ThreadRailItem({ from, inView, active, index, className, children, ...props }: ThreadRailItemProps & {
   index?: number;
 }): import("react").JSX.Element;
-type ThreadRailLineProps = Omit<ComponentProps<"button">, "style"> & {
+export type ThreadRailLineProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailLine({ className, ...props }: ThreadRailLineProps): import("react").JSX.Element;
-type ThreadRailPopoverProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ThreadRailLine({ className, ...props }: ThreadRailLineProps): import("react").JSX.Element;
+export type ThreadRailPopoverProps = Omit<ComponentProps<"div">, "style"> & {
   children?: ReactNode;
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailPopover(_props: ThreadRailPopoverProps): null;
-type ThreadRailTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ThreadRailPopover(_props: ThreadRailPopoverProps): null;
+export type ThreadRailTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailTitle({ className, ...props }: ThreadRailTitleProps): import("react").JSX.Element;
-type ThreadRailSummaryProps = Omit<ComponentProps<"p">, "style"> & {
+export declare function ThreadRailTitle({ className, ...props }: ThreadRailTitleProps): import("react").JSX.Element;
+export type ThreadRailSummaryProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailSummary({ className, ...props }: ThreadRailSummaryProps): import("react").JSX.Element;
-type ThreadRailFooterProps = Omit<ComponentProps<"div">, "style"> & {
+export declare function ThreadRailSummary({ className, ...props }: ThreadRailSummaryProps): import("react").JSX.Element;
+export type ThreadRailFooterProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailFooter({ className, ...props }: ThreadRailFooterProps): import("react").JSX.Element;
-type ThreadRailFileProps = Omit<ComponentProps<"span">, "style"> & {
+export declare function ThreadRailFooter({ className, ...props }: ThreadRailFooterProps): import("react").JSX.Element;
+export type ThreadRailFileProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailFile({ className, ...props }: ThreadRailFileProps): import("react").JSX.Element;
-type ThreadRailFileIconProps = Omit<ComponentProps<"span">, "style"> & {
+export declare function ThreadRailFile({ className, ...props }: ThreadRailFileProps): import("react").JSX.Element;
+export type ThreadRailFileIconProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailFileIcon({ className, children, ...props }: ThreadRailFileIconProps): import("react").JSX.Element;
-type ThreadRailMoreProps = Omit<ComponentProps<"span">, "style"> & {
+export declare function ThreadRailFileIcon({ className, children, ...props }: ThreadRailFileIconProps): import("react").JSX.Element;
+export type ThreadRailMoreProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-declare function ThreadRailMore({ className, ...props }: ThreadRailMoreProps): import("react").JSX.Element;
-//#endregion
-export { ThreadRail, ThreadRailFile, ThreadRailFileIcon, ThreadRailFileIconProps, ThreadRailFileProps, ThreadRailFooter, ThreadRailFooterProps, ThreadRailItem, ThreadRailItemProps, ThreadRailLine, ThreadRailLineProps, ThreadRailMore, ThreadRailMoreProps, ThreadRailPopover, ThreadRailPopoverProps, ThreadRailProps, ThreadRailSummary, ThreadRailSummaryProps, ThreadRailTitle, ThreadRailTitleProps };
+export declare function ThreadRailMore({ className, ...props }: ThreadRailMoreProps): import("react").JSX.Element;
+//#endregion

package/dist/thread-rail.js

@@ -35,7 +35,7 @@ function ThreadRail({ className, children, style, ...props }) {
 	}, [hovered]);
 	const railStyle = {
 		...style,
-		"--aui-rail-active-index": hovered
+		"--_thread-rail-active-index": hovered
 	};
 	return /* @__PURE__ */ jsx(RailContext.Provider, {
 		value: {

package/dist/transcript-divider.d.ts

@@ -1,15 +1,14 @@
 import { TranscriptDividerKnobStyle } from "./knob-contracts/transcript-divider-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/transcript-divider.d.ts
-type ChatTone = "neutral" | "success" | "warning" | "danger";
-type TranscriptDividerProps = Omit<ComponentProps<"div">, "style"> & {
+export type ChatTone = "neutral" | "success" | "warning" | "danger";
+export type TranscriptDividerProps = Omit<ComponentProps<"div">, "style"> & {
   tone?: ChatTone;
   style?: CSSProperties & TranscriptDividerKnobStyle;
 };
-declare function TranscriptDivider({ tone, className, children, ...props }: TranscriptDividerProps): import("react").JSX.Element;
-type TranscriptDividerLabelProps = ComponentProps<"span"> & {
+export declare function TranscriptDivider({ tone, className, children, ...props }: TranscriptDividerProps): import("react").JSX.Element;
+export type TranscriptDividerLabelProps = ComponentProps<"span"> & {
   style?: CSSProperties & TranscriptDividerKnobStyle;
 };
-declare function TranscriptDividerLabel({ className, ...props }: TranscriptDividerLabelProps): import("react").JSX.Element;
-//#endregion
-export { ChatTone, TranscriptDivider, TranscriptDividerLabel, TranscriptDividerLabelProps, TranscriptDividerProps };
+export declare function TranscriptDividerLabel({ className, ...props }: TranscriptDividerLabelProps): import("react").JSX.Element;
+//#endregion