@ambientcss/components 2.0.1 → 3.0.0

package/dist/index.js

@@ -42,7 +42,7 @@ function AmbientPanel({ className, material = "matte", ...props }) {
     {
       className: cn(
         "ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel",
-        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        `amb-mat-${material}`,
         className
       ),
       ...props
@@ -50,491 +50,1630 @@ function AmbientPanel({ className, material = "matte", ...props }) {
   );
 }
 
-// src/components/AmbientButton.tsx
+// src/components/AmbientRack.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function AmbientButton({
+function AmbientRack({
   className,
-  children,
-  material = "matte",
-  shape = "pill",
+  gap = "normal",
+  direction = "row",
   ...props
 }) {
   return /* @__PURE__ */ jsx3(
-    "button",
+    "div",
     {
-      type: "button",
       className: cn(
-        "amb-button amb-groove ambx-button",
-        shape === "round" && "amb-button-round",
-        shape === "square" && "amb-button-square",
+        "ambx-rack",
+        gap === "tight" && "ambx-rack-tight",
+        gap === "loose" && "ambx-rack-loose",
+        direction === "column" && "ambx-rack-column",
         className
       ),
-      ...props,
-      children: /* @__PURE__ */ jsx3(
-        "span",
-        {
-          className: cn(
-            "amb-button-cap ambient amb-chamfer amb-surface amb-heading-3",
-            material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass"
-          ),
-          children
-        }
-      )
+      ...props
     }
   );
 }
 
-// src/components/AmbientSwitch.tsx
-import { useId, useState } from "react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function AmbientSwitch({
+// src/controls/AmbientPress.tsx
+import { useRef as useRef4 } from "react";
+
+// src/core/context.tsx
+import { createContext, useContext } from "react";
+var ControlStateContext = createContext(null);
+var ControlStateProvider = ControlStateContext.Provider;
+function useControlState() {
+  const state = useContext(ControlStateContext);
+  if (!state) {
+    throw new Error(
+      "useControlState() must be called from inside a control's parts. Pass the component through `parts` on AmbientRotary, AmbientTravel, AmbientPress, AmbientLatch or AmbientBank."
+    );
+  }
+  return state;
+}
+var BankKeyContext = createContext(null);
+var BankKeyProvider = BankKeyContext.Provider;
+function useBankKey() {
+  const key = useContext(BankKeyContext);
+  if (!key) {
+    throw new Error(
+      "useBankKey() must be called from inside a bank key's parts. Pass the component through `keyParts` on AmbientBank."
+    );
+  }
+  return key;
+}
+
+// src/core/frames.tsx
+import { useEffect, useRef } from "react";
+
+// src/core/dev.ts
+var isDev = (() => {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+})();
+
+// src/core/types.ts
+var FRAME_ORDER = ["panel", "base", "actuator", "fixture"];
+function stateStyle(state) {
+  return {
+    "--ambx-value": state.value,
+    "--ambx-percent": state.percent,
+    "--ambx-angle": `${state.angle}deg`,
+    "--ambx-travel-start": `${state.travelStart}deg`,
+    "--ambx-travel-sweep": `${state.travelSweep}deg`,
+    "--ambx-detents": state.detents
+  };
+}
+function stateData(state) {
+  return {
+    "data-dragging": state.dragging ? "" : void 0,
+    "data-disabled": state.disabled ? "" : void 0,
+    "data-at-min": state.atMin ? "" : void 0,
+    "data-at-max": state.atMax ? "" : void 0
+  };
+}
+function sizeProps(family, size) {
+  if (size === void 0) return {};
+  if (size === "sm" || size === "md" || size === "lg") {
+    return { className: `ambx-${family}-${size}` };
+  }
+  return { style: { "--ambx-size": size } };
+}
+
+// src/core/frames.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+function Frames({ parts }) {
+  if (!parts) return null;
+  return /* @__PURE__ */ jsx4(Fragment, { children: FRAME_ORDER.map(
+    (name) => parts[name] == null ? null : /* @__PURE__ */ jsx4("div", { "data-frame": name, className: `ambx-frame ambx-frame-${name}`, children: parts[name] }, name)
+  ) });
+}
+var FOCUSABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable=true],[role=button], [role=checkbox], [role=radio], [role=slider], [role=switch], [role=link]";
+function useDevPartCheck(ref, control) {
+  const warned2 = useRef(false);
+  useEffect(() => {
+    if (!isDev || warned2.current) return;
+    const root = ref.current;
+    if (!root) return;
+    const offenders = root.querySelectorAll(`[data-frame] :is(${FOCUSABLE})`);
+    if (offenders.length === 0) return;
+    warned2.current = true;
+    const tags = Array.from(offenders, (node) => `<${node.tagName.toLowerCase()}>`).join(", ");
+    console.warn(
+      `[@ambientcss/components] ${control}: a part contains a focusable element (${tags}). Parts are presentational \u2014 the control root already owns the role, the tab stop and the keyboard handler, so this creates a second tab stop and usually a conflicting role.`
+    );
+  }, [ref, control]);
+}
+
+// src/core/usePress.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState2 } from "react";
+
+// src/core/controllable.ts
+import { useCallback, useRef as useRef2, useState } from "react";
+function useControllableValue(controlled, defaultValue, onChange) {
+  const isControlled = controlled !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const onChangeRef = useRef2(onChange);
+  onChangeRef.current = onChange;
+  const controlledRef = useRef2(isControlled);
+  controlledRef.current = isControlled;
+  const set = useCallback((next) => {
+    if (!controlledRef.current) setInternal(next);
+    onChangeRef.current?.(next);
+  }, []);
+  return [isControlled ? controlled : internal, set];
+}
+
+// src/core/usePress.ts
+function usePress(options) {
+  const {
+    mode = "momentary",
+    repeatDelay = 400,
+    repeatInterval = 60,
+    disabled = false
+  } = options;
+  const [on, setOn] = useControllableValue(
+    options.value,
+    options.defaultValue ?? false,
+    options.onChange
+  );
+  const [held, setHeld] = useState2(false);
+  const onPressRef = useRef3(options.onPress);
+  onPressRef.current = options.onPress;
+  const timers = useRef3(
+    {}
+  );
+  const stopRepeat = useCallback2(() => {
+    if (timers.current.delay) clearTimeout(timers.current.delay);
+    if (timers.current.tick) clearInterval(timers.current.tick);
+    timers.current = {};
+  }, []);
+  useEffect2(() => stopRepeat, [stopRepeat]);
+  const activate = useCallback2(() => {
+    if (mode === "toggle") setOn(!on);
+    onPressRef.current?.();
+  }, [mode, on, setOn]);
+  const pressed = mode === "toggle" ? on : held;
+  const state = useMemo(
+    () => ({
+      value: pressed ? 1 : 0,
+      min: 0,
+      max: 1,
+      percent: pressed ? 1 : 0,
+      angle: 0,
+      travelStart: 0,
+      travelSweep: 0,
+      detents: 2,
+      dragging: held,
+      disabled,
+      atMin: !pressed,
+      atMax: pressed
+    }),
+    [pressed, held, disabled]
+  );
+  const rootProps = {
+    type: "button",
+    disabled,
+    "aria-pressed": mode === "toggle" ? on : void 0,
+    style: stateStyle(state),
+    "data-pressed": pressed ? "" : void 0,
+    "data-mode": mode,
+    ...stateData(state),
+    onPointerDown: (event) => {
+      if (disabled || event.button !== 0) return;
+      setHeld(true);
+      if (mode !== "repeat") return;
+      onPressRef.current?.();
+      timers.current.delay = setTimeout(() => {
+        timers.current.tick = setInterval(() => onPressRef.current?.(), repeatInterval);
+      }, repeatDelay);
+    },
+    onPointerUp: () => {
+      setHeld(false);
+      stopRepeat();
+    },
+    onPointerCancel: () => {
+      setHeld(false);
+      stopRepeat();
+    },
+    onPointerLeave: () => {
+      setHeld(false);
+      stopRepeat();
+    },
+    onClick: () => {
+      if (mode !== "repeat") activate();
+    }
+  };
+  return { state, rootProps, pressed, on, setOn };
+}
+
+// src/controls/AmbientPress.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function AmbientPress({
+  parts,
+  size,
   className,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  onClick,
