@kitlangton/knobs 0.4.0-next.10 → 0.4.0-next.12

package/dist/dev/{chunk-a7cjgy8x.js → chunk-ab7vfghg.js}

@@ -1,6 +1,3 @@
-import {
-  __preload
-} from "./chunk-3ygqgy1x.js";
 import {
   applyLook,
   panelLook,
@@ -9,7 +6,7 @@ import {
   writeSession,
   injectStyles,
   toggleLayer
-} from "./chunk-dyq4m24m.js";
+} from "./chunk-nwfm1bfj.js";
 
 // src/panel/attach.ts
 function attach(controls, element, options = {}) {
@@ -85,7 +82,7 @@ function attach(controls, element, options = {}) {
       return;
     loading = !0;
     try {
-      let { createPanel } = await (__preload("5pb7ymrd"), import("./chunk-5pb7ymrd.js"));
+      let { createPanel } = await import("./chunk-9qtvxa6k.js");
       if (disposed || !controls.enabled || panel)
         return;
       if (panel = createPanel(controls, element, close, { restored, chip }), remember)

package/dist/dev/{chunk-dyq4m24m.js → chunk-nwfm1bfj.js}

@@ -10,7 +10,7 @@ import {
   DEFAULT_LINEAR,
   motionCss,
   storageKey
-} from "./chunk-3ygqgy1x.js";
+} from "./chunk-7kns3qe6.js";
 
 // src/core/theme.ts
 var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
@@ -631,20 +631,15 @@ function escTarget(trail, title) {
     return;
   return trail.at(-2)?.label ?? (title.trim() || "panel");
 }
-function fitCrumbs(widths, room, sep, more, hint = 0) {
-  let n = widths.length;
-  if (!n)
-    return { from: 0, hint: !1 };
-  let span = (from) => {
-    let w = 0;
-    for (let i = from;i < n; i++)
-      w += widths[i] + (i > from ? sep : 0);
-    return from > 0 ? w + more + sep : w;
-  }, from = 0;
-  while (from < n - 1 && span(from) > room)
-    from++;
-  let used = span(from);
-  return { from, hint: hint > 0 && used + sep + hint <= room };
+function fitCrumbs(widths, room, sep, hint = 0) {
+  let n = widths.length, from = n, used = 0;
+  for (let i = n - 1;i >= 0; i--) {
+    let w = used + widths[i] + (i < n - 1 ? sep : 0);
+    if (w > room)
+      break;
+    used = w, from = i;
+  }
+  return { from, hint: from < n && hint > 0 && used + sep + hint <= room };
 }
 function digitOption(key, count) {
   if (!/^[1-9]$/.test(key))
@@ -652,6 +647,15 @@ function digitOption(key, count) {
   let i = Number(key) - 1;
   return i < count ? i : void 0;
 }
+function digitRoute(key, at) {
+  if (!/^[1-9]$/.test(key))
+    return;
+  if (at.options)
+    return "options";
+  if (at.keeps)
+    return;
+  return digitOption(key, at.presets) === void 0 ? void 0 : "presets";
+}
 function digitHints(count, showing) {
   let n = Math.min(9, count);
   if (n <= 0)
@@ -684,9 +688,10 @@ function createCrumbs(o) {
   }, build = () => {
     if (!trail.length)
       return { pieces: [], xs: [] };
-    let head = o.header.getBoundingClientRect(), { x, right } = titleEnd(head), sepW = width(SEP) + GAP * 2, escText = esc ? `esc ↑ ${esc}` : "", fit = fitCrumbs(trail.map((c) => width(c.label)), Math.max(0, right - x - sepW), sepW, width("…"), escText ? width(escText) + HINT_GAP - sepW : 0), pieces = [{ key: "sep:lead", text: SEP, kind: "sep" }];
-    if (fit.from > 0)
-      pieces.push({ key: "more", text: "…", kind: "more" }, { key: "sep:more", text: SEP, kind: "sep" });
+    let head = o.header.getBoundingClientRect(), { x, right } = titleEnd(head), sepW = width(SEP) + GAP * 2, escText = esc ? `esc ↑ ${esc}` : "", fit = fitCrumbs(trail.map((c) => width(c.label)), Math.max(0, right - x - sepW), sepW, escText ? width(escText) + HINT_GAP - sepW : 0);
+    if (fit.from >= trail.length)
+      return { pieces: [], xs: [] };
+    let pieces = [{ key: "sep:lead", text: SEP, kind: "sep" }];
     if (trail.forEach((c, i) => {
       if (i < fit.from)
         return;
@@ -2374,8 +2379,8 @@ ${GRAD_PROPS}
 .knobs-panel *:where(:not(.knobs-accessory,.knobs-accessory *,.knobs-live *)),.knobs-menu *{box-sizing:border-box;color:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;text-transform:inherit;text-shadow:inherit;font-style:inherit}
 /* Hover washes come in at --k-hover-in and leave at --k-hover-out (ms). Set per element, so a
    hovered card doesn't hand its quick entrance to the rows inside it. */
-:where(.knobs-panel,.knobs-menu) *{--k-hover-t:calc(var(--_k-hover-out) * 1ms)}
-:where(.knobs-panel,.knobs-menu) :is(:hover,.knobs-active){--k-hover-t:calc(var(--_k-hover-in) * 1ms)}
+:where(.knobs-panel,.knobs-menu,.knobs-head-actions[data-docked]) *{--k-hover-t:calc(var(--_k-hover-out) * 1ms)}
+:where(.knobs-panel,.knobs-menu,.knobs-head-actions[data-docked]) :is(:hover,.knobs-active){--k-hover-t:calc(var(--_k-hover-in) * 1ms)}
 
 .knobs-panel,.knobs-chip{
   box-sizing:border-box;font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
@@ -2495,7 +2500,7 @@ ${GRAD_PROPS}
 .knobs-crumbs{position:absolute;left:0;top:50%;height:0;pointer-events:none;white-space:nowrap;font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);line-height:1.2;letter-spacing:0;text-transform:none}
 .knobs-crumbs>*{position:absolute;left:0;top:0;translate:0 -50%;color:var(--_k-fg-3);transition:opacity .2s var(--k-ease),translate ${CRUMB_GLIDE},color .2s var(--k-ease)}
 .knobs-crumbs>[data-leaving]{transition:opacity .14s cubic-bezier(.4,0,1,1),translate .14s cubic-bezier(.4,0,1,1)}
-.knobs-crumbs>.knobs-crumb-crumb{pointer-events:auto;cursor:pointer}
+.knobs-crumbs>.knobs-crumb-crumb{pointer-events:auto;cursor:default}
 .knobs-crumbs>.knobs-crumb-crumb[data-deep]{color:var(--_k-fg)}
 .knobs-crumbs>.knobs-crumb-crumb:not([data-deep]):hover{color:var(--_k-fg-2)}
 .knobs-crumbs>.knobs-crumb-sep{color:color-mix(in srgb,var(--_k-fg-3) 70%,transparent)}
@@ -2512,40 +2517,53 @@ ${GRAD_PROPS}
 .knobs-panel[data-gpu-active="true"] .knobs-die-icon>canvas{visibility:hidden}
 /* The tools sit quiet (--k-dim) until the panel has the pointer or keyboard focus, then read as
    labels, and as text under the pointer. */
-.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--_k-fg-3);background:transparent;border-radius:var(--_k-round);cursor:pointer;font-size:12px;line-height:1;transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s}
+.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--_k-fg-3);background:transparent;border-radius:var(--_k-round);cursor:default;font-size:12px;line-height:1;transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s}
 .knobs-panel:is(:hover,:has(:focus-visible)) header button{color:var(--_k-fg-2)}
 .knobs-panel header button:is(:hover:not([disabled]),:focus-visible),.knobs-panel header button[aria-expanded="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-panel header button[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 /* The close X's ink sits a fifth of its box in from each side, a digit's barely: nudged right, its
    ink ends where the values' digits do. */
 .knobs-panel header .knobs-close>.knobs-icon{translate:calc(var(--k-icon-size) * .1) 0}
+/* In a split pane's header (dock.ts) the buttons are the pane's: its size, ink and wash, which
+   comes on at once and eases off. Outside the panel, they bring its resets with them. */
+.knobs-head-actions[data-docked]{--k-icon-size:13px;--k-icon-btn:20px;margin-right:0}
+.knobs-head-actions[data-docked] button{all:revert;box-sizing:border-box;position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--k-icon-btn);height:var(--k-icon-btn);margin:0;padding:0;border:0;border-radius:var(--_k-round);
+  background:transparent;color:var(--_k-fg-3);font:inherit;line-height:1;cursor:default;outline:none;box-shadow:none;transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-head-actions[data-docked] button:is(:hover:not([disabled]),:focus-visible){background:var(--_ku-wash-hi,var(--_k-fill-selected));color:var(--_k-fg)}
+.knobs-head-actions[data-docked] .knobs-icon>path{fill:currentColor}
+.knobs-head-actions[data-docked] button:focus-visible{--k-hover-t:calc(var(--_k-hover-in) * 1ms)}
 /* Undo · Redo sit apart from Reset · Copy · Random. Undo, Redo and Reset (and a group's reset)
    keep their slots while they're away and bloom in and out of them: nothing beside them moves. */
 .knobs-head-history{display:flex;flex:none;margin-right:calc(var(--_k-unit) * 1.5)}
-.knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown]{transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_IN},scale ${BLOOM_IN},filter 0s,visibility 0s}
-.knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{opacity:0;scale:.9;filter:blur(2.5px);visibility:hidden;
-  transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_OUT},scale ${BLOOM_OUT},filter ${BLOOM_OUT},visibility 0s ${snappyOut.ms}ms}
+:is(.knobs-panel :is(.knobs-head-actions,.knobs-group-head),.knobs-head-actions[data-docked]) button[data-shown]{transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_IN},scale ${BLOOM_IN},width ${BLOOM_IN}}
+:is(.knobs-panel :is(.knobs-head-actions,.knobs-group-head),.knobs-head-actions[data-docked]) button[data-shown="false"]{opacity:0;scale:.9;filter:blur(2.5px);visibility:hidden;
+  transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_OUT},scale ${BLOOM_OUT},filter ${BLOOM_OUT},width ${BLOOM_OUT},visibility 0s ${snappyOut.ms}ms}
+/* Docked, a slot opens and closes with its button (the width above) rather than waiting: the
+   pane's title keeps the room. */
+.knobs-head-actions[data-docked] button[data-shown="false"]{width:0}
+.knobs-head-actions[data-docked]>.knobs-head-history{transition:margin ${BLOOM_IN}}
+.knobs-head-actions[data-docked]>.knobs-head-history:not(:has(>[data-shown="true"]:not([hidden]))){margin-right:0}
 @media(prefers-reduced-motion:reduce){
-  .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown]{transition:opacity .15s,visibility 0s!important}
-  .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{scale:1;filter:none;transition:opacity .15s,visibility 0s .15s!important}}
+  :is(.knobs-panel :is(.knobs-head-actions,.knobs-group-head),.knobs-head-actions[data-docked]) button[data-shown]{transition:opacity .15s!important}
+  :is(.knobs-panel :is(.knobs-head-actions,.knobs-group-head),.knobs-head-actions[data-docked]) button[data-shown="false"]{scale:1;filter:none;transition:opacity .15s,visibility 0s .15s!important}}
 /* A press flash (flash.ts): from a key or a click, the button's wash brightens at once and eases
    back to its own, its ink with it. Two names, so a second press restarts it. */
 @keyframes knobs-flash-a{from{background-color:var(--k-flash-bg);color:var(--_k-fg)}}
 @keyframes knobs-flash-b{from{background-color:var(--k-flash-bg);color:var(--_k-fg)}}
