@luxalgo/vela 0.6.0 → 0.6.2

package/dist/ui.cjs

@@ -73,6 +73,11 @@ function isDarkColor(color) {
 }
 
 // src/ui/styles.ts
+function overlayScrollbarCss(selector, width = 8) {
+  return `${selector}::-webkit-scrollbar{width:${width}px;height:${width}px;}${selector}::-webkit-scrollbar-thumb{background:var(--vela-scroll);border-radius:4px;border:2px solid transparent;background-clip:padding-box;}${selector}::-webkit-scrollbar-track{background:transparent;}${selector}::-webkit-scrollbar-button{display:none;width:0;height:0;}`;
+}
+var FIELD_FOCUS_CSS = "outline:none;transition:border-color .12s ease,box-shadow .12s ease;";
+var FIELD_FOCUS_RING = "border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);";
 function injectStyles(id, css, root = document) {
   if (typeof document === "undefined") return;
   const host = root instanceof Document ? root.head : root;
@@ -920,6 +925,223 @@ var Menu = class {
     this.root.destroy();
   }
 };
+
+// src/ui/components/popover/controller.ts
+function insetRect(r, inset) {
+  return {
+    left: r.left + inset,
+    top: r.top + inset,
+    right: r.right - inset,
+    bottom: r.bottom - inset,
+    width: r.width - inset * 2,
+    height: r.height - inset * 2
+  };
+}
+function viewportRect(width, height, inset) {
+  return {
+    left: inset,
+    top: inset,
+    right: width - inset,
+    bottom: height - inset,
+    width: width - inset * 2,
+    height: height - inset * 2
+  };
+}
+function intersectRects(a, b) {
+  const left = Math.max(a.left, b.left);
+  const top = Math.max(a.top, b.top);
+  const right = Math.min(a.right, b.right);
+  const bottom = Math.min(a.bottom, b.bottom);
+  return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
+function placePopover(a) {
+  let left = a.align === "end" ? a.trigger.right - a.pop.width : a.trigger.left;
+  const below = a.trigger.bottom + a.gap;
+  const above = a.trigger.top - a.pop.height - a.gap;
+  const fitsBelow = below + a.pop.height <= a.clamp.bottom;
+  const fitsAbove = above >= a.clamp.top;
+  let top = below;
+  if (!fitsBelow && (fitsAbove || a.trigger.top - a.clamp.top > a.clamp.bottom - a.trigger.bottom)) {
+    top = Math.max(a.clamp.top, above);
+  }
+  if (left + a.pop.width > a.clamp.right) left = a.clamp.right - a.pop.width;
+  if (left < a.clamp.left) left = a.clamp.left;
+  if (top + a.pop.height > a.clamp.bottom) top = a.clamp.bottom - a.pop.height;
+  if (top < a.clamp.top) top = a.clamp.top;
+  return {
+    left: Math.round(left - a.originX),
+    top: Math.round(top - a.originY)
+  };
+}
+function popoverController(opts = {}) {
+  return {
+    gap: opts.gap ?? 4,
+    align: opts.align ?? "start",
+    matchWidth: opts.matchWidth ?? false,
+    position: opts.position ?? "fixed",
+    boundaryInset: opts.boundaryInset ?? 0,
+    viewportInset: opts.viewportInset ?? 6,
+    onClose: opts.onClose
+  };
+}
+
+// src/ui/components/popover/styles.ts
+var POPOVER_STYLE_ID = "vela-ui-popover";
+var POPOVER_CSS = `
+.vela-popover {
+    position: fixed;
+    z-index: var(--vela-z-popover);
+    box-sizing: border-box;
+    /* Never serve as a scroll anchor: the shell is portaled and re-placed between
+       gestures, and anchoring against it jumps the scroller underneath. */
+    overflow-anchor: none;
+}
+.vela-popover[data-position='absolute'] { position: absolute; }
+.vela-popover[hidden] { display: none !important; }
+`;
+
+// src/ui/components/popover/view.ts
+var open = null;
+function closeOpenPopovers() {
+  open?.hide();
+}
+function isPopoverOpen() {
+  return open !== null;
+}
+function openPopoverTrigger() {
+  return open?.trigger ?? null;
+}
+var POPOVER_DISMISS_FLAG = "__velaPopoverDismiss";
+function markPopoverDismiss(e) {
+  e[POPOVER_DISMISS_FLAG] = true;
+}
+function eventDismissedPopover(e) {
+  return e[POPOVER_DISMISS_FLAG] === true;
+}
+function toRect(r) {
+  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
+}
+var Popover = class {
+  constructor(opts) {
+    this.onOutside = null;
+    this.onKey = null;
+    this.onReflow = null;
+    this.shown = false;
+    const doc = opts.trigger.ownerDocument;
+    injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
+    this.trigger = opts.trigger;
+    this.host = opts.host ?? doc.body;
+    this.ctrl = popoverController(opts);
+    this.boundary = opts.boundary ?? "viewport";
+    this.theme = opts.theme;
+    this.el = doc.createElement("div");
+    this.el.className = "vela-popover vela-ui-layer" + (opts.className ? ` ${opts.className}` : "");
+    this.el.dataset.position = this.ctrl.position;
+    if (opts.zIndex !== void 0) this.el.style.zIndex = String(opts.zIndex);
+    this.el.addEventListener("pointerdown", (e) => e.stopPropagation());
+    if (opts.content instanceof Node) this.el.appendChild(opts.content);
+    else if (typeof opts.content === "function") opts.content(this.el);
+  }
+  get open() {
+    return this.shown;
+  }
+  get position() {
+    return this.ctrl.position;
+  }
+  get align() {
+    return this.ctrl.align;
+  }
+  show() {
+    if (this.shown) {
+      this.place();
+      return;
+    }
+    if (open && open !== this) open.hide();
+    ensureUIHost(this.el, this.theme);
+    this.host.appendChild(this.el);
+    this.shown = true;
+    open = this;
+    this.place();
+    const onOutside = (ev) => {
+      const t = ev.target;
+      if (this.el.contains(t) || this.trigger.contains(t)) return;
+      markPopoverDismiss(ev);
+      this.hide();
+    };
+    const onKey = (ev) => {
+      if (ev.key !== "Escape") return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.hide();
+    };
+    const onReflow = () => this.place();
+    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("resize", onReflow, true);
+    document.addEventListener("scroll", onReflow, true);
+    this.onOutside = onOutside;
+    this.onKey = onKey;
+    this.onReflow = onReflow;
+  }
+  hide() {
+    if (!this.shown) return;
+    if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
+    if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
+    if (this.onReflow) {
+      window.removeEventListener("resize", this.onReflow, true);
+      document.removeEventListener("scroll", this.onReflow, true);
+    }
+    this.onOutside = null;
+    this.onKey = null;
+    this.onReflow = null;
+    this.el.remove();
+    this.shown = false;
+    if (open === this) open = null;
+    this.ctrl.onClose?.();
+  }
+  /** Show if closed, hide if this instance is the open popover. */
+  toggle() {
+    if (this.shown) this.hide();
+    else this.show();
+  }
+  destroy() {
+    this.hide();
+  }
+  reposition() {
+    if (this.shown) this.place();
+  }
+  clampRect() {
+    const view = viewportRect(window.innerWidth, window.innerHeight, this.ctrl.viewportInset);
+    const bound = this.readBoundary();
+    if (!bound) return view;
+    const inset = insetRect(bound, this.ctrl.boundaryInset);
+    return intersectRects(view, inset);
+  }
+  readBoundary() {
+    const b = this.boundary;
+    if (b === "viewport") return null;
+    const raw = typeof b === "function" ? b() : b.getBoundingClientRect();
+    return raw ? toRect(raw) : null;
+  }
+  place() {
+    const ar = this.trigger.getBoundingClientRect();
+    if (this.ctrl.matchWidth) {
+      this.el.style.minWidth = `${Math.round(Math.max(this.el.offsetWidth, ar.width))}px`;
+    }
+    const origin = this.ctrl.position === "absolute" ? this.host.getBoundingClientRect() : { left: 0, top: 0 };
+    const pos = placePopover({
+      trigger: toRect(ar),
+      pop: { width: this.el.offsetWidth, height: this.el.offsetHeight },
+      gap: this.ctrl.gap,
+      align: this.ctrl.align,
+      clamp: this.clampRect(),
+      originX: origin.left,
+      originY: origin.top
+    });
+    this.el.style.left = `${pos.left}px`;
+    this.el.style.top = `${pos.top}px`;
+  }
+};
 function dialogController(opts = {}) {
   return {
     machine: dialog__namespace.machine,
@@ -936,7 +1158,7 @@ function dialogController(opts = {}) {
 }
 
 // src/ui/components/dialog/styles.ts
-var DIALOG_STYLE_ID = "vela-ui-dialog";
+var DIALOG_STYLE_ID = "vela-ui-dialog-5";
 var DIALOG_CSS = `
 .vela-dialog-backdrop {
     position: fixed;
@@ -955,6 +1177,12 @@ var DIALOG_CSS = `
     padding-top: 10vh;
     z-index: var(--vela-z-dialog);
 }
+.vela-dialog-backdrop[data-contained],
+.vela-dialog-positioner[data-contained] { position: absolute; }
+.vela-dialog-positioner[data-align='center'] {
+    align-items: center;
+    padding-top: 0;
+}
 .vela-dialog {
     background: var(--vela-surface);
     color: var(--vela-fg);
@@ -997,14 +1225,56 @@ var DIALOG_CSS = `
     font-size: 15px;
 }
 .vela-dialog-close:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
-.vela-dialog-body { padding: var(--vela-space-4); overflow: auto; }
-.vela-dialog-body::-webkit-scrollbar { width: 8px; }
-.vela-dialog-body::-webkit-scrollbar-thumb {
-    background: var(--vela-scroll);
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
+.vela-dialog-body { padding: var(--vela-space-4); overflow: auto; min-height: 0; flex: 1 1 auto; }
+.vela-dialog-body[data-flush] { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.vela-dialog-footer { flex: 0 0 auto; }
+.vela-dialog--settings {
+    width: fit-content;
+    min-width: min(560px, 94vw);
+    max-width: min(720px, 94vw);
+    max-height: 70vh;
+    font-size: 13px;
+    cursor: default;
+}
+.vela-dialog--form {
+    width: fit-content;
+    min-width: min(380px, 90%);
+    max-width: min(640px, 94%);
+    max-height: 82%;
+    font-size: 14px;
+}
+/* Form dialogs (indicator inputs, drawing settings): the tab strip / body owns the
+   line under the header, and the footer carries its own top delimiter. */
+.vela-dialog--form .vela-dialog-header { align-items: flex-start; padding: 16px 20px 20px; border-bottom: none; }
+.vela-dialog--form .vela-dialog-title { font-size: 20px; line-height: 28px; }
+.vela-dialog--form .vela-dialog-footer {
+    padding: 16px 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    border-top: 1px solid var(--vela-border);
 }
+.vela-dialog-btn {
+    cursor: pointer;
+    height: 34px;
+    padding: 0 11px;
+    border-radius: 6px;
+    border: 1px solid var(--vela-border-strong);
+    background: transparent;
+    color: var(--vela-fg);
+    font-weight: 400;
+    font-size: 14px;
+    font-family: inherit;
+    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;
+}
+.vela-dialog-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-dialog-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-dialog-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
+${overlayScrollbarCss(".vela-dialog-body")}
+/* Scrollers NESTED in a dialog (a flush body's grid, a tab pane) get the same thin
+   overlay bars \u2014 the two-class selectors below stay overridable by more specific
+   per-dialog sheets. */
+${overlayScrollbarCss(".vela-dialog *")}
 /* \u2500\u2500 mobile chrome: dialogs fill the shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    Inside a shell in the mobile size class ([data-layout='mobile'] on the widget root,
    which is position:relative) every kit dialog presents fullscreen: desktop cards are
@@ -1039,9 +1309,20 @@ var Dialog = class {
     if (opts.dimBackdrop !== true) this.backdrop.classList.add("vela-dialog-backdrop--clear");
     this.positioner = doc.createElement("div");
     this.positioner.className = "vela-dialog-positioner vela-ui-layer";
+    if (opts.contained) {
+      this.backdrop.dataset.contained = "";
+      this.positioner.dataset.contained = "";
+    }
+    this.positioner.dataset.align = opts.align ?? "top";
     this.panel = doc.createElement("div");
     this.panel.className = "vela-dialog";
+    if (opts.className) {
+      for (const cls of opts.className.split(/\s+/)) if (cls) this.panel.classList.add(cls);
+    }
     this.panel.tabIndex = -1;
+    this.panel.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape") e.stopPropagation();
+    });
     const header = doc.createElement("div");
     header.className = "vela-dialog-header";
     if (opts.draggable) {
@@ -1062,20 +1343,45 @@ var Dialog = class {
       });
       header.addEventListener("pointerup", () => dragging = false);
     }
+    if (opts.headerStart) header.appendChild(opts.headerStart);
     const title = doc.createElement("div");
     title.className = "vela-dialog-title";
     title.textContent = opts.title ?? "";
+    this.titleEl = title;
     const close = doc.createElement("button");
     close.className = "vela-dialog-close";
     close.appendChild(iconEl("close", doc));
     header.append(title, close);
     this.body = doc.createElement("div");
     this.body.className = "vela-dialog-body";
+    if (opts.flush) this.body.dataset.flush = "";
     if (opts.content instanceof Node) this.body.appendChild(opts.content);
     else if (typeof opts.content === "function") opts.content(this.body);
     this.panel.append(header, this.body);
+    if (opts.footer) {
+      const foot = doc.createElement("div");
+      foot.className = "vela-dialog-footer";
+      if (opts.footer instanceof Node) foot.appendChild(opts.footer);
+      else opts.footer(foot);
+      this.panel.appendChild(foot);
+      this.footer = foot;
+    } else {
+      this.footer = null;
+    }
     this.positioner.appendChild(this.panel);
     host.append(this.backdrop, this.positioner);
+    if (opts.closeOnBackdrop) {
+      const closeOn = (e) => {
+        if (e.target !== this.backdrop && e.target !== this.positioner) return;
+        if (isPopoverOpen() || eventDismissedPopover(e)) {
+          closeOpenPopovers();
+          return;
+        }
+        this.hide();
+      };
+      this.backdrop.addEventListener("pointerdown", closeOn);
+      this.positioner.addEventListener("pointerdown", closeOn);
+    }
     this.ctrl = dialogController({
       ...opts,
       // Mobile chrome (fullscreen presentation): opening must never land focus on
@@ -1109,7 +1415,14 @@ var Dialog = class {
   hide() {
     this.ctrl.connect(this.handle.service).setOpen(false);
   }
+  contains(node) {
+    if (node == null) return false;
+    if (this.panel.contains(node) || this.backdrop.contains(node) || this.positioner.contains(node)) return true;
+    const el = node instanceof Element ? node : node.parentElement;
+    return el?.closest(".vela-popover, .vela-menu") != null;
+  }
   destroy() {
+    if (this.open) this.hide();
     this.handle.stop();
     this.backdrop.remove();
     this.positioner.remove();
@@ -1396,219 +1709,10 @@ var Drawer = class {
   }
 };
 
-// src/ui/components/popover/controller.ts
-function insetRect(r, inset) {
-  return {
-    left: r.left + inset,
-    top: r.top + inset,
-    right: r.right - inset,
-    bottom: r.bottom - inset,
-    width: r.width - inset * 2,
-    height: r.height - inset * 2
-  };
-}
-function viewportRect(width, height, inset) {
-  return {
-    left: inset,
-    top: inset,
-    right: width - inset,
-    bottom: height - inset,
-    width: width - inset * 2,
-    height: height - inset * 2
-  };
-}
-function intersectRects(a, b) {
-  const left = Math.max(a.left, b.left);
-  const top = Math.max(a.top, b.top);
-  const right = Math.min(a.right, b.right);
-  const bottom = Math.min(a.bottom, b.bottom);
-  return { left, top, right, bottom, width: right - left, height: bottom - top };
-}
-function placePopover(a) {
-  let left = a.align === "end" ? a.trigger.right - a.pop.width : a.trigger.left;
-  const below = a.trigger.bottom + a.gap;
-  const above = a.trigger.top - a.pop.height - a.gap;
-  const fitsBelow = below + a.pop.height <= a.clamp.bottom;
-  const fitsAbove = above >= a.clamp.top;
-  let top = below;
-  if (!fitsBelow && (fitsAbove || a.trigger.top - a.clamp.top > a.clamp.bottom - a.trigger.bottom)) {
-    top = Math.max(a.clamp.top, above);
-  }
-  if (left + a.pop.width > a.clamp.right) left = a.clamp.right - a.pop.width;
-  if (left < a.clamp.left) left = a.clamp.left;
-  if (top + a.pop.height > a.clamp.bottom) top = a.clamp.bottom - a.pop.height;
-  if (top < a.clamp.top) top = a.clamp.top;
-  return {
-    left: Math.round(left - a.originX),
-    top: Math.round(top - a.originY)
-  };
-}
-function popoverController(opts = {}) {
-  return {
-    gap: opts.gap ?? 4,
-    align: opts.align ?? "start",
-    matchWidth: opts.matchWidth ?? false,
-    position: opts.position ?? "fixed",
-    boundaryInset: opts.boundaryInset ?? 0,
-    viewportInset: opts.viewportInset ?? 6,
-    onClose: opts.onClose
-  };
-}
-
-// src/ui/components/popover/styles.ts
-var POPOVER_STYLE_ID = "vela-ui-popover";
-var POPOVER_CSS = `
-.vela-popover {
-    position: fixed;
-    z-index: var(--vela-z-popover);
-    box-sizing: border-box;
-    /* Never serve as a scroll anchor: the shell is portaled and re-placed between
-       gestures, and anchoring against it jumps the scroller underneath. */
-    overflow-anchor: none;
-}
-.vela-popover[data-position='absolute'] { position: absolute; }
-.vela-popover[hidden] { display: none !important; }
-`;
-
-// src/ui/components/popover/view.ts
-var open = null;
-function closeOpenPopovers() {
-  open?.hide();
-}
-function isPopoverOpen() {
-  return open !== null;
-}
-function openPopoverTrigger() {
-  return open?.trigger ?? null;
-}
-function toRect(r) {
-  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
-}
-var Popover = class {
-  constructor(opts) {
-    this.onOutside = null;
-    this.onKey = null;
-    this.onReflow = null;
-    this.shown = false;
-    const doc = opts.trigger.ownerDocument;
-    injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
-    this.trigger = opts.trigger;
-    this.host = opts.host ?? doc.body;
-    this.ctrl = popoverController(opts);
-    this.boundary = opts.boundary ?? "viewport";
-    this.theme = opts.theme;
-    this.el = doc.createElement("div");
-    this.el.className = "vela-popover vela-ui-layer" + (opts.className ? ` ${opts.className}` : "");
-    this.el.dataset.position = this.ctrl.position;
-    if (opts.zIndex !== void 0) this.el.style.zIndex = String(opts.zIndex);
-    this.el.addEventListener("pointerdown", (e) => e.stopPropagation());
-    if (opts.content instanceof Node) this.el.appendChild(opts.content);
-    else if (typeof opts.content === "function") opts.content(this.el);
-  }
-  get open() {
-    return this.shown;
-  }
-  get position() {
-    return this.ctrl.position;
-  }
-  get align() {
-    return this.ctrl.align;
-  }
-  show() {
-    if (this.shown) {
-      this.place();
-      return;
-    }
-    if (open && open !== this) open.hide();
-    ensureUIHost(this.el, this.theme);
-    this.host.appendChild(this.el);
-    this.shown = true;
-    open = this;
-    this.place();
-    const onOutside = (ev) => {
-      const t = ev.target;
-      if (this.el.contains(t) || this.trigger.contains(t)) return;
-      this.hide();
-    };
-    const onKey = (ev) => {
-      if (ev.key !== "Escape") return;
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.hide();
-    };
-    const onReflow = () => this.place();
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
-    document.addEventListener("keydown", onKey, true);
-    window.addEventListener("resize", onReflow, true);
-    document.addEventListener("scroll", onReflow, true);
-    this.onOutside = onOutside;
-    this.onKey = onKey;
-    this.onReflow = onReflow;
-  }
-  hide() {
-    if (!this.shown) return;
-    if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
-    if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
-    if (this.onReflow) {
-      window.removeEventListener("resize", this.onReflow, true);
-      document.removeEventListener("scroll", this.onReflow, true);
-    }
-    this.onOutside = null;
-    this.onKey = null;
-    this.onReflow = null;
-    this.el.remove();
-    this.shown = false;
-    if (open === this) open = null;
-    this.ctrl.onClose?.();
-  }
-  /** Show if closed, hide if this instance is the open popover. */
-  toggle() {
-    if (this.shown) this.hide();
-    else this.show();
-  }
-  destroy() {
-    this.hide();
-  }
-  reposition() {
-    if (this.shown) this.place();
-  }
-  clampRect() {
-    const view = viewportRect(window.innerWidth, window.innerHeight, this.ctrl.viewportInset);
-    const bound = this.readBoundary();
-    if (!bound) return view;
-    const inset = insetRect(bound, this.ctrl.boundaryInset);
-    return intersectRects(view, inset);
-  }
-  readBoundary() {
-    const b = this.boundary;
-    if (b === "viewport") return null;
-    const raw = typeof b === "function" ? b() : b.getBoundingClientRect();
-    return raw ? toRect(raw) : null;
-  }
-  place() {
-    const ar = this.trigger.getBoundingClientRect();
-    if (this.ctrl.matchWidth) {
-      this.el.style.minWidth = `${Math.round(Math.max(this.el.offsetWidth, ar.width))}px`;
-    }
-    const origin = this.ctrl.position === "absolute" ? this.host.getBoundingClientRect() : { left: 0, top: 0 };
-    const pos = placePopover({
-      trigger: toRect(ar),
-      pop: { width: this.el.offsetWidth, height: this.el.offsetHeight },
-      gap: this.ctrl.gap,
-      align: this.ctrl.align,
-      clamp: this.clampRect(),
-      originX: origin.left,
-      originY: origin.top
-    });
-    this.el.style.left = `${pos.left}px`;
-    this.el.style.top = `${pos.top}px`;
-  }
-};
-
-// src/ui/components/switch/controller.ts
-function switchController(opts = {}) {
-  let checked = opts.checked ?? false;
-  const disabled = opts.disabled ?? false;
+// src/ui/components/switch/controller.ts
+function switchController(opts = {}) {
+  let checked = opts.checked ?? false;
+  const disabled = opts.disabled ?? false;
   return {
     get checked() {
       return checked;
@@ -1739,14 +1843,18 @@ function selectController(opts) {
 }
 
 // src/ui/components/select/styles.ts
-var SELECT_STYLE_ID = "vela-ui-select";
+var SELECT_STYLE_ID = "vela-ui-select-3";
 var SELECT_CSS = `
 .vela-select { position: relative; display: inline-block; min-width: 0; }
 .vela-select[data-fill] { width: 100%; }
+/* Closed trigger matches NumberInput / TextField (100px). Long labels ellipsis;
+   the open list still sizes to the longest item. */
+.vela-select:not([data-fill]) { width: 100px; flex: none; justify-self: start; }
 .vela-select-trigger {
     display: flex;
     align-items: center;
     width: 100%;
+    min-width: 0;
     box-sizing: border-box;
     height: 34px;
     padding: 0 26px 0 8px;
@@ -1763,10 +1871,6 @@ var SELECT_CSS = `
 }
 .vela-select-trigger:hover { border-color: var(--vela-fg-muted); }
 .vela-select-trigger:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
-/* As a grid item (chart-settings rows dissolve via display:contents into a shared
-   max-content column) the wrap must NOT stretch to the column: it sizes to its own
-   widest option, like the native select it replaces. */
-.vela-select[data-size='sm'] { max-width: 200px; flex: 0 0 auto; justify-self: start; }
 .vela-select[data-size='sm'] .vela-select-trigger {
     height: 28px;
     background: var(--vela-surface-elev);
@@ -1776,12 +1880,10 @@ var SELECT_CSS = `
     box-shadow: none;
 }
 .vela-select[data-size='sm'] .vela-select-trigger:focus { box-shadow: none; border-color: var(--vela-fg-muted); }
-.vela-select-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Invisible option-label stack: gives the shrink-to-fit wrap the WIDEST option's
-   intrinsic width (like a native select), so picking a shorter/longer label never
-   resizes the trigger and shifts the row around it. */
-.vela-select-sizer { visibility: hidden; height: 0; overflow: hidden; font-size: 14px; }
-.vela-select[data-size='sm'] .vela-select-sizer { font-size: 13px; }
+.vela-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Compact toolbar selects still hug the widest option (no 100px kit column). */
+.vela-select[data-size='sm']:not([data-fill]) { width: auto; max-width: 200px; }
+.vela-select-sizer { visibility: hidden; height: 0; overflow: hidden; font-size: 13px; }
 .vela-select-sizer span { display: block; height: 0; white-space: nowrap; padding: 0 26px 0 8px; border-inline: 1px solid transparent; }
 .vela-select-chevron {
     position: absolute;
@@ -1796,6 +1898,7 @@ var SELECT_CSS = `
 }
 .vela-select-chevron .vela-icon, .vela-select-chevron svg { width: 12px; height: 12px; display: block; }
 .vela-select-list {
+    width: max-content;
     background: var(--vela-bg);
     color: var(--vela-fg);
     border: none;
@@ -1806,11 +1909,11 @@ var SELECT_CSS = `
     overflow: hidden;
 }
 .vela-select-list[data-size='sm'] { font-size: 13px; background: var(--vela-surface-overlay); }
-.vela-select-items { max-height: none; overflow: hidden; }
+.vela-select-items { width: max-content; min-width: 100%; max-height: none; overflow: hidden; }
 .vela-select-list.is-scroll { display: flex; align-items: stretch; gap: 2px; }
 .vela-select-list.is-scroll .vela-select-items {
     flex: 1 1 auto;
-    min-width: 0;
+    min-width: min-content;
     max-height: 240px;
     overflow-y: auto;
     scrollbar-width: none;
@@ -1820,7 +1923,9 @@ var SELECT_CSS = `
 .vela-select-thumb { width: 3px; border-radius: 2px; background: var(--vela-scroll); }
 .vela-select-item {
     display: block;
-    width: 100%;
+    width: auto;
+    min-width: 100%;
+    white-space: nowrap;
     text-align: left;
     padding: 7px 10px;
     border: none;
@@ -1947,15 +2052,17 @@ var Select = class {
     chevron.appendChild(iconEl("chevron-down", doc));
     btn.append(label, chevron);
     wrap.appendChild(btn);
-    const sizer = doc.createElement("div");
-    sizer.className = "vela-select-sizer";
-    sizer.setAttribute("aria-hidden", "true");
-    for (const o of this.ctrl.options) {
-      const s = doc.createElement("span");
-      s.textContent = o.label;
-      sizer.appendChild(s);
+    if (this.ctrl.size === "sm") {
+      const sizer = doc.createElement("div");
+      sizer.className = "vela-select-sizer";
+      sizer.setAttribute("aria-hidden", "true");
+      for (const o of this.ctrl.options) {
+        const s = doc.createElement("span");
+        s.textContent = o.label;
+        sizer.appendChild(s);
+      }
+      wrap.appendChild(sizer);
     }
-    wrap.appendChild(sizer);
     btn.addEventListener("pointerdown", (e) => {
       e.preventDefault();
       btn.focus({ preventScroll: true });
@@ -2061,10 +2168,12 @@ function numberInputController(opts) {
 }
 
 // src/ui/components/number-input/styles.ts
-var NUMBER_STYLE_ID = "vela-ui-number";
+var NUMBER_STYLE_ID = "vela-ui-number-3";
 var NUMBER_CSS = `
 .vela-num { position: relative; display: inline-block; min-width: 0; }
 .vela-num[data-fill] { width: 100%; }
+.vela-num:not([data-fill]) { width: 100px; flex: none; justify-self: start; }
+.vela-num:not([data-fill])[data-compact] { width: 80px; }
 .vela-num input {
     width: 100%;
     box-sizing: border-box;
@@ -2084,7 +2193,9 @@ var NUMBER_CSS = `
 .vela-num input::-webkit-inner-spin-button, .vela-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 .vela-num input:hover { border-color: var(--vela-fg-muted); }
 .vela-num input:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
-.vela-num[data-steppers] input { padding-right: 26px; }
+/* The stepper gutter exists only while the steppers do (hover) \u2014 an idle field keeps
+   its full width so long values aren't cut under an invisible arrow column. */
+.vela-num[data-steppers]:hover input { padding-right: 26px; }
 .vela-num[data-size='sm'] { width: 64px; flex: none; }
 .vela-num[data-size='sm'][data-compact] { width: 56px; }
 .vela-num[data-size='sm'] input {
@@ -2140,7 +2251,7 @@ var NumberInput = class {
     const wrap = doc.createElement("div");
     wrap.className = "vela-num";
     wrap.dataset.size = this.ctrl.size;
-    if (this.ctrl.size !== "sm") wrap.dataset.fill = "";
+    if (opts.fill ?? this.ctrl.size !== "sm") wrap.dataset.fill = "";
     if (opts.compact) wrap.dataset.compact = "";
     if (this.ctrl.steppers) wrap.dataset.steppers = "";
     const ni = doc.createElement("input");
@@ -2266,15 +2377,17 @@ function textFieldController(opts = {}) {
 }
 
 // src/ui/components/text-field/styles.ts
-var TEXT_STYLE_ID = "vela-ui-text";
+var TEXT_STYLE_ID = "vela-ui-text-2";
 var TEXT_CSS = `
 .vela-text {
     display: inline-block;
     min-width: 0;
 }
 .vela-text[data-fill] { width: 100%; }
+.vela-text:not([data-fill]) { width: 100px; flex: none; justify-self: start; }
 .vela-text-field {
     width: 100%;
+    min-width: 0;
     box-sizing: border-box;
     height: 34px;
     background: transparent;
@@ -2285,6 +2398,8 @@ var TEXT_CSS = `
     font-size: 14px;
     font-family: inherit;
     outline: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 .vela-text-field:hover { border-color: var(--vela-fg-muted); }
@@ -2310,6 +2425,7 @@ var TextField = class {
     if (this.ctrl.fill) wrap.dataset.fill = "";
     const ti = doc.createElement("input");
     ti.type = "text";
+    ti.size = 1;
     if (opts.id) ti.id = opts.id;
     ti.value = this.ctrl.value;
     ti.className = "vela-text-field";
@@ -2612,6 +2728,624 @@ function closeColorPopover() {
   closeOpenPopovers();
 }
 
+// src/ui/components/text-area/controller.ts
+function textAreaController(opts = {}) {
+  let value = opts.value ?? "";
+  return {
+    get value() {
+      return value;
+    },
+    size: opts.size ?? "md",
+    rows: opts.rows ?? 3,
+    disabled: opts.disabled ?? false,
+    commit(next) {
+      if (next === value) return null;
+      value = next;
+      opts.onChange?.(next);
+      return next;
+    },
+    sync(next) {
+      value = next;
+    }
+  };
+}
+
+// src/ui/components/text-area/styles.ts
+var TEXTAREA_STYLE_ID = "vela-ui-textarea";
+var TEXTAREA_CSS = `
+.vela-textarea { display: block; width: 100%; min-width: 0; }
+.vela-textarea-field {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 64px;
+    background: transparent;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    color: var(--vela-fg-bright);
+    padding: 8px;
+    font-size: 14px;
+    font-family: inherit;
+    line-height: 1.4;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.vela-textarea-field:hover { border-color: var(--vela-fg-muted); }
+.vela-textarea-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
+.vela-textarea-field::placeholder { color: currentColor; opacity: 0.4; }
+.vela-textarea[data-autogrow] .vela-textarea-field { resize: none; overflow-y: hidden; min-height: 46px; }
+.vela-textarea[data-size='sm'] .vela-textarea-field {
+    font-size: 13px;
+    min-height: 46px;
+    padding: 6px 9px;
+    line-height: 18px;
+}
+`;
+
+// src/ui/components/text-area/view.ts
+var TextArea = class {
+  constructor(opts = {}) {
+    const doc = document;
+    injectStyles(TEXTAREA_STYLE_ID, TEXTAREA_CSS, doc);
+    this.ctrl = textAreaController(opts);
+    this.autoGrow = opts.autoGrow === true;
+    this.maxLines = opts.maxLines ?? 4;
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-textarea";
+    wrap.dataset.size = this.ctrl.size;
+    if (this.autoGrow) wrap.dataset.autogrow = "";
+    const ta = doc.createElement("textarea");
+    ta.className = "vela-textarea-field";
+    if (opts.id) ta.id = opts.id;
+    if (opts.placeholder) ta.placeholder = opts.placeholder;
+    ta.rows = this.ctrl.rows;
+    ta.value = this.ctrl.value;
+    if (this.ctrl.disabled) ta.disabled = true;
+    ta.addEventListener("blur", () => {
+      this.ctrl.commit(ta.value);
+    });
+    if (this.autoGrow) {
+      ta.addEventListener("input", () => this.grow());
+    }
+    wrap.appendChild(ta);
+    this.el = wrap;
+    this.input = ta;
+    if (this.autoGrow) this.grow();
+  }
+  get value() {
+    return this.ctrl.value;
+  }
+  setValue(v) {
+    this.ctrl.sync(v);
+    this.input.value = v;
+    if (this.autoGrow) this.grow();
+  }
+  grow() {
+    const ta = this.input;
+    const lh = parseFloat(getComputedStyle(ta).lineHeight) || 18;
+    const pad = ta.clientHeight - (ta.offsetHeight ? lh * (ta.rows || 1) : 0);
+    const max = lh * this.maxLines + (Number.isFinite(pad) && pad > 0 ? pad : 12);
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, max)}px`;
+    ta.style.overflowY = ta.scrollHeight > max ? "auto" : "hidden";
+  }
+};
+
+// src/ui/components/glyph-select/controller.ts
+function glyphSelectController(opts) {
+  let value = opts.value;
+  return {
+    options: opts.options,
+    get value() {
+      return value;
+    },
+    setValue(v) {
+      value = v;
+    },
+    optionOf(v) {
+      return opts.options.find((o) => o.value === v);
+    },
+    pick(v) {
+      value = v;
+      opts.onChange?.(v);
+      return v;
+    }
+  };
+}
+var WIDTH_FIELD_OPTIONS = [1, 2, 3, 4, 5];
+function lineWidthGlyph(width) {
+  return `<svg width="22" height="14" viewBox="0 0 22 14" fill="none"><line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg>`;
+}
+function widthFieldOptions() {
+  return WIDTH_FIELD_OPTIONS.map((w) => ({ value: w, label: `${w}px`, glyph: lineWidthGlyph(w) }));
+}
+
+// src/ui/components/glyph-select/styles.ts
+var GLYPH_SELECT_STYLE_ID = "vela-ui-glyph-select";
+var GLYPH_SELECT_CSS = `
+.vela-glyph-select {
+    height: 34px;
+    padding: 0 26px 0 8px;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    justify-self: start;
+    color: var(--vela-fg-bright);
+    font-size: 14px;
+    font-family: inherit;
+    outline: none;
+    position: relative;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.vela-glyph-select:hover { border-color: var(--vela-fg-muted); }
+.vela-glyph-select:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
+.vela-glyph-select-caret {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    opacity: 0.55;
+    color: inherit;
+    line-height: 0;
+    pointer-events: none;
+}
+.vela-glyph-select-pop {
+    background: var(--vela-bg);
+    border: none;
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    color: var(--vela-fg);
+    font: 14px var(--vela-font);
+}
+.vela-glyph-select-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 96px;
+    padding: 7px 10px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+}
+.vela-glyph-select-item:hover { background: var(--vela-hover); }
+.vela-glyph-select-item[data-active='1'] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+`;
+
+// src/ui/components/glyph-select/view.ts
+var GlyphSelect = class {
+  constructor(opts) {
+    injectStyles(GLYPH_SELECT_STYLE_ID, GLYPH_SELECT_CSS, document);
+    this.ctrl = glyphSelectController(opts);
+    this.theme = opts.theme;
+    this.get = opts.get ?? (() => this.ctrl.value);
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "vela-glyph-select";
+    if (opts.title) trigger.title = opts.title;
+    this.el = trigger;
+    this.paint();
+    trigger.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      trigger.focus({ preventScroll: true });
+    });
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    trigger.addEventListener("vela-sync", () => {
+      this.ctrl.setValue(this.get());
+      this.paint();
+    });
+  }
+  setValue(v) {
+    this.ctrl.setValue(v);
+    this.paint();
+  }
+  paint() {
+    const cur = this.get();
+    const opt = this.ctrl.optionOf(cur);
+    const glyph = document.createElement("span");
+    glyph.style.display = "flex";
+    glyph.innerHTML = opt?.glyph ?? "";
+    const caret = document.createElement("span");
+    caret.className = "vela-glyph-select-caret";
+    caret.appendChild(iconEl("chevron-down", this.el.ownerDocument));
+    this.el.replaceChildren(glyph, caret);
+  }
+  toggle() {
+    if (openPopoverTrigger() === this.el) {
+      closeOpenPopovers();
+      return;
+    }
+    const current = this.get();
+    const pop = new Popover({
+      trigger: this.el,
+      theme: this.theme,
+      align: "end",
+      gap: 6,
+      className: "vela-glyph-select-pop",
+      content: (el) => {
+        el.style.font = `var(--vela-font-size-md) ${this.theme.fontFamily}`;
+        for (const o of this.ctrl.options) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-glyph-select-item";
+          item.dataset.active = o.value === current ? "1" : "0";
+          item.innerHTML = `<span style="display:flex;flex:none;">${o.glyph}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${o.label}</span>`;
+          item.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            pop.hide();
+            this.ctrl.pick(o.value);
+            this.paint();
+          });
+          el.appendChild(item);
+        }
+      }
+    });
+    pop.show();
+  }
+};
+function widthField(theme, getVal, onVal) {
+  return new GlyphSelect({
+    theme,
+    options: widthFieldOptions(),
+    value: getVal(),
+    get: getVal,
+    onChange: onVal
+  }).el;
+}
+function closeWidthPopover() {
+  closeOpenPopovers();
+}
+
+// src/ui/components/field/controller.ts
+var FIELD_GAP_PX = 16;
+function fieldGridColumns(variant, mobile) {
+  if (variant === "inputs") return mobile ? "minmax(0,1fr) auto" : "max-content 1fr";
+  return mobile ? "minmax(0,1fr) max-content" : "max-content max-content";
+}
+
+// src/ui/components/field/styles.ts
+var FIELD_STYLE_ID = "vela-ui-field";
+var FIELD_CSS = `
+.vela-field-grid {
+    display: grid;
+    align-items: center;
+    align-content: start;
+    column-gap: ${FIELD_GAP_PX}px;
+    row-gap: ${FIELD_GAP_PX}px;
+}
+.vela-field-grid[data-variant='inputs'] { grid-template-columns: max-content 1fr; }
+.vela-field-grid[data-variant='inputs'][data-mobile] { grid-template-columns: minmax(0,1fr) auto; }
+.vela-field-grid[data-variant='settings'] {
+    grid-template-columns: max-content max-content;
+    column-gap: 12px;
+}
+.vela-field-grid[data-variant='settings'][data-mobile] { grid-template-columns: minmax(0,1fr) max-content; }
+.vela-field-row { display: contents; }
+.vela-field-span { grid-column: 1 / -1; }
+.vela-field-label {
+    opacity: 0.9;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+}
+.vela-field-label[data-size='sm'] { font-size: inherit; opacity: 0.85; }
+.vela-field-cell { display: flex; align-items: center; gap: 8px; justify-self: start; }
+.vela-field-bool { display: flex; align-items: center; gap: 8px; min-height: 22px; }
+.vela-field-stacked { display: flex; flex-direction: column; gap: 8px; }
+.vela-field-stacked-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
+.vela-field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+.vela-field-inline-item { display: flex; align-items: center; gap: 8px; }
+.vela-field-toggle-label { display: flex; align-items: center; gap: 8px; }
+.vela-field-section {
+    grid-column: 1 / -1;
+    margin: 24px 0 0;
+    padding-bottom: 8px;
+    font-size: var(--vela-font-size-sm);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--vela-fg-muted);
+}
+.vela-field-section[data-variant='inputs'] {
+    margin: 0;
+    padding: 20px 0 8px;
+    font-size: 11px;
+    font-weight: 600;
+}
+.vela-field-section[data-variant='inputs'][data-first] { padding-top: 4px; }
+.vela-field-sep { grid-column: 1 / -1; height: 14px; }
+.vela-field-dim { opacity: 0.4 !important; pointer-events: none !important; }
+`;
+
+// src/ui/components/field/view.ts
+function ensureFieldStyles(doc = document) {
+  injectStyles(FIELD_STYLE_ID, FIELD_CSS, doc);
+}
+function fieldGrid(opts = {}) {
+  ensureFieldStyles();
+  const el = document.createElement("div");
+  el.className = "vela-field-grid";
+  const variant = opts.variant ?? "inputs";
+  el.dataset.variant = variant;
+  if (opts.mobile) el.dataset.mobile = "";
+  el.style.gridTemplateColumns = fieldGridColumns(variant, opts.mobile === true);
+  return el;
+}
+function fieldSection(title, opts = {}) {
+  ensureFieldStyles();
+  const el = document.createElement("div");
+  el.className = "vela-field-section";
+  if (opts.variant) el.dataset.variant = opts.variant;
+  if (opts.first) el.dataset.first = "";
+  el.textContent = title;
+  return el;
+}
+function fieldSeparator() {
+  ensureFieldStyles();
+  const el = document.createElement("div");
+  el.className = "vela-field-sep";
+  return el;
+}
+function labelEl(text, opts) {
+  const el = opts.id ? document.createElement("label") : document.createElement("span");
+  if (opts.id && el instanceof HTMLLabelElement) el.htmlFor = opts.id;
+  el.className = "vela-field-label";
+  if (opts.size) el.dataset.size = opts.size;
+  el.textContent = text;
+  return el;
+}
+function asList(control) {
+  if (!control) return [];
+  return Array.isArray(control) ? control : [control];
+}
+function applyClass(el, extra) {
+  if (extra) {
+    for (const c of extra.split(/\s+/)) if (c) el.classList.add(c);
+  }
+}
+function dimControls(controls, on) {
+  for (const c of controls) {
+    if (c.dataset.sdSelfGated === "1") continue;
+    c.classList.toggle("vela-field-dim", !on);
+  }
+}
+function fieldRow(opts) {
+  ensureFieldStyles();
+  const size = opts.labelSize;
+  if (opts.inline) {
+    const wrap2 = document.createElement("div");
+    wrap2.className = "vela-field-span vela-field-inline";
+    for (const item of opts.inline) {
+      const it = document.createElement("div");
+      it.className = "vela-field-inline-item";
+      if (item.toggleFirst) it.style.flexDirection = "row-reverse";
+      if (item.label) {
+        const lbl = labelEl(item.label, { id: item.id, size });
+        if (item.toggleFirst) lbl.style.cursor = "pointer";
+        it.appendChild(lbl);
+      }
+      if (item.fit) it.appendChild(item.control);
+      else {
+        const cw = document.createElement("div");
+        cw.style.width = "100px";
+        cw.appendChild(item.control);
+        it.appendChild(cw);
+      }
+      wrap2.appendChild(it);
+    }
+    if (opts.info) wrap2.appendChild(opts.info);
+    applyClass(wrap2, opts.className);
+    return wrap2;
+  }
+  if (opts.bool) {
+    const wrap2 = document.createElement("div");
+    wrap2.className = "vela-field-span vela-field-bool";
+    const sw = new Switch({
+      id: opts.toggle?.id ?? opts.id,
+      checked: opts.toggle?.checked ?? false,
+      size: "md",
+      tone: "bright",
+      onChange: (v) => opts.toggle?.onChange(v)
+    });
+    wrap2.append(sw.el, labelEl(opts.label, { size }));
+    if (opts.info) wrap2.appendChild(opts.info);
+    if (opts.toggle?.get) {
+      const get = opts.toggle.get;
+      wrap2.addEventListener("vela-sync", () => {
+        sw.setChecked(get());
+      });
+    }
+    applyClass(wrap2, opts.className);
+    return wrap2;
+  }
+  if (opts.stacked) {
+    const wrap2 = document.createElement("div");
+    wrap2.className = "vela-field-span vela-field-stacked";
+    const head = document.createElement("div");
+    head.className = "vela-field-stacked-head";
+    head.appendChild(labelEl(opts.label, { id: opts.id, size }));
+    if (opts.info) head.appendChild(opts.info);
+    wrap2.appendChild(head);
+    for (const c of asList(opts.control)) wrap2.appendChild(c);
+    applyClass(wrap2, opts.className);
+    return wrap2;
+  }
+  const wrap = document.createElement("div");
+  wrap.className = "vela-field-row";
+  const controls = asList(opts.control);
+  if (opts.toggle) {
+    const left = document.createElement("div");
+    left.className = "vela-field-toggle-label";
+    const sw = new Switch({
+      id: opts.toggle.id ?? opts.id,
+      checked: opts.toggle.checked,
+      size: "md",
+      tone: "bright",
+      onChange: (v) => {
+        opts.toggle.onChange(v);
+        if (controls.length > 0) dimControls(controls, v);
+      }
+    });
+    left.append(sw.el, labelEl(opts.label, { size }));
+    wrap.appendChild(left);
+    if (controls.length > 0) dimControls(controls, opts.toggle.checked);
+    if (opts.toggle.get) {
+      const get = opts.toggle.get;
+      wrap.addEventListener("vela-sync", () => {
+        const v = get();
+        sw.setChecked(v);
+        if (controls.length > 0) dimControls(controls, v);
+      });
+    }
+  } else {
+    wrap.appendChild(labelEl(opts.label, { id: opts.id, size }));
+  }
+  const cell = document.createElement("div");
+  cell.className = "vela-field-cell";
+  if (opts.controlWidth != null && controls.length === 1 && !opts.fit) {
+    const cw = document.createElement("div");
+    cw.style.width = `${opts.controlWidth}px`;
+    cw.appendChild(controls[0]);
+    cell.appendChild(cw);
+  } else {
+    for (const c of controls) cell.appendChild(c);
+  }
+  if (opts.info) cell.appendChild(opts.info);
+  wrap.appendChild(cell);
+  applyClass(wrap, opts.className);
+  return wrap;
+}
+function buildFieldControl(desc) {
+  if (desc.kind === "number") {
+    const ni = new NumberInput({
+      id: desc.id,
+      value: desc.value,
+      min: desc.min,
+      max: desc.max,
+      step: desc.step,
+      integer: desc.integer,
+      size: "md",
+      fill: desc.fill,
+      compact: desc.compact,
+      commit: desc.commit,
+      steppers: desc.steppers,
+      clamp: desc.clamp,
+      placeholder: desc.placeholder,
+      emptyValue: desc.emptyValue,
+      title: desc.title,
+      onChange: desc.onChange
+    });
+    if (desc.sync) {
+      const sync = desc.sync;
+      ni.el.addEventListener("vela-sync", () => {
+        ni.setValue(sync());
+      });
+    }
+    return { el: ni.el, setValue: (v) => ni.setValue(Number(v)) };
+  }
+  if (desc.kind === "select") {
+    const sel = new Select({
+      id: desc.id,
+      options: desc.options,
+      value: desc.value,
+      size: "md",
+      fill: desc.fill,
+      theme: desc.theme,
+      list: desc.list,
+      onChange: desc.onChange
+    });
+    if (desc.title) sel.el.title = desc.title;
+    if (desc.sync) {
+      const sync = desc.sync;
+      sel.el.addEventListener("vela-sync", () => {
+        sel.setValue(sync());
+      });
+    }
+    return { el: sel.el, setValue: (v) => sel.setValue(String(v)) };
+  }
+  if (desc.kind === "switch") {
+    const sw = new Switch({
+      id: desc.id,
+      checked: desc.checked,
+      size: "md",
+      tone: "bright",
+      onChange: desc.onChange
+    });
+    if (desc.sync) {
+      const sync = desc.sync;
+      sw.el.addEventListener("vela-sync", () => {
+        sw.setChecked(sync());
+      });
+    }
+    return { el: sw.el, setValue: (v) => sw.setChecked(Boolean(v)) };
+  }
+  if (desc.kind === "color") {
+    const el2 = colorField(desc.theme, desc.get, desc.onChange, {
+      shape: "circle",
+      id: desc.id,
+      popover: desc.popover
+    });
+    if (desc.title) el2.title = desc.title;
+    return { el: el2 };
+  }
+  if (desc.kind === "text") {
+    const tf = new TextField({
+      id: desc.id,
+      value: desc.value,
+      size: "md",
+      fill: desc.fill,
+      onChange: desc.onChange
+    });
+    if (desc.placeholder) tf.input.placeholder = desc.placeholder;
+    if (desc.sync) {
+      const sync = desc.sync;
+      tf.el.addEventListener("vela-sync", () => {
+        tf.setValue(sync());
+      });
+    }
+    return { el: tf.el, setValue: (v) => tf.setValue(String(v)) };
+  }
+  if (desc.kind === "textarea") {
+    const ta = new TextArea({
+      id: desc.id,
+      value: desc.value,
+      rows: desc.rows,
+      autoGrow: desc.autoGrow,
+      maxLines: desc.maxLines,
+      placeholder: desc.placeholder,
+      onChange: desc.onChange
+    });
+    if (desc.sync) {
+      const sync = desc.sync;
+      ta.el.addEventListener("vela-sync", () => {
+        ta.setValue(sync());
+      });
+    }
+    return { el: ta.el, setValue: (v) => ta.setValue(String(v)) };
+  }
+  const el = widthField(desc.theme, desc.get, desc.onChange);
+  if (desc.title) el.title = desc.title;
+  return { el };
+}
+
 Object.defineProperty(exports, "normalizeProps", {
   enumerable: true,
   get: function () { return vanilla.normalizeProps; }
@@ -2623,22 +3357,30 @@ Object.defineProperty(exports, "spreadProps", {
 exports.ColorField = ColorField;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
+exports.FIELD_FOCUS_CSS = FIELD_FOCUS_CSS;
+exports.FIELD_FOCUS_RING = FIELD_FOCUS_RING;
+exports.FIELD_GAP_PX = FIELD_GAP_PX;
+exports.GlyphSelect = GlyphSelect;
 exports.KeymapManager = KeymapManager;
 exports.Menu = Menu;
 exports.NumberInput = NumberInput;
 exports.Popover = Popover;
 exports.Select = Select;
 exports.Switch = Switch;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Tooltip = Tooltip;
+exports.WIDTH_FIELD_OPTIONS = WIDTH_FIELD_OPTIONS;
 exports.applyPlotOverlayTokens = applyPlotOverlayTokens;
 exports.applyThemeTokens = applyThemeTokens;
 exports.blendOver = blendOver;
 exports.buildColorPicker = buildColorPicker;
+exports.buildFieldControl = buildFieldControl;
 exports.buildPalette = buildPalette;
 exports.clampNumber = clampNumber;
 exports.closeColorPopover = closeColorPopover;
 exports.closeOpenPopovers = closeOpenPopovers;
+exports.closeWidthPopover = closeWidthPopover;
 exports.colorField = colorField;
 exports.colorPickerController = colorPickerController;
 exports.combineColor = combineColor;
@@ -2646,7 +3388,14 @@ exports.decorateSelectScroll = decorateSelectScroll;
 exports.dialogController = dialogController;
 exports.drawerController = drawerController;
 exports.ensureUIHost = ensureUIHost;
+exports.eventDismissedPopover = eventDismissedPopover;
+exports.fieldGrid = fieldGrid;
+exports.fieldGridColumns = fieldGridColumns;
+exports.fieldRow = fieldRow;
+exports.fieldSection = fieldSection;
+exports.fieldSeparator = fieldSeparator;
 exports.fillSelectList = fillSelectList;
+exports.glyphSelectController = glyphSelectController;
 exports.hslHex = hslHex;
 exports.iconEl = iconEl;
 exports.iconMarkup = iconMarkup;
@@ -2654,11 +3403,13 @@ exports.injectStyles = injectStyles;
 exports.insetRect = insetRect;
 exports.intersectRects = intersectRects;
 exports.isPopoverOpen = isPopoverOpen;
+exports.lineWidthGlyph = lineWidthGlyph;
 exports.menuController = menuController;
 exports.nextUid = nextUid;
 exports.numberInputController = numberInputController;
 exports.openPopoverTrigger = openPopoverTrigger;
 exports.openSelectList = openSelectList;
+exports.overlayScrollbarCss = overlayScrollbarCss;
 exports.placePopover = placePopover;
 exports.popoverController = popoverController;
 exports.registerIcon = registerIcon;
@@ -2669,9 +3420,12 @@ exports.splitColor = splitColor;
 exports.svg16 = svg16;
 exports.svg24 = svg24;
 exports.switchController = switchController;
+exports.textAreaController = textAreaController;
 exports.textFieldController = textFieldController;
 exports.toggleSelectList = toggleSelectList;
 exports.tooltipController = tooltipController;
 exports.transparencyChecker = transparencyChecker;
 exports.viewportRect = viewportRect;
+exports.widthField = widthField;
+exports.widthFieldOptions = widthFieldOptions;
 exports.withAlpha = withAlpha;