-  size = "md",
-  label,
-  led,
+  mode,
+  value,
+  defaultValue,
+  onChange,
+  onPress,
+  repeatDelay,
+  repeatInterval,
+  disabled,
   children,
-  ...props
+  ...rest
 }) {
-  const labelId = useId();
-  const isControlled = checked !== void 0;
-  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
-  const active = isControlled ? checked ?? false : internalChecked;
-  const button = /* @__PURE__ */ jsxs(
+  const ref = useRef4(null);
+  const { state, rootProps } = usePress({
+    mode,
+    value,
+    defaultValue,
+    onChange,
+    onPress,
+    repeatDelay,
+    repeatInterval,
+    disabled
+  });
+  useDevPartCheck(ref, "AmbientPress");
+  const sized = sizeProps("press", size);
+  const { style: restStyle, onClick, ...restProps } = rest;
+  return /* @__PURE__ */ jsx5(
     "button",
     {
-      type: "button",
-      role: "switch",
-      "aria-checked": active,
-      "aria-labelledby": label ? labelId : props["aria-labelledby"],
+      ...restProps,
+      ...rootProps,
+      ref,
+      className: cn("ambx-control ambx-press", sized.className, className),
+      style: { ...rootProps.style, ...sized.style, ...restStyle },
+      onClick: (event) => {
+        rootProps.onClick();
+        onClick?.(event);
+      },
+      children: /* @__PURE__ */ jsxs(ControlStateProvider, { value: state, children: [
+        /* @__PURE__ */ jsx5(Frames, { parts }),
+        children
+      ] })
+    }
+  );
+}
+
+// src/core/kit.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var KitContext = createContext2(null);
+function AmbientKitProvider({ kit, children }) {
+  return /* @__PURE__ */ jsx6(KitContext.Provider, { value: kit, children });
+}
+function useKit() {
+  return useContext2(KitContext);
+}
+var warned = /* @__PURE__ */ new Set();
+function useDress(family, look, fallback) {
+  const kit = useKit();
+  const dressed = kit?.[family];
+  if (isDev && kit && dressed) {
+    const honoured = kit.looks?.[family];
+    if (honoured) {
+      for (const key of Object.keys(look)) {
+        if (look[key] === void 0 || honoured.includes(key)) continue;
+        const id = `${kit.name}:${family}:${key}`;
+        if (warned.has(id)) continue;
+        warned.add(id);
+        console.warn(
+          `[@ambientcss/components] the "${kit.name}" kit's ${family} does not use \`${key}\` \u2014 it is a look prop from another kit's vocabulary, so it will have no effect here.`
+        );
+      }
+    }
+  }
+  return {
+    dress: (dressed ?? fallback)(look),
+    /* Defaults come from the kit that actually dressed the control: a kit
+       that falls through to grounded for a family has no say in how that
+       family behaves either. */
+    defaults: dressed ? kit?.defaults?.[family] : void 0
+  };
+}
+
+// src/parts/knob.tsx
+import { useId } from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var KNURLS = {
+  /* 48 ribs — the referent lineup's fine knurl (referents.py knob_cap /
+     knob_wheel) rather than the 36 of its coarse one, because a band a tenth
+     of the radius wide reads as a machined grip only if the ribs are finer
+     than it is; at 36 the same band came out a bottle cap. */
+  standard: { teeth: 48, depth: 9e-3, sharpness: 1.6, band: 0.05 }
+};
+var KNURL_BAND = KNURLS.standard.band;
+var SEAM = 5e-3;
+var STEPS = 6;
+function knurlPath({ teeth, depth, sharpness, band }) {
+  const outer = 0.5;
+  const inner = outer - band - SEAM;
+  const segs = teeth * STEPS;
+  const pts = [];
+  for (let i = 0; i < segs; i++) {
+    const t = i / segs * Math.PI * 2;
+    const r2 = outer - depth * (0.5 + 0.5 * Math.cos(teeth * t)) ** sharpness;
+    pts.push(
+      `${(0.5 + r2 * Math.cos(t)).toFixed(4)} ${(0.5 + r2 * Math.sin(t)).toFixed(4)}`
+    );
+  }
+  const l = (0.5 - inner).toFixed(4);
+  const r = (0.5 + inner).toFixed(4);
+  const hole = `M${l} 0.5 A${inner} ${inner} 0 0 0 ${r} 0.5 A${inner} ${inner} 0 0 0 ${l} 0.5 Z`;
+  return `M${pts.join(" L")} Z ${hole}`;
+}
+var KNURL_PATH = knurlPath(KNURLS.standard);
+function KnobBody({
+  material,
+  flush = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
       className: cn(
-        "amb-switch",
-        active && "amb-switch-on",
-        "ambx-switch",
-        `ambx-switch-${size}`,
+        "amb-knob-body ambient amb-thickness-2 amb-surface",
+        material && `amb-mat-${material}`,
         className
       ),
-      onClick: (event) => {
-        const next = !active;
-        if (!isControlled) setInternalChecked(next);
-        onCheckedChange?.(next);
-        onClick?.(event);
+      style: flush ? void 0 : { inset: `${KNURL_BAND * 100}%` }
+    }
+  );
+}
+function KnurledFace({
+  material,
+  color,
+  className
+}) {
+  const id = `amb-knurl-${useId().replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx7("svg", { width: 0, height: 0, style: { position: "absolute" }, "aria-hidden": true, focusable: false, children: /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id, clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ jsx7("path", { d: KNURL_PATH, clipRule: "evenodd" }) }) }) }),
+    /* @__PURE__ */ jsx7(
+      "span",
+      {
+        className: cn("amb-knob-face", material && `amb-mat-${material}`, className),
+        style: {
+          clipPath: `url(#${id})`,
+          /* Not a paint colour: --amb-albedo is the ribs' REFLECTANCE, so a
+             dark knurl still takes the scene's exposure, the lamp's cast and
+             the rim's own --amb-shade step, and still goes dark when the
+             lights do. Inline, so it beats the albedo a micro-relief material
+             would otherwise set on this element — an explicit colour wins
+             over the finish's own, and the finish keeps its grain. */
+          ...color ? { "--amb-albedo": color } : null
+        }
+      }
+    )
+  ] });
+}
+function IndicatorDot({ className }) {
+  return /* @__PURE__ */ jsx7("span", { className: cn("amb-knob-indicator-circle", className) });
+}
+function IndicatorBar({ className }) {
+  return /* @__PURE__ */ jsx7("span", { className: cn("amb-knob-indicator-rectangle", className) });
+}
+function ScaleRing({ count = 13, className, children }) {
+  const { travelStart, travelSweep } = useControlState();
+  const divisions = Math.max(1, count - 1);
+  const angles = count <= 1 ? [travelStart] : Array.from({ length: count }, (_, i) => travelStart + i / divisions * travelSweep);
+  return /* @__PURE__ */ jsxs2("span", { className: cn("amb-knob-marker-ring", className), "aria-hidden": true, children: [
+    angles.map((angle) => /* @__PURE__ */ jsx7(
+      "span",
+      {
+        className: "amb-knob-marker",
+        style: { "--amb-marker-angle": `${angle}deg` }
       },
-      ...props,
+      angle
+    )),
+    children
+  ] });
+}
+
+// src/parts/travel.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function TravelTrack({
+  depth = "slot",
+  className
+}) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: cn(
+        "amb-travel-track amb-groove",
+        depth === "channel" && "amb-travel-track-channel",
+        className
+      )
+    }
+  );
+}
+function FaderCap({
+  material,
+  className
+}) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: cn(
+        "amb-fader-thumb ambient amb-fillet",
+        material !== "glass" && "amb-surface-concave",
+        material && `amb-mat-${material}`,
+        className
+      ),
+      children: /* @__PURE__ */ jsx8("span", { className: "amb-fader-gripline" })
+    }
+  );
+}
+function SliderThumb({
+  material,
+  className
+}) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: cn(
+        "amb-slider-thumb ambient amb-fillet",
+        material !== "glass" && "amb-surface-convex",
+        material && `amb-mat-${material}`,
+        className
+      )
+    }
+  );
+}
+
+// src/core/material.ts
+function isRelief(material) {
+  return material === "brushed" || material === "brushed-round" || material === "blasted";
+}
+
+// src/parts/press.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function ButtonCap({
+  material = "matte",
+  className,
+  children
+}) {
+  const relief = isRelief(material);
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      className: cn(
+        "amb-button-cap ambient amb-chamfer amb-surface amb-heading-3",
+        relief ? void 0 : `amb-mat-${material}`,
+        className
+      ),
       children: [
-        led ? /* @__PURE__ */ jsx4(
+        relief ? /* @__PURE__ */ jsx9(
           "span",
           {
-            className: cn("amb-led", !active && "amb-led-off"),
-            style: typeof led === "string" ? { "--amb-led-color": led } : void 0
+            className: cn("ambx-cap-face ambient amb-chamfer amb-surface", `amb-mat-${material}`),
+            "aria-hidden": true
           }
         ) : null,
-        /* @__PURE__ */ jsx4("span", { className: "amb-switch-track amb-groove", children: /* @__PURE__ */ jsx4("span", { className: "amb-switch-pill ambient amb-fillet amb-surface-convex" }) }),
         children
       ]
     }
   );
-  if (!label) return button;
-  return /* @__PURE__ */ jsxs("div", { className: "ambx-stack", children: [
-    button,
-    /* @__PURE__ */ jsx4("span", { id: labelId, className: "ambx-label", children: label })
-  ] });
 }
 
-// src/components/AmbientKnob.tsx
-import { useId as useId2, useRef } from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var KNURLS = {
-  /* 36 ribs — the grounded referent knob (dot and line variants) */
-  standard: { teeth: 36, root: 0.468, rise: 0.12, fall: [0.5, 0.62] },
-  /* 14 broad flutes with deeper roots (OP-Z-style flute variant) */
-  flute: { teeth: 14, root: 0.44, rise: 0.08, fall: [0.72, 0.8] },
-  /* 48-rib fine knurl, shallower (cap and wheel variants) */
-  fine: { teeth: 48, root: 0.476, rise: 0.12, fall: [0.5, 0.62] }
-};
-function knurlPath({ teeth, root, rise, fall }) {
-  const outer = 0.5;
-  const pitch = Math.PI * 2 / teeth;
-  const pts = [];
-  for (let i = 0; i < teeth; i++) {
-    const a = i * pitch;
-    const tooth = [
-      [0, root],
-      [rise, outer],
-      [fall[0], outer],
-      [fall[1], root]
-    ];
-    for (const [frac, radius] of tooth) {
-      const t = a + frac * pitch;
-      pts.push(
-        `${(0.5 + radius * Math.cos(t)).toFixed(4)} ${(0.5 + radius * Math.sin(t)).toFixed(4)}`
-      );
+// src/parts/latch.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function SwitchTrack({ className }) {
+  return /* @__PURE__ */ jsx10("span", { className: cn("amb-switch-track amb-groove", className) });
+}
+function SwitchPill({ className }) {
+  return /* @__PURE__ */ jsx10("span", { className: cn("amb-switch-pill ambient amb-fillet amb-surface-convex", className) });
+}
+function Led({
+  on = true,
+  color,
+  className
+}) {
+  return /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: cn("amb-led", !on && "amb-led-off", className),
+      style: color ? { "--amb-led-color": color } : void 0
     }
-  }
-  return `M${pts.join(" L")} Z`;
+  );
 }
-var KNURL_PATHS = {
-  standard: knurlPath(KNURLS.standard),
-  flute: knurlPath(KNURLS.flute),
-  fine: knurlPath(KNURLS.fine)
-};
-var VARIANT_FAMILY = {
-  dot: "standard",
-  line: "standard",
-  flute: "flute",
-  cap: "fine",
-  wheel: "fine"
+
+// src/parts/bank.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function KeyLens({ className }) {
+  return /* @__PURE__ */ jsx11("span", { className: cn("amb-select-lens", className) });
+}
+function KeyCap({
+  className,
+  children
+}) {
+  const { option } = useBankKey();
+  return /* @__PURE__ */ jsx11("span", { className: cn("amb-select-cap ambient amb-chamfer amb-mat-glass", className), children: children ?? option.label ?? option.value });
+}
+
+// src/kits/grounded.tsx
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var FULL_MARKERS = 13;
+function rotary(look) {
+  const material = look.material;
+  const knurling = look.knurling !== false;
+  const knurlColor = look.knurlColor;
+  const markers = look.markers ?? "none";
+  const indicator = look.indicator ?? "circle";
+  return {
+    /* The full ring reaches past the knob's own box, so its layout clearance
+       has to be reserved — and only the kit knows it put a ring there. */
+    className: cn("amb-knob", markers === "full" && "amb-knob-markers-full"),
+    parts: {
+      panel: markers === "none" ? null : /* @__PURE__ */ jsx12(ScaleRing, { count: markers === "ends" ? 2 : FULL_MARKERS }),
+      /* `material` goes on every element that paints. The cap always does —
+               it is the knob's top face either way — and the knurl ring does too
+               when there is one, so a knurled knob's rim and cap are the same
+               material rather than the rim being the only thing wearing it.
+      
+               `knurlColor` is the one thing the ring may hold on its own: a
+               two-tone knob — dark grip round a pale cap — is a real piece of
+               hardware, and the cap has no matching prop because the cap's colour
+               is the control's colour, set the ordinary way with --amb-albedo. */
+      base: /* @__PURE__ */ jsx12(KnobBody, { flush: !knurling, material }),
+      actuator: /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        knurling ? /* @__PURE__ */ jsx12(KnurledFace, { material, color: knurlColor }) : null,
+        indicator === "circle" ? /* @__PURE__ */ jsx12(IndicatorDot, {}) : /* @__PURE__ */ jsx12(IndicatorBar, {})
+      ] })
+    }
+  };
+}
+function travel(look) {
+  const material = look.material;
+  const upright = look.orientation === "vertical";
+  return {
+    className: upright ? "amb-fader" : "amb-slider",
+    parts: {
+      base: /* @__PURE__ */ jsx12(TravelTrack, { depth: upright ? "slot" : "channel" }),
+      actuator: upright ? /* @__PURE__ */ jsx12(FaderCap, { material }) : /* @__PURE__ */ jsx12(SliderThumb, { material })
+    }
+  };
+}
+function press(look) {
+  const shape = look.shape ?? "pill";
+  return {
+    className: cn(
+      "amb-button amb-groove",
+      shape === "round" && "amb-button-round",
+      shape === "square" && "amb-button-square"
+    ),
+    parts: {
+      actuator: /* @__PURE__ */ jsx12(ButtonCap, { material: look.material ?? "matte", children: look.children })
+    }
+  };
+}
+function latch() {
+  return {
+    className: "amb-switch",
+    parts: { base: /* @__PURE__ */ jsx12(SwitchTrack, {}), actuator: /* @__PURE__ */ jsx12(SwitchPill, {}) }
+  };
+}
+function bank() {
+  return {
+    className: "amb-select amb-groove",
+    parts: { base: /* @__PURE__ */ jsx12(KeyLens, {}), actuator: /* @__PURE__ */ jsx12(KeyCap, {}) }
+  };
+}
+var groundedKit = {
+  name: "grounded",
+  rotary,
+  travel,
+  press,
+  latch,
+  bank,
+  looks: {
+    rotary: ["material", "knurling", "knurlColor", "markers", "indicator"],
+    travel: ["material", "orientation"],
+    press: ["material", "shape", "children"],
+    latch: [],
+    bank: []
+  }
 };
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
+
+// src/components/AmbientButton.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function AmbientButton({
+  className,
+  children,
+  look,
+  material = "matte",
+  shape = "pill",
+  size = "md",
+  ...rest
+}) {
+  const { dress } = useDress("press", { material, shape, children, ...look }, groundedKit.press);
+  return /* @__PURE__ */ jsx13(
+    AmbientPress,
+    {
+      ...rest,
+      size,
+      className: cn(dress.className, className),
+      parts: dress.parts
+    }
+  );
 }
-function AmbientKnob({
+
+// src/components/AmbientSwitch.tsx
+import { useId as useId3 } from "react";
+
+// src/controls/AmbientLatch.tsx
+import { useId as useId2, useRef as useRef5 } from "react";
+
+// src/core/useLatch.ts
+import { useMemo as useMemo2 } from "react";
+function useLatch(options) {
+  const { disabled = false } = options;
+  const [on, setOn] = useControllableValue(
+    options.value,
+    options.defaultValue ?? false,
+    options.onChange
+  );
+  const state = useMemo2(
+    () => ({
+      value: on ? 1 : 0,
+      min: 0,
+      max: 1,
+      percent: on ? 1 : 0,
+      angle: 0,
+      travelStart: 0,
+      travelSweep: 0,
+      detents: 2,
+      dragging: false,
+      disabled,
+      atMin: !on,
+      atMax: on
+    }),
+    [on, disabled]
+  );
+  const rootProps = {
+    type: "button",
+    role: "switch",
+    "aria-checked": on,
+    disabled,
+    style: stateStyle(state),
+    ...stateData(state),
+    onClick: () => setOn(!on)
+  };
+  return { state, rootProps, on, setOn };
+}
+
+// src/controls/AmbientLatch.tsx
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function AmbientLatch({
+  parts,
+  size,
+  animate = "auto",
+  label,
+  className,
   value,
-  min = 0,
-  max = 100,
-  step = 1,
+  defaultValue,
+  onChange,
+  disabled,
+  children,
+  ...rest
+}) {
+  const labelId = useId2();
+  const ref = useRef5(null);
+  const { state, rootProps } = useLatch({ value, defaultValue, onChange, disabled });
+  useDevPartCheck(ref, "AmbientLatch");
+  const sized = sizeProps("latch", size);
+  const { style: restStyle, onClick, ...restProps } = rest;
+  const control = /* @__PURE__ */ jsx14(
+    "button",
+    {
+      ...restProps,
+      ...rootProps,
+      ref,
+      "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+      "data-animate": animate,
+      className: cn("ambx-control ambx-latch", sized.className, className),
+      style: { ...rootProps.style, ...sized.style, ...restStyle },
+      onClick: (event) => {
+        rootProps.onClick();
+        onClick?.(event);
+      },
+      children: /* @__PURE__ */ jsxs5(ControlStateProvider, { value: state, children: [
+        /* @__PURE__ */ jsx14(Frames, { parts }),
+        children
+      ] })
+    }
+  );
+  if (!label) return control;
+  return /* @__PURE__ */ jsxs5("div", { className: "ambx-stack", children: [
+    control,
+    /* @__PURE__ */ jsx14("span", { id: labelId, className: "ambx-label", children: label })
+  ] });
+}
+
+// src/components/AmbientSwitch.tsx
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function AmbientSwitch({
+  size = "md",
+  led,
   label,
-  material,
-  variant = "dot",
+  look,
+  value,
+  defaultValue,
   onChange,
+  animate,
   className,
-  ...props
+  ...rest
 }) {
-  const id = useId2();
-  const clipId = `amb-knurl-${id.replace(/:/g, "")}`;
-  const draggingRef = useRef(false);
-  const knobRef = useRef(null);
-  const safeStep = step > 0 ? step : 1;
-  const family = VARIANT_FAMILY[variant];
-  const percent = (value - min) / (max - min || 1);
-  const rotation = percent * 270 - 135;
-  const pointerToValue = (event) => {
-    const rect = knobRef.current.getBoundingClientRect();
-    const cx = rect.left + rect.width / 2;
-    const cy = rect.top + rect.height / 2;
-    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);
-    let angle = atan2Deg + 90;
-    if (angle > 180) angle -= 360;
-    if (angle < -135 || angle > 135) {
-      angle = percent >= 0.5 ? 135 : -135;
-    }
-    const range = max - min;
-    const raw = min + (angle + 135) / 270 * range;
-    const snapped = Math.round(raw / safeStep) * safeStep;
-    onChange?.(clamp(snapped, min, max));
+  const labelId = useId3();
+  const [on, setOn] = useControllableValue(value, defaultValue ?? false, onChange);
+  const { dress, defaults } = useDress("latch", { ...look }, groundedKit.latch);
+  const control = /* @__PURE__ */ jsx15(
+    AmbientLatch,
+    {
+      ...rest,
+      value: on,
+      onChange: setOn,
+      size,
+      animate: animate ?? defaults?.animate,
+      "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+      className: cn(dress.className, className),
+      parts: dress.parts
+    }
+  );
+  if (!led && !label) return control;
+  return /* @__PURE__ */ jsxs6("div", { className: "ambx-stack", children: [
+    led ? /* @__PURE__ */ jsxs6("span", { className: "ambx-switch-mount", children: [
+      /* @__PURE__ */ jsx15(Led, { on, ...typeof led === "string" ? { color: led } : null }),
+      control
+    ] }) : control,
+    label ? /* @__PURE__ */ jsx15("span", { id: labelId, className: "ambx-label", children: label }) : null
+  ] });
+}
+
+// src/controls/AmbientBank.tsx
+import { useId as useId4 } from "react";
+
+// src/core/useBank.ts
+import { useCallback as useCallback3, useRef as useRef6 } from "react";
+function toArray(value) {
+  if (value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function useBank(options) {
+  const { options: items, multiple = false, orientation = "vertical", disabled = false } = options;
+  const [raw, setRaw] = useControllableValue(
+    options.value,
+    options.defaultValue ?? (multiple ? [] : ""),
+    options.onChange
+  );
+  const selected = toArray(raw);
+  const keyRefs = useRef6([]);
+  const commit2 = useCallback3(
+    (next) => setRaw(multiple ? next : next[0] ?? ""),
+    [setRaw, multiple]
+  );
+  const select = useCallback3(
+    (option) => {
+      if (!option || option.disabled || disabled) return;
+      if (!multiple) return commit2([option.value]);
+      commit2(
+        selected.includes(option.value) ? selected.filter((v) => v !== option.value) : [...selected, option.value]
+      );
+    },
+    [commit2, multiple, selected, disabled]
+  );
+  const enabled = items.filter((o) => !o.disabled);
+  const litIndex = items.findIndex((o) => selected.includes(o.value) && !o.disabled);
+  const firstEnabled = items.findIndex((o) => !o.disabled);
+  const tabStop = multiple ? -1 : litIndex >= 0 ? litIndex : firstEnabled;
+  const focusAt = (index) => keyRefs.current[index]?.focus();
+  const step = (from, delta) => {
+    if (enabled.length === 0) return;
+    let i = from;
+    for (let guard = 0; guard < items.length; guard += 1) {
+      i = (i + delta + items.length) % items.length;
+      if (!items[i]?.disabled) break;
+    }
+    focusAt(i);
+    if (!multiple) select(items[i]);
   };
-  const setValue = (nextValue) => {
-    const snapped = Math.round(nextValue / safeStep) * safeStep;
-    onChange?.(clamp(snapped, min, max));
+  const edge = (which) => {
+    const i = which === "first" ? firstEnabled : items.map((o) => !o.disabled).lastIndexOf(true);
+    if (i < 0) return;
+    focusAt(i);
+    if (!multiple) select(items[i]);
   };
-  const onKeyDown = (event) => {
-    const pageStep = safeStep * 10;
+  const onKeyDown = (event, index) => {
+    const back = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+    const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
     switch (event.key) {
-      case "ArrowUp":
-      case "ArrowRight":
+      case back:
         event.preventDefault();
-        setValue(value + safeStep);
+        step(index, -1);
         break;
-      case "ArrowDown":
-      case "ArrowLeft":
+      case forward:
         event.preventDefault();
-        setValue(value - safeStep);
-        break;
-      case "PageUp":
-        event.preventDefault();
-        setValue(value + pageStep);
-        break;
-      case "PageDown":
-        event.preventDefault();
-        setValue(value - pageStep);
+        step(index, 1);
         break;
       case "Home":
         event.preventDefault();
-        setValue(min);
+        edge("first");
         break;
       case "End":
         event.preventDefault();
-        setValue(max);
+        edge("last");
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        select(items[index]);
         break;
       default:
         break;
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: cn("ambx-stack", className), ...props, children: [
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        ref: knobRef,
-        className: "amb-knob ambx-knob",
-        role: "slider",
-        "aria-label": label,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value,
-        "aria-labelledby": label ? id : void 0,
-        "aria-orientation": "vertical",
-        tabIndex: 0,
-        onPointerDown: (event) => {
-          event.currentTarget.setPointerCapture(event.pointerId);
-          draggingRef.current = true;
-          pointerToValue(event);
-        },
-        onPointerMove: (event) => {
-          if (draggingRef.current) pointerToValue(event);
-        },
-        onPointerUp: () => {
-          draggingRef.current = false;
-        },
-        onPointerCancel: () => {
-          draggingRef.current = false;
-        },
-        onKeyDown,
-        children: [
-          /* @__PURE__ */ jsx5("svg", { width: 0, height: 0, style: { position: "absolute" }, "aria-hidden": true, focusable: false, children: /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ jsx5("path", { d: KNURL_PATHS[family] }) }) }) }),
-          /* @__PURE__ */ jsx5("span", { className: "amb-knob-body ambient amb-thickness-2 amb-surface" }),
-          /* @__PURE__ */ jsxs2(
-            "div",
+  const rootProps = {
+    role: multiple ? "group" : "radiogroup",
+    "aria-orientation": multiple ? void 0 : orientation,
+    "aria-disabled": disabled || void 0,
+    "data-orientation": orientation,
+    "data-disabled": disabled ? "" : void 0
+  };
+  const keyProps = (option, index) => {
+    const on = selected.includes(option.value);
+    return {
+      key: option.value,
+      type: "button",
+      ref: (node) => {
+        keyRefs.current[index] = node;
+      },
+      role: multiple ? "checkbox" : "radio",
+      "aria-checked": on,
+      "aria-label": option.ariaLabel,
+      title: option.ariaLabel,
+      disabled: option.disabled || disabled,
+      tabIndex: multiple ? 0 : index === tabStop ? 0 : -1,
+      "data-on": on ? "" : void 0,
+      onClick: () => select(option),
+      onKeyDown: (event) => onKeyDown(event, index)
+    };
+  };
+  return { selected, select, rootProps, keyProps };
+}
+
+// src/controls/AmbientBank.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function keyState(on, disabled) {
+  return {
+    value: on ? 1 : 0,
+    min: 0,
+    max: 1,
+    percent: on ? 1 : 0,
+    angle: 0,
+    travelStart: 0,
+    travelSweep: 0,
+    detents: 2,
+    dragging: false,
+    disabled,
+    atMin: !on,
+    atMax: on
+  };
+}
+function AmbientBank({
+  options,
+  keyParts,
+  parts,
+  size,
+  color,
+  label,
+  renderKey,
+  className,
+  style,
+  value,
+  defaultValue,
+  onChange,
+  multiple,
+  orientation = "vertical",
+  disabled = false,
+  ...rest
+}) {
+  const labelId = useId4();
+  const { selected, rootProps, keyProps } = useBank({
+    options,
+    value,
+    defaultValue,
+    onChange,
+    multiple,
+    orientation,
+    disabled
+  });
+  const sized = sizeProps("bank", size);
+  const bank2 = /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ...rest,
+      ...rootProps,
+      "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+      className: cn(
+        "ambx-control ambx-bank",
+        `ambx-bank-${orientation}`,
+        sized.className,
+        className
+      ),
+      style: {
+        ...color ? { "--amb-led-color": color } : null,
+        ...sized.style,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx16(Frames, { parts }),
+        options.map((option, index) => {
+          const on = selected.includes(option.value);
+          const ks = keyState(on, option.disabled || disabled);
+          return /* @__PURE__ */ jsx16(
+            "button",
             {
-              className: cn(
-                "ambx-knob-rotation amb-knob-face",
-                family === "flute" && "amb-knob-face-flute",
-                family === "fine" && "amb-knob-face-fine",
-                variant === "cap" && "amb-knob-face-cap",
-                material && `amb-mat-${material}`
-              ),
-              style: { transform: `rotate(${rotation}deg)`, clipPath: `url(#${clipId})` },
-              children: [
-                variant === "dot" ? /* @__PURE__ */ jsx5("span", { className: "amb-knob-indicator-dot" }) : null,
-                variant === "line" ? /* @__PURE__ */ jsx5("span", { className: "amb-knob-indicator-line" }) : null,
-                variant === "flute" ? /* @__PURE__ */ jsx5("span", { className: "amb-knob-indicator-dot amb-knob-indicator-dot-center" }) : null
-              ]
+              ...keyProps(option, index),
+              ...stateData(ks),
+              className: "ambx-key",
+              style: {
+                ...stateStyle(ks),
+                ...option.color ? { "--amb-led-color": option.color } : null
+              },
+              children: /* @__PURE__ */ jsx16(ControlStateProvider, { value: ks, children: /* @__PURE__ */ jsx16(BankKeyProvider, { value: { option, on, index }, children: renderKey ? renderKey(option, on) : /* @__PURE__ */ jsx16(Frames, { parts: keyParts }) }) })
             }
-          )
-        ]
-      }
-    ),
-    label ? /* @__PURE__ */ jsx5("span", { id, className: "ambx-label", children: label }) : null
+          );
+        })
+      ]
+    }
+  );
+  if (!label) return bank2;
+  return /* @__PURE__ */ jsxs7("div", { className: "ambx-stack", children: [
+    bank2,
+    /* @__PURE__ */ jsx16("span", { id: labelId, className: "ambx-label", children: label })
   ] });
 }
 
-// src/components/AmbientFader.tsx
-import { useId as useId3, useRef as useRef2 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function clamp2(value, min, max) {
+// src/components/AmbientSelect.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function AmbientSelect({ size = "md", look, className, ...rest }) {
+  const { dress } = useDress("bank", { ...look }, groundedKit.bank);
+  return /* @__PURE__ */ jsx17(
+    AmbientBank,
+    {
+      ...rest,
+      size,
+      className: cn(dress.className, className),
+      keyParts: dress.parts
+    }
+  );
+}
+
+// src/controls/AmbientRotary.tsx
+import { useId as useId5, useRef as useRef8 } from "react";
+
+// src/core/useRotary.ts
+import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef7, useState as useState3 } from "react";
+
+// src/core/numeric.ts
+function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function AmbientFader({
-  value,
-  min = 0,
-  max = 100,
-  step = 1,
-  label,
-  material,
-  onChange,
-  className,
-  ...props
-}) {
-  const id = useId3();
-  const trackRef = useRef2(null);
-  const safeStep = step > 0 ? step : 1;
-  const percent = (value - min) / (max - min || 1) * 100;
-  const updateFromClientY = (clientY) => {
-    const track = trackRef.current;
-    if (!track) return;
-    const rect = track.getBoundingClientRect();
-    const ratio = 1 - (clientY - rect.top) / rect.height;
-    const nextValue = min + clamp2(ratio, 0, 1) * (max - min);
-    const snapped = Math.round(nextValue / safeStep) * safeStep;
-    onChange?.(clamp2(snapped, min, max));
-  };
-  const setValue = (nextValue) => {
-    const snapped = Math.round(nextValue / safeStep) * safeStep;
-    onChange?.(clamp2(snapped, min, max));
-  };
-  const onKeyDown = (event) => {
-    const pageStep = safeStep * 10;
+function snap(value, min, step) {
+  if (!(step > 0)) return value;
+  return min + Math.round((value - min) / step) * step;
+}
+function normalise(value, min, max) {
+  return (value - min) / (max - min || 1);
+}
+function denormalise(t, min, max) {
+  return min + t * (max - min);
+}
+function commit(value, min, max, step) {
+  return clamp(snap(value, min, max === min ? 1 : step), min, max);
+}
+function valueKeyHandler(options) {
+  return (event) => {
+    const { value, min, max, step, invert, onChange, disabled } = options;
+    if (disabled) return false;
+    const dir = invert ? -1 : 1;
+    const set = (next) => {
+      event.preventDefault();
+      onChange(commit(next, min, max, step));
+    };
     switch (event.key) {
       case "ArrowUp":
       case "ArrowRight":
-        event.preventDefault();
-        setValue(value + safeStep);
-        break;
+        set(value + step * dir);
+        return true;
       case "ArrowDown":
       case "ArrowLeft":
-        event.preventDefault();
-        setValue(value - safeStep);
-        break;
+        set(value - step * dir);
+        return true;
       case "PageUp":
-        event.preventDefault();
-        setValue(value + pageStep);
-        break;
+        set(value + step * 10 * dir);
+        return true;
       case "PageDown":
-        event.preventDefault();
-        setValue(value - pageStep);
-        break;
+        set(value - step * 10 * dir);
+        return true;
       case "Home":
-        event.preventDefault();
-        setValue(min);
-        break;
+        set(min);
+        return true;
       case "End":
-        event.preventDefault();
-        setValue(max);
-        break;
+        set(max);
+        return true;
       default:
-        break;
+        return false;
+    }
+  };
+}
+
+// src/core/useRotary.ts
+var DEFAULT_TRAVEL = { start: -135, sweep: 270 };
+function wrapDeg(deg) {
+  return ((deg + 180) % 360 + 360) % 360 - 180;
+}
+function resolveTravel(travel2) {
+  if (travel2 === void 0) return DEFAULT_TRAVEL;
+  if (typeof travel2 === "number") return { start: -travel2 / 2, sweep: travel2 };
+  return travel2;
+}
+var warnedFullTurn = false;
+function capturePointer(target, pointerId) {
+  try {
+    target.setPointerCapture?.(pointerId);
+  } catch {
+  }
+}
+function useRotary(options) {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    dragDistance = 200,
+    wrap = false,
+    disabled = false
+  } = options;
+  const { start, sweep } = resolveTravel(options.travel);
+  let input = options.input ?? "drag";
+  if (input === "angle" && Math.abs(sweep) >= 360) {
+    if (isDev && !warnedFullTurn) {
+      warnedFullTurn = true;
+      console.warn(
+        `[@ambientcss/components] input="angle" needs a sweep under a full turn (got ${sweep}deg): an absolute angle is ambiguous at 360deg, where the first and last values share a screen position. Falling back to "drag".`
+      );
+    }
+    input = "drag";
+  }
+  const [value, setValue] = useControllableValue(
+    options.value,
+    options.defaultValue ?? min,
+    options.onChange
+  );
+  const [dragging, setDragging] = useState3(false);
+  const draggingRef = useRef7(false);
+  const rootRef = useRef7(null);
+  const drag = useRef7({ value: 0, clientY: 0, angle: 0, accum: 0 });
+  const range = max - min;
+  const keyStep = step > 0 ? step : range / 100 || 1;
+  const percent = clamp(normalise(value, min, max), 0, 1);
+  const angle = start + percent * sweep;
+  const set = useCallback4(
+    (next) => setValue(commit(next, min, max, step)),
+    [setValue, min, max, step]
+  );
+  const pointerAngle = (event) => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const dx = event.clientX - (rect.left + rect.width / 2);
+    const dy = event.clientY - (rect.top + rect.height / 2);
+    return Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+  };
+  const fromAngle = (event) => {
+    const raw = pointerAngle(event);
+    if (raw === null) return;
+    const mid = start + sweep / 2;
+    let a = mid + wrapDeg(raw - mid);
+    const end = start + sweep;
+    if (a < Math.min(start, end) || a > Math.max(start, end)) {
+      const toStart = Math.abs(wrapDeg(a - start));
+      const toEnd = Math.abs(wrapDeg(a - end));
+      a = toStart <= toEnd ? start : end;
+    }
+    set(denormalise((a - start) / (sweep || 1), min, max));
+  };
+  const fromDrag = (event) => {
+    const dy = drag.current.clientY - event.clientY;
+    drag.current.clientY = event.clientY;
+    drag.current.accum += dy * (event.shiftKey ? 0.25 : 1);
+    set(drag.current.value + drag.current.accum / dragDistance * range);
+  };
+  const fromDelta = (event) => {
+    const raw = pointerAngle(event);
+    if (raw === null) return;
+    drag.current.accum += wrapDeg(raw - drag.current.angle);
+    drag.current.angle = raw;
+    const next = drag.current.value + drag.current.accum / (sweep || 360) * range;
+    set(wrap && range > 0 ? min + ((next - min) % range + range) % range : next);
+  };
+  const track = (event) => {
+    if (input === "angle") fromAngle(event);
+    else if (input === "delta") fromDelta(event);
+    else fromDrag(event);
+  };
+  const state = useMemo3(
+    () => ({
+      value,
+      min,
+      max,
+      percent,
+      angle,
+      travelStart: start,
+      travelSweep: sweep,
+      detents: options.detents ?? (step > 0 && range > 0 ? Math.round(range / step) : 0),
+      dragging,
+      disabled,
+      atMin: value <= min,
+      atMax: value >= max
+    }),
+    [value, min, max, percent, angle, start, sweep, options.detents, step, range, dragging, disabled]
+  );
+  const onKeyDown = valueKeyHandler({ value, min, max, step: keyStep, disabled, onChange: setValue });
+  const rootProps = {
+    ref: rootRef,
+    role: "slider",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-orientation": "vertical",
+    "aria-disabled": disabled || void 0,
+    tabIndex: disabled ? -1 : 0,
+    style: stateStyle(state),
+    ...stateData(state),
+    onPointerDown: (event) => {
+      if (disabled || event.button !== 0) return;
+      capturePointer(event.currentTarget, event.pointerId);
+      draggingRef.current = true;
+      setDragging(true);
+      drag.current = {
+        value,
+        clientY: event.clientY,
+        angle: pointerAngle(event) ?? 0,
+        accum: 0
+      };
+      if (input === "angle") fromAngle(event);
+    },
+    onPointerMove: (event) => {
+      if (!draggingRef.current || disabled) return;
+      track(event);
+    },
+    onPointerUp: () => {
+      draggingRef.current = false;
+      setDragging(false);
+    },
+    onPointerCancel: () => {
+      draggingRef.current = false;
+      setDragging(false);
+    },
+    onKeyDown: (event) => {
+      onKeyDown(event);
+    }
+  };
+  return { state, rootProps, setValue: set };
+}
+
+// src/controls/AmbientRotary.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+function AmbientRotary({
+  parts,
+  size,
+  animate = "auto",
+  label,
+  className,
+  value,
+  defaultValue,
+  min,
+  max,
+  step,
+  detents,
+  travel: travel2,
+  input,
+  dragDistance,
+  wrap,
+  disabled,
+  onChange,
+  ...rest
+}) {
+  const labelId = useId5();
+  const stackRef = useRef8(null);
+  const { state, rootProps } = useRotary({
+    value,
+    defaultValue,
+    min,
+    max,
+    step,
+    detents,
+    travel: travel2,
+    input,
+    dragDistance,
+    wrap,
+    disabled,
+    onChange
+  });
+  useDevPartCheck(stackRef, "AmbientRotary");
+  const sized = sizeProps("rotary", size);
+  const { style: restStyle, ...restProps } = rest;
+  const control = /* @__PURE__ */ jsx18(
+    "div",
+    {
+      ...restProps,
+      ...rootProps,
+      "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+      "data-animate": animate,
+      className: cn("ambx-control ambx-rotary", sized.className, className),
+      style: { ...rootProps.style, ...sized.style, ...restStyle },
+      children: /* @__PURE__ */ jsx18(ControlStateProvider, { value: state, children: /* @__PURE__ */ jsx18(Frames, { parts }) })
     }
+  );
+  return /* @__PURE__ */ jsxs8("div", { className: "ambx-stack", ref: stackRef, children: [
+    control,
+    label ? /* @__PURE__ */ jsx18("span", { id: labelId, className: "ambx-label", children: label }) : null
+  ] });
+}
+
+// src/components/AmbientKnob.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function AmbientKnob({
+  material,
+  knurling,
+  knurlColor,
+  markers,
+  indicator,
+  look,
+  size = "md",
+  className,
+  travel: travel2,
+  input,
+  animate,
+  ...rest
+}) {
+  const { dress, defaults } = useDress(
+    "rotary",
+    { material, knurling, knurlColor, markers, indicator, ...look },
+    groundedKit.rotary
+  );
+  return /* @__PURE__ */ jsx19(
+    AmbientRotary,
+    {
+      ...rest,
+      travel: travel2 ?? defaults?.travel,
+      input: input ?? defaults?.input,
+      animate: animate ?? defaults?.animate,
+      size,
+      className: cn(dress.className, className),
+      parts: dress.parts
+    }
+  );
+}
+
+// src/controls/AmbientTravel.tsx
+import { useId as useId6, useRef as useRef10 } from "react";
+
+// src/core/useTravel.ts
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef9, useState as useState4 } from "react";
+function useTravel(options) {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = "horizontal",
+    invert = false,
+    disabled = false
+  } = options;
+  const [value, setValue] = useControllableValue(
+    options.value,
+    options.defaultValue ?? min,
+    options.onChange
+  );
+  const [dragging, setDragging] = useState4(false);
+  const draggingRef = useRef9(false);
+  const rootRef = useRef9(null);
+  const vertical = orientation === "vertical";
+  const range = max - min;
+  const keyStep = step > 0 ? step : range / 100 || 1;
+  const percent = clamp(normalise(value, min, max), 0, 1);
+  const set = useCallback5(
+    (next) => setValue(commit(next, min, max, step)),
+    [setValue, min, max, step]
+  );
+  const track = (event) => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const raw = vertical ? 1 - (event.clientY - rect.top) / (rect.height || 1) : (event.clientX - rect.left) / (rect.width || 1);
+    set(denormalise(clamp(invert ? 1 - raw : raw, 0, 1), min, max));
   };
-  const onPointerMove = (event) => {
-    if (event.buttons !== 1) return;
-    updateFromClientY(event.clientY);
+  const state = useMemo4(
+    () => ({
+      value,
+      min,
+      max,
+      percent,
+      angle: 0,
+      travelStart: 0,
+      travelSweep: 0,
+      detents: options.detents ?? (step > 0 && range > 0 ? Math.round(range / step) : 0),
+      dragging,
+      disabled,
+      atMin: value <= min,
+      atMax: value >= max
+    }),
+    [value, min, max, percent, options.detents, step, range, dragging, disabled]
+  );
+  const onKeyDown = valueKeyHandler({
+    value,
+    min,
+    max,
+    step: keyStep,
+    disabled,
+    invert,
+    onChange: setValue
+  });
+  const rootProps = {
+    ref: rootRef,
+    role: "slider",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-orientation": orientation,
+    "aria-disabled": disabled || void 0,
+    tabIndex: disabled ? -1 : 0,
+    style: stateStyle(state),
+    "data-orientation": orientation,
+    ...stateData(state),
+    onPointerDown: (event) => {
+      if (disabled || event.button !== 0) return;
+      capturePointer(event.currentTarget, event.pointerId);
+      draggingRef.current = true;
+      setDragging(true);
+      track(event);
+    },
+    onPointerMove: (event) => {
+      if (!draggingRef.current || disabled) return;
+      track(event);
+    },
+    onPointerUp: () => {
+      draggingRef.current = false;
+      setDragging(false);
+    },
+    onPointerCancel: () => {
+      draggingRef.current = false;
+      setDragging(false);
+    },
+    onKeyDown: (event) => {
+      onKeyDown(event);
+    }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: cn("ambx-stack", className), ...props, children: [
-    /* @__PURE__ */ jsx6(
+  return { state, rootProps, setValue: set };
+}
+
+// src/controls/AmbientTravel.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function AmbientTravel({
+  parts,
+  size,
+  animate = "auto",
+  label,
+  className,
+  value,
+  defaultValue,
+  min,
+  max,
+  step,
+  detents,
+  orientation = "horizontal",
+  invert,
+  disabled,
+  onChange,
+  ...rest
+}) {
+  const labelId = useId6();
+  const stackRef = useRef10(null);
+  const { state, rootProps } = useTravel({
+    value,
+    defaultValue,
+    min,
+    max,
+    step,
+    detents,
+    orientation,
+    invert,
+    disabled,
+    onChange
+  });
+  useDevPartCheck(stackRef, "AmbientTravel");
+  const sized = sizeProps("travel", size);
+  const { style: restStyle, ...restProps } = rest;
+  return /* @__PURE__ */ jsxs9("div", { className: "ambx-stack", ref: stackRef, children: [
+    /* @__PURE__ */ jsx20(
       "div",
       {
-        className: "amb-fader amb-groove ambx-fader",
-        ref: trackRef,
-        role: "slider",
-        "aria-label": label,
-        "aria-labelledby": label ? id : void 0,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value,
-        "aria-orientation": "vertical",
-        tabIndex: 0,
-        onPointerDown: (event) => {
-          event.currentTarget.setPointerCapture(event.pointerId);
-          updateFromClientY(event.clientY);
-        },
-        onPointerMove,
-        onKeyDown,
-        children: /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: cn("amb-fader-thumb ambient amb-fillet ambx-fader-thumb", material !== "glass" && "amb-surface-concave", material && `amb-mat-${material}`),
-            style: { top: `${100 - percent}%` },
-            children: /* @__PURE__ */ jsx6("span", { className: "amb-fader-gripline" })
-          }
-        )
+        ...restProps,
+        ...rootProps,
+        "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+        "data-animate": animate,
+        className: cn(
+          "ambx-control ambx-travel",
+          `ambx-travel-${orientation}`,
+          sized.className,
+          className
+        ),
+        style: { ...rootProps.style, ...sized.style, ...restStyle },
+        children: /* @__PURE__ */ jsx20(ControlStateProvider, { value: state, children: /* @__PURE__ */ jsx20(Frames, { parts }) })
       }
     ),
-    label ? /* @__PURE__ */ jsx6("span", { id, className: "ambx-label", children: label }) : null
+    label ? /* @__PURE__ */ jsx20("span", { id: labelId, className: "ambx-label", children: label }) : null
   ] });
 }
 
-// src/components/AmbientSlider.tsx
-import { useId as useId4, useRef as useRef3 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function clamp3(value, min, max) {
-  return Math.min(max, Math.max(min, value));
+// src/components/AmbientFader.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function AmbientFader({
+  material,
+  look,
+  size = "md",
+  animate,
+  className,
+  ...rest
+}) {
+  const { dress, defaults } = useDress(
+    "travel",
+    { material, orientation: "vertical", ...look },
+    groundedKit.travel
+  );
+  return /* @__PURE__ */ jsx21(
+    AmbientTravel,
+    {
+      ...rest,
+      orientation: "vertical",
+      size,
+      animate: animate ?? defaults?.animate,
+      className: cn(dress.className, className),
+      parts: dress.parts
+    }
+  );
 }
+
+// src/components/AmbientSlider.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
 function AmbientSlider({
-  value,
-  min = 0,
-  max = 100,
-  step = 1,
-  label,
   material,
-  onChange,
+  look,
+  size = "md",
+  animate,
   className,
-  ...props
+  ...rest
 }) {
-  const id = useId4();
-  const trackRef = useRef3(null);
-  const safeStep = step > 0 ? step : 1;
-  const percent = (value - min) / (max - min || 1) * 100;
-  const updateFromClientX = (clientX) => {
-    const track = trackRef.current;
-    if (!track) return;
-    const rect = track.getBoundingClientRect();
-    const ratio = (clientX - rect.left) / rect.width;
-    const nextValue = min + clamp3(ratio, 0, 1) * (max - min);
-    const snapped = Math.round(nextValue / safeStep) * safeStep;
-    onChange?.(clamp3(snapped, min, max));
-  };
-  const setValue = (nextValue) => {
-    const snapped = Math.round(nextValue / safeStep) * safeStep;
-    onChange?.(clamp3(snapped, min, max));
-  };
-  const onKeyDown = (event) => {
-    const pageStep = safeStep * 10;
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowUp":
-        event.preventDefault();
-        setValue(value + safeStep);
-        break;
-      case "ArrowLeft":
-      case "ArrowDown":
-        event.preventDefault();
-        setValue(value - safeStep);
-        break;
-      case "PageUp":
-        event.preventDefault();
-        setValue(value + pageStep);
-        break;
-      case "PageDown":
-        event.preventDefault();
-        setValue(value - pageStep);
-        break;
-      case "Home":
-        event.preventDefault();
-        setValue(min);
-        break;
-      case "End":
-        event.preventDefault();
-        setValue(max);
-        break;
-      default:
-        break;
+  const { dress, defaults } = useDress(
+    "travel",
+    { material, orientation: "horizontal", ...look },
+    groundedKit.travel
+  );
+  return /* @__PURE__ */ jsx22(
+    AmbientTravel,
+    {
+      ...rest,
+      orientation: "horizontal",
+      size,
+      animate: animate ?? defaults?.animate,
+      className: cn(dress.className, className),
+      parts: dress.parts
+    }
+  );
+}
+
+// src/parts/console.tsx
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+function ConsoleWell({ className }) {
+  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-housing amb-groove", className), children: /* @__PURE__ */ jsx23("span", { className: "amb-console-face amb-surface" }) });
+}
+function ConsoleBar({ className }) {
+  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-bar", className), children: /* @__PURE__ */ jsx23("span", { className: "amb-console-bar-body ambient amb-surface amb-chamfer amb-thickness-2", children: /* @__PURE__ */ jsx23("span", { className: "amb-console-indicator" }) }) });
+}
+function ConsoleMarks({
+  mark = true,
+  legend = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10("span", { className: cn("amb-console-marks", className), "aria-hidden": true, children: [
+    mark ? /* @__PURE__ */ jsx23("span", { className: "amb-console-mark" }) : null,
+    legend ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx23("span", { className: "amb-console-legend amb-console-legend-min", children: "\u2212" }),
+      /* @__PURE__ */ jsx23("span", { className: "amb-console-legend amb-console-legend-max", children: "+" })
+    ] }) : null
+  ] });
+}
+function ToggleTrack({ className }) {
+  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-track amb-groove", className) });
+}
+function ToggleThumb({ className }) {
+  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-thumb ambient amb-thickness-2", className) });
+}
+
+// src/kits/console.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function rotary2(look) {
+  const mark = look.mark !== false;
+  const legend = look.legend !== false;
+  return {
+    className: cn(
+      "amb-console-knob",
+      mark && "amb-console-knob-marked",
+      legend && "amb-console-knob-legended"
+    ),
+    parts: {
+      panel: mark || legend ? /* @__PURE__ */ jsx24(ConsoleMarks, { mark, legend }) : null,
+      base: /* @__PURE__ */ jsx24(ConsoleWell, {}),
+      actuator: /* @__PURE__ */ jsx24(ConsoleBar, {})
     }
   };