-.knobs-panel :is(header,.knobs-group-head) button{--k-flash-bg:color-mix(in srgb,var(--_k-fill-selected),var(--_k-fg) 10%)}
-.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="a"]{animation:knobs-flash-a ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
-.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="b"]{animation:knobs-flash-b ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
+.knobs-panel :is(header,.knobs-group-head) button,.knobs-head-actions[data-docked] button{--k-flash-bg:color-mix(in srgb,var(--_k-fill-selected),var(--_k-fg) 10%)}
+.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="a"],.knobs-head-actions[data-docked] button[data-k-flash="a"]{animation:knobs-flash-a ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
+.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="b"],.knobs-head-actions[data-docked] button[data-k-flash="b"]{animation:knobs-flash-b ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
 /* Copied: the glyph shrinks away and a check draws itself in its place, held, then they trade
    back (the check fading). Driven by --k-copy (the glyph), --k-check (how much of the check is
    drawn) and --k-check-a (its opacity), which the GPU renderer reads too. */
-.knobs-panel header .knobs-copy{--k-copy:1;--k-check:0;--k-check-a:0;
+.knobs-panel header .knobs-copy,.knobs-head-actions[data-docked] .knobs-copy{--k-copy:1;--k-check:0;--k-check-a:0;
   transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy ${BLOOM_IN} .04s,--k-check 0s .1s,--k-check-a .1s cubic-bezier(.4,0,1,1)}
-.knobs-panel header .knobs-copy[data-copied]{--k-copy:0;--k-check:1;--k-check-a:1;color:var(--_k-fg);
+.knobs-panel header .knobs-copy[data-copied],.knobs-head-actions[data-docked] .knobs-copy[data-copied]{--k-copy:0;--k-check:1;--k-check-a:1;color:var(--_k-fg);
   transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy .1s cubic-bezier(.4,0,1,1),--k-check .18s cubic-bezier(.2,.8,.2,1) .03s,--k-check-a .04s linear .03s}
 .knobs-copy>.knobs-icon:not(.knobs-check){opacity:var(--k-copy);scale:calc(.5 + .5 * var(--k-copy))}
 .knobs-copy>.knobs-check{position:absolute;inset:0;margin:auto;opacity:var(--k-check-a)}
 /* (Over .knobs-icon>path's fill: the check is a stroke, 16 of 256 wide like Phosphor's regular icons.) */
-.knobs-panel .knobs-icon.knobs-check>path{fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--k-check))}
+.knobs-panel .knobs-icon.knobs-check>path,.knobs-head-actions[data-docked] .knobs-icon.knobs-check>path{fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--k-check))}
 .knobs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 
 /* Shortcuts Popover */
