@luxalgo/vela 0.6.8 → 0.6.10

package/dist/{chunk-2R7BANEM.js → chunk-G77Y7LK2.js}

@@ -1,5 +1,5 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-OICPLNU7.js';
-import { injectStyles } from './chunk-PN5KWFZ4.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-MHY7MVXH.js';
+import { injectStyles } from './chunk-KG4YT3TI.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';
 

package/dist/{chunk-PN5KWFZ4.js → chunk-KG4YT3TI.js}

@@ -98,11 +98,11 @@ registerIcon(
 );
 registerIcon(
   "market-pre",
-  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 6-4 4-4-4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m8 6 4-4 4 4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
 );
 registerIcon(
   "market-post",
-  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 18-4-4-4 4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 14-4 4-4-4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
 );
 registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
 registerIcon(
@@ -135,6 +135,8 @@ registerIcon("folder-plus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1
 registerIcon("folder-minus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M6.2 9.4h3.6"/>'));
 registerIcon("collapse", S('<path d="M3 8h10"/>'));
 registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1.4"/><path d="M8 5.4v5.2M5.4 8h5.2"/>'));
+registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
+registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
 registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
 registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
 registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
@@ -142,7 +144,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
-registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
+registerIcon("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
 registerIcon("cursor", svg24('<path d="M5 3l6 16 2-6 6-2z"/>', 'fill="currentColor" stroke="none"'));

package/dist/{chunk-OICPLNU7.js → chunk-MHY7MVXH.js}

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-PN5KWFZ4.js';
+import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-KG4YT3TI.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as menu from '@zag-js/menu';
@@ -707,6 +707,196 @@ var Popover = class {
   }
 };
 
+// src/ui/components/callout-bubble/controller.ts
+function closesPanel(item) {
+  return item.close !== false;
+}
+function calloutPanelRows(items) {
+  const rows = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      rows.push({ type: "text", text: item.text });
+      continue;
+    }
+    const last = rows[rows.length - 1];
+    if (last && last.type === "buttons") last.buttons.push(item);
+    else rows.push({ type: "buttons", buttons: [item] });
+  }
+  return rows;
+}
+
+// src/ui/components/callout-bubble/styles.ts
+var CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+var CALLOUT_CSS = `
+.vela-callout {
+    display: inline-grid;
+    place-items: center;
+    border-radius: 50%;
+    flex: none;
+    line-height: 0;
+    box-sizing: border-box;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+}
+.vela-callout[role='button'] { cursor: pointer; }
+.vela-callout svg { display: block; }
+/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover
+   shell is bare positioning chrome). */
+.vela-callout-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 12px;
+    max-width: 280px;
+    box-sizing: border-box;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    color: var(--vela-fg);
+    font: var(--vela-font-size-md) var(--vela-font);
+}
+.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }
+.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }
+.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.vela-callout-btn {
+    cursor: pointer;
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 5px;
+    border: 1px solid var(--vela-border);
+    background: transparent;
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    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-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
+`;
+
+// src/ui/components/callout-bubble/view.ts
+var CalloutBubble = class {
+  constructor(opts) {
+    this.pop = null;
+    this.spec = { icon: opts.icon, background: opts.background, label: opts.label };
+    if (opts.color !== void 0) this.spec.color = opts.color;
+    if (opts.panel !== void 0) this.spec.panel = opts.panel;
+    this.size = opts.size ?? 16;
+    this.host = opts.host;
+    this.theme = opts.theme;
+    this.boundary = opts.boundary;
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
+    this.el = doc.createElement("span");
+    this.el.className = "vela-callout";
+    this.el.style.width = `${this.size}px`;
+    this.el.style.height = `${this.size}px`;
+    this.el.addEventListener("click", (e) => {
+      if (!this.spec.panel) return;
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.el.addEventListener("dblclick", (e) => {
+      if (this.spec.panel) e.stopPropagation();
+    });
+    this.el.addEventListener("keydown", (e) => {
+      if (!this.spec.panel || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      this.toggle();
+    });
+    this.dress();
+  }
+  /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+  set(spec) {
+    this.spec = { ...this.spec, ...spec };
+    if ("panel" in spec) this.pop?.hide();
+    this.dress();
+  }
+  /** Whether the deployed panel is currently open. */
+  get open() {
+    return this.pop?.open ?? false;
+  }
+  /** Close the deployed panel, if any. The bubble itself stays. */
+  hidePanel() {
+    this.pop?.hide();
+  }
+  destroy() {
+    this.pop?.destroy();
+    this.pop = null;
+    this.el.remove();
+  }
+  dress() {
+    const clickable = this.spec.panel !== void 0;
+    this.el.style.background = this.spec.background;
+    this.el.style.color = this.spec.color ?? "";
+    this.el.innerHTML = iconAt(this.spec.icon, this.size - 4);
+    this.el.setAttribute("aria-label", this.spec.label);
+    if (clickable) {
+      this.el.setAttribute("role", "button");
+      this.el.tabIndex = 0;
+    } else {
+      this.el.removeAttribute("role");
+      this.el.removeAttribute("tabindex");
+    }
+  }
+  toggle() {
+    if (this.pop?.open) {
+      this.pop.hide();
+      return;
+    }
+    const panel = this.spec.panel;
+    if (!panel) return;
+    this.pop?.destroy();
+    this.pop = new Popover({
+      trigger: this.el,
+      gap: 6,
+      content: (body) => this.buildPanel(body, panel),
+      ...this.host ? { host: this.host } : {},
+      ...this.theme ? { theme: this.theme() } : {},
+      ...this.boundary ? { boundary: this.boundary } : {}
+    });
+    this.pop.show();
+  }
+  buildPanel(body, panel) {
+    const doc = body.ownerDocument;
+    const root = doc.createElement("div");
+    root.className = "vela-callout-panel";
+    if (panel.title) {
+      const title = doc.createElement("div");
+      title.className = "vela-callout-title";
+      title.textContent = panel.title;
+      root.appendChild(title);
+    }
+    for (const row of calloutPanelRows(panel.items)) {
+      if (row.type === "text") {
+        const text = doc.createElement("div");
+        text.className = "vela-callout-text";
+        text.textContent = row.text;
+        root.appendChild(text);
+        continue;
+      }
+      const actions = doc.createElement("div");
+      actions.className = "vela-callout-actions";
+      for (const item of row.buttons) {
+        const btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = "vela-callout-btn" + (item.primary ? " vela-callout-btn-primary" : "");
+        btn.textContent = item.label;
+        btn.addEventListener("click", () => {
+          item.run();
+          if (closesPanel(item)) this.pop?.hide();
+        });
+        actions.appendChild(btn);
+      }
+      root.appendChild(actions);
+    }
+    body.appendChild(root);
+  }
+};
+
 // src/ui/components/select/controller.ts
 function selectController(opts) {
   const options = opts.options;
@@ -2645,4 +2835,4 @@ function buildFieldControl(desc) {
   return { el };
 }
 
-export { ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, STATIC_TOKENS, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, themeTokens, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions };
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, STATIC_TOKENS, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, themeTokens, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions };