@vortexm/vjt 0.1.5 → 0.1.6

package/dist/index.js

@@ -4582,6 +4582,9 @@ var ActionRuntime = class {
   focusWidget;
   playAudio;
   stopPlaying;
+  copyToClipboard;
+  selectFile;
+  confirmModal;
   startRecording;
   stopRecording;
   startListening;
@@ -4616,6 +4619,9 @@ var ActionRuntime = class {
     this.focusWidget = options.focusWidget;
     this.playAudio = options.playAudio;
     this.stopPlaying = options.stopPlaying;
+    this.copyToClipboard = options.copyToClipboard;
+    this.selectFile = options.selectFile;
+    this.confirmModal = options.confirmModal;
     this.startRecording = options.startRecording;
     this.stopRecording = options.stopRecording;
     this.startListening = options.startListening;
@@ -4654,7 +4660,7 @@ var ActionRuntime = class {
   async runActions(actions, inputValue, context) {
     let current = inputValue;
     for (const action of actions) {
-      current = await this.runSingleAction(action, current, context);
+      current = await this.runSingleAction(action, inputValue, context);
     }
     return current;
   }
@@ -4666,32 +4672,7 @@ var ActionRuntime = class {
     try {
       let output = await this.executeAction(action, inputValue, context);
       if (action.andThen?.length) {
-        if (Array.isArray(output)) {
-          const collected = [];
-          for (const [index, entry] of output.entries()) {
-            if (entry === null || entry === void 0) {
-              continue;
-            }
-            const nestedOutput = await this.runActions(action.andThen, entry, {
-              ...context,
-              currentValue: entry,
-              currentList: output,
-              currentIndex: index
-            });
-            if (nestedOutput !== null && nestedOutput !== void 0) {
-              if (Array.isArray(nestedOutput)) {
-                for (const item of nestedOutput) {
-                  if (item !== null && item !== void 0) {
-                    collected.push(item);
-                  }
-                }
-              } else {
-                collected.push(nestedOutput);
-              }
-            }
-          }
-          output = collected;
-        } else if (output !== null && output !== void 0) {
+        if (output !== null && output !== void 0) {
           output = await this.runActions(action.andThen, output, { ...context, currentValue: output });
         } else {
           output = null;
@@ -4755,6 +4736,16 @@ var ActionRuntime = class {
       await this.playAudio(this.resolveReference(name.slice(5), context.currentValue, context.responseValue));
       return null;
     }
+    if (name === "copyToClipboard") {
+      await this.copyToClipboard(inputValue);
+      return inputValue;
+    }
+    if (name === "selectFile") {
+      return this.selectFile(action.args);
+    }
+    if (name === "confirmModal") {
+      return await this.confirmModal(action.args, inputValue) ? inputValue : void 0;
+    }
     if (name === "stopPlaying") {
       await this.stopPlaying();
       return null;
@@ -4785,7 +4776,9 @@ var ActionRuntime = class {
       this.setActiveContextMenu({
         id: menuId,
         x: position.x,
-        y: position.y
+        y: position.y,
+        currentValue: context.currentValue,
+        openPath: []
       });
       return null;
     }
@@ -4827,7 +4820,11 @@ var ActionRuntime = class {
       return inputValue;
     }
     if (name.startsWith("get ")) {
-      return this.resolveReference(name.slice(4), context.currentValue, context.responseValue);
+      const reference = name.slice(4);
+      if (Array.isArray(context.currentValue) && this.isCurrentScopedReference(reference)) {
+        return context.currentValue.map((entry) => this.resolveReference(reference, entry, context.responseValue)).filter((entry) => entry !== null && entry !== void 0);
+      }
+      return this.resolveReference(reference, context.currentValue, context.responseValue);
     }
     if (name.startsWith("equals ")) {
       return this.resolveReference(name.slice(7), context.currentValue, context.responseValue) === action.args;
@@ -4848,7 +4845,11 @@ var ActionRuntime = class {
       return nextValue;
     }
     if (name.startsWith("filter ")) {
-      const value = this.resolveReference(name.slice(7), context.currentValue, context.responseValue);
+      const reference = name.slice(7);
+      if (Array.isArray(context.currentValue) && this.isCurrentScopedReference(reference)) {
+        return context.currentValue.filter((entry) => this.resolveReference(reference, entry, context.responseValue));
+      }
+      const value = this.resolveReference(reference, context.currentValue, context.responseValue);
       return value ? inputValue : null;
     }
     if (name === "remove") {
@@ -4909,6 +4910,9 @@ var ActionRuntime = class {
       return inputValue;
     }
     if (name === "map") {
+      if (Array.isArray(context.currentValue)) {
+        return context.currentValue.map((entry) => this.resolveMappedValue(action.args, entry, context.responseValue));
+      }
       return this.resolveMappedValue(action.args, context.currentValue, context.responseValue);
     }
     if (name === "ifelse") {
@@ -4951,6 +4955,9 @@ var ActionRuntime = class {
     }
     return JSON.stringify(value);
   }
+  isCurrentScopedReference(reference) {
+    return reference === "current" || reference.startsWith("current.") || reference.startsWith("this.") || reference === "this";
+  }
 };
 function isIfElseArgs(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -6324,6 +6331,21 @@ function renderModalOverlay(env, modalId) {
 }
 
 // src/lib/widgets/context-menu.ts
+var MENU_WIDTH = 220;
+var MENU_ITEM_HEIGHT = 44;
+var MENU_PADDING = 8;
+function getContextMenuItemAtPath(items, path) {
+  let currentItems = items ?? [];
+  let currentItem = null;
+  for (const index of path) {
+    currentItem = currentItems[index] ?? null;
+    if (!currentItem) {
+      return null;
+    }
+    currentItems = currentItem.items ?? [];
+  }
+  return currentItem;
+}
 function renderContextMenuOverlay(env, menu) {
   const node = env.nodeById.get(menu.id);
   if (!node || node.widget !== "context-menu") {
@@ -6331,8 +6353,52 @@ function renderContextMenuOverlay(env, menu) {
   }
   const state = env.ensureWidgetState(node, menu.id);
   const enabled = state.enabled ?? env.normalizeBoolean(node.enabled, true);
-  const items = (node.items ?? []).map((item, index) => `<button class="vjt-context-menu-item" type="button" data-context-menu-item="${env.escapeHtml(menu.id)}:${index}"${enabled ? "" : " disabled"}>${env.escapeHtml(env.resolveI18nValue(item.name))}</button>`).join("");
-  return `<div class="vjt-context-menu-backdrop" data-context-menu-backdrop="${env.escapeHtml(menu.id)}"><div class="vjt-context-menu" style="left:${menu.x}px;top:${menu.y}px">${items}</div></div>`;
+  const openPath = Array.isArray(menu.openPath) ? menu.openPath : [];
+  const layers = [];
+  let items = node.items ?? [];
+  let pathPrefix = [];
+  let layerX = menu.x;
+  let layerY = menu.y;
+  while (items.length > 0) {
+    layers.push(renderMenuLayer(env, menu.id, items, enabled, layerX, layerY, pathPrefix));
+    const nextIndex = openPath[pathPrefix.length];
+    if (typeof nextIndex !== "number") {
+      break;
+    }
+    const nextItem = items[nextIndex];
+    if (!nextItem?.items?.length) {
+      break;
+    }
+    const proposedY = layerY + MENU_PADDING + nextIndex * MENU_ITEM_HEIGHT;
+    const rightX = layerX + MENU_WIDTH - MENU_PADDING;
+    const leftX = layerX - MENU_WIDTH + MENU_PADDING;
+    layerX = rightX + MENU_WIDTH <= window.innerWidth ? rightX : Math.max(8, leftX);
+    layerY = Math.max(8, Math.min(proposedY, window.innerHeight - (16 + nextItem.items.length * MENU_ITEM_HEIGHT) - 8));
+    items = nextItem.items;
+    pathPrefix = [...pathPrefix, nextIndex];
+  }
+  return `<div class="vjt-context-menu-backdrop" data-context-menu-backdrop="${env.escapeHtml(menu.id)}">${layers.join("")}</div>`;
+}
+function renderMenuLayer(env, menuId, items, enabled, x, y, pathPrefix) {
+  const content = items.map((item, index) => {
+    const path = [...pathPrefix, index];
+    const pathText = path.join(".");
+    const label = env.escapeHtml(env.resolveI18nValue(item.name));
+    const disabled = enabled ? "" : " disabled";
+    if (item.items?.length) {
+      return `<button class="vjt-context-menu-item vjt-context-menu-item--parent" type="button" data-context-menu-expand="${env.escapeHtml(menuId)}:${env.escapeHtml(pathText)}"${disabled}><span>${label}</span><span class="vjt-context-menu-chevron">&gt;</span></button>`;
+    }
+    return `<button class="vjt-context-menu-item" type="button" data-context-menu-item="${env.escapeHtml(menuId)}:${env.escapeHtml(pathText)}"${disabled}>${label}</button>`;
+  }).join("");
+  return `<div class="vjt-context-menu" style="left:${x}px;top:${y}px">${content}</div>`;
+}
+
+// src/lib/widgets/confirm-modal.ts
+function renderConfirmModalOverlay(env, modal) {
+  const caption = env.escapeHtml(env.resolveI18nValue(modal.caption));
+  const yes = env.escapeHtml(env.resolveI18nValue(modal.yes));
+  const no = env.escapeHtml(env.resolveI18nValue(modal.no));
+  return `<div class="vjt-confirm-backdrop" data-confirm-backdrop="true"><div class="vjt-confirm-window"><div class="vjt-confirm-caption">${caption}</div><div class="vjt-confirm-actions"><button class="vjt-button vjt-button--bright" type="button" data-confirm-yes="true">${yes}</button><button class="vjt-button vjt-button--regular" type="button" data-confirm-no="true">${no}</button></div></div></div>`;
 }
 
 // src/lib/widgets/bindings.ts
@@ -6524,7 +6590,7 @@ function bindWidgetEvents(root, env) {
       });
       continue;
     }
-    if (element instanceof HTMLAnchorElement && element.dataset.widget === "link" && env.getInlineActions(node)?.length) {
+    if (element instanceof HTMLAnchorElement && element.dataset.widget === "link" && (node.events?.onClick?.length || env.getInlineActions(node)?.length)) {
       element.addEventListener("pointerdown", (event) => {
         env.setLastPointer({ x: event.clientX, y: event.clientY });
       });
@@ -6594,6 +6660,45 @@ function bindDelegatedUi(root, env) {
   window.addEventListener("pointercancel", () => {
     env.stopSplitterDrag();
   });
+  root.addEventListener("pointerover", (event) => {
+    void (async () => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const hoveredItem = target.closest("[data-context-menu-item], [data-context-menu-expand]");
+      if (!(hoveredItem instanceof HTMLButtonElement)) {
+        return;
+      }
+      const descriptor = hoveredItem.dataset.contextMenuExpand ?? hoveredItem.dataset.contextMenuItem;
+      if (!descriptor) {
+        return;
+      }
+      const [menuId, pathText = ""] = descriptor.split(":");
+      const node = env.nodeById.get(menuId);
+      if (node?.widget !== "context-menu") {
+        return;
+      }
+      const activeMenu = env.getActiveContextMenu();
+      if (!activeMenu || activeMenu.id !== menuId) {
+        return;
+      }
+      const path = parseMenuPath(pathText);
+      const item = getContextMenuItemAtPath(node.items, path);
+      if (!item) {
+        return;
+      }
+      const nextOpenPath = item.items?.length ? path : path.slice(0, -1);
+      if (samePath(activeMenu.openPath ?? [], nextOpenPath)) {
+        return;
+      }
+      env.setActiveContextMenu({
+        ...activeMenu,
+        openPath: nextOpenPath
+      });
+      await env.rerenderRoot();
+    })();
+  });
   root.addEventListener("click", (event) => {
     void (async () => {
       const target = event.target;
@@ -6672,7 +6777,7 @@ function bindDelegatedUi(root, env) {
       }
       const menuItem = target.closest("[data-context-menu-item]");
       if (menuItem instanceof HTMLButtonElement) {
-        const [menuId, indexValue] = (menuItem.dataset.contextMenuItem ?? "").split(":");
+        const [menuId, pathText = ""] = (menuItem.dataset.contextMenuItem ?? "").split(":");
         const node = env.nodeById.get(menuId);
         if (node?.widget !== "context-menu") {
           return;
@@ -6680,11 +6785,27 @@ function bindDelegatedUi(root, env) {
         if (!env.isWidgetEnabled(node, menuId)) {
           return;
         }
-        const item = node.items?.[Number.parseInt(indexValue, 10) || 0];
+        const item = getContextMenuItemAtPath(node.items, parseMenuPath(pathText));
+        const menuContext = env.getActiveContextMenu();
+        const currentValue = menuContext?.id === menuId ? menuContext.currentValue ?? null : null;
         env.setActiveContextMenu(null);
         if (item?.actions?.length) {
-          await env.runActions(item.actions, null, { currentValue: null });
+          await env.runActions(item.actions, currentValue, { currentValue });
+        }
+        await env.rerenderRoot();
+        return;
+      }
+      const menuParentItem = target.closest("[data-context-menu-expand]");
+      if (menuParentItem instanceof HTMLButtonElement) {
+        const [menuId, pathText = ""] = (menuParentItem.dataset.contextMenuExpand ?? "").split(":");
+        const activeMenu = env.getActiveContextMenu();
+        if (!activeMenu || activeMenu.id !== menuId) {
+          return;
         }
+        env.setActiveContextMenu({
+          ...activeMenu,
+          openPath: parseMenuPath(pathText)
+        });
         await env.rerenderRoot();
         return;
       }
@@ -6703,10 +6824,32 @@ function bindDelegatedUi(root, env) {
           await env.runActions(item.actions, null, { currentValue: null });
         }
         await env.rerenderRoot();
+        return;
+      }
+      if (target.closest("[data-confirm-yes]")) {
+        env.resolveConfirmModal(true);
+        await env.rerenderRoot();
+        return;
+      }
+      if (target.closest("[data-confirm-no]")) {
+        env.resolveConfirmModal(false);
+        await env.rerenderRoot();
       }
     })();
   });
 }
+function parseMenuPath(value) {
+  if (!value) {
+    return [];
+  }
+  return value.split(".").map((part) => Number.parseInt(part, 10)).filter((part) => !Number.isNaN(part));
+}
+function samePath(left, right) {
+  if (left.length !== right.length) {
+    return false;
+  }
+  return left.every((value, index) => value === right[index]);
+}
 
 // src/lib/render.ts
 var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
@@ -6863,6 +7006,7 @@ var RuntimeRenderer = class {
   hasTriggeredInitialRefresh = false;
   activeModalId = null;
   activeContextMenu = null;
+  activeConfirmModal = null;
   lastPointer = { x: 24, y: 24 };
   pendingResetModalIds = /* @__PURE__ */ new Set();
   constructor(description, options = {}) {
@@ -6966,6 +7110,9 @@ var RuntimeRenderer = class {
       focusWidget: (reference) => this.focusWidget(reference),
       playAudio: (value) => this.voiceRuntime.play(value),
       stopPlaying: () => this.voiceRuntime.stopPlaying(),
+      copyToClipboard: (value) => this.copyToClipboard(value),
+      selectFile: (args) => this.selectFile(args),
+      confirmModal: (args, inputValue) => this.confirmModal(args, inputValue),
       startRecording: () => this.voiceRuntime.startRecording(),
       stopRecording: () => Promise.resolve(this.voiceRuntime.stopRecording()),
       startListening: () => this.voiceRuntime.startListening(),
@@ -7124,6 +7271,138 @@ var RuntimeRenderer = class {
     await this.rerenderRoot();
     await this.runSystemEvent("onAfterNavigate");
   }
+  async copyToClipboard(value) {
+    const text = value == null ? "" : typeof value === "string" ? value : JSON.stringify(value) ?? "";
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+    if (typeof document === "undefined") {
+      throw new Error("Clipboard API is unavailable");
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "true");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "0";
+    document.body.append(textarea);
+    textarea.focus();
+    textarea.select();
+    const copied = document.execCommand("copy");
+    textarea.remove();
+    if (!copied) {
+      throw new Error("Failed to copy value to clipboard");
+    }
+  }
+  async selectFile(args) {
+    if (typeof document === "undefined") {
+      throw new Error("File selection is unavailable");
+    }
+    const options = isPlainObject4(args) ? args : {};
+    const input = document.createElement("input");
+    input.type = "file";
+    input.style.position = "fixed";
+    input.style.left = "-9999px";
+    input.style.top = "0";
+    if (typeof options.accept === "string" && options.accept.trim()) {
+      input.accept = options.accept;
+    }
+    input.multiple = options.multiple === true;
+    const selection = new Promise((resolve, reject) => {
+      let settled = false;
+      const finish = (value) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        resolve(value);
+      };
+      const fail = (error) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        reject(error instanceof Error ? error : new Error(String(error)));
+      };
+      const cleanup = () => {
+        window.removeEventListener("focus", handleFocus, true);
+        input.remove();
+      };
+      const handleFocus = () => {
+        window.setTimeout(() => {
+          if (!settled && (!input.files || input.files.length === 0)) {
+            cleanup();
+            finish(null);
+          }
+        }, 250);
+      };
+      input.addEventListener("change", () => {
+        void (async () => {
+          try {
+            const files = Array.from(input.files ?? []);
+            const converted = await Promise.all(files.map((file) => this.readSelectedFile(file)));
+            cleanup();
+            finish(input.multiple ? converted : converted[0] ?? null);
+          } catch (error) {
+            cleanup();
+            fail(error);
+          }
+        })();
+      }, { once: true });
+      input.addEventListener("cancel", () => {
+        cleanup();
+        finish(null);
+      }, { once: true });
+      window.addEventListener("focus", handleFocus, true);
+      document.body.append(input);
+      input.click();
+    });
+    return selection;
+  }
+  readSelectedFile(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = () => {
+        reject(reader.error ?? new Error(`Failed to read file ${file.name}`));
+      };
+      reader.onload = () => {
+        const result = typeof reader.result === "string" ? reader.result : "";
+        const [, data = ""] = result.split(",", 2);
+        resolve({
+          name: file.name,
+          mimeType: file.type || "application/octet-stream",
+          size: file.size,
+          data
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  async confirmModal(args, _inputValue) {
+    const options = isPlainObject4(args) ? args : {};
+    const caption = typeof options.caption === "string" && options.caption ? options.caption : "Confirm?";
+    const yes = typeof options.yes === "string" && options.yes ? options.yes : "Yes";
+    const no = typeof options.no === "string" && options.no ? options.no : "No";
+    return new Promise((resolve) => {
+      this.activeConfirmModal?.resolve(false);
+      this.activeConfirmModal = {
+        caption,
+        yes,
+        no,
+        resolve
+      };
+      void this.rerenderRoot();
+    });
+  }
+  resolveConfirmModal(confirmed) {
+    const activeModal = this.activeConfirmModal;
+    if (!activeModal) {
+      return;
+    }
+    this.activeConfirmModal = null;
+    activeModal.resolve(confirmed);
+  }
   reindexStaticTree() {
     this.nodeByKey.clear();
     this.nodeById.clear();
@@ -7178,7 +7457,11 @@ var RuntimeRenderer = class {
       stateByKey: Array.from(this.stateByKey.entries(), ([key, state]) => [key, deepClone(state)]),
       vars: Array.from(this.vars.entries(), ([name, value]) => [name, deepClone(value)]),
       activeModalId: this.activeModalId,
-      activeContextMenu: this.activeContextMenu ? deepClone(this.activeContextMenu) : null
+      activeContextMenu: this.activeContextMenu ? {
+        id: this.activeContextMenu.id,
+        x: this.activeContextMenu.x,
+        y: this.activeContextMenu.y
+      } : null
     };
   }
   indexStaticNodes(node, path) {
@@ -7688,7 +7971,8 @@ var RuntimeRenderer = class {
     const env = this.getWidgetRenderEnvironment();
     const modalMarkup = this.activeModalId ? renderModalOverlay(env, this.activeModalId) : "";
     const menuMarkup = this.activeContextMenu ? renderContextMenuOverlay(env, this.activeContextMenu) : "";
-    return `${modalMarkup}${menuMarkup}`;
+    const confirmMarkup = this.activeConfirmModal ? renderConfirmModalOverlay(env, this.activeConfirmModal) : "";
+    return `${modalMarkup}${menuMarkup}${confirmMarkup}`;
   }
   updatePointerFromEvent(event) {
     this.lastPointer = updatePointerFromMouseEvent(event);
@@ -7915,6 +8199,7 @@ var RuntimeRenderer = class {
       nodeByKey: this.nodeByKey,
       stateByKey: this.stateByKey,
       getLastPointer: () => this.lastPointer,
+      getActiveContextMenu: () => this.activeContextMenu,
       setActiveContextMenu: (menu) => {
         this.activeContextMenu = menu;
       },
@@ -7924,6 +8209,7 @@ var RuntimeRenderer = class {
       updateSplitterDrag: (clientPosition) => this.updateSplitterDrag(clientPosition),
       stopSplitterDrag: () => this.stopSplitterDrag(),
       hasSplitterDrag: () => this.splitterDragState !== null,
+      resolveConfirmModal: (confirmed) => this.resolveConfirmModal(confirmed),
       closeModal: (modalId) => this.closeModal(modalId),
       rerenderRoot: () => this.rerenderRoot(),
       redispatchUnderlyingClick: (x, y) => this.redispatchUnderlyingClick(x, y),

package/dist/lib/action-runtime.d.ts

@@ -34,6 +34,9 @@ type ActionRuntimeOptions = {
     focusWidget: (reference: string) => void;
     playAudio: (value: unknown) => Promise<void>;
     stopPlaying: () => Promise<void>;
+    copyToClipboard: (value: unknown) => Promise<void>;
+    selectFile: (options: unknown) => Promise<unknown>;
+    confirmModal: (options: unknown, inputValue: unknown) => Promise<boolean>;
     startRecording: () => Promise<void>;
     stopRecording: () => Promise<void>;
     startListening: () => Promise<void>;
@@ -53,6 +56,8 @@ type ActionRuntimeOptions = {
         id: string;
         x: number;
         y: number;
+        currentValue?: unknown;
+        openPath?: number[];
     } | null) => void;
     setActiveModalId: (modalId: string | null) => void;
     closeModal: (modalId?: string | null) => void;
@@ -79,6 +84,9 @@ export declare class ActionRuntime {
     private readonly focusWidget;
     private readonly playAudio;
     private readonly stopPlaying;
+    private readonly copyToClipboard;
+    private readonly selectFile;
+    private readonly confirmModal;
     private readonly startRecording;
     private readonly stopRecording;
     private readonly startListening;
@@ -106,5 +114,6 @@ export declare class ActionRuntime {
     private getCurrentListState;
     private cloneValue;
     private stringifyValue;
+    private isCurrentScopedReference;
 }
 export {};

package/dist/lib/dom-state.d.ts

@@ -21,10 +21,14 @@ export declare function adjustContextMenuPosition(root: HTMLElement, activeConte
     id: string;
     x: number;
     y: number;
+    currentValue?: unknown;
+    openPath?: number[];
 } | null): {
     id: string;
     x: number;
     y: number;
+    currentValue?: unknown;
+    openPath?: number[];
 } | null;
 export declare function updatePointerFromMouseEvent(event: MouseEvent): {
     x: number;

package/dist/lib/widgets/confirm-modal.d.ts

@@ -0,0 +1,7 @@
+import type { WidgetRenderEnvironment } from './context.js';
+export type ConfirmModalState = {
+    caption: string;
+    yes: string;
+    no: string;
+};
+export declare function renderConfirmModalOverlay(env: WidgetRenderEnvironment, modal: ConfirmModalState): string;

package/dist/lib/widgets/context-menu.d.ts

@@ -1,14 +1,20 @@
 import type { ActionDefinition, BaseNode } from '../types.js';
 import type { WidgetRenderEnvironment } from './context.js';
+export type ContextMenuItem = {
+    name: string;
+    actions?: ActionDefinition[];
+    items?: ContextMenuItem[];
+};
 export type ContextMenuNode = BaseNode & {
     widget: 'context-menu';
-    items?: Array<{
-        name: string;
-        actions?: ActionDefinition[];
-    }>;
+    items?: ContextMenuItem[];
 };
-export declare function renderContextMenuOverlay(env: WidgetRenderEnvironment, menu: {
+export type ActiveContextMenuState = {
     id: string;
     x: number;
     y: number;
-}): string;
+    currentValue?: unknown;
+    openPath?: number[];
+};
+export declare function getContextMenuItemAtPath(items: ContextMenuItem[] | undefined, path: number[]): ContextMenuItem | null;
+export declare function renderContextMenuOverlay(env: WidgetRenderEnvironment, menu: ActiveContextMenuState): string;

package/dist/lib/widgets/context.d.ts

@@ -5,7 +5,7 @@ import type { CheckboxNode } from './checkbox.js';
 import type { ComboboxNode } from './combobox.js';
 import type { ConditionalContainerNode } from './conditional-container.js';
 import type { ContainerCell, ContainerLayoutNode } from './container-layout.js';
-import type { ContextMenuNode } from './context-menu.js';
+import type { ActiveContextMenuState, ContextMenuNode } from './context-menu.js';
 import type { GridViewNode } from './grid-view.js';
 import type { ImageNode } from './image.js';
 import type { LinkNode } from './link.js';
@@ -23,11 +23,7 @@ import type { TabsNode } from './tabs.js';
 import type { TextareaNode } from './textarea.js';
 import type { UiReferenceNode } from './ui-reference.js';
 export type WidgetRenderEnvironment = {
-    readonly activeContextMenu: {
-        id: string;
-        x: number;
-        y: number;
-    } | null;
+    readonly activeContextMenu: ActiveContextMenuState | null;
     readonly activeModalId: string | null;
     readonly nodeById: Map<string, DescriptionNode>;
     escapeHtml: (value: unknown) => string;

package/dist/lib/widgets/delegation.d.ts

@@ -7,10 +7,19 @@ type DelegationEnvironment = {
         x: number;
         y: number;
     };
+    getActiveContextMenu: () => {
+        id: string;
+        x: number;
+        y: number;
+        currentValue?: unknown;
+        openPath?: number[];
+    } | null;
     setActiveContextMenu: (menu: {
         id: string;
         x: number;
         y: number;
+        currentValue?: unknown;
+        openPath?: number[];
     } | null) => void;
     isWidgetEnabled: (node: DescriptionNode, key: string) => boolean;
     startSplitterDrag: (layoutKey: string, axis: 'horizontal' | 'vertical', splitterIndex: number, startPointer: number) => void;
@@ -18,6 +27,7 @@ type DelegationEnvironment = {
     updateSplitterDrag: (clientPosition: number) => void;
     stopSplitterDrag: () => void;
     hasSplitterDrag: () => boolean;
+    resolveConfirmModal: (confirmed: boolean) => void;
     closeModal: (modalId: string | null) => void;
     rerenderRoot: () => Promise<void>;
     redispatchUnderlyingClick: (clientX: number, clientY: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexm/vjt",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/vjt-styles.css

@@ -685,12 +685,21 @@ body {
 }
 
 .vjt-modal-backdrop,
-.vjt-context-menu-backdrop {
+.vjt-context-menu-backdrop,
+.vjt-confirm-backdrop {
   position: fixed;
   inset: 0;
+}
+
+.vjt-modal-backdrop,
+.vjt-context-menu-backdrop {
   z-index: 1000;
 }
 
+.vjt-confirm-backdrop {
+  z-index: 1100;
+}
+
 .vjt-modal-backdrop {
   display: flex;
   align-items: center;
@@ -759,16 +768,20 @@ body {
 }
 
 .vjt-context-menu {
-  position: fixed;
-  min-width: 180px;
-  padding: 8px;
-  border-radius: 14px;
+    position: fixed;
+    box-sizing: border-box;
+    width: 220px;
+    padding: 8px;
+    border-radius: 14px;
   border: 1px solid var(--vjt-border);
   background: var(--vjt-surface);
   box-shadow: var(--vjt-shadow);
 }
 
 .vjt-context-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
   padding: 10px 12px;
   text-align: left;
@@ -781,3 +794,48 @@ body {
 .vjt-context-menu-item:hover {
   background: color-mix(in srgb, var(--vjt-accent) 14%, transparent);
 }
+
+.vjt-context-menu-item--parent {
+  font-weight: 500;
+}
+
+.vjt-context-menu-chevron {
+  margin-left: 16px;
+  opacity: 0.7;
+}
+
+.vjt-confirm-backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(7, 10, 15, 0.42);
+  padding: 24px;
+}
+
+.vjt-confirm-window {
+  width: min(420px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 22px;
+  border-radius: 18px;
+  border: 1px solid var(--vjt-border);
+  background: var(--vjt-modal-surface);
+  color: var(--vjt-text);
+  box-shadow: var(--vjt-shadow);
+}
+
+.vjt-confirm-caption {
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.vjt-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.vjt-confirm-actions .vjt-button {
+  min-width: 120px;
+}