@@ -2567,6 +2585,15 @@ ${GRAD_PROPS}
 .knobs-panel[data-buttons] .knobs-preset-chip:hover{background:var(--k-button-hover-bg,var(--_k-fill-selected))!important;box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
 .knobs-panel .knobs-preset-chip:hover{color:var(--_k-fg)}
 .knobs-panel .knobs-preset-chip[aria-checked="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-title)}
+/* A list (presetDisplay "list", or chips that would take more than two lines): rows like a
+   menu's, their names on the rows' text edge and each wash bleeding 8 px past it, the selection a
+   quiet wash that glides between them. Hover is a wash too, on at once. */
+.knobs-presets[data-display="list"]{padding:0;background:transparent}
+.knobs-presets[data-display="list"]>.knobs-presets-track{grid-template-columns:minmax(0,1fr);gap:0;margin:0 calc(var(--_k-inset) - 8px)}
+.knobs-panel .knobs-presets[data-display="list"] .knobs-preset-chip{height:var(--_k-control-h);padding:0 16px 0 8px;text-align:left;cursor:default;font-weight:var(--_k-weight-label);transition:color var(--k-hover-t),background var(--k-hover-t)}
+.knobs-panel .knobs-presets[data-display="list"] .knobs-preset-chip:hover:not([aria-checked="true"]){background:var(--_k-row-hover)!important}
+.knobs-panel .knobs-presets[data-display="list"] .knobs-preset-chip::after{top:50%;right:8px;margin-top:-2px}
+.knobs-presets[data-display="list"] .knobs-presets-pill{background:var(--_k-fill-selected);box-shadow:none}
 .knobs-panel .knobs-preset-save{flex:none;width:calc((var(--_k-inset) - var(--_k-tray-pad)) * 2 + 8px);padding:0!important;color:var(--_k-fg-3)!important;font-weight:400!important;font-size:var(--_k-text-title)!important}
 .knobs-panel .knobs-preset-save:hover{color:var(--_k-fg)!important}
 /* The active preset's modified mark: the values have drifted off it (a row's dot, in its corner). */
@@ -2586,6 +2613,9 @@ ${GRAD_PROPS}
 .knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--_k-gap);padding:0 var(--k-group-inset);color:var(--_k-group-label);font-size:var(--k-group-size);font-weight:var(--_k-weight-title);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
 .knobs-panel:not(.knobs-page) .knobs-group-head:not(:first-child){border-top:1px solid var(--k-group-divider);padding-top:var(--k-group-divider-gap)}
 .knobs-group-head:first-child{margin-top:0}
+.knobs-panel:not(.knobs-page) .knobs-presets+.knobs-group-head{margin-top:0;border-top:0;padding-top:0}
+.knobs-pinned{margin-bottom:var(--k-group-gap)}
+.knobs-pinned:empty{display:none}
 .knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--_k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
 .knobs-group-head button{height:20px;padding:0 6px;font-size:var(--_k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--_k-fg-2);background:transparent;border-radius:var(--_k-radius-sm);cursor:pointer}
 .knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg)}
@@ -2908,6 +2938,14 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 :where(.knobs-panel)[data-frame="flat"]{--k-group-divider:var(--_k-border);--k-group-divider-gap:var(--_k-gap)}
 :where(.knobs-panel.knobs-inline:not(.knobs-page))[data-frame="flat"]{--k-chrome:0;--k-pad:0px}
 .knobs-panel[data-frame="flat"] .knobs-card{background:transparent;border-radius:0}
+/* One surface: an inline panel on another card (a split's pane, anything .knobs-surface, or in
+   [data-nested]) takes the flat frame by itself: no padding (its rows keep their inset, so their
+   text sits on the card's, and its preset chips line up with them), groups as plain sections,
+   rows on hairlines. */
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip,[data-nested]) :where(.knobs-panel.knobs-inline:not(.knobs-page)){--k-chrome:0;--k-group-divider:var(--_k-border);--k-group-divider-gap:var(--_k-gap)}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip,[data-nested]) .knobs-panel.knobs-inline:not(.knobs-page){padding:0}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip,[data-nested]) .knobs-panel.knobs-inline:not(.knobs-page) .knobs-card{background:transparent;border-radius:0}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip,[data-nested]) .knobs-panel.knobs-inline:not(.knobs-page) .knobs-presets:not([data-display="list"]){margin-inline:var(--_k-inset)}
 .knobs-panel[data-frame="flat"][data-rows] .knobs-card>*,.knobs-panel[data-frame="flat"][data-rows] .knobs-sub{background:transparent;border-radius:0}
 
 /* Disabled rows dim and take no edits (focus still reaches them, to read); read-only rows keep
@@ -3060,6 +3098,10 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel .knobs-tool[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 .knobs-tool .knobs-icon{flex:none;width:var(--k-icon-sm);height:var(--k-icon-sm)}
 .knobs-tool-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
+/* Icons only (labels that don't fit one row, or labels: false): one row of equal buttons, each
+   its icon centred, its label and shortcut in its tooltip. */
+.knobs-panel .knobs-toolbar[data-icons] .knobs-tool{justify-content:center;padding:0;cursor:default}
+.knobs-panel .knobs-toolbar[data-icons] :is(.knobs-tool-label,.knobs-tool-key){display:none}
 /* The shortcut sits at the button's end, so a column of buttons lines their chips up. */
 .knobs-panel .knobs-tool-key{flex:none;margin-left:auto;padding-left:4px;font:inherit;font-size:var(--_k-text-cap);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);letter-spacing:.06em}
 .knobs-panel :is([data-disabled],[data-readonly]) :is(.knobs-cell,.knobs-range-track,.knobs-angle,.knobs-dial,.knobs-seed,.knobs-keys,.knobs-tool){cursor:default}
