@preset.nz/ux-kit 0.1.0 → 0.1.2

package/src/components/status-bar.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -11,7 +11,10 @@ function StatusBar({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="status-bar"
       role="status"
-      className={cn("flex h-6 shrink-0 items-center gap-3 border-t border-border bg-background px-3 text-xs text-muted-foreground", className)}
+      className={cn(
+        "flex h-6 shrink-0 items-center gap-3 border-t border-border bg-background px-3 text-xs text-muted-foreground",
+        className,
+      )}
       {...props}
     />
   )
@@ -24,7 +27,11 @@ interface StatusItemProps extends React.ComponentProps<"span"> {
 
 function StatusItem({ label, className, children, ...props }: StatusItemProps) {
   return (
-    <span data-slot="status-item" className={cn("flex items-center gap-1 tabular-nums", className)} {...props}>
+    <span
+      data-slot="status-item"
+      className={cn("flex items-center gap-1 tabular-nums", className)}
+      {...props}
+    >
       {label ? <span className="opacity-70">{label}</span> : null}
       <span className="text-foreground">{children}</span>
     </span>

package/src/components/tabs.tsx

@@ -8,10 +8,7 @@ function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive
     <TabsPrimitive.Root
       data-slot="tabs"
       orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
-        className
-      )}
+      className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
       {...props}
     />
   )
@@ -29,7 +26,7 @@ const tabsListVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function TabsList({
@@ -47,6 +44,8 @@ function TabsList({
   )
 }
 
+// Orientation styles key on `data-[orientation=...]`.
+
 // Base UI calls the trigger `Tab` and the content `Panel`; the kit keeps the
 // shadcn names (TabsTrigger, TabsContent) so apps read the same.
 function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
@@ -58,7 +57,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "flex min-h-20 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/toggle-group.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
 
 import { cn } from "../lib/utils"
 import { toggleVariants } from "./toggle"
@@ -42,7 +42,7 @@ function ToggleGroup({
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
         "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
-        className
+        className,
       )}
       {...props}
     >
@@ -74,7 +74,7 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >

package/src/components/toggle.tsx

@@ -3,6 +3,8 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
 
+// Toggle: the pressed state is `data-pressed`, not Radix's `data-[state=on]`. Style with that.
+
 const toggleVariants = cva(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -22,7 +24,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function Toggle({

package/src/components/toolbar.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
+import * as React from "react"
 
 import { cn } from "../lib/utils"
 import { buttonVariants } from "./button"
@@ -52,16 +52,13 @@ interface ToolbarItemSpec {
   menu?: ToolbarMenuEntry[]
 }
 
-function Toolbar({
-  className,
-  ...props
-}: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
+function Toolbar({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
   return (
     <ToolbarPrimitive.Root
       data-slot="toolbar"
       className={cn(
         "flex items-center gap-1 border-b border-border bg-background px-2 py-1 data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -90,7 +87,7 @@ function ToolbarSeparator({
       data-slot="toolbar-separator"
       className={cn(
         "mx-1 h-5 w-px shrink-0 bg-border data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-5",
-        className
+        className,
       )}
       {...props}
     />
@@ -125,7 +122,7 @@ const buttonClass = (pressed?: boolean) =>
   cn(
     buttonVariants({ variant: "ghost", size: "icon" }),
     "data-disabled:cursor-default data-disabled:opacity-40 data-disabled:hover:bg-transparent",
-    pressed && "bg-muted text-foreground"
+    pressed && "bg-muted text-foreground",
   )
 
 interface ToolbarButtonProps
@@ -242,8 +239,7 @@ function ToolbarItem({
   return <ToolbarButton {...item} onClick={() => onCommand?.(item.id)} />
 }
 
-interface ToolbarItemsProps
-  extends Omit<React.ComponentProps<typeof Toolbar>, "children"> {
+interface ToolbarItemsProps extends Omit<React.ComponentProps<typeof Toolbar>, "children"> {
   /** Groups of items; a separator is drawn between groups. */
   groups: ToolbarItemSpec[][]
   /** Called with the item's (or menu entry's) id. The app runs the same command the menu does. */
@@ -270,6 +266,7 @@ function ToolbarItems({
   return (
     <Toolbar {...props}>
       {all.map((group, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: groups are anonymous lists rebuilt each render and never reordered
         <React.Fragment key={i}>
           {i > 0 && <ToolbarSeparator />}
           <ToolbarGroup>
@@ -294,6 +291,7 @@ function ToolbarItems({
   )
 }
 
+export type { ToolbarItemSpec, ToolbarMenuEntry }
 export {
   Toolbar,
   ToolbarButton,
@@ -304,4 +302,3 @@ export {
   ToolbarSeparator,
   ToolbarSpacer,
 }
-export type { ToolbarItemSpec, ToolbarMenuEntry }

package/src/components/tooltip.tsx

@@ -39,7 +39,7 @@ function TooltipContent({
           data-slot="tooltip-content"
           className={cn(
             "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            className,
           )}
           {...props}
         >

package/src/graphics/adsr.ts

@@ -1,4 +1,4 @@
-import { clamp, type Curve } from "@preset.nz/math"
+import { type Curve, clamp } from "@preset.nz/math"
 
 import type { CurveConstraint } from "./curve-edits"
 
@@ -47,24 +47,32 @@ export function adsrOf(curve: Curve): Adsr | null {
 export function constrainAdsr(maxX = Infinity): CurveConstraint {
   return (next, prev) => {
     if (next.points.length !== 4 || prev.points.length !== 4 || next.sustain !== 2) return null
-    const was = durations(prev)
-    const now = durations(next)
+    const [n0, n1, n2, n3] = next.points
+    const [p0, p1, p2, p3] = prev.points
+    if (!(n0 && n1 && n2 && n3 && p0 && p1 && p2 && p3)) return null
+    const [wa, wd, wr] = durations(p0, p1, p2, p3)
+    const [na, nd, nr] = durations(n0, n1, n2, n3)
     // The stage whose end moved takes the new length; the others keep theirs.
-    const moved = [1, 2, 3].find((i) => next.points[i]!.x !== prev.points[i]!.x)
-    const len = was.map((d, k) => (moved === k + 1 ? Math.max(0, now[k]!) : d))
-    const over = len[0]! + len[1]! + len[2]! - maxX
-    if (over > 0 && moved !== undefined) len[moved - 1] = Math.max(0, len[moved - 1]! - over)
-    const ys = [0, 1, clamp(next.points[2]!.y, 0, 1), 0]
+    const moved = [n1.x !== p1.x, n2.x !== p2.x, n3.x !== p3.x].indexOf(true) + 1
+    const len = [
+      moved === 1 ? Math.max(0, na) : wa,
+      moved === 2 ? Math.max(0, nd) : wd,
+      moved === 3 ? Math.max(0, nr) : wr,
+    ] as [number, number, number]
+    const over = len[0] + len[1] + len[2] - maxX
+    if (over > 0 && moved > 0) len[moved - 1] = Math.max(0, (len[moved - 1] ?? 0) - over)
+    const ys = [0, 1, clamp(n2.y, 0, 1), 0]
     let x = 0
     const points = next.points.map((p, i) => {
-      if (i > 0) x += len[i - 1]!
-      return { ...p, x, y: ys[i]! }
+      if (i > 0) x += len[i - 1] ?? 0
+      return { ...p, x, y: ys[i] ?? p.y }
     })
     return { points, sustain: 2 }
   }
 }
 
-function durations(curve: Curve): number[] {
-  const p = curve.points
-  return [p[1]!.x - p[0]!.x, p[2]!.x - p[1]!.x, p[3]!.x - p[2]!.x]
+type Point = Curve["points"][number]
+
+function durations(p0: Point, p1: Point, p2: Point, p3: Point): [number, number, number] {
+  return [p1.x - p0.x, p2.x - p1.x, p3.x - p2.x]
 }

package/src/graphics/curve-editor.tsx

@@ -1,5 +1,5 @@
+import { type Basis, type Curve, evaluate } from "@preset.nz/math"
 import * as React from "react"
-import { evaluate, type Basis, type Curve } from "@preset.nz/math"
 
 import {
   ContextMenu,
@@ -17,14 +17,14 @@ import {
 import { cn } from "../lib/utils"
 import {
   addPoint,
+  type CurveConstraint,
+  type Domain,
   movePoint,
   removePoint,
   setBasis,
   setTension,
   tensionForMidpoint,
   toggleSustain,
-  type CurveConstraint,
-  type Domain,
 } from "./curve-edits"
 import { linearScale } from "./scale"
 import { useCanvasDraw, useSize } from "./use-canvas"
@@ -101,8 +101,14 @@ const defaultFormat = (v: number) => v.toFixed(3)
 function sameCurve(a: Curve, b: Curve): boolean {
   if (a.points.length !== b.points.length || (a.sustain ?? -1) !== (b.sustain ?? -1)) return false
   return a.points.every((p, i) => {
-    const q = b.points[i]!
-    return p.x === q.x && p.y === q.y && p.basis === q.basis && (p.tension ?? 0) === (q.tension ?? 0)
+    const q = b.points[i]
+    return (
+      q !== undefined &&
+      p.x === q.x &&
+      p.y === q.y &&
+      p.basis === q.basis &&
+      (p.tension ?? 0) === (q.tension ?? 0)
+    )
   })
 }
 
@@ -152,8 +158,14 @@ export function CurveEditor({
   const [x0, x1] = xDomain
   const [y0, y1] = yDomain
   const domain: Domain = React.useMemo(() => ({ x: [x0, x1], y: [y0, y1] }), [x0, x1, y0, y1])
-  const sx = React.useMemo(() => linearScale([x0, x1], [PAD, Math.max(PAD, size.width - PAD)]), [x0, x1, size.width])
-  const sy = React.useMemo(() => linearScale([y0, y1], [Math.max(PAD, size.height - PAD), PAD]), [y0, y1, size.height])
+  const sx = React.useMemo(
+    () => linearScale([x0, x1], [PAD, Math.max(PAD, size.width - PAD)]),
+    [x0, x1, size.width],
+  )
+  const sy = React.useMemo(
+    () => linearScale([y0, y1], [Math.max(PAD, size.height - PAD), PAD]),
+    [y0, y1, size.height],
+  )
 
   const sel = selected !== null && selected < curve.points.length ? selected : null
 
@@ -217,7 +229,8 @@ export function CurveEditor({
   )
 
   const toData = (e: { clientX: number; clientY: number }) => {
-    const r = svg.current!.getBoundingClientRect()
+    const r = svg.current?.getBoundingClientRect()
+    if (!r) return { x: 0, y: 0 }
     return { x: sx.invert(e.clientX - r.left), y: sy.invert(e.clientY - r.top) }
   }
 
@@ -336,6 +349,7 @@ export function CurveEditor({
           </div>
         )}
         <canvas ref={canvas} className="absolute inset-0 size-full" />
+        {/* biome-ignore lint/a11y/useSemanticElements: an SVG canvas has no semantic element; role="group" with a label names it */}
         <svg
           ref={svg}
           role="group"
@@ -345,6 +359,7 @@ export function CurveEditor({
           onPointerUp={() => finishDrag(true)}
           onLostPointerCapture={() => finishDrag(true)}
         >
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: the backing rect only takes pointer input to deselect and add points; the points are the keyboard targets */}
           <rect
             width="100%"
             height="100%"
@@ -358,10 +373,21 @@ export function CurveEditor({
             if (!next || p.basis !== "linear" || next.x === p.x) return null
             const mx = (p.x + next.x) / 2
             return (
+              // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only tension handle; the keyboard route is the point menu and arrow keys on the points
               <g
+                // biome-ignore lint/suspicious/noArrayIndexKey: curve points have no id; the index is their identity
                 key={`t${i}`}
                 className="cursor-ns-resize"
-                onPointerDown={(e) => beginDrag(e, { kind: "tension", index: i, start: curve, pointer: e.pointerId, from: { x: e.clientX, y: e.clientY }, started: false })}
+                onPointerDown={(e) =>
+                  beginDrag(e, {
+                    kind: "tension",
+                    index: i,
+                    start: curve,
+                    pointer: e.pointerId,
+                    from: { x: e.clientX, y: e.clientY },
+                    started: false,
+                  })
+                }
                 onDoubleClick={(e) => {
                   e.stopPropagation()
                   commit(setTension(curve, i, 0, constrain), "edit")
@@ -386,7 +412,9 @@ export function CurveEditor({
             const isSel = sel === i
             const isSustain = mode === "envelope" && curve.sustain === i
             return (
+              // biome-ignore lint/a11y/useSemanticElements: an SVG <g> cannot be a <button>; role="button" with tabIndex and key handling
               <g
+                // biome-ignore lint/suspicious/noArrayIndexKey: curve points have no id; the index is their identity
                 key={`p${i}`}
                 tabIndex={0}
                 role="button"
@@ -398,7 +426,14 @@ export function CurveEditor({
                 onPointerDown={(e) => {
                   setSelected(i)
                   ;(e.currentTarget as SVGGElement).focus()
-                  beginDrag(e, { kind: "point", index: i, start: curve, pointer: e.pointerId, from: { x: e.clientX, y: e.clientY }, started: false })
+                  beginDrag(e, {
+                    kind: "point",
+                    index: i,
+                    start: curve,
+                    pointer: e.pointerId,
+                    from: { x: e.clientX, y: e.clientY },
+                    started: false,
+                  })
                 }}
                 onContextMenu={() => {
                   setSelected(i)
@@ -419,7 +454,9 @@ export function CurveEditor({
                   cy={sy(p.y)}
                   r={POINT_R}
                   strokeWidth={1.5}
-                  className={cn(isSel ? "fill-primary stroke-primary" : "fill-background stroke-primary")}
+                  className={cn(
+                    isSel ? "fill-primary stroke-primary" : "fill-background stroke-primary",
+                  )}
                 />
                 {isSustain && (
                   <text
@@ -453,7 +490,9 @@ export function CurveEditor({
               <ContextMenuLabel>Interpolation to the next point</ContextMenuLabel>
               <ContextMenuRadioGroup
                 value={menuPoint.basis}
-                onValueChange={(b) => commit(setBasis(curve, target.index, b as Basis, constrain), "edit")}
+                onValueChange={(b) =>
+                  commit(setBasis(curve, target.index, b as Basis, constrain), "edit")
+                }
               >
                 {BASES.map((b) => (
                   <ContextMenuRadioItem
@@ -461,7 +500,8 @@ export function CurveEditor({
                     value={b.value}
                     disabled={
                       target.index === curve.points.length - 1 ||
-                      (b.value !== menuPoint.basis && !setBasis(curve, target.index, b.value, constrain))
+                      (b.value !== menuPoint.basis &&
+                        !setBasis(curve, target.index, b.value, constrain))
                     }
                   >
                     {b.label}
@@ -475,7 +515,9 @@ export function CurveEditor({
                 <ContextMenuCheckboxItem
                   checked={curve.sustain === target.index}
                   disabled={!toggleSustain(curve, target.index, constrain)}
-                  onCheckedChange={() => commit(toggleSustain(curve, target.index, constrain), "edit")}
+                  onCheckedChange={() =>
+                    commit(toggleSustain(curve, target.index, constrain), "edit")
+                  }
                 >
                   Sustain here
                 </ContextMenuCheckboxItem>

package/src/graphics/curve-edits.ts

@@ -1,4 +1,11 @@
-import { clamp, invlerp, TENSION_STRENGTH, type Basis, type Curve, type CurvePoint } from "@preset.nz/math"
+import {
+  type Basis,
+  type Curve,
+  type CurvePoint,
+  clamp,
+  invlerp,
+  TENSION_STRENGTH,
+} from "@preset.nz/math"
 
 /**
  * Limits on a curve, applied to every proposed edit: a drag, a nudge, an added or removed
@@ -87,7 +94,12 @@ export function removePoint(curve: Curve, i: number, constrain?: CurveConstraint
 }
 
 /** Point `i`'s basis. Tension only means something on a linear segment, so others drop it. */
-export function setBasis(curve: Curve, i: number, basis: Basis, constrain?: CurveConstraint): Curve | null {
+export function setBasis(
+  curve: Curve,
+  i: number,
+  basis: Basis,
+  constrain?: CurveConstraint,
+): Curve | null {
   const points = curve.points.map((p, j) => {
     if (j !== i) return p
     const q: CurvePoint = { ...p, basis }
@@ -105,7 +117,12 @@ export function toggleSustain(curve: Curve, i: number, constrain?: CurveConstrai
 }
 
 /** The tension of the segment from point `i`, -1..1. Zero removes it. */
-export function setTension(curve: Curve, i: number, tension: number, constrain?: CurveConstraint): Curve | null {
+export function setTension(
+  curve: Curve,
+  i: number,
+  tension: number,
+  constrain?: CurveConstraint,
+): Curve | null {
   const t = clamp(tension, -1, 1)
   const points = curve.points.map((p, j) => {
     if (j !== i) return p

package/src/graphics/index.ts

@@ -1,16 +1,16 @@
-export { CurveEditor, type CurveEditKind, type CurveEditorProps } from "./curve-editor"
+export { type Adsr, adsrCurve, adsrOf, constrainAdsr } from "./adsr"
+export { type CurveEditKind, CurveEditor, type CurveEditorProps } from "./curve-editor"
 export {
   addPoint,
+  type CurveConstraint,
+  type Domain,
   movePoint,
   removePoint,
   setBasis,
   setTension,
   tensionForMidpoint,
   toggleSustain,
-  type CurveConstraint,
-  type Domain,
 } from "./curve-edits"
-export { adsrCurve, adsrOf, constrainAdsr, type Adsr } from "./adsr"
-export { linearScale, type LinearScale } from "./scale"
-export { useCanvasDraw, useSize, type Size } from "./use-canvas"
+export { type LinearScale, linearScale } from "./scale"
+export { type Size, useCanvasDraw, useSize } from "./use-canvas"
 export { useTokenColours } from "./use-tokens"

package/src/graphics/scale.ts

@@ -11,7 +11,10 @@ export interface LinearScale {
   range: readonly [number, number]
 }
 
-export function linearScale(domain: readonly [number, number], range: readonly [number, number]): LinearScale {
+export function linearScale(
+  domain: readonly [number, number],
+  range: readonly [number, number],
+): LinearScale {
   const [d0, d1] = domain
   const [r0, r1] = range
   const scale = ((v: number) => fitUnclamped(v, d0, d1, r0, r1)) as LinearScale

package/src/graphics/use-canvas.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react"
+import { type RefObject, useEffect, useLayoutEffect, useRef, useState } from "react"
 
 export interface Size {
   width: number

package/src/graphics/use-tokens.ts

@@ -13,7 +13,10 @@ export function useTokenColours<K extends string>(names: readonly K[]): Record<K
     const update = () => setColours(read(list))
     update()
     const observer = new MutationObserver(update)
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"] })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style", "data-theme"],
+    })
     const media = window.matchMedia("(prefers-color-scheme: dark)")
     media.addEventListener("change", update)
     return () => {

package/src/index.css

@@ -7,7 +7,7 @@
 
    Seeded from Strata's index.css. Dark mode is a .dark class on <html>. */
 @import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import "./shadcn-tailwind.css";
 
 /* Two families only (Georg 2026-10-03): Geist for the interface, JetBrains Mono for values and code. */
 @import "@fontsource-variable/geist";
@@ -15,6 +15,14 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Progress, indeterminate: the 40%-wide segment crosses the track left to right. */
+@theme inline {
+    @keyframes progress-slide {
+        from { transform: translateX(-100%); }
+        to { transform: translateX(250%); }
+    }
+}
+
 @theme inline {
     /* Headings use the interface face; hierarchy comes from size and weight. */
     --font-heading: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;

package/src/index.ts

@@ -1,6 +1,3 @@
-export { cn } from "./lib/utils"
-export { useIsMobile } from "./lib/use-mobile"
-
 export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/breadcrumb"
@@ -9,19 +6,23 @@ export * from "./components/card"
 export * from "./components/checkbox"
 export * from "./components/color-field"
 export * from "./components/color-swatch"
+export * from "./components/confirm-dialog"
 export * from "./components/context-menu"
 export * from "./components/dialog"
+export * from "./components/download-prompt"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
 export * from "./components/input"
 export * from "./components/label"
+export * from "./components/list"
 export * from "./components/navigation-menu"
 export * from "./components/number-field"
 export * from "./components/popover"
+export * from "./components/progress"
 export * from "./components/select"
-export * from "./components/side-panel"
 export * from "./components/separator"
 export * from "./components/sheet"
+export * from "./components/side-panel"
 export * from "./components/sidebar"
 export * from "./components/skeleton"
 export * from "./components/slider"
@@ -33,5 +34,6 @@ export * from "./components/toggle"
 export * from "./components/toggle-group"
 export * from "./components/toolbar"
 export * from "./components/tooltip"
-
 export * as Icons from "./icons"
+export { useIsMobile } from "./lib/use-mobile"
+export { cn } from "./lib/utils"

package/src/lib/use-mobile.ts

@@ -13,6 +13,6 @@ export function useIsMobile() {
   return React.useSyncExternalStore(
     subscribe,
     () => window.matchMedia(QUERY).matches,
-    () => false
+    () => false,
   )
 }

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {