@liquid-noise/core 0.1.0

package/CONCEPT.md

@@ -0,0 +1,163 @@
+# Liquid Design Framework — Concept & Technical Documentation
+
+---
+
+## 1. What is Liquid?
+
+Liquid is a design framework where every UI element reacts to two global controls:
+
+| Control | Range | Purpose |
+|---------|-------|---------|
+| **Noise** | 0–10 | Information density. What appears or disappears. |
+| **Size** | 0–10 | Visual scale. How large typography and elements are. |
+
+Users adjust these via knobs in the header. Widgets update in real time in the DOM — no navigation or reload.
+
+---
+
+## 2. Noise Concept
+
+### Definition
+
+**Noise** = interface elements of secondary importance. Primary information is always visible; secondary information appears as noise increases.
+
+### Example: Task Tracker
+
+| Noise | Visible |
+|-------|---------|
+| 1 | Task name, status |
+| 2 | + Deadline |
+| 4 | + Tag |
+| 7 | + Assignee, description preview |
+
+### Example: Team Avatar (implemented)
+
+| Noise | Visible |
+|-------|---------|
+| 0–1 | Hidden |
+| 2–3 | Avatar only |
+| 4–6 | Avatar + name |
+| 7–10 | Avatar + name + role |
+
+### Implementation
+
+- **`useNoise()`** — Hook returning `{ noise, setNoise }`
+- **`<NoiseGate min={N}>`** — Renders children when `noise >= N`; animates in/out, then fully unmounts
+- **`useDeferredUnmount(show)`** — Core hook: keeps element in DOM during exit transition, then unmounts it so it takes zero layout space. Returns `{ mounted, visible }`.
+- Components use `useDeferredUnmount` for noise-driven show/hide: animate first, unmount after
+
+---
+
+## 3. Size Concept
+
+### Definition
+
+**Size** = global scale. All typography, avatars, icons, and spacing follow a single knob. At size 2 everything is compact; at size 9 everything is large.
+
+### Typography System
+
+Three layers:
+
+1. **Base values** — Fixed px scale: `8, 10, 12, 14, 16, 18, 20, 24, 28`
+2. **Semantic sizes** — Tokens: `xs`, `s`, `m`, `l`, `xl`
+3. **Mapping table** — Each semantic size maps to a base value per size-knob range
+
+### Size-Knob Ranges
+
+| Knob range | Tier | Description |
+|------------|------|-------------|
+| 0–2 | 0 | Minimal |
+| 3–4 | 1 | Small |
+| 5–7 | 2 | Medium |
+| 8–10 | 3 | Large |
+
+### Typography Mapping Table
+
+| Semantic | Tier 0 (0–2) | Tier 1 (3–4) | Tier 2 (5–7) | Tier 3 (8–10) |
+|----------|--------------|--------------|--------------|---------------|
+| xs | 10px | 12px | 14px | 16px |
+| s | 12px | 14px | 16px | 18px |
+| m | 14px | 16px | 18px | 20px |
+| l | 16px | 18px | 20px | 24px |
+| xl | 18px | 20px | 24px | 28px |
+
+### Usage in Components
+
+```tsx
+import { useSize, getFontSize, getAvatarSize } from "@liquid-noise/core";
+
+function MyWidget() {
+  const { size } = useSize();
+  const nameSize = getFontSize("s", size);
+  const labelSize = getFontSize("xs", size);
+  const avatarPx = getAvatarSize(size);
+
+  return (
+    <div>
+      <span style={{ fontSize: `${nameSize}px` }}>Name</span>
+      <span style={{ fontSize: `${labelSize}px` }}>Label</span>
+      <div style={{ width: avatarPx, height: avatarPx }} />
+    </div>
+  );
+}
+```
+
+### CSS Variables
+
+`FrameworkSizeSync` updates `:root` when size changes:
+
+- `--fw-font-xs`, `--fw-font-s`, `--fw-font-m`, `--fw-font-l`, `--fw-font-xl`
+- `--fw-avatar-size`
+
+Use `var(--fw-font-s)` in CSS when the component is inside the size context.
+
+---
+
+## 4. Global Easing
+
+All transitions in Liquid elements use a **single global easing**: `--fw-ease` (CSS) / `FW_EASE` (TS). Any change — noise, size, appear, collapse — uses this curve. Do not add custom easing for framework elements.
+
+---
+
+## 5. File Structure
+
+```
+liquid-noise-framework/
+├── src/
+│   ├── index.ts                 # Barrel export
+│   ├── providers/
+│   │   ├── NoiseProvider.tsx    # NoiseProvider, useNoise
+│   │   ├── SizeProvider.tsx     # SizeProvider, useSize
+│   │   └── FrameworkSizeSync.tsx
+│   ├── hooks/
+│   │   └── useDeferredUnmount.ts
+│   ├── components/
+│   │   ├── NoiseGate.tsx
+│   │   └── RotaryKnob.tsx
+│   ├── tokens/
+│   │   ├── transitions.ts
+│   │   └── typography.ts
+│   └── styles/
+│       ├── framework.css
+│       ├── transitions.css
+│       └── typography.css
+├── MANIFEST.md
+└── CONCEPT.md
+```
+
+---
+
+## 6. Creating a New Widget
+
+1. **Noise tiers** — Decide at which noise levels each element appears
+2. **Semantic sizes** — Assign xs/s/m/l/xl to text and labels
+3. **Avatar/icon scale** — Use `getAvatarSize(size)` if the widget has avatars or icons
+4. **Transitions** — Add CSS transitions for opacity, font-size, width, height when values change
+
+---
+
+## 7. Widget Registry (Current)
+
+| Widget | Noise tiers | Size tokens |
+|--------|-------------|-------------|
+| Team avatar | 0–1 hidden, 2–3 avatar, 4–6 +name, 7+ +role | Avatar, name (s), role (xs), label (xs) |

package/MANIFEST.md

@@ -0,0 +1,48 @@
+# Liquid Design Framework — Manifest
+
+> See also: [CONCEPT.md](./CONCEPT.md) — full concept and technical documentation
+
+---
+
+## Vision
+
+All UI elements follow a single principle: **information density is user-controlled**. The user adjusts two knobs in the header, and every widget in the app responds — showing or hiding secondary details, scaling typography and visuals — without page reloads or mode switches.
+
+---
+
+## Core Concepts
+
+### Noise (0–10)
+
+**Noise** = elements of secondary importance. The higher the noise level, the more detail is visible.
+
+- **Low noise (0–2):** Only the most essential information. For a task list: task name and status.
+- **High noise (7–10):** Full detail: deadlines, tags, assignees, descriptions.
+
+Each widget defines its own noise tiers. Elements appear or disappear in the DOM as the user turns the knob. Transitions are smooth (opacity, max-width).
+
+### Size (0–10)
+
+**Size** = global scale token. Typography, avatars, icons, and spacing scale together.
+
+- **Low size (0–2):** Compact view. Small text, small avatars.
+- **High size (8–10):** Large, readable view. Big text, big avatars.
+
+Size uses a semantic typography system: base values (8, 10, 12… px), semantic tokens (xs, s, m, l, xl), and a mapping table per knob range.
+
+---
+
+## Principles
+
+1. **Single global easing** — All transitions use `--fw-ease` / `FW_EASE`. Every change in framework elements uses this curve.
+2. **Widgets respond in-place** — No separate "compact" or "detail" views. The same DOM morphs.
+3. **Gradual implementation** — One widget at a time. Each widget is noise- and size-aware.
+4. **Semantic tokens** — Components assign semantic sizes (e.g. name = S, role = XS). Actual px values come from the framework.
+5. **User control** — The user, not the system, decides how much information to see and at what scale.
+
+---
+
+## Status
+
+- **v0** — Noise + size infrastructure. First widget: team avatar (noise tiers + size token).
+- **Next** — Tasks, projects, and other widgets.

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NoiseContextValue = {
+    noise: number;
+    setNoise: (v: number) => void;
+};
+declare function NoiseProvider({ children, initialValue, onSave, }: {
+    children: ReactNode;
+    initialValue?: number;
+    onSave?: (value: number) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function useNoise(): NoiseContextValue;
+
+type SizeContextValue = {
+    size: number;
+    setSize: (v: number) => void;
+};
+declare function SizeProvider({ children, initialValue, onSave, }: {
+    children: ReactNode;
+    initialValue?: number;
+    onSave?: (value: number) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function useSize(): SizeContextValue;
+
+/** Syncs size-knob value to CSS custom properties on :root. */
+declare function FrameworkSizeSync(): null;
+
+/**
+ * Liquid Framework — deferred unmount hook.
+ *
+ * Keeps a component mounted for the duration of the exit transition,
+ * then unmounts it so it takes zero layout space.
+ *
+ * Usage:
+ *   const { mounted, visible } = useDeferredUnmount(showName);
+ *   // mounted  = true while element should exist in DOM (including exit animation)
+ *   // visible  = true when element should be fully shown (drives CSS values)
+ *
+ *   {mounted && (
+ *     <div style={{ opacity: visible ? 1 : 0, transition: FW_TRANSITION_APPEAR }}>
+ *       ...
+ *     </div>
+ *   )}
+ *
+ * Flow:
+ *   show=true  → mounted=true, visible=true  (element mounts, CSS transitions in)
+ *   show=false → mounted=true, visible=false  (CSS transitions out)
+ *              → after duration   → mounted=false  (element unmounts, zero layout)
+ */
+declare function useDeferredUnmount(show: boolean, durationMs?: number): {
+    mounted: boolean;
+    visible: boolean;
+};
+
+type NoiseGateProps = {
+    min: number;
+    children: ReactNode;
+};
+/** Renders children when noise >= min. Animates in/out, then fully unmounts. */
+declare function NoiseGate({ min, children }: NoiseGateProps): react_jsx_runtime.JSX.Element | null;
+
+declare function RotaryKnob({ label, defaultValue, value: controlledValue, onChange, }: {
+    label: string;
+    defaultValue?: number;
+    value?: number;
+    onChange?: (v: number) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Liquid Framework — Global easing and transition values for inline styles.
+ * Must match styles/transitions.css.
+ *
+ * FW_EASE is the single easing used for ALL framework transitions.
+ * Any change in Liquid elements must use this.
+ */
+/** Global easing — used by every transition in the framework */
+declare const FW_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+/** @deprecated Use FW_EASE */
+declare const FW_EASE_OUT = "cubic-bezier(0.16, 1, 0.3, 1)";
+declare const FW_DURATION_FAST = "0.15s";
+declare const FW_DURATION_NORMAL = "0.25s";
+declare const FW_DURATION_SLOW = "0.35s";
+declare const FW_TRANSITION_APPEAR = "opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), grid-template-rows 0.25s cubic-bezier(0.16, 1, 0.3, 1)";
+declare const FW_TRANSITION_SIZE = "width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.25s cubic-bezier(0.16, 1, 0.3, 1)";
+/** Duration in ms for JS timers (matches FW_DURATION_NORMAL). */
+declare const FW_DURATION_NORMAL_MS = 250;
+
+/**
+ * Liquid Framework typography scale.
+ * Base values (px) and semantic sizes with mapping rules per size-knob range.
+ */
+/** Base font sizes in px — fixed scale. */
+declare const BASE_FONT_SIZES: readonly [8, 10, 12, 14, 16, 18, 20, 24, 28];
+/** Semantic size tokens for component usage. */
+type SemanticSize = "xs" | "s" | "m" | "l" | "xl";
+/** Get font size (px) for a semantic size at the current knob value. */
+declare function getFontSize(semantic: SemanticSize, sizeKnob: number): number;
+/** Get avatar diameter (px) at the current knob value. */
+declare function getAvatarSize(sizeKnob: number): number;
+
+export { BASE_FONT_SIZES, FW_DURATION_FAST, FW_DURATION_NORMAL, FW_DURATION_NORMAL_MS, FW_DURATION_SLOW, FW_EASE, FW_EASE_OUT, FW_TRANSITION_APPEAR, FW_TRANSITION_SIZE, FrameworkSizeSync, NoiseGate, NoiseProvider, RotaryKnob, type SemanticSize, SizeProvider, getAvatarSize, getFontSize, useDeferredUnmount, useNoise, useSize };

package/dist/index.js

@@ -0,0 +1,349 @@
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/providers/NoiseProvider.tsx
+var NoiseContext = createContext(null);
+var DEBOUNCE_MS = 500;
+function NoiseProvider({
+  children,
+  initialValue = 0,
+  onSave
+}) {
+  const [noise, setNoiseRaw] = useState(initialValue);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    setNoiseRaw(initialValue);
+  }, [initialValue]);
+  const setNoise = useCallback(
+    (v) => {
+      setNoiseRaw(v);
+      if (!onSave) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        onSave(v);
+        timerRef.current = null;
+      }, DEBOUNCE_MS);
+    },
+    [onSave]
+  );
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(NoiseContext.Provider, { value: { noise, setNoise }, children });
+}
+function useNoise() {
+  const ctx = useContext(NoiseContext);
+  if (!ctx) {
+    throw new Error("useNoise must be used within NoiseProvider");
+  }
+  return ctx;
+}
+var SizeContext = createContext(null);
+var DEBOUNCE_MS2 = 500;
+function SizeProvider({
+  children,
+  initialValue = 5,
+  onSave
+}) {
+  const [size, setSizeRaw] = useState(initialValue);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    setSizeRaw(initialValue);
+  }, [initialValue]);
+  const setSize = useCallback(
+    (v) => {
+      setSizeRaw(v);
+      if (!onSave) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        onSave(v);
+        timerRef.current = null;
+      }, DEBOUNCE_MS2);
+    },
+    [onSave]
+  );
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: { size, setSize }, children });
+}
+function useSize() {
+  const ctx = useContext(SizeContext);
+  if (!ctx) {
+    throw new Error("useSize must be used within SizeProvider");
+  }
+  return ctx;
+}
+
+// src/tokens/typography.ts
+var BASE_FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 28];
+var SIZE_TABLE = {
+  xs: [10, 12, 14, 16],
+  s: [12, 14, 16, 18],
+  m: [14, 16, 18, 20],
+  l: [16, 18, 20, 24],
+  xl: [18, 20, 24, 28]
+};
+var AVATAR_SIZE_TABLE = [20, 24, 28, 36];
+function sizeToTier(size) {
+  if (size <= 2) return 0;
+  if (size <= 4) return 1;
+  if (size <= 7) return 2;
+  return 3;
+}
+function getFontSize(semantic, sizeKnob) {
+  return SIZE_TABLE[semantic][sizeToTier(sizeKnob)];
+}
+function getAvatarSize(sizeKnob) {
+  return AVATAR_SIZE_TABLE[sizeToTier(sizeKnob)];
+}
+
+// src/providers/FrameworkSizeSync.tsx
+function FrameworkSizeSync() {
+  const { size } = useSize();
+  useEffect(() => {
+    const root = document.documentElement;
+    const semanticSizes = ["xs", "s", "m", "l", "xl"];
+    semanticSizes.forEach((s) => {
+      root.style.setProperty(`--fw-font-${s}`, `${getFontSize(s, size)}px`);
+    });
+    root.style.setProperty(`--fw-avatar-size`, `${getAvatarSize(size)}px`);
+  }, [size]);
+  return null;
+}
+
+// src/tokens/transitions.ts
+var FW_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+var FW_EASE_OUT = FW_EASE;
+var FW_DURATION_FAST = "0.15s";
+var FW_DURATION_NORMAL = "0.25s";
+var FW_DURATION_SLOW = "0.35s";
+var FW_TRANSITION_APPEAR = `opacity ${FW_DURATION_NORMAL} ${FW_EASE}, max-width ${FW_DURATION_NORMAL} ${FW_EASE}, max-height ${FW_DURATION_NORMAL} ${FW_EASE}, grid-template-rows ${FW_DURATION_NORMAL} ${FW_EASE}`;
+var FW_TRANSITION_SIZE = `width ${FW_DURATION_NORMAL} ${FW_EASE}, height ${FW_DURATION_NORMAL} ${FW_EASE}, font-size ${FW_DURATION_NORMAL} ${FW_EASE}`;
+var FW_DURATION_NORMAL_MS = 250;
+
+// src/hooks/useDeferredUnmount.ts
+function useDeferredUnmount(show, durationMs = FW_DURATION_NORMAL_MS) {
+  const [mounted, setMounted] = useState(show);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (show) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setMounted(true);
+    } else {
+      timerRef.current = setTimeout(() => {
+        setMounted(false);
+        timerRef.current = null;
+      }, durationMs);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [show, durationMs]);
+  return { mounted, visible: show };
+}
+function NoiseGate({ min, children }) {
+  const { noise } = useNoise();
+  const { mounted, visible } = useDeferredUnmount(noise >= min);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        opacity: visible ? 1 : 0,
+        transition: FW_TRANSITION_APPEAR,
+        pointerEvents: visible ? "auto" : "none"
+      },
+      children
+    }
+  );
+}
+var MIN_ANGLE = -135;
+var MAX_ANGLE = 135;
+var STEPS = 10;
+var KNOB_SIZE = 28;
+function valueToAngle(value) {
+  return MIN_ANGLE + value / STEPS * (MAX_ANGLE - MIN_ANGLE);
+}
+function angleToValue(angle) {
+  const raw = (angle - MIN_ANGLE) / (MAX_ANGLE - MIN_ANGLE) * STEPS;
+  return Math.round(Math.max(0, Math.min(STEPS, raw)));
+}
+function getAngleFromEvent(e, rect) {
+  const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+  const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const rad = Math.atan2(clientX - cx, cy - clientY);
+  const deg = rad * (180 / Math.PI);
+  return Math.max(MIN_ANGLE, Math.min(MAX_ANGLE, deg));
+}
+function RotaryKnob({
+  label,
+  defaultValue = 0,
+  value: controlledValue,
+  onChange
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const knobRef = useRef(null);
+  const dragging = useRef(false);
+  const updateRef = useRef((v) => {
+    if (onChange) onChange(v);
+    else setInternalValue(v);
+  });
+  updateRef.current = (v) => {
+    if (onChange) onChange(v);
+    else setInternalValue(v);
+  };
+  const handleStart = useCallback((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const rect = knobRef.current.getBoundingClientRect();
+    const native = e.nativeEvent;
+    const angle = getAngleFromEvent(native, rect);
+    updateRef.current(angleToValue(angle));
+  }, []);
+  useEffect(() => {
+    const onMove = (e) => {
+      if (!dragging.current || !knobRef.current) return;
+      const rect = knobRef.current.getBoundingClientRect();
+      const angle = getAngleFromEvent(e, rect);
+      updateRef.current(angleToValue(angle));
+    };
+    const onUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    window.addEventListener("touchmove", onMove);
+    window.addEventListener("touchend", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("touchmove", onMove);
+      window.removeEventListener("touchend", onUp);
+    };
+  }, []);
+  const rotation = valueToAngle(value);
+  const ticks = Array.from({ length: STEPS + 1 }, (_, i) => {
+    const angle = valueToAngle(i);
+    const rad = (angle - 90) * Math.PI / 180;
+    const outer = KNOB_SIZE / 2 + 5;
+    const inner = KNOB_SIZE / 2 + 2;
+    return {
+      x1: Math.cos(rad) * inner,
+      y1: Math.sin(rad) * inner,
+      x2: Math.cos(rad) * outer,
+      y2: Math.sin(rad) * outer,
+      major: i === 0 || i === 5 || i === 10
+    };
+  });
+  const svgSize = KNOB_SIZE + 14;
+  const center = svgSize / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: knobRef,
+            width: svgSize,
+            height: svgSize,
+            viewBox: `0 0 ${svgSize} ${svgSize}`,
+            style: { cursor: "grab", touchAction: "none" },
+            onMouseDown: handleStart,
+            onTouchStart: handleStart,
+            children: [
+              ticks.map((t, i) => /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: center + t.x1,
+                  y1: center + t.y1,
+                  x2: center + t.x2,
+                  y2: center + t.y2,
+                  stroke: i <= value ? "#111" : "#ccc",
+                  strokeWidth: t.major ? 1.5 : 0.75,
+                  strokeLinecap: "round"
+                },
+                i
+              )),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: KNOB_SIZE / 2,
+                  fill: "#fff",
+                  stroke: "#ddd",
+                  strokeWidth: 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: KNOB_SIZE / 2 - 3,
+                  fill: "none",
+                  stroke: "#eee",
+                  strokeWidth: 0.5
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: center,
+                  y1: center,
+                  x2: center + Math.cos((rotation - 90) * Math.PI / 180) * (KNOB_SIZE / 2 - 4),
+                  y2: center + Math.sin((rotation - 90) * Math.PI / 180) * (KNOB_SIZE / 2 - 4),
+                  stroke: "#111",
+                  strokeWidth: 1.5,
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: center, cy: center, r: 1.5, fill: "#111" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "0.55rem",
+              fontWeight: 500,
+              color: "#999",
+              textTransform: "uppercase",
+              letterSpacing: "0.06em",
+              lineHeight: 1
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BASE_FONT_SIZES, FW_DURATION_FAST, FW_DURATION_NORMAL, FW_DURATION_NORMAL_MS, FW_DURATION_SLOW, FW_EASE, FW_EASE_OUT, FW_TRANSITION_APPEAR, FW_TRANSITION_SIZE, FrameworkSizeSync, NoiseGate, NoiseProvider, RotaryKnob, SizeProvider, getAvatarSize, getFontSize, useDeferredUnmount, useNoise, useSize };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/providers/NoiseProvider.tsx","../src/providers/SizeProvider.tsx","../src/tokens/typography.ts","../src/providers/FrameworkSizeSync.tsx","../src/tokens/transitions.ts","../src/hooks/useDeferredUnmount.ts","../src/components/NoiseGate.tsx","../src/components/RotaryKnob.tsx"],"names":["createContext","DEBOUNCE_MS","useState","useRef","useEffect","useCallback","jsx","useContext"],"mappings":";;;;AAeA,IAAM,YAAA,GAAe,cAAwC,IAAI,CAAA;AAEjE,IAAM,WAAA,GAAc,GAAA;AAEb,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf;AACF,CAAA,EAIG;AACD,EAAA,MAAM,CAAC,KAAA,EAAO,WAAW,CAAA,GAAI,SAAS,YAAY,CAAA;AAClD,EAAA,MAAM,QAAA,GAAW,OAA6C,IAAI,CAAA;AAGlE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,YAAY,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAGjB,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,CAAA,KAAc;AACb,MAAA,WAAA,CAAY,CAAC,CAAA;AAEb,MAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,OAAO,CAAA;AACnD,MAAA,QAAA,CAAS,OAAA,GAAU,WAAW,MAAM;AAClC,QAAA,MAAA,CAAO,CAAC,CAAA;AACR,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB,GAAG,WAAW,CAAA;AAAA,IAChB,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,OAAO,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA,CAAC,aAAa,QAAA,EAAb,EAAsB,OAAO,EAAE,KAAA,EAAO,QAAA,EAAS,EAC7C,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,QAAA,GAA8B;AAC5C,EAAA,MAAM,GAAA,GAAM,WAAW,YAAY,CAAA;AACnC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,OAAO,GAAA;AACT;ACxDA,IAAM,WAAA,GAAcA,cAAuC,IAAI,CAAA;AAE/D,IAAMC,YAAAA,GAAc,GAAA;AAEb,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf;AACF,CAAA,EAIG;AACD,EAAA,MAAM,CAAC,IAAA,EAAM,UAAU,CAAA,GAAIC,SAAS,YAAY,CAAA;AAChD,EAAA,MAAM,QAAA,GAAWC,OAA6C,IAAI,CAAA;AAGlE,EAAAC,UAAU,MAAM;AACd,IAAA,UAAA,CAAW,YAAY,CAAA;AAAA,EACzB,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAGjB,EAAA,MAAM,OAAA,GAAUC,WAAAA;AAAA,IACd,CAAC,CAAA,KAAc;AACb,MAAA,UAAA,CAAW,CAAC,CAAA;AAEZ,MAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,OAAO,CAAA;AACnD,MAAA,QAAA,CAAS,OAAA,GAAU,WAAW,MAAM;AAClC,QAAA,MAAA,CAAO,CAAC,CAAA;AACR,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB,GAAGJ,YAAW,CAAA;AAAA,IAChB,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAAG,UAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,YAAA,CAAa,QAAA,CAAS,OAAO,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACEE,GAAAA,CAAC,WAAA,CAAY,QAAA,EAAZ,EAAqB,OAAO,EAAE,IAAA,EAAM,OAAA,EAAQ,EAC1C,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,OAAA,GAA4B;AAC1C,EAAA,MAAM,GAAA,GAAMC,WAAW,WAAW,CAAA;AAClC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,MAAM,0CAA0C,CAAA;AAAA,EAC5D;AACA,EAAA,OAAO,GAAA;AACT;;;ACjEO,IAAM,eAAA,GAAkB,CAAC,CAAA,EAAG,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAE;AAUjE,IAAM,UAAA,GAAqE;AAAA,EACzE,EAAA,EAAI,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,EAClB,CAAA,EAAG,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,EAClB,CAAA,EAAG,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,EAClB,EAAA,EAAI,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE;AACrB,CAAA;AAGA,IAAM,iBAAA,GAAsD,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAE,CAAA;AAE3E,SAAS,WAAW,IAAA,EAA6B;AAC/C,EAAA,IAAI,IAAA,IAAQ,GAAG,OAAO,CAAA;AACtB,EAAA,IAAI,IAAA,IAAQ,GAAG,OAAO,CAAA;AACtB,EAAA,IAAI,IAAA,IAAQ,GAAG,OAAO,CAAA;AACtB,EAAA,OAAO,CAAA;AACT;AAGO,SAAS,WAAA,CAAY,UAAwB,QAAA,EAA0B;AAC5E,EAAA,OAAO,UAAA,CAAW,QAAQ,CAAA,CAAE,UAAA,CAAW,QAAQ,CAAC,CAAA;AAClD;AAGO,SAAS,cAAc,QAAA,EAA0B;AACtD,EAAA,OAAO,iBAAA,CAAkB,UAAA,CAAW,QAAQ,CAAC,CAAA;AAC/C;;;ACpCO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,OAAA,EAAQ;AAEzB,EAAAH,UAAU,MAAM;AACd,IAAA,MAAM,OAAO,QAAA,CAAS,eAAA;AACtB,IAAA,MAAM,gBAAgC,CAAC,IAAA,EAAM,GAAA,EAAK,GAAA,EAAK,KAAK,IAAI,CAAA;AAChE,IAAA,aAAA,CAAc,OAAA,CAAQ,CAAC,CAAA,KAAM;AAC3B,MAAA,IAAA,CAAK,KAAA,CAAM,WAAA,CAAY,CAAA,UAAA,EAAa,CAAC,CAAA,CAAA,EAAI,GAAG,WAAA,CAAY,CAAA,EAAG,IAAI,CAAC,CAAA,EAAA,CAAI,CAAA;AAAA,IACtE,CAAC,CAAA;AACD,IAAA,IAAA,CAAK,MAAM,WAAA,CAAY,CAAA,gBAAA,CAAA,EAAoB,GAAG,aAAA,CAAc,IAAI,CAAC,CAAA,EAAA,CAAI,CAAA;AAAA,EACvE,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,OAAO,IAAA;AACT;;;ACVO,IAAM,OAAA,GAAU;AAGhB,IAAM,WAAA,GAAc;AAEpB,IAAM,gBAAA,GAAmB;AACzB,IAAM,kBAAA,GAAqB;AAC3B,IAAM,gBAAA,GAAmB;AAEzB,IAAM,uBAAuB,CAAA,QAAA,EAAW,kBAAkB,CAAA,CAAA,EAAI,OAAO,eAAe,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,aAAA,EAAgB,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,qBAAA,EAAwB,kBAAkB,IAAI,OAAO,CAAA;AACnN,IAAM,kBAAA,GAAqB,CAAA,MAAA,EAAS,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,SAAA,EAAY,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,YAAA,EAAe,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA;AAGtJ,IAAM,qBAAA,GAAwB;;;ACG9B,SAAS,kBAAA,CACd,IAAA,EACA,UAAA,GAAqB,qBAAA,EACmB;AACxC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIF,SAAS,IAAI,CAAA;AAC3C,EAAA,MAAM,QAAA,GAAWC,OAA6C,IAAI,CAAA;AAElE,EAAAC,UAAU,MAAM;AACd,IAAA,IAAI,IAAA,EAAM;AAER,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,YAAA,CAAa,SAAS,OAAO,CAAA;AAC7B,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB;AACA,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IACjB,CAAA,MAAO;AAEL,MAAA,QAAA,CAAS,OAAA,GAAU,WAAW,MAAM;AAClC,QAAA,UAAA,CAAW,KAAK,CAAA;AAChB,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB,GAAG,UAAU,CAAA;AAAA,IACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,YAAA,CAAa,SAAS,OAAO,CAAA;AAC7B,QAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,MACrB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,UAAU,CAAC,CAAA;AAErB,EAAA,OAAO,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAK;AAClC;AC9CO,SAAS,SAAA,CAAU,EAAE,GAAA,EAAK,QAAA,EAAS,EAAmB;AAC3D,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,QAAA,EAAS;AAC3B,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,kBAAA,CAAmB,SAAS,GAAG,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,EAAA,uBACEE,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,UAAU,CAAA,GAAI,CAAA;AAAA,QACvB,UAAA,EAAY,oBAAA;AAAA,QACZ,aAAA,EAAe,UAAU,MAAA,GAAS;AAAA,OACpC;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AC1BA,IAAM,SAAA,GAAY,IAAA;AAClB,IAAM,SAAA,GAAY,GAAA;AAClB,IAAM,KAAA,GAAQ,EAAA;AACd,IAAM,SAAA,GAAY,EAAA;AAElB,SAAS,aAAa,KAAA,EAAuB;AAC3C,EAAA,OAAO,SAAA,GAAa,KAAA,GAAQ,KAAA,IAAU,SAAA,GAAY,SAAA,CAAA;AACpD;AAEA,SAAS,aAAa,KAAA,EAAuB;AAC3C,EAAA,MAAM,GAAA,GAAA,CAAQ,KAAA,GAAQ,SAAA,KAAc,SAAA,GAAY,SAAA,CAAA,GAAc,KAAA;AAC9D,EAAA,OAAO,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,GAAA,CAAI,KAAA,EAAO,GAAG,CAAC,CAAC,CAAA;AACrD;AAEA,SAAS,iBAAA,CACP,GACA,IAAA,EACQ;AACR,EAAA,MAAM,OAAA,GAAU,aAAa,CAAA,GAAI,CAAA,CAAE,QAAQ,CAAC,CAAA,CAAE,UAAU,CAAA,CAAE,OAAA;AAC1D,EAAA,MAAM,OAAA,GAAU,aAAa,CAAA,GAAI,CAAA,CAAE,QAAQ,CAAC,CAAA,CAAE,UAAU,CAAA,CAAE,OAAA;AAC1D,EAAA,MAAM,EAAA,GAAK,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,CAAA;AACpC,EAAA,MAAM,EAAA,GAAK,IAAA,CAAK,GAAA,GAAM,IAAA,CAAK,MAAA,GAAS,CAAA;AACpC,EAAA,MAAM,MAAM,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,EAAA,EAAI,KAAK,OAAO,CAAA;AACjD,EAAA,MAAM,GAAA,GAAM,GAAA,IAAO,GAAA,GAAM,IAAA,CAAK,EAAA,CAAA;AAC9B,EAAA,OAAO,KAAK,GAAA,CAAI,SAAA,EAAW,KAAK,GAAA,CAAI,SAAA,EAAW,GAAG,CAAC,CAAA;AACrD;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,KAAA,EAAO,eAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIJ,SAAS,YAAY,CAAA;AAC/D,EAAA,MAAM,KAAA,GACJ,eAAA,KAAoB,MAAA,GAAY,eAAA,GAAkB,aAAA;AACpD,EAAA,MAAM,OAAA,GAAUC,OAAsB,IAAI,CAAA;AAC1C,EAAA,MAAM,QAAA,GAAWA,OAAO,KAAK,CAAA;AAE7B,EAAA,MAAM,SAAA,GAAYA,MAAAA,CAAO,CAAC,CAAA,KAAc;AACtC,IAAA,IAAI,QAAA,WAAmB,CAAC,CAAA;AAAA,0BACF,CAAC,CAAA;AAAA,EACzB,CAAC,CAAA;AACD,EAAA,SAAA,CAAU,OAAA,GAAU,CAAC,CAAA,KAAc;AACjC,IAAA,IAAI,QAAA,WAAmB,CAAC,CAAA;AAAA,0BACF,CAAC,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAcE,WAAAA,CAAY,CAAC,CAAA,KAA2C;AAC1E,IAAA,CAAA,CAAE,cAAA,EAAe;AACjB,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,OAAA,CAAS,qBAAA,EAAsB;AACpD,IAAA,MAAM,SAAS,CAAA,CAAE,WAAA;AACjB,IAAA,MAAM,KAAA,GAAQ,iBAAA,CAAkB,MAAA,EAAQ,IAAI,CAAA;AAC5C,IAAA,SAAA,CAAU,OAAA,CAAQ,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,EACvC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAD,UAAU,MAAM;AACd,IAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAA+B;AAC7C,MAAA,IAAI,CAAC,QAAA,CAAS,OAAA,IAAW,CAAC,QAAQ,OAAA,EAAS;AAC3C,MAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,OAAA,CAAQ,qBAAA,EAAsB;AACnD,MAAA,MAAM,KAAA,GAAQ,iBAAA,CAAkB,CAAA,EAAG,IAAI,CAAA;AACvC,MAAA,SAAA,CAAU,OAAA,CAAQ,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,IACvC,CAAA;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,IACrB,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,MAAM,CAAA;AAC3C,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,IAAI,CAAA;AACvC,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,MAAM,CAAA;AAC3C,IAAA,MAAA,CAAO,gBAAA,CAAiB,YAAY,IAAI,CAAA;AAExC,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,MAAM,CAAA;AAC9C,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,IAAI,CAAA;AAC1C,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,MAAM,CAAA;AAC9C,MAAA,MAAA,CAAO,mBAAA,CAAoB,YAAY,IAAI,CAAA;AAAA,IAC7C,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAA,GAAW,aAAa,KAAK,CAAA;AAGnC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,QAAQ,CAAA,EAAE,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM;AACxD,IAAA,MAAM,KAAA,GAAQ,aAAa,CAAC,CAAA;AAC5B,IAAA,MAAM,GAAA,GAAA,CAAQ,KAAA,GAAQ,EAAA,IAAM,IAAA,CAAK,EAAA,GAAM,GAAA;AACvC,IAAA,MAAM,KAAA,GAAQ,YAAY,CAAA,GAAI,CAAA;AAC9B,IAAA,MAAM,KAAA,GAAQ,YAAY,CAAA,GAAI,CAAA;AAC9B,IAAA,OAAO;AAAA,MACL,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA;AAAA,MACpB,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA;AAAA,MACpB,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA;AAAA,MACpB,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA;AAAA,MACpB,KAAA,EAAO,CAAA,KAAM,CAAA,IAAK,CAAA,KAAM,KAAK,CAAA,KAAM;AAAA,KACrC;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,UAAU,SAAA,GAAY,EAAA;AAC5B,EAAA,MAAM,SAAS,OAAA,GAAU,CAAA;AAEzB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,UAAA,EAAY,QAAA;AAAA,QACZ,GAAA,EAAK,CAAA;AAAA,QACL,UAAA,EAAY,MAAA;AAAA,QACZ,gBAAA,EAAkB;AAAA,OACpB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,OAAA;AAAA,YACL,KAAA,EAAO,OAAA;AAAA,YACP,MAAA,EAAQ,OAAA;AAAA,YACR,OAAA,EAAS,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,YAClC,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,EAAQ,aAAa,MAAA,EAAO;AAAA,YAC7C,WAAA,EAAa,WAAA;AAAA,YACb,YAAA,EAAc,WAAA;AAAA,YAGb,QAAA,EAAA;AAAA,cAAA,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBACbE,GAAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBAEC,EAAA,EAAI,SAAS,CAAA,CAAE,EAAA;AAAA,kBACf,EAAA,EAAI,SAAS,CAAA,CAAE,EAAA;AAAA,kBACf,EAAA,EAAI,SAAS,CAAA,CAAE,EAAA;AAAA,kBACf,EAAA,EAAI,SAAS,CAAA,CAAE,EAAA;AAAA,kBACf,MAAA,EAAQ,CAAA,IAAK,KAAA,GAAQ,MAAA,GAAS,MAAA;AAAA,kBAC9B,WAAA,EAAa,CAAA,CAAE,KAAA,GAAQ,GAAA,GAAM,IAAA;AAAA,kBAC7B,aAAA,EAAc;AAAA,iBAAA;AAAA,gBAPT;AAAA,eASR,CAAA;AAAA,8BAGDA,GAAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,MAAA;AAAA,kBACJ,EAAA,EAAI,MAAA;AAAA,kBACJ,GAAG,SAAA,GAAY,CAAA;AAAA,kBACf,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAO,MAAA;AAAA,kBACP,WAAA,EAAa;AAAA;AAAA,eACf;AAAA,8BAGAA,GAAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,MAAA;AAAA,kBACJ,EAAA,EAAI,MAAA;AAAA,kBACJ,CAAA,EAAG,YAAY,CAAA,GAAI,CAAA;AAAA,kBACnB,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAO,MAAA;AAAA,kBACP,WAAA,EAAa;AAAA;AAAA,eACf;AAAA,8BAGAA,GAAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,MAAA;AAAA,kBACJ,EAAA,EAAI,MAAA;AAAA,kBACJ,EAAA,EACE,MAAA,GACA,IAAA,CAAK,GAAA,CAAA,CAAM,QAAA,GAAW,EAAA,IAAM,IAAA,CAAK,EAAA,GAAM,GAAG,CAAA,IAAK,SAAA,GAAY,CAAA,GAAI,CAAA,CAAA;AAAA,kBAEjE,EAAA,EACE,MAAA,GACA,IAAA,CAAK,GAAA,CAAA,CAAM,QAAA,GAAW,EAAA,IAAM,IAAA,CAAK,EAAA,GAAM,GAAG,CAAA,IAAK,SAAA,GAAY,CAAA,GAAI,CAAA,CAAA;AAAA,kBAEjE,MAAA,EAAO,MAAA;AAAA,kBACP,WAAA,EAAa,GAAA;AAAA,kBACb,aAAA,EAAc;AAAA;AAAA,eAChB;AAAA,8BAGAA,GAAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,IAAI,MAAA,EAAQ,CAAA,EAAG,GAAA,EAAK,IAAA,EAAK,MAAA,EAAO;AAAA;AAAA;AAAA,SACtD;AAAA,wBAEAA,GAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,QAAA,EAAU,SAAA;AAAA,cACV,UAAA,EAAY,GAAA;AAAA,cACZ,KAAA,EAAO,MAAA;AAAA,cACP,aAAA,EAAe,WAAA;AAAA,cACf,aAAA,EAAe,QAAA;AAAA,cACf,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type ReactNode,\n} from \"react\";\n\nexport type NoiseContextValue = {\n  noise: number;\n  setNoise: (v: number) => void;\n};\n\nconst NoiseContext = createContext<NoiseContextValue | null>(null);\n\nconst DEBOUNCE_MS = 500;\n\nexport function NoiseProvider({\n  children,\n  initialValue = 0,\n  onSave,\n}: {\n  children: ReactNode;\n  initialValue?: number;\n  onSave?: (value: number) => void;\n}) {\n  const [noise, setNoiseRaw] = useState(initialValue);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Sync when initialValue changes (e.g. after loading from DB)\n  useEffect(() => {\n    setNoiseRaw(initialValue);\n  }, [initialValue]);\n\n  // Debounced save via callback\n  const setNoise = useCallback(\n    (v: number) => {\n      setNoiseRaw(v);\n\n      if (!onSave) return;\n\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => {\n        onSave(v);\n        timerRef.current = null;\n      }, DEBOUNCE_MS);\n    },\n    [onSave],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <NoiseContext.Provider value={{ noise, setNoise }}>\n      {children}\n    </NoiseContext.Provider>\n  );\n}\n\nexport function useNoise(): NoiseContextValue {\n  const ctx = useContext(NoiseContext);\n  if (!ctx) {\n    throw new Error(\"useNoise must be used within NoiseProvider\");\n  }\n  return ctx;\n}\n","import {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type ReactNode,\n} from \"react\";\n\nexport type SizeContextValue = {\n  size: number;\n  setSize: (v: number) => void;\n};\n\nconst SizeContext = createContext<SizeContextValue | null>(null);\n\nconst DEBOUNCE_MS = 500;\n\nexport function SizeProvider({\n  children,\n  initialValue = 5,\n  onSave,\n}: {\n  children: ReactNode;\n  initialValue?: number;\n  onSave?: (value: number) => void;\n}) {\n  const [size, setSizeRaw] = useState(initialValue);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Sync when initialValue changes (e.g. after loading from DB)\n  useEffect(() => {\n    setSizeRaw(initialValue);\n  }, [initialValue]);\n\n  // Debounced save via callback\n  const setSize = useCallback(\n    (v: number) => {\n      setSizeRaw(v);\n\n      if (!onSave) return;\n\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => {\n        onSave(v);\n        timerRef.current = null;\n      }, DEBOUNCE_MS);\n    },\n    [onSave],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <SizeContext.Provider value={{ size, setSize }}>\n      {children}\n    </SizeContext.Provider>\n  );\n}\n\nexport function useSize(): SizeContextValue {\n  const ctx = useContext(SizeContext);\n  if (!ctx) {\n    throw new Error(\"useSize must be used within SizeProvider\");\n  }\n  return ctx;\n}\n","/**\n * Liquid Framework typography scale.\n * Base values (px) and semantic sizes with mapping rules per size-knob range.\n */\n\n/** Base font sizes in px — fixed scale. */\nexport const BASE_FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 28] as const;\n\n/** Semantic size tokens for component usage. */\nexport type SemanticSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\n/**\n * Size-knob ranges: 0-2, 3-4, 5-7, 8-10.\n * Each semantic size maps to a base value per range.\n * XS: 1-2 → 10, 3-4 → 12, 5-7 → 14, 8-10 → 16 (per user spec)\n */\nconst SIZE_TABLE: Record<SemanticSize, [number, number, number, number]> = {\n  xs: [10, 12, 14, 16],\n  s: [12, 14, 16, 18],\n  m: [14, 16, 18, 20],\n  l: [16, 18, 20, 24],\n  xl: [18, 20, 24, 28],\n};\n\n/** Avatar size scale (px) per size-knob range. */\nconst AVATAR_SIZE_TABLE: [number, number, number, number] = [20, 24, 28, 36];\n\nfunction sizeToTier(size: number): 0 | 1 | 2 | 3 {\n  if (size <= 2) return 0;\n  if (size <= 4) return 1;\n  if (size <= 7) return 2;\n  return 3;\n}\n\n/** Get font size (px) for a semantic size at the current knob value. */\nexport function getFontSize(semantic: SemanticSize, sizeKnob: number): number {\n  return SIZE_TABLE[semantic][sizeToTier(sizeKnob)];\n}\n\n/** Get avatar diameter (px) at the current knob value. */\nexport function getAvatarSize(sizeKnob: number): number {\n  return AVATAR_SIZE_TABLE[sizeToTier(sizeKnob)];\n}\n","import { useEffect } from \"react\";\nimport { useSize } from \"./SizeProvider\";\nimport { getFontSize, getAvatarSize } from \"../tokens/typography\";\nimport type { SemanticSize } from \"../tokens/typography\";\n\n/** Syncs size-knob value to CSS custom properties on :root. */\nexport function FrameworkSizeSync() {\n  const { size } = useSize();\n\n  useEffect(() => {\n    const root = document.documentElement;\n    const semanticSizes: SemanticSize[] = [\"xs\", \"s\", \"m\", \"l\", \"xl\"];\n    semanticSizes.forEach((s) => {\n      root.style.setProperty(`--fw-font-${s}`, `${getFontSize(s, size)}px`);\n    });\n    root.style.setProperty(`--fw-avatar-size`, `${getAvatarSize(size)}px`);\n  }, [size]);\n\n  return null;\n}\n","/**\n * Liquid Framework — Global easing and transition values for inline styles.\n * Must match styles/transitions.css.\n *\n * FW_EASE is the single easing used for ALL framework transitions.\n * Any change in Liquid elements must use this.\n */\n\n/** Global easing — used by every transition in the framework */\nexport const FW_EASE = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** @deprecated Use FW_EASE */\nexport const FW_EASE_OUT = FW_EASE;\n\nexport const FW_DURATION_FAST = \"0.15s\";\nexport const FW_DURATION_NORMAL = \"0.25s\";\nexport const FW_DURATION_SLOW = \"0.35s\";\n\nexport const FW_TRANSITION_APPEAR = `opacity ${FW_DURATION_NORMAL} ${FW_EASE}, max-width ${FW_DURATION_NORMAL} ${FW_EASE}, max-height ${FW_DURATION_NORMAL} ${FW_EASE}, grid-template-rows ${FW_DURATION_NORMAL} ${FW_EASE}`;\nexport const FW_TRANSITION_SIZE = `width ${FW_DURATION_NORMAL} ${FW_EASE}, height ${FW_DURATION_NORMAL} ${FW_EASE}, font-size ${FW_DURATION_NORMAL} ${FW_EASE}`;\n\n/** Duration in ms for JS timers (matches FW_DURATION_NORMAL). */\nexport const FW_DURATION_NORMAL_MS = 250;\n","import { useState, useEffect, useRef } from \"react\";\nimport { FW_DURATION_NORMAL_MS } from \"../tokens/transitions\";\n\n/**\n * Liquid Framework — deferred unmount hook.\n *\n * Keeps a component mounted for the duration of the exit transition,\n * then unmounts it so it takes zero layout space.\n *\n * Usage:\n *   const { mounted, visible } = useDeferredUnmount(showName);\n *   // mounted  = true while element should exist in DOM (including exit animation)\n *   // visible  = true when element should be fully shown (drives CSS values)\n *\n *   {mounted && (\n *     <div style={{ opacity: visible ? 1 : 0, transition: FW_TRANSITION_APPEAR }}>\n *       ...\n *     </div>\n *   )}\n *\n * Flow:\n *   show=true  → mounted=true, visible=true  (element mounts, CSS transitions in)\n *   show=false → mounted=true, visible=false  (CSS transitions out)\n *              → after duration   → mounted=false  (element unmounts, zero layout)\n */\nexport function useDeferredUnmount(\n  show: boolean,\n  durationMs: number = FW_DURATION_NORMAL_MS,\n): { mounted: boolean; visible: boolean } {\n  const [mounted, setMounted] = useState(show);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (show) {\n      // Cancel any pending unmount\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n      setMounted(true);\n    } else {\n      // Delay unmount so exit transition can play\n      timerRef.current = setTimeout(() => {\n        setMounted(false);\n        timerRef.current = null;\n      }, durationMs);\n    }\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [show, durationMs]);\n\n  return { mounted, visible: show };\n}\n","import type { ReactNode } from \"react\";\nimport { FW_TRANSITION_APPEAR } from \"../tokens/transitions\";\nimport { useDeferredUnmount } from \"../hooks/useDeferredUnmount\";\nimport { useNoise } from \"../providers/NoiseProvider\";\n\ntype NoiseGateProps = {\n  min: number;\n  children: ReactNode;\n};\n\n/** Renders children when noise >= min. Animates in/out, then fully unmounts. */\nexport function NoiseGate({ min, children }: NoiseGateProps) {\n  const { noise } = useNoise();\n  const { mounted, visible } = useDeferredUnmount(noise >= min);\n\n  if (!mounted) return null;\n\n  return (\n    <div\n      style={{\n        opacity: visible ? 1 : 0,\n        transition: FW_TRANSITION_APPEAR,\n        pointerEvents: visible ? \"auto\" : \"none\",\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useCallback, useRef, useState, useEffect } from \"react\";\n\nconst MIN_ANGLE = -135;\nconst MAX_ANGLE = 135;\nconst STEPS = 10;\nconst KNOB_SIZE = 28;\n\nfunction valueToAngle(value: number): number {\n  return MIN_ANGLE + (value / STEPS) * (MAX_ANGLE - MIN_ANGLE);\n}\n\nfunction angleToValue(angle: number): number {\n  const raw = ((angle - MIN_ANGLE) / (MAX_ANGLE - MIN_ANGLE)) * STEPS;\n  return Math.round(Math.max(0, Math.min(STEPS, raw)));\n}\n\nfunction getAngleFromEvent(\n  e: MouseEvent | TouchEvent,\n  rect: DOMRect,\n): number {\n  const clientX = \"touches\" in e ? e.touches[0].clientX : e.clientX;\n  const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\n  const cx = rect.left + rect.width / 2;\n  const cy = rect.top + rect.height / 2;\n  const rad = Math.atan2(clientX - cx, cy - clientY);\n  const deg = rad * (180 / Math.PI);\n  return Math.max(MIN_ANGLE, Math.min(MAX_ANGLE, deg));\n}\n\nexport function RotaryKnob({\n  label,\n  defaultValue = 0,\n  value: controlledValue,\n  onChange,\n}: {\n  label: string;\n  defaultValue?: number;\n  value?: number;\n  onChange?: (v: number) => void;\n}) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const value =\n    controlledValue !== undefined ? controlledValue : internalValue;\n  const knobRef = useRef<SVGSVGElement>(null);\n  const dragging = useRef(false);\n\n  const updateRef = useRef((v: number) => {\n    if (onChange) onChange(v);\n    else setInternalValue(v);\n  });\n  updateRef.current = (v: number) => {\n    if (onChange) onChange(v);\n    else setInternalValue(v);\n  };\n\n  const handleStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {\n    e.preventDefault();\n    dragging.current = true;\n    const rect = knobRef.current!.getBoundingClientRect();\n    const native = e.nativeEvent as MouseEvent | TouchEvent;\n    const angle = getAngleFromEvent(native, rect);\n    updateRef.current(angleToValue(angle));\n  }, []);\n\n  useEffect(() => {\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!dragging.current || !knobRef.current) return;\n      const rect = knobRef.current.getBoundingClientRect();\n      const angle = getAngleFromEvent(e, rect);\n      updateRef.current(angleToValue(angle));\n    };\n\n    const onUp = () => {\n      dragging.current = false;\n    };\n\n    window.addEventListener(\"mousemove\", onMove);\n    window.addEventListener(\"mouseup\", onUp);\n    window.addEventListener(\"touchmove\", onMove);\n    window.addEventListener(\"touchend\", onUp);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", onMove);\n      window.removeEventListener(\"mouseup\", onUp);\n      window.removeEventListener(\"touchmove\", onMove);\n      window.removeEventListener(\"touchend\", onUp);\n    };\n  }, []);\n\n  const rotation = valueToAngle(value);\n\n  // Generate tick marks\n  const ticks = Array.from({ length: STEPS + 1 }, (_, i) => {\n    const angle = valueToAngle(i);\n    const rad = ((angle - 90) * Math.PI) / 180;\n    const outer = KNOB_SIZE / 2 + 5;\n    const inner = KNOB_SIZE / 2 + 2;\n    return {\n      x1: Math.cos(rad) * inner,\n      y1: Math.sin(rad) * inner,\n      x2: Math.cos(rad) * outer,\n      y2: Math.sin(rad) * outer,\n      major: i === 0 || i === 5 || i === 10,\n    };\n  });\n\n  const svgSize = KNOB_SIZE + 14;\n  const center = svgSize / 2;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        gap: 1,\n        userSelect: \"none\",\n        WebkitUserSelect: \"none\",\n      }}\n    >\n      <svg\n        ref={knobRef}\n        width={svgSize}\n        height={svgSize}\n        viewBox={`0 0 ${svgSize} ${svgSize}`}\n        style={{ cursor: \"grab\", touchAction: \"none\" }}\n        onMouseDown={handleStart}\n        onTouchStart={handleStart}\n      >\n        {/* Tick marks */}\n        {ticks.map((t, i) => (\n          <line\n            key={i}\n            x1={center + t.x1}\n            y1={center + t.y1}\n            x2={center + t.x2}\n            y2={center + t.y2}\n            stroke={i <= value ? \"#111\" : \"#ccc\"}\n            strokeWidth={t.major ? 1.5 : 0.75}\n            strokeLinecap=\"round\"\n          />\n        ))}\n\n        {/* Knob body */}\n        <circle\n          cx={center}\n          cy={center}\n          r={KNOB_SIZE / 2}\n          fill=\"#fff\"\n          stroke=\"#ddd\"\n          strokeWidth={1}\n        />\n\n        {/* Inner subtle ring */}\n        <circle\n          cx={center}\n          cy={center}\n          r={KNOB_SIZE / 2 - 3}\n          fill=\"none\"\n          stroke=\"#eee\"\n          strokeWidth={0.5}\n        />\n\n        {/* Indicator line */}\n        <line\n          x1={center}\n          y1={center}\n          x2={\n            center +\n            Math.cos(((rotation - 90) * Math.PI) / 180) * (KNOB_SIZE / 2 - 4)\n          }\n          y2={\n            center +\n            Math.sin(((rotation - 90) * Math.PI) / 180) * (KNOB_SIZE / 2 - 4)\n          }\n          stroke=\"#111\"\n          strokeWidth={1.5}\n          strokeLinecap=\"round\"\n        />\n\n        {/* Center dot */}\n        <circle cx={center} cy={center} r={1.5} fill=\"#111\" />\n      </svg>\n\n      <span\n        style={{\n          fontSize: \"0.55rem\",\n          fontWeight: 500,\n          color: \"#999\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.06em\",\n          lineHeight: 1,\n        }}\n      >\n        {label}\n      </span>\n    </div>\n  );\n}\n"]}

package/dist/styles/framework.css

@@ -0,0 +1,6 @@
+/**
+ * Liquid Design Framework — global styles.
+ */
+
+@import "./transitions.css";
+@import "./typography.css";

package/dist/styles/transitions.css

@@ -0,0 +1,28 @@
+/**
+ * Liquid Framework — Global easing and transitions.
+ *
+ * --fw-ease is the single easing used for ALL framework transitions.
+ * Any change in Liquid elements (noise, size, appear, collapse) uses this curve.
+ */
+
+:root {
+  /* Global easing — used by every transition in the framework */
+  --fw-ease: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Aliases (for semantic use; all resolve to --fw-ease for framework transitions) */
+  --fw-ease-out: var(--fw-ease);
+
+  /* Durations */
+  --fw-duration-fast: 0.15s;
+  --fw-duration-normal: 0.25s;
+  --fw-duration-slow: 0.35s;
+
+  /* Standard transitions — all use --fw-ease */
+  --fw-transition-appear: opacity var(--fw-duration-normal) var(--fw-ease),
+    max-width var(--fw-duration-normal) var(--fw-ease),
+    max-height var(--fw-duration-normal) var(--fw-ease),
+    grid-template-rows var(--fw-duration-normal) var(--fw-ease);
+  --fw-transition-size: width var(--fw-duration-normal) var(--fw-ease),
+    height var(--fw-duration-normal) var(--fw-ease),
+    font-size var(--fw-duration-normal) var(--fw-ease);
+}

package/dist/styles/typography.css

@@ -0,0 +1,26 @@
+/**
+ * Liquid Framework — Global typography.
+ * Base value variables; semantic sizes are resolved in JS via typography.ts.
+ */
+
+:root {
+  /* Base font sizes (px) — fixed scale for the framework. */
+  --fw-font-base-8: 8px;
+  --fw-font-base-10: 10px;
+  --fw-font-base-12: 12px;
+  --fw-font-base-14: 14px;
+  --fw-font-base-16: 16px;
+  --fw-font-base-18: 18px;
+  --fw-font-base-20: 20px;
+  --fw-font-base-24: 24px;
+  --fw-font-base-28: 28px;
+
+  /* Semantic size vars — updated by FrameworkSizeSync when size knob changes. */
+  --fw-font-xs: 10px;
+  --fw-font-s: 12px;
+  --fw-font-m: 14px;
+  --fw-font-l: 16px;
+  --fw-font-xl: 18px;
+
+  --fw-avatar-size: 28px;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@liquid-noise/core",
+  "version": "0.1.0",
+  "description": "Liquid Design Framework — noise and size controls for adaptive UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles/*": "./dist/styles/*"
+  },
+  "files": [
+    "dist",
+    "MANIFEST.md",
+    "CONCEPT.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "~5.6.2"
+  }
+}