@@ -3105,7 +3147,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 
 /* A focused row's options: tiny digits in hint mode's look, once focus settles (optkeys.ts). */
 .knobs-optkeys{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5}
-.knobs-panel .knobs-optkey{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:12px;padding:0 3px;border-radius:var(--_k-radius-sm);background:var(--_k-accent);color:var(--_k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
+.knobs-panel .knobs-optkey{position:absolute;transform:translateY(-50%);display:inline-flex;white-space:nowrap;align-items:center;height:12px;padding:0 3px;border-radius:var(--_k-radius-sm);background:var(--_k-accent);color:var(--_k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
   font:700 calc(var(--_k-text-cap) * .85)/1 var(--_k-mono);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .12s var(--k-ease)}
 .knobs-panel .knobs-optkey-range{transform:translate(-100%,-50%)}
 .knobs-panel .knobs-optkey[data-shown]{opacity:.85;transition-duration:.15s}
@@ -3147,7 +3189,18 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-menu-item[data-separated]{margin-top:calc(var(--_k-unit) * 2 + 1px)}
 .knobs-menu-item[data-separated]::before{content:"";position:absolute;left:8px;right:8px;top:calc(var(--_k-unit) * -1 - 1px);height:1px;transform:scaleY(.5);background:var(--_k-border)}
 
+/* Text: a field beside its label, or (multiline) a box under it that grows with its lines */
+.knobs-panel .knobs-text{flex:1 1 auto;min-width:0;max-width:62%;height:var(--_k-control-h);margin:0;padding:0 8px;border:0;border-radius:var(--_k-radius-md);outline:none;background:var(--_k-segmented-track);color:var(--_k-fg);caret-color:var(--_k-accent);font:inherit;font-size:var(--_k-text-control);-webkit-user-select:text;user-select:text;cursor:text}
+.knobs-panel .knobs-text::placeholder{color:var(--_k-fg-3);opacity:1}
+.knobs-panel .knobs-text:is(:hover,:focus){background:color-mix(in srgb,var(--_k-fill-selected) 70%,var(--_k-segmented-track))}
+.knobs-panel .knobs-text::selection{background:color-mix(in srgb,var(--_k-accent) 24%,transparent);color:var(--_k-fg)}
+.knobs-panel .knobs-insp[data-multiline]{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:calc(var(--_k-unit) * 1.5);height:auto;padding-block:calc(var(--_k-unit) * 2)}
+.knobs-panel .knobs-insp[data-multiline]>span:first-child{align-self:flex-start;max-width:100%}
+.knobs-panel textarea.knobs-text{max-width:none;height:auto;min-height:calc(2lh + 12px);max-height:calc(8lh + 12px);margin:0;padding:6px 8px;resize:none;field-sizing:content;font:inherit;font-size:var(--_k-text-control);line-height:1.4}
+.knobs-panel :is([data-disabled],[data-readonly]) .knobs-text{cursor:default}
+
 /* Status & Transfer Textarea */
+.knobs-panel .knobs-empty{margin:0;padding:calc(var(--_k-unit) * 2) var(--_k-inset);color:var(--_k-fg-3);font-size:var(--_k-text-control);overflow-wrap:anywhere}
 .knobs-panel .knobs-status{margin:6px 0 0;padding:0 var(--_k-inset);color:var(--_k-fg-2);font-size:var(--_k-text-meta);overflow-wrap:anywhere}
 
 .knobs-panel textarea{width:100%;min-height:84px;margin-top:6px;padding:6px var(--_k-inset);resize:vertical;font:var(--_k-text-meta)/1.4 var(--_k-mono)}
@@ -3179,11 +3232,11 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel[data-gpu-active="true"] .knobs-preset-chip::after,
 .knobs-panel[data-gpu-active="true"] :is(.knobs-tile:not(.knobs-live)>.knobs-veil,.knobs-tile:not(.knobs-live)>.knobs-mark,.knobs-section-head>.knobs-mark){opacity:0!important}
 /* Parts the canvas doesn't draw (shortcuts, status, editors) sit above it. */
-.knobs-panel[data-gpu-active="true"] :where(.knobs-popover,.knobs-status,textarea,.knobs-apply-btn){position:relative;z-index:2147480003}
+.knobs-panel[data-gpu-active="true"] :where(.knobs-popover,.knobs-status,textarea,.knobs-text,.knobs-apply-btn){position:relative;z-index:2147480003}
 .knobs-panel[data-gpu-active="true"] :is(.knobs-number,.knobs-preset-name){z-index:2147480003}
 /* A row accessory is the host's own DOM, so it sits above the canvas too (its row then can't
    contain its layout, which would trap it in a stacking context under the canvas). */
-.knobs-panel[data-gpu-active="true"] .knobs-row[data-accessory]{contain:style}
+.knobs-panel[data-gpu-active="true"] :is(.knobs-row[data-accessory],.knobs-insp[data-kind="text"]){contain:style}
 :where(.knobs-panel[data-gpu-active="true"] .knobs-row>.knobs-accessory){position:relative}
 .knobs-panel[data-gpu-active="true"] .knobs-row>.knobs-accessory{z-index:2147480003}
 
@@ -3565,6 +3618,8 @@ function changeCue(field, before, after) {
     let options = field.options ?? [];
     return { cue: "select", detail: { direction: options.indexOf(after) - options.indexOf(before) }, detents: 1, at: 1, was: 0 };
   }
+  if (field.kind === "text")
+    return null;
   if (field.kind === "keybind")
     return after ? { cue: "capture", detail: {}, detents: 1, at: 1, was: 0 } : { cue: "select", detail: { direction: -1 }, detents: 1, at: 1, was: 0 };
   let { min, max, step } = field, a = numbers(before), b = numbers(after);
@@ -4390,4 +4445,4 @@ function createLayer(doc) {
   };
 }
 
-export { resolveLook, themeOf, applyLook, panelLook, CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, rolling_css_default, FILL, LEAD, trailScale, Edges, POP_MS, popScale, settleScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, FLASH_MS, flash, flashOf, offRow, precisionRate, RULER, RULER_NEAR, RULER_FADE, rulerLevels, rulerAlpha, rulerDepth, THIN, THINNEST, thinOf, roundOf, stretchOf, stretchAt, giveRoom, detentScale, detentsOf, roundValues, unwarp, Notches, escapeTo, commandScope, scopeLabel, crumbTrail, escTarget, digitOption, digitHints, createCrumbs, TOKENS, knobs, aliased, injectTokens, DELAYED, injectStyles, resolveSound, sound, SOUND_PREF, soundPanel, changed, cue, createHintController, pageHints, toggleLayer };
+export { resolveLook, themeOf, applyLook, panelLook, CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, rolling_css_default, FILL, LEAD, trailScale, Edges, POP_MS, popScale, settleScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, FLASH_MS, flash, flashOf, offRow, precisionRate, RULER, RULER_NEAR, RULER_FADE, rulerLevels, rulerAlpha, rulerDepth, THIN, THINNEST, thinOf, roundOf, stretchOf, stretchAt, giveRoom, detentScale, detentsOf, roundValues, unwarp, Notches, escapeTo, commandScope, scopeLabel, crumbTrail, escTarget, digitOption, digitRoute, digitHints, createCrumbs, TOKENS, knobs, aliased, injectTokens, DELAYED, injectStyles, resolveSound, sound, SOUND_PREF, soundPanel, changed, cue, createHintController, pageHints, toggleLayer };

package/dist/dev/index.js

@@ -1,6 +1,4 @@
 import {
-  __preload,
-  __chunks,
   maxChroma,
   oklchToRgb,
   parseColor2,
@@ -27,6 +25,8 @@ import {
   pickMeta,
   isReadout2,
   hasValue2,
+  variantsOf,
+  pinnedKeys,
   SPRING2,
   valueKeys,
   knob2,
@@ -44,6 +44,7 @@ import {
   angle2,
   seed2,
   keybind2,
+  text2,
   gradient2,
   curve2,
   toolbarShortcut2,
@@ -75,8 +76,7 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-3ygqgy1x.js";
-__chunks(import.meta.url,["kdk2476q","5pb7ymrd","a7cjgy8x","3ygqgy1x","dyq4m24m"],[["./index.js",3],["./chunk-5pb7ymrd.js",3,4],["./chunk-a7cjgy8x.js",3,4],["./chunk-3ygqgy1x.js"],["./chunk-dyq4m24m.js",3]],0);
+} from "./chunk-7kns3qe6.js";
 // src/core/random.ts
 var lattice = (min, max, step, r) => min + Math.floor(r * (Math.floor((max - min) / step + 0.000000001) + 1)) * step, between = (min, max, r) => min + (max - min) * r;
 function pick(field, random) {
@@ -119,6 +119,7 @@ function pick(field, random) {
     case "seed":
       return lattice(field.min, field.max, 1, r());
     case "keybind":
+    case "text":
       return field.value;
     case "gradient":
       return randomStops(field.value.length, r);
@@ -204,6 +205,7 @@ function around(field, base, random) {
       ]);
     case "seed":
     case "keybind":
+    case "text":
       return pick(field, random);
   }
 }
@@ -303,6 +305,7 @@ function shift(field, value, random) {
     case "seed":
       return nudge(value, field.min, field.max, 1, random);
     case "keybind":
+    case "text":
       return value;
     case "gradient":
       return mutateStops(value, random, MUTATE.hue, MUTATE.lightness);
@@ -594,14 +597,42 @@ function defineControls(id, input, options = {}) {
   let schema = Object.freeze({ ...input }), locked = normalize(schema, {}), actions = Object.freeze([...options.actions ?? []]), { theme, appearance } = options, density = options.density ?? "default", renderer = options.renderer ?? "auto", enabled = () => typeof options.enabled === "function" ? options.enabled() : options.enabled ?? (Boolean(options.ship) || isUnlocked() || typeof location < "u" && ["localhost", "127.0.0.1", "[::1]"].includes(location.hostname)), storage = () => options.storage === void 0 ? browserStorage() : options.storage, persistMode = options.persist ?? "all", valueStorage = () => persistMode === "all" ? storage() : null, variantStorage = () => persistMode === "none" ? null : storage(), draw = options.random ?? Math.random, hostHistory = options.history, unsubscribeHistory, unsubscribeUnlock, listeners = /* @__PURE__ */ new Set, refreshes = 0, notify = () => {
     for (let cb of [...listeners])
       cb();
-  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), buildPresets = () => Object.freeze(Object.fromEntries([
-    ["default", locked],
-    ...Object.entries(options.presets ?? {}).map(([id, patch]) => {
-      if (id === "default" || id === "custom")
-        throw Error(`Reserved preset id: ${id}`);
-      return [id, normalize(schema, { ...locked, ...patch })];
-    })
-  ])), presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
+  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), pinnedOf, pinned = () => {
+    if (pinnedOf?.schema !== schema)
+      pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
+    return pinnedOf.keys;
+  }, variantsChoice = () => variantsOf(schema, (key) => pinned().has(key)), unpinned = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    let out = { ...values };
+    for (let k of keys)
+      if (Object.hasOwn(locked, k))
+        out[k] = locked[k];
+    return Object.freeze(out);
+  }, presetPatch = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    return Object.fromEntries(Object.entries(values).filter(([k]) => !keys.has(k)));
+  }, buildPresets = () => {
+    let own = options.presets ?? {}, v = variantsChoice();
+    if (v && Object.hasOwn(own, v.field.value))
+      throw Error(`The default variant (${v.field.value}) is the schema's defaults; set its values there.`);
+    let ids = [
+      ...v ? v.field.options.filter((o) => o !== v.field.value) : [],
+      ...Object.keys(own).filter((id) => !v?.field.options.includes(id))
+    ];
+    return Object.freeze(Object.fromEntries([
+      ["default", locked],
+      ...ids.map((id) => {
+        if (id === "default" || id === "custom")
+          throw Error(`Reserved preset id: ${id}`);
+        let variant = v?.field.options.includes(id) ? { [v.key]: id } : {};
+        return [id, unpinned(normalize(schema, { ...locked, ...variant, ...own[id] }))];
+      })
+    ]));
+  }, presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
     let named = list.flatMap((p) => Object.keys(p.values).filter((k) => Object.hasOwn(schema, k))), covered = new Set((named.length ? named : Object.keys(schema).filter((k) => schema[k].group === group)).filter((k) => hasValue2(schema[k])));
     return [
       group,
@@ -700,7 +731,7 @@ function defineControls(id, input, options = {}) {
     else if (ref?.kind === "variant") {
       let found = list?.find((v) => v.id === ref.id);
       if (found)
-        out = normalize(schema, found.values);
+        out = unpinned(normalize(schema, found.values));
     }
     let groups = Object.entries(b.groups);
     if (groups.length) {
@@ -712,11 +743,10 @@ function defineControls(id, input, options = {}) {
     return baseCache = { base: b, schema, presets, groupPresets, variants: list, values }, values;
   }
   let covered = (key) => {
-    let b = activeBase();
-    if (b.preset)
+    let b = activeBase(), group = schema[key]?.group;
+    if (group !== void 0 && Object.hasOwn(b.groups, group))
       return !0;
-    let group = schema[key]?.group;
-    return group !== void 0 && Object.hasOwn(b.groups, group);
+    return b.preset !== null && !pinned().has(key);
   };
   function declaredShortcut(id) {
     let slash = id.indexOf("/"), key = slash < 0 ? id : id.slice(0, slash), field = Object.hasOwn(schema, key) ? schema[key] : void 0;
@@ -986,7 +1016,7 @@ function defineControls(id, input, options = {}) {
     listen(cb) {
       return readoutListeners.add(cb), () => readoutListeners.delete(cb);
     }
-  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, get, (v, variant, coalesce) => write(v, { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
+  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, () => unpinned(get()), (v, variant, coalesce) => write(presetPatch(v), { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
   function offBase(keys) {
     if (!hasBase())
       return !1;
@@ -1070,7 +1100,11 @@ function defineControls(id, input, options = {}) {
     sectionDescription: (section) => options.sectionDescriptions?.[section] ?? fieldLabels().sectionText.get(section),
     groupFolded: options.groupFolded,
     sectionFolded: options.sectionFolded,
-    presetLabel: (presetId) => options.presetLabels?.[presetId] ?? (presetId === "default" ? options.defaultLabel : void 0) ?? presetId,
+    presetLabel: (presetId) => {
+      let v = variantsChoice(), option = presetId === "default" ? v?.field.value : presetId;
+      return options.presetLabels?.[presetId] ?? (presetId === "default" ? options.defaultLabel : void 0) ?? (v && option !== void 0 && v.field.options.includes(option) ? v.field.labels?.[option] ?? option : presetId);
+    },
+    isPinned: (key) => pinned().has(key),
     get,
     set,
     sync,
@@ -1345,9 +1379,12 @@ function defineControls(id, input, options = {}) {
     preset(id, presetOptions) {
       if (!Object.hasOwn(presets, id))
         throw Error(`Unknown preset: ${id}`);
-      write(presets[id], { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+      write(presetPatch(presets[id]), { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+    },
+    matchingPreset: () => {
+      let cur = unpinned(get());
+      return Object.keys(presets).find((id) => equal(cur, presets[id])) ?? "custom";
     },
-    matchingPreset: () => Object.keys(presets).find((id) => equal(get(), presets[id])) ?? "custom",
     get groupPresets() {
       return groupPresets;
     },
@@ -1378,11 +1415,11 @@ function defineControls(id, input, options = {}) {
     code: (format, values) => formatCode(values ?? get(), format),
     variants,
     attach(element, chip) {
-      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("a7cjgy8x"), import("./chunk-a7cjgy8x.js")).then((m) => m.attach);
+      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => import("./chunk-ab7vfghg.js").then((m) => m.attach);
       return live(load, (attach) => attach(controls, element, chip), (detach) => detach());
     },
     mount(container, mountOptions) {
-      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => (__preload("5pb7ymrd"), import("./chunk-5pb7ymrd.js")).then((m) => m.mountPanel);
+      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => import("./chunk-9qtvxa6k.js").then((m) => m.mountPanel);
       return live(load, (mountPanel) => {
         let panel = mountPanel(controls, container, mountOptions);
         return mountOptions?.onReady?.(panel), panel;
@@ -1419,7 +1456,7 @@ function descriptorToField(d) {
   if (readoutDescriptor(d))
     return readoutField(d);
   if (d.kind === "toolbar")
-    return toolbar2(d.items.map(({ key, ...item }) => ({ ...item, id: key })), meta);
+    return toolbar2(d.items.map(({ key, ...item }) => ({ ...item, id: key })), d.labels !== void 0 ? { ...meta, labels: d.labels } : meta);
   if (d.bind)
     return flatSpring2({}, { ...meta, id: d.key }).duration;
   if (d.kind === "knob" || d.kind === "number") {
@@ -1494,6 +1531,12 @@ function descriptorToField(d) {
     });
   if (d.kind === "keybind")
     return keybind2(typeof d.default === "string" ? d.default : "", meta);
+  if (d.kind === "text")
+    return text2(typeof d.default === "string" ? d.default : "", {
+      ...d.multiline ? { multiline: !0 } : {},
+      ...d.placeholder ? { placeholder: d.placeholder } : {},
+      ...meta
+    });
   if (d.kind === "gradient") {
     let fallback = [
       { at: 0, color: "#000000" },
@@ -1572,7 +1615,7 @@ var decimal = (n) => String(Math.round(n * 1e4) / 1e4), swiftLiteral = (d, v) =>
     let [a, b] = v;
     return `${decimal(a)}...${decimal(b)}`;
   }
-  if (d.kind === "keybind")
+  if (d.kind === "keybind" || d.kind === "text")
     return JSON.stringify(v);
   if (d.kind === "gradient")
     return `Gradient(stops: [${(Array.isArray(v) ? v : []).map((s) => {
@@ -1601,6 +1644,7 @@ var decimal = (n) => String(Math.round(n * 1e4) / 1e4), swiftLiteral = (d, v) =>
   range: "ClosedRange<Double>",
   seed: "Int",
   keybind: "String",
+  text: "String",
   gradient: "Gradient",
   curve: "[CGPoint]"
 };
@@ -1674,6 +1718,7 @@ function createRemoteControls(id, descriptors, options = {}) {
     tunable: options.tunable,
     history: options.history,
     presets: options.presets,
+    pinned: options.pinned,
     groupPresets: options.groupPresets,
     onPreset: options.onPreset,
     actions: options.actions,
@@ -1809,6 +1854,7 @@ export {
   springCss2 as springCss,
   springMotion2 as springMotion,
   table2 as table,
+  text2 as text,
   toggle2 as toggle,
   toolbar2 as toolbar,
   toolbarShortcut2 as toolbarShortcut,