@ambientcss/components 1.2.1 → 2.0.1

package/src/components/AmbientKnob.tsx

@@ -2,6 +2,73 @@ import { useId, useRef } from "react";
 import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react";
 import { cn } from "../lib/cn";
 
+/* Straight-knurled silhouettes for the rotating face, in
+   objectBoundingBox units so the clip scales with the component. Each
+   variant family mirrors its referent's rib section
+   (ambient3d/ground_components.py): trapezoid teeth between the outer
+   radius and the tooth-root radius. The circular body underneath keeps
+   the smooth drop shadow. */
+type KnurlSpec = {
+  teeth: number; // rib count
+  root: number; // tooth-root radius (bounding-box units; outer is 0.5)
+  rise: number; // fraction of the pitch spent climbing to the crest
+  fall: [number, number]; // crest-end and root-return pitch fractions
+};
+
+const KNURLS: Record<"standard" | "flute" | "fine", KnurlSpec> = {
+  /* 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 }: KnurlSpec): string {
+  const outer = 0.5;
+  const pitch = (Math.PI * 2) / teeth;
+  const pts: string[] = [];
+  for (let i = 0; i < teeth; i++) {
+    const a = i * pitch;
+    const tooth: Array<[number, number]> = [
+      [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)}`
+      );
+    }
+  }
+  return `M${pts.join(" L")} Z`;
+}
+
+const KNURL_PATHS = {
+  standard: knurlPath(KNURLS.standard),
+  flute: knurlPath(KNURLS.flute),
+  fine: knurlPath(KNURLS.fine)
+};
+
+/* Knob types from the referent lineup (ambient3d/generate.py):
+   - "dot":   the grounded referent — 36-rib knurl, offset indicator dot
+   - "line":  same body with a radial indicator line (classic pot)
+   - "flute": 14 broad flutes, centered dot (OP-Z-style encoder)
+   - "cap":   fine knurl under a smooth accent top disc (OP-1-style)
+   - "wheel": bare fine knurl, no indicator (machined wheel — pair with
+     material="shiny") */
+export type AmbientKnobVariant = "dot" | "line" | "flute" | "cap" | "wheel";
+
+const VARIANT_FAMILY: Record<AmbientKnobVariant, keyof typeof KNURL_PATHS> = {
+  dot: "standard",
+  line: "standard",
+  flute: "flute",
+  cap: "fine",
+  wheel: "fine"
+};
+
 export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
   value: number;
   min?: number;
@@ -9,6 +76,7 @@ export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange">
   step?: number;
   label?: string;
   material?: "matte" | "shiny" | "glass";
+  variant?: AmbientKnobVariant;
   onChange?: (nextValue: number) => void;
 };
 
@@ -23,14 +91,17 @@ export function AmbientKnob({
   step = 1,
   label,
   material,
+  variant = "dot",
   onChange,
   className,
   ...props
 }: AmbientKnobProps) {
   const id = useId();
+  const clipId = `amb-knurl-${id.replace(/:/g, "")}`;
   const draggingRef = useRef(false);
   const knobRef = useRef<HTMLDivElement>(null);
   const safeStep = step > 0 ? step : 1;
+  const family = VARIANT_FAMILY[variant];
 
   const percent = (value - min) / (max - min || 1);
   const rotation = percent * 270 - 135;
@@ -102,7 +173,7 @@ export function AmbientKnob({
     <div className={cn("ambx-stack", className)} {...props}>
       <div
         ref={knobRef}
-        className={cn("ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob", material && `amb-mat-${material}`)}
+        className="amb-knob ambx-knob"
         role="slider"
         aria-label={label}
         aria-valuemin={min}
@@ -127,14 +198,29 @@ export function AmbientKnob({
         }}
         onKeyDown={onKeyDown}
       >
-        <div className="ambx-knob-rotation" style={{ transform: `rotate(${rotation}deg)` }}>
-          <div className="amb-knob-indicator">
-            <div className="amb-knob-grip">
-              <span className="amb-fader-dot" />
-              <span className="amb-fader-dot" />
-              <span className="amb-fader-dot" />
-            </div>
-          </div>
+        <svg width={0} height={0} style={{ position: "absolute" }} aria-hidden focusable={false}>
+          <defs>
+            <clipPath id={clipId} clipPathUnits="objectBoundingBox">
+              <path d={KNURL_PATHS[family]} />
+            </clipPath>
+          </defs>
+        </svg>
+        <span className="amb-knob-body ambient amb-thickness-2 amb-surface" />
+        <div
+          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})` }}
+        >
+          {variant === "dot" ? <span className="amb-knob-indicator-dot" /> : null}
+          {variant === "line" ? <span className="amb-knob-indicator-line" /> : null}
+          {variant === "flute" ? (
+            <span className="amb-knob-indicator-dot amb-knob-indicator-dot-center" />
+          ) : null}
         </div>
       </div>
       {label ? (

package/src/components/AmbientSlider.tsx

@@ -91,7 +91,7 @@ export function AmbientSlider({
   return (
     <div className={cn("ambx-stack", className)} {...props}>
       <div
-        className="amb-slider ambx-slider"
+        className="amb-slider amb-groove ambx-slider"
         ref={trackRef}
         role="slider"
         aria-label={label}
@@ -109,15 +109,9 @@ export function AmbientSlider({
         onKeyDown={onKeyDown}
       >
         <div
-          className={cn("amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb", material !== "glass" && "amb-surface-concave-h", material && `amb-mat-${material}`)}
+          className={cn("amb-slider-thumb ambient amb-fillet ambx-slider-thumb", material !== "glass" && "amb-surface-convex", material && `amb-mat-${material}`)}
           style={{ left: `${percent}%` }}
-        >
-          <div className="amb-slider-grip">
-            <span className="amb-fader-dot" />
-            <span className="amb-fader-dot" />
-            <span className="amb-fader-dot" />
-          </div>
-        </div>
+        />
       </div>
       {label ? (
         <span id={id} className="ambx-label">

package/src/components/AmbientSwitch.tsx

@@ -38,8 +38,8 @@ export function AmbientSwitch({
       aria-checked={active}
       aria-labelledby={label ? labelId : props["aria-labelledby"]}
       className={cn(
-        "ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3",
-        active ? "amb-surface-convex amb-switch-on" : "amb-surface-concave",
+        "amb-switch",
+        active && "amb-switch-on",
         "ambx-switch",
         `ambx-switch-${size}`,
         className
@@ -58,6 +58,9 @@ export function AmbientSwitch({
           style={typeof led === "string" ? { "--amb-led-color": led } as React.CSSProperties : undefined}
         />
       ) : null}
+      <span className="amb-switch-track amb-groove">
+        <span className="amb-switch-pill ambient amb-fillet amb-surface-convex" />
+      </span>
       {children}
     </button>
   );

package/src/index.ts

@@ -5,13 +5,13 @@ export { AmbientPanel } from "./components/AmbientPanel";
 export type { AmbientPanelProps } from "./components/AmbientPanel";
 
 export { AmbientButton } from "./components/AmbientButton";
-export type { AmbientButtonProps } from "./components/AmbientButton";
+export type { AmbientButtonProps, AmbientButtonShape } from "./components/AmbientButton";
 
 export { AmbientSwitch } from "./components/AmbientSwitch";
 export type { AmbientSwitchProps, AmbientSwitchSize } from "./components/AmbientSwitch";
 
 export { AmbientKnob } from "./components/AmbientKnob";
-export type { AmbientKnobProps } from "./components/AmbientKnob";
+export type { AmbientKnobProps, AmbientKnobVariant } from "./components/AmbientKnob";
 
 export { AmbientFader } from "./components/AmbientFader";
 export type { AmbientFaderProps } from "./components/AmbientFader";