-  const onPointerMove = (event) => {
-    if (event.buttons !== 1) return;
-    updateFromClientX(event.clientX);
+}
+function latch2() {
+  return {
+    className: "amb-console-toggle",
+    parts: { base: /* @__PURE__ */ jsx24(ToggleTrack, {}), actuator: /* @__PURE__ */ jsx24(ToggleThumb, {}) }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: cn("ambx-stack", className), ...props, children: [
-    /* @__PURE__ */ jsx7(
-      "div",
-      {
-        className: "amb-slider amb-groove ambx-slider",
-        ref: trackRef,
-        role: "slider",
-        "aria-label": label,
-        "aria-labelledby": label ? id : void 0,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value,
-        "aria-orientation": "horizontal",
-        tabIndex: 0,
-        onPointerDown: (event) => {
-          event.currentTarget.setPointerCapture(event.pointerId);
-          updateFromClientX(event.clientX);
-        },
-        onPointerMove,
-        onKeyDown,
-        children: /* @__PURE__ */ jsx7(
-          "div",
-          {
-            className: cn("amb-slider-thumb ambient amb-fillet ambx-slider-thumb", material !== "glass" && "amb-surface-convex", material && `amb-mat-${material}`),
-            style: { left: `${percent}%` }
-          }
-        )
-      }
-    ),
-    label ? /* @__PURE__ */ jsx7("span", { id, className: "ambx-label", children: label }) : null
-  ] });
+}
+var consoleKit = {
+  name: "console",
+  rotary: rotary2,
+  latch: latch2,
+  /* A visual identity may say how its controls feel to turn. The desk knob
+     this is drawn from is an absolute-position pot with a centre detent, so
+     it grabs where you press rather than tracking a drag. */
+  defaults: {
+    rotary: { input: "angle", travel: 280 }
+  },
+  looks: {
+    rotary: ["mark", "legend"],
+    latch: []
+  }
+};
+function ConsoleKnob({ mark, legend, ...rest }) {
+  return /* @__PURE__ */ jsx24(AmbientKnob, { ...rest, look: { mark, legend } });
+}
+function ConsoleToggle(props) {
+  return /* @__PURE__ */ jsx24(AmbientSwitch, { ...props });
 }
 export {
+  AmbientBank,
   AmbientButton,
   AmbientFader,
+  AmbientKitProvider,
   AmbientKnob,
+  AmbientLatch,
   AmbientPanel,
+  AmbientPress,
   AmbientProvider,
+  AmbientRack,
+  AmbientRotary,
+  AmbientSelect,
   AmbientSlider,
-  AmbientSwitch
+  AmbientSwitch,
+  AmbientTravel,
+  ButtonCap,
+  ConsoleBar,
+  ConsoleKnob,
+  ConsoleMarks,
+  ConsoleToggle,
+  ConsoleWell,
+  FaderCap,
+  IndicatorBar,
+  IndicatorDot,
+  KeyCap,
+  KeyLens,
+  KnobBody,
+  KnurledFace,
+  Led,
+  ScaleRing,
+  SliderThumb,
+  SwitchPill,
+  SwitchTrack,
+  ToggleThumb,
+  ToggleTrack,
+  TravelTrack,
+  consoleKit,
+  groundedKit,
+  useBank,
+  useBankKey,
+  useControlState,
+  useDress,
+  useKit,
+  useLatch,
+  usePress,
+  useRotary,
+  useTravel
 };
 //# sourceMappingURL=index.js.map