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

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

@@ -1,6 +1,3 @@
-import {
-  __preload
-} from "./chunk-mjdgzad5.js";
 import {
   applyLook,
   panelLook,
@@ -9,7 +6,7 @@ import {
   writeSession,
   injectStyles,
   toggleLayer
-} from "./chunk-j57rhjtm.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("bnhzf1tj"), import("./chunk-bnhzf1tj.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-j57rhjtm.js → chunk-nwfm1bfj.js}

@@ -10,7 +10,7 @@ import {
   DEFAULT_LINEAR,
   motionCss,
   storageKey
-} from "./chunk-mjdgzad5.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). */
@@ -2911,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
@@ -3063,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}
@@ -3108,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}
@@ -3150,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)}
@@ -3182,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}
 
@@ -3568,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);
@@ -4393,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,7 @@ import {
   pickMeta,
   isReadout2,
   hasValue2,
+  variantsOf,
   pinnedKeys,
   SPRING2,
   valueKeys,
@@ -45,6 +44,7 @@ import {
   angle2,
   seed2,
   keybind2,
+  text2,
   gradient2,
   curve2,
   toolbarShortcut2,
@@ -76,8 +76,7 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-mjdgzad5.js";
-__chunks(import.meta.url,["js6xfzn6","bnhzf1tj","75gbzbyd","mjdgzad5","j57rhjtm"],[["./index.js",3],["./chunk-bnhzf1tj.js",3,4],["./chunk-75gbzbyd.js",3,4],["./chunk-mjdgzad5.js"],["./chunk-j57rhjtm.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) {
@@ -120,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);
@@ -205,6 +205,7 @@ function around(field, base, random) {
       ]);
     case "seed":
     case "keybind":
+    case "text":
       return pick(field, random);
   }
 }
@@ -304,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);
@@ -599,7 +601,7 @@ function defineControls(id, input, options = {}) {
     if (pinnedOf?.schema !== schema)
       pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
     return pinnedOf.keys;
-  }, unpinned = (values) => {
+  }, variantsChoice = () => variantsOf(schema, (key) => pinned().has(key)), unpinned = (values) => {
     let keys = pinned();
     if (keys.size === 0)
       return values;
@@ -613,14 +615,24 @@ function defineControls(id, input, options = {}) {
     if (keys.size === 0)
       return values;
     return Object.fromEntries(Object.entries(values).filter(([k]) => !keys.has(k)));
-  }, 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, unpinned(normalize(schema, { ...locked, ...patch }))];
-    })
-  ])), presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
+  }, 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,
@@ -1088,7 +1100,10 @@ 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,
@@ -1400,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("75gbzbyd"), import("./chunk-75gbzbyd.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("bnhzf1tj"), import("./chunk-bnhzf1tj.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;
@@ -1441,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") {
@@ -1516,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" },
@@ -1594,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) => {
@@ -1623,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]"
 };
@@ -1832,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,

package/dist/index.js

@@ -473,6 +473,16 @@ function pickMeta(source, skip = []) {
   return out;
 }
 var READOUT_KINDS = /* @__PURE__ */ new Set(["watch", "sparkline", "graph", "meter", "table", "log"]), isReadout = (field) => READOUT_KINDS.has(field.kind), hasValue = (field) => field.kind !== "action" && field.kind !== "toolbar" && !READOUT_KINDS.has(field.kind);
+function variantsOf(schema, isPinned = () => !1) {
+  let found;
+  for (let [key, field] of Object.entries(schema))
+    if (field.kind === "choice" && field.variants && !isPinned(key)) {
+      if (found)
+        throw Error(`Only one choice can hold the variants (${found.key}, ${key}).`);
+      found = { key, field };
+    }
+  return found;
+}
 function pinnedKeys(schema, groups = []) {
   let byGroup = new Map(groups.map((g) => [g, !0]));
   for (let f of Object.values(schema))
@@ -515,8 +525,9 @@ function choice(value, options, meta) {
     value,
     options: Object.freeze([...options]),
     ...labels && Object.keys(labels).length ? { labels } : {},
-    ...meta?.display ? { display: meta.display } : {}
-  }, meta);
+    ...meta?.display ? { display: meta.display } : {},
+    ...meta?.variants ? { variants: !0 } : {}
+  }, meta?.variants ? { ...meta, random: meta.random ?? !1 } : meta);
 }
 function action(label, meta) {
   let { shortcut, global, rebind, run, ...rest } = meta ?? {}, key = shortcutOf({ ...shortcut ? { shortcut } : {}, ...global ? { global } : {} }), combo = key ? normalizeCombo(key.key) : "";
@@ -661,6 +672,17 @@ function keybind(value = "", meta) {
   let field = { kind: "keybind", value: normalizeCombo(value) };
   return withMeta(field, { random: !1, ...meta });
 }
+function text(value = "", options) {
+  let { multiline, placeholder, ...meta } = options ?? {}, field = {
+    kind: "text",
+    value: "",
+    ...multiline ? { multiline: !0 } : {},
+    ...placeholder ? { placeholder } : {}
+  };
+  return withMeta({ ...field, value: normalizeText(field, value) }, { random: !1, ...meta });
+}
+var normalizeText = (field, input) => field.multiline ? input.replace(/\r\n?/g, `
+`) : input.replace(/\r\n?|\n/g, " ");
 function gradient(stops, options = {}) {
   let value = normalizeStops(stops);
   if (!value)
@@ -715,7 +737,8 @@ function toolbar(items, meta) {
     throw Error("A toolbar needs at least one item.");
   return withMeta({
     kind: "toolbar",
-    items: Object.freeze(items.map((item) => Object.freeze({ ...item })))
+    items: Object.freeze(items.map((item) => Object.freeze({ ...item }))),
+    ...meta?.labels !== void 0 ? { labels: meta.labels } : {}
   }, meta);
 }
 var readoutMeta = (o) => {
@@ -859,6 +882,8 @@ function normalizeField(field, input) {
       return typeof input === "number" && Number.isFinite(input) ? Math.round(Math.min(field.max, Math.max(field.min, input))) : field.value;
     case "keybind":
       return typeof input === "string" ? normalizeCombo(input) : field.value;
+    case "text":
+      return typeof input === "string" ? normalizeText(field, input) : field.value;
     case "gradient":
       return normalizeStops(input) ?? field.value;
     case "curve":
@@ -1009,6 +1034,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);
@@ -1094,6 +1120,7 @@ function around(field, base, random) {
       ]);
     case "seed":
     case "keybind":
+    case "text":
       return pick(field, random);
   }
 }
@@ -1193,6 +1220,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);
@@ -1629,7 +1657,7 @@ function defineControls(id, input, options = {}) {
     if (pinnedOf?.schema !== schema)
       pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
     return pinnedOf.keys;
-  }, unpinned = (values) => {
+  }, variantsChoice = () => variantsOf(schema, (key) => pinned().has(key)), unpinned = (values) => {
     let keys = pinned();
     if (keys.size === 0)
       return values;
@@ -1643,14 +1671,24 @@ function defineControls(id, input, options = {}) {
     if (keys.size === 0)
       return values;
     return Object.fromEntries(Object.entries(values).filter(([k]) => !keys.has(k)));
-  }, 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, unpinned(normalize(schema, { ...locked, ...patch }))];
-    })
-  ])), presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
+  }, 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) => hasValue(schema[k])));
     return [
       group,
@@ -2118,7 +2156,10 @@ 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,
@@ -2471,7 +2512,7 @@ function descriptorToField(d) {
   if (readoutDescriptor(d))
     return readoutField(d);
   if (d.kind === "toolbar")
-    return toolbar(d.items.map(({ key, ...item }) => ({ ...item, id: key })), meta);
+    return toolbar(d.items.map(({ key, ...item }) => ({ ...item, id: key })), d.labels !== void 0 ? { ...meta, labels: d.labels } : meta);
   if (d.bind)
     return flatSpring({}, { ...meta, id: d.key }).duration;
   if (d.kind === "knob" || d.kind === "number") {
@@ -2546,6 +2587,12 @@ function descriptorToField(d) {
     });
   if (d.kind === "keybind")
     return keybind(typeof d.default === "string" ? d.default : "", meta);
+  if (d.kind === "text")
+    return text(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" },
@@ -2624,7 +2671,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) => {
@@ -2653,6 +2700,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]"
 };
@@ -2862,6 +2910,7 @@ export {
   springCss,
   springMotion,
   table,
+  text,
   toggle,
   toolbar,
   toolbarShortcut,