@vortexm/vjt 0.1.13 → 0.1.14

package/dist/index.js

@@ -4220,6 +4220,20 @@ function stringifyReferenceValue(value) {
   }
   return JSON.stringify(value);
 }
+function resolveInlineI18nValue(host, value) {
+  if (typeof value !== "string") {
+    return value;
+  }
+  if (value.startsWith("i18n:") && !value.slice(5).includes(" ")) {
+    return host.resolveI18nValue(value);
+  }
+  if (!value.includes("i18n:")) {
+    return value;
+  }
+  return value.replaceAll(/i18n:([A-Za-z0-9_.-]+)/g, (_match, key) => {
+    return host.resolveI18nValue(`i18n:${key}`);
+  });
+}
 function isReferenceValueEmpty(value) {
   if (value === null || value === void 0) {
     return true;
@@ -4274,6 +4288,10 @@ var ReferenceRuntime = class {
   constructor(host) {
     this.host = host;
   }
+  getListSelectionIndex(listId) {
+    const listState = this.host.stateByKey.get(listId) ?? this.host.stateById.get(listId);
+    return listState?.selected ?? -1;
+  }
   resolveScopedRootReference(scope, path, currentValue, responseValue, inputValue) {
     if (scope === "current") {
       if (path.length === 0) {
@@ -4388,6 +4406,9 @@ var ReferenceRuntime = class {
   }
   resolveCurrentReference(reference, currentValue) {
     if (this.isListElementContext(currentValue)) {
+      if (reference === "isSelected") {
+        return currentValue.index === this.getListSelectionIndex(currentValue.listId);
+      }
       const resolvedDescriptor = this.resolveListDescriptorNode(currentValue.descriptor, currentValue);
       const firstPart = reference.split(".")[0];
       const namedNode = this.findNamedWidget(resolvedDescriptor, firstPart, currentValue);
@@ -4395,6 +4416,9 @@ var ReferenceRuntime = class {
         const widgetKey = this.host.resolveItemNodeKey(namedNode, currentValue.listId, currentValue.index, `named.${firstPart}`);
         const state = this.host.ensureWidgetState(namedNode, widgetKey);
         const rest = reference.split(".").slice(1).join(".");
+        if (rest === "isSelected") {
+          return currentValue.index === this.getListSelectionIndex(currentValue.listId);
+        }
         return rest ? this.readWidgetField(state, rest) : state;
       }
       const directDescriptorValue = readPath(currentValue.descriptor, reference.split("."));
@@ -4420,9 +4444,9 @@ var ReferenceRuntime = class {
   readWidgetField(state, field) {
     switch (field) {
       case "text":
-        return state.text ?? "";
+        return resolveInlineI18nValue(this.host, state.text ?? "");
       case "placeholder":
-        return state.placeholder ?? "";
+        return resolveInlineI18nValue(this.host, state.placeholder ?? "");
       case "checked":
         return state.checked ?? false;
       case "enabled":
@@ -4433,6 +4457,8 @@ var ReferenceRuntime = class {
         return state.condition ?? false;
       case "selected":
         return state.selected ?? 0;
+      case "item":
+        return state.selected ?? (state.widget === "list" || state.widget === "grid-view" ? -1 : 0);
       case "value":
         if (state.widget === "combobox") {
           const index = state.selected ?? 0;
@@ -4454,9 +4480,9 @@ var ReferenceRuntime = class {
       case "isHidden":
         return state.isHidden ?? true;
       case "url":
-        return state.url ?? "";
+        return resolveInlineI18nValue(this.host, state.url ?? "");
       case "base64":
-        return state.base64 ?? "";
+        return resolveInlineI18nValue(this.host, state.base64 ?? "");
       case "elements":
         if (state.widget === "list") {
           return (state.elements ?? []).map((descriptor, index) => ({
@@ -4538,6 +4564,9 @@ var ReferenceRuntime = class {
       case "selected":
         state.selected = toFiniteNumber(inputValue) ?? 0;
         break;
+      case "item":
+        state.selected = toFiniteNumber(inputValue) ?? 0;
+        break;
       case "isHidden":
         state.isHidden = Boolean(inputValue);
         break;
@@ -4604,15 +4633,25 @@ var ReferenceRuntime = class {
   }
   resolveMappedValue(template, currentValue, responseValue, inputValue = currentValue) {
     if (typeof template === "string") {
-      if (template.startsWith("$ref:")) {
-        return this.resolveReference(template.slice(5), currentValue, responseValue, inputValue);
+      if (template.startsWith("i18n:") && !template.slice(5).includes(" ")) {
+        return this.host.resolveI18nValue(template);
       }
-      if (template.includes("$ref:")) {
-        return template.replaceAll(/\$ref:([A-Za-z0-9_.]+)/g, (_match, ref) => {
+      let resolvedTemplate = template;
+      if (resolvedTemplate.includes("i18n:")) {
+        resolvedTemplate = resolvedTemplate.replaceAll(/i18n:([A-Za-z0-9_.-]+)/g, (_match, key) => {
+          return this.host.resolveI18nValue(`i18n:${key}`);
+        });
+      }
+      if (resolvedTemplate.startsWith("$ref:")) {
+        return this.resolveReference(resolvedTemplate.slice(5), currentValue, responseValue, inputValue);
+      }
+      if (resolvedTemplate.includes("$ref:")) {
+        return resolvedTemplate.replaceAll(/\$ref:([A-Za-z0-9_.]+)/g, (_match, ref) => {
           const resolved = this.resolveReference(ref, currentValue, responseValue, inputValue);
           return stringifyReferenceValue(resolved);
         });
       }
+      return resolvedTemplate;
     }
     if (Array.isArray(template)) {
       return template.map((entry) => this.resolveMappedValue(entry, currentValue, responseValue, inputValue));
@@ -4748,7 +4787,10 @@ var ActionRuntime = class {
   scrollWidgetToBottom;
   scrollWidgetToElementByIndex;
   playAudio;
+  playStaticAudio;
   stopPlaying;
+  showInfoToast;
+  showErrorToast;
   copyToClipboard;
   selectFile;
   confirmModal;
@@ -4790,7 +4832,10 @@ var ActionRuntime = class {
     this.scrollWidgetToBottom = options.scrollWidgetToBottom;
     this.scrollWidgetToElementByIndex = options.scrollWidgetToElementByIndex;
     this.playAudio = options.playAudio;
+    this.playStaticAudio = options.playStaticAudio;
     this.stopPlaying = options.stopPlaying;
+    this.showInfoToast = options.showInfoToast;
+    this.showErrorToast = options.showErrorToast;
     this.copyToClipboard = options.copyToClipboard;
     this.selectFile = options.selectFile;
     this.confirmModal = options.confirmModal;
@@ -4911,14 +4956,37 @@ var ActionRuntime = class {
       await this.navigateTo(name.slice(9));
       return null;
     }
+    if (name.startsWith("pause ")) {
+      const durationMs = Math.max(0, Math.trunc(this.toNumber(name.slice(6))));
+      await new Promise((resolve) => {
+        if (typeof window === "undefined") {
+          setTimeout(resolve, durationMs);
+          return;
+        }
+        window.setTimeout(resolve, durationMs);
+      });
+      return inputValue;
+    }
     if (name.startsWith("play ")) {
       await this.playAudio(this.resolveReference(name.slice(5), context.currentValue, context.responseValue, inputValue));
       return null;
     }
+    if (name.startsWith("playStatic ")) {
+      await this.playStaticAudio(name.slice(11).trim());
+      return null;
+    }
     if (name === "copyToClipboard") {
       await this.copyToClipboard(inputValue);
       return inputValue;
     }
+    if (name === "infoToast") {
+      this.showInfoToast(this.stringifyValue(inputValue));
+      return inputValue;
+    }
+    if (name === "errorToast") {
+      this.showErrorToast(this.stringifyValue(inputValue));
+      return inputValue;
+    }
     if (name === "selectFile") {
       return this.selectFile(action.args);
     }
@@ -5002,6 +5070,18 @@ var ActionRuntime = class {
       this.moveCursorToEnd(name.slice(16));
       return null;
     }
+    if (name.startsWith("setItem ")) {
+      const reference = name.slice(8).trim();
+      this.assignReference(`${reference}.item`, Math.max(-1, Math.trunc(this.toNumber(inputValue))), context.currentValue);
+      return inputValue;
+    }
+    if (name === "setItemCurrent") {
+      const current = context.currentValue;
+      if (isListElementLike(current)) {
+        this.assignReference(`${current.listId}.item`, Math.max(0, Math.trunc(current.index)), current);
+      }
+      return inputValue;
+    }
     if (name.startsWith("scrollToTop ")) {
       this.scrollWidgetToTop(name.slice(12));
       return inputValue;
@@ -5109,7 +5189,8 @@ var ActionRuntime = class {
     if (name.startsWith("append ")) {
       const reference = name.slice(7);
       const currentText = this.resolveReference(reference, context.currentValue, context.responseValue, inputValue);
-      const nextValue = `${this.stringifyValue(currentText)}${this.stringifyValue(action.args)}`;
+      const appendValue = this.resolveMappedValue(action.args, context.currentValue, context.responseValue, inputValue);
+      const nextValue = `${this.stringifyValue(currentText)}${this.stringifyValue(appendValue)}`;
       this.assignReference(reference, nextValue, context.currentValue);
       return nextValue;
     }
@@ -5536,7 +5617,7 @@ function updatePointerFromMouseEvent(event) {
   };
 }
 function getListElementContextFromElement(element, stateByKey) {
-  const listElement = element.closest(".vjt-list-element");
+  const listElement = element.closest(".vjt-list-element, .vjt-grid-cell");
   if (!(listElement instanceof HTMLElement)) {
     return null;
   }
@@ -5774,6 +5855,10 @@ var DEFAULT_STYLE_MAP = {
   spoilerFrameDark: "border: 1px solid rgba(109,143,179,0.2); background: rgba(255,255,255,0.035); border-radius: 10px;",
   clickableRowLight: "padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(111, 143, 177, 0.16); background: rgba(255,255,255,0.32); cursor: pointer;",
   clickableRowDark: "padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(109,143,179,0.14); background: rgba(255,255,255,0.03); cursor: pointer;",
+  selectableTileLight: "padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(111, 143, 177, 0.18); background: rgba(255,255,255,0.34); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;",
+  selectableTileDark: "padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(109,143,179,0.16); background: rgba(255,255,255,0.03); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;",
+  selectableTileSelectedLight: "padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(87, 136, 191, 0.52); background: rgba(120, 169, 221, 0.18); box-shadow: 0 0 0 4px rgba(120, 169, 221, 0.12); cursor: pointer;",
+  selectableTileSelectedDark: "padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(138, 186, 238, 0.48); background: rgba(83, 124, 168, 0.26); box-shadow: 0 0 0 4px rgba(83, 124, 168, 0.18); cursor: pointer;",
   employeeLinkLight: "display:flex; align-items:center; width:100%; height:100%; color:#54749a; font-weight:600;",
   employeeLinkDark: "display:flex; align-items:center; width:100%; height:100%; color:#b8d0ea; font-weight:600;"
 };
@@ -5784,6 +5869,8 @@ var MAX_RECORDING_MS = 10 * 60 * 1e3;
 var MAX_LISTENING_SILENCE_MS = 60 * 60 * 1e3;
 var SILENCE_STOP_MS = 2e3;
 var DEFAULT_SPEECH_THRESHOLD = 0.035;
+var LISTENING_PRE_ROLL_MS = 300;
+var LISTENING_RECORDER_TIMESLICE_MS = 100;
 var RECORDING_MIME_CANDIDATES = [
   "audio/webm;codecs=opus",
   "audio/webm",
@@ -5864,6 +5951,11 @@ var VoiceRuntime = class {
   listenAnalyser = null;
   listenSource = null;
   listenFrameId = null;
+  listeningRecorder = null;
+  listeningRecorderMimeType = "audio/webm";
+  listeningPreRollChunks = [];
+  listeningCaptureChunks = [];
+  listeningCaptureActive = false;
   lastSpeechAt = 0;
   listeningStartedAt = 0;
   recordingStartedFromListening = false;
@@ -5898,15 +5990,37 @@ var VoiceRuntime = class {
     copy.set(bytes);
     const blob = new Blob([copy.buffer], { type: payload.mimeType });
     const url = URL.createObjectURL(blob);
-    const audio = new Audio(url);
+    await this.playResolvedSource(url, payload, true, {
+      mimeType: payload.mimeType,
+      bytes: bytes.byteLength
+    });
+  }
+  async playStatic(url) {
+    if (typeof url !== "string" || !url.trim()) {
+      return;
+    }
+    const safeUrl = sanitizeUrl(url.trim(), { allowRelative: true });
+    if (!safeUrl) {
+      logRuntimeError("voice.playStatic", new Error("Blocked unsafe audio url"), { url });
+      return;
+    }
+    await this.playResolvedSource(safeUrl, {
+      audioData: safeUrl,
+      mimeType: "audio/url"
+    }, false, {
+      url: safeUrl
+    });
+  }
+  async playResolvedSource(sourceUrl, payload, revokeUrl, debugDetails) {
+    const audio = new Audio(sourceUrl);
     audio.preload = "auto";
-    const player = { audio, url, payload };
+    const player = { audio, url: sourceUrl, revokeUrl, payload };
     audio.onended = () => {
       void this.finishPlayback(player, "finished");
     };
     audio.onerror = () => {
       this.detachPlayer(player);
-      logRuntimeError("voice.play", new Error("Audio playback failed"), { mimeType: payload.mimeType });
+      logRuntimeError("voice.play", new Error("Audio playback failed"), debugDetails);
     };
     this.activePlayers.push(player);
     while (this.activePlayers.length > MAX_CONCURRENT_PLAYERS) {
@@ -5918,8 +6032,7 @@ var VoiceRuntime = class {
       void this.finishPlayback(oldest, "stopped");
     }
     logRuntimeDebug(this.debugLogging, "voice-play", {
-      mimeType: payload.mimeType,
-      bytes: bytes.byteLength,
+      ...debugDetails,
       activePlayers: this.activePlayers.length
     });
     await audio.play();
@@ -5941,6 +6054,10 @@ var VoiceRuntime = class {
     }
   }
   stopRecording() {
+    if (this.listeningCaptureActive) {
+      void this.stopListeningCapture();
+      return;
+    }
     if (!this.mediaRecorder || this.mediaRecorder.state === "inactive") {
       return;
     }
@@ -5959,6 +6076,7 @@ var VoiceRuntime = class {
       analyser.fftSize = 2048;
       const source = context.createMediaStreamSource(stream);
       source.connect(analyser);
+      this.startListeningRecorder(stream);
       this.listening = true;
       this.listenContext = context;
       this.listenAnalyser = analyser;
@@ -5986,14 +6104,14 @@ var VoiceRuntime = class {
             this.speechEventTriggered = true;
             await this.triggerSystemEvent("onSpeechDetected", null);
           }
-          if (!this.mediaRecorder || this.mediaRecorder.state === "inactive") {
-            this.startRecordingInternal(stream, true);
+          if (!this.listeningCaptureActive) {
+            this.beginListeningCapture();
           }
-        } else if (this.recordingStartedFromListening && this.mediaRecorder && this.mediaRecorder.state !== "inactive" && this.lastSpeechAt > 0 && now - this.lastSpeechAt >= SILENCE_STOP_MS) {
-          this.stopRecording();
+        } else if (this.listeningCaptureActive && this.lastSpeechAt > 0 && now - this.lastSpeechAt >= SILENCE_STOP_MS) {
+          await this.stopListeningCapture();
           this.lastSpeechAt = 0;
           this.speechEventTriggered = false;
-        } else if (!this.recordingStartedFromListening && now - this.listeningStartedAt >= MAX_LISTENING_SILENCE_MS) {
+        } else if (!this.listeningCaptureActive && now - this.listeningStartedAt >= MAX_LISTENING_SILENCE_MS) {
           await this.stopListening();
           return;
         }
@@ -6026,9 +6144,13 @@ var VoiceRuntime = class {
     this.listenContext = null;
     this.listenAnalyser = null;
     this.listenSource = null;
-    if (this.recordingStartedFromListening && this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
-      this.stopRecording();
+    if (this.listeningCaptureActive) {
+      await this.stopListeningCapture();
     }
+    this.stopListeningRecorder();
+    this.listeningPreRollChunks = [];
+    this.listeningCaptureChunks = [];
+    this.listeningCaptureActive = false;
     this.recordingStartedFromListening = false;
     this.releaseInputStreamIfIdle();
   }
@@ -6108,6 +6230,9 @@ var VoiceRuntime = class {
   }
   async handleRecordingError(error) {
     logRuntimeError("voice.recording", error);
+    this.listeningCaptureActive = false;
+    this.listeningCaptureChunks = [];
+    this.recordingStartedFromListening = false;
     await this.triggerSystemEvent("onRecordingError", this.normalizeErrorMessage(error));
   }
   async handleListeningError(error) {
@@ -6152,6 +6277,91 @@ var VoiceRuntime = class {
     this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
     return this.mediaStream;
   }
+  startListeningRecorder(stream) {
+    if (this.listeningRecorder && this.listeningRecorder.state !== "inactive") {
+      return;
+    }
+    if (typeof MediaRecorder === "undefined") {
+      throw new Error("MediaRecorder is not supported in this browser");
+    }
+    const preferredMimeType = this.getPreferredRecordingMimeType();
+    const options = preferredMimeType ? { mimeType: preferredMimeType } : void 0;
+    const recorder = options ? new MediaRecorder(stream, options) : new MediaRecorder(stream);
+    this.listeningRecorder = recorder;
+    this.listeningRecorderMimeType = recorder.mimeType || preferredMimeType || "audio/webm";
+    this.listeningPreRollChunks = [];
+    this.listeningCaptureChunks = [];
+    recorder.ondataavailable = (event) => {
+      if (!event.data || event.data.size === 0) {
+        return;
+      }
+      const timestamp = performance.now();
+      if (this.listeningCaptureActive) {
+        this.listeningCaptureChunks.push(event.data);
+        return;
+      }
+      this.listeningPreRollChunks.push({ data: event.data, timestamp });
+      const cutoff = timestamp - LISTENING_PRE_ROLL_MS;
+      while (this.listeningPreRollChunks.length > 0 && this.listeningPreRollChunks[0].timestamp < cutoff) {
+        this.listeningPreRollChunks.shift();
+      }
+    };
+    recorder.onerror = (event) => {
+      void this.handleRecordingError(event.error ?? new Error("Unknown listening recorder error"));
+    };
+    recorder.start(LISTENING_RECORDER_TIMESLICE_MS);
+  }
+  stopListeningRecorder() {
+    if (!this.listeningRecorder) {
+      return;
+    }
+    const recorder = this.listeningRecorder;
+    this.listeningRecorder = null;
+    recorder.ondataavailable = null;
+    recorder.onerror = null;
+    if (recorder.state !== "inactive") {
+      recorder.stop();
+    }
+  }
+  beginListeningCapture() {
+    this.listeningCaptureActive = true;
+    this.recordingStartedFromListening = true;
+    this.listeningCaptureChunks = this.listeningPreRollChunks.map((chunk) => chunk.data);
+    this.listeningPreRollChunks = [];
+    logRuntimeDebug(this.debugLogging, "voice-recording-started", {
+      mimeType: this.listeningRecorderMimeType,
+      fromListening: true,
+      preRollMs: LISTENING_PRE_ROLL_MS,
+      preRollChunks: this.listeningCaptureChunks.length
+    });
+    void this.triggerSystemEvent("onRecordingStarted", null);
+  }
+  async stopListeningCapture() {
+    if (!this.listeningCaptureActive) {
+      return;
+    }
+    this.listeningCaptureActive = false;
+    const chunks = [...this.listeningCaptureChunks];
+    this.listeningCaptureChunks = [];
+    try {
+      const blob = new Blob(chunks, { type: this.listeningRecorderMimeType });
+      const audioData = await blobToBase64(blob);
+      logRuntimeDebug(this.debugLogging, "voice-recording-stopped", {
+        mimeType: this.listeningRecorderMimeType,
+        size: blob.size,
+        fromListening: true,
+        preRollMs: LISTENING_PRE_ROLL_MS
+      });
+      await this.triggerSystemEvent("onRecordingStopped", {
+        audioData,
+        mimeType: this.listeningRecorderMimeType
+      });
+    } catch (error) {
+      await this.handleRecordingError(error);
+    } finally {
+      this.recordingStartedFromListening = false;
+    }
+  }
   clearRecordingTimeout() {
     if (this.recordingTimeoutId !== null) {
       window.clearTimeout(this.recordingTimeoutId);
@@ -6162,6 +6372,9 @@ var VoiceRuntime = class {
     if (this.listening) {
       return;
     }
+    if (this.listeningRecorder && this.listeningRecorder.state !== "inactive") {
+      return;
+    }
     if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
       return;
     }
@@ -6189,7 +6402,9 @@ var VoiceRuntime = class {
     }
     player.audio.onended = null;
     player.audio.onerror = null;
-    URL.revokeObjectURL(player.url);
+    if (player.revokeUrl) {
+      URL.revokeObjectURL(player.url);
+    }
   }
   async finishPlayback(player, reason) {
     if (!this.activePlayers.includes(player)) {
@@ -6203,7 +6418,9 @@ var VoiceRuntime = class {
     await this.triggerSystemEvent(reason === "finished" ? "onPlayFinished" : "onPlayingStopped", payload);
   }
   async handlePageDeactivation() {
-    const hadActiveRecording = Boolean(this.mediaRecorder && this.mediaRecorder.state !== "inactive");
+    const hadActiveRecording = Boolean(
+      this.mediaRecorder && this.mediaRecorder.state !== "inactive" || this.listeningCaptureActive
+    );
     const hadActiveListening = this.listening;
     if (!hadActiveRecording && !hadActiveListening) {
       return;
@@ -6352,7 +6569,7 @@ function renderGridLayout(env, node, cellsVisible, path, itemContext) {
 
 // src/lib/widgets/conditional-container.ts
 var renderConditionalContainer = (env, node, state, key, path, itemContext) => {
-  const condition = typeof node.condition === "object" && node.condition !== null ? env.evaluateConditionExpression(node.condition, itemContext?.descriptor ?? null) : state.condition ?? env.normalizeBoolean(node.condition, true);
+  const condition = typeof node.condition === "object" && node.condition !== null ? env.evaluateConditionExpression(node.condition, itemContext ?? null) : state.condition ?? env.normalizeBoolean(node.condition, true);
   const chosen = condition ? node.default : node.alternative;
   const content = chosen ? env.renderNode(chosen, `${path}.${condition ? "default" : "alternative"}`, itemContext) : "";
   const hasOwnBox = Boolean(
@@ -6585,10 +6802,12 @@ var renderButton = (env, node, state, key, _path, itemContext) => {
   const enabled = state.enabled ?? env.normalizeBoolean(node.enabled, true);
   const disabledAttribute = enabled ? "" : " disabled";
   const text = env.escapeHtml(env.resolveTextValue(state.text ?? node.text, itemContext));
+  const hintValue = typeof node.hint === "string" ? env.resolveTextValue(node.hint, itemContext) : "";
+  const hintAttribute = hintValue ? ` title="${env.escapeHtml(hintValue)}"` : "";
   const styleString = env.buildStyleString(node);
   const styleAttribute = styleString ? ` style="${env.escapeHtml(styleString)}"` : "";
   const buttonType = env.escapeHtml(node.type === "submit" ? "submit" : "button");
-  return `<button${common}${env.buildWidgetDataAttributes(key, node)} class="vjt-button" data-widget="button" type="${buttonType}"${styleAttribute}${disabledAttribute}>${text}</button>`;
+  return `<button${common}${env.buildWidgetDataAttributes(key, node)} class="vjt-button" data-widget="button" type="${buttonType}"${styleAttribute}${hintAttribute}${disabledAttribute}>${text}</button>`;
 };
 
 // src/lib/widgets/checkbox.ts
@@ -7467,6 +7686,9 @@ var RuntimeRenderer = class {
   activeModalId = null;
   activeContextMenu = null;
   activeConfirmModal = null;
+  activeToasts = [];
+  toastCounter = 0;
+  toastTimeoutIds = /* @__PURE__ */ new Map();
   lastPointer = { x: 24, y: 24 };
   pendingResetModalIds = /* @__PURE__ */ new Set();
   pendingScrollAction = null;
@@ -7544,6 +7766,7 @@ var RuntimeRenderer = class {
       setVarValue: (name, value) => {
         this.vars.set(name, value);
       },
+      resolveI18nValue: (value) => this.resolveI18nValue(value),
       ensureWidgetState: (node, key) => this.ensureWidgetState(node, key),
       resolveItemNodeKey: (node, listKey, index, fallbackPath) => this.resolveItemNodeKey(node, listKey, index, fallbackPath),
       indexListElementNodes: (listNode, element, index) => this.indexListElementNodes(listNode, element, index)
@@ -7585,7 +7808,10 @@ var RuntimeRenderer = class {
       scrollWidgetToBottom: (reference) => this.scrollWidgetToBottom(reference),
       scrollWidgetToElementByIndex: (reference, index) => this.scrollWidgetToElementByIndex(reference, index),
       playAudio: (value) => this.voiceRuntime.play(value),
+      playStaticAudio: (url) => this.voiceRuntime.playStatic(url),
       stopPlaying: () => this.voiceRuntime.stopPlaying(),
+      showInfoToast: (message) => this.showToast("info", message),
+      showErrorToast: (message) => this.showToast("error", message),
       copyToClipboard: (value) => this.copyToClipboard(value),
       selectFile: (args) => this.selectFile(args),
       confirmModal: (args, inputValue) => this.confirmModal(args, inputValue),
@@ -7705,6 +7931,10 @@ var RuntimeRenderer = class {
         source.close();
       }
       this.eventSources.length = 0;
+      for (const timeoutId of this.toastTimeoutIds.values()) {
+        window.clearTimeout(timeoutId);
+      }
+      this.toastTimeoutIds.clear();
       this.voiceRuntime.dispose();
     };
   }
@@ -7905,6 +8135,21 @@ var RuntimeRenderer = class {
     this.activeConfirmModal = null;
     activeModal.resolve(confirmed);
   }
+  showToast(kind, message) {
+    const text = message.trim();
+    if (!text) {
+      return;
+    }
+    const toastId = ++this.toastCounter;
+    this.activeToasts.push({ id: toastId, kind, text });
+    void this.rerenderRoot();
+    const timeoutId = window.setTimeout(() => {
+      this.toastTimeoutIds.delete(toastId);
+      this.activeToasts = this.activeToasts.filter((entry) => entry.id !== toastId);
+      void this.rerenderRoot();
+    }, 3600);
+    this.toastTimeoutIds.set(toastId, timeoutId);
+  }
   reindexStaticTree() {
     this.nodeByKey.clear();
     this.nodeById.clear();
@@ -8325,7 +8570,8 @@ var RuntimeRenderer = class {
           name: node.name,
           enabled: normalizeBoolean(node.enabled, true),
           definitionSignature: buildDefinitionSignature(node.elements ?? []),
-          elements: deepClone(node.elements ?? [])
+          elements: deepClone(node.elements ?? []),
+          selected: toFiniteNumber3(node.item) ?? toFiniteNumber3(node.selected) ?? -1
         };
         break;
       case "listbox":
@@ -8423,6 +8669,7 @@ var RuntimeRenderer = class {
           if (state.widget === "list" || state.widget === "grid-view") {
             this.clearListElementState(state.key);
             state.elements = deepClone(node.elements ?? []);
+            state.selected = toFiniteNumber3(node.item) ?? toFiniteNumber3(node.selected) ?? state.selected ?? -1;
             state.definitionSignature = nextSignature;
           }
         }
@@ -8602,7 +8849,18 @@ var RuntimeRenderer = class {
     const modalMarkup = this.activeModalId ? renderModalOverlay(env, this.activeModalId) : "";
     const menuMarkup = this.activeContextMenu ? renderContextMenuOverlay(env, this.activeContextMenu) : "";
     const confirmMarkup = this.activeConfirmModal ? renderConfirmModalOverlay(env, this.activeConfirmModal) : "";
-    return `${modalMarkup}${menuMarkup}${confirmMarkup}`;
+    const toastMarkup = this.renderToastOverlay();
+    return `${modalMarkup}${menuMarkup}${confirmMarkup}${toastMarkup}`;
+  }
+  renderToastOverlay() {
+    if (this.activeToasts.length === 0) {
+      return "";
+    }
+    const items = this.activeToasts.map((toast) => {
+      const kindClass = toast.kind === "error" ? " vjt-toast--error" : " vjt-toast--info";
+      return `<div class="vjt-toast${kindClass}" role="status" aria-live="polite">${escapeHtml(toast.text)}</div>`;
+    }).join("");
+    return `<div class="vjt-toast-stack">${items}</div>`;
   }
   updatePointerFromEvent(event) {
     this.lastPointer = updatePointerFromMouseEvent(event);
@@ -8712,6 +8970,7 @@ var RuntimeRenderer = class {
         case "grid-view":
           this.clearListElementState(state.key);
           state.elements = [];
+          state.selected = -1;
           break;
         case "listbox":
           state.listboxElements = [];

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

@@ -38,7 +38,10 @@ type ActionRuntimeOptions = {
     scrollWidgetToBottom: (reference: string) => void;
     scrollWidgetToElementByIndex: (reference: string, index: unknown) => void;
     playAudio: (value: unknown) => Promise<void>;
+    playStaticAudio: (url: string) => Promise<void>;
     stopPlaying: () => Promise<void>;
+    showInfoToast: (message: string) => void;
+    showErrorToast: (message: string) => void;
     copyToClipboard: (value: unknown) => Promise<void>;
     selectFile: (options: unknown) => Promise<unknown>;
     confirmModal: (options: unknown, inputValue: unknown) => Promise<boolean>;
@@ -93,7 +96,10 @@ export declare class ActionRuntime {
     private readonly scrollWidgetToBottom;
     private readonly scrollWidgetToElementByIndex;
     private readonly playAudio;
+    private readonly playStaticAudio;
     private readonly stopPlaying;
+    private readonly showInfoToast;
+    private readonly showErrorToast;
     private readonly copyToClipboard;
     private readonly selectFile;
     private readonly confirmModal;

package/dist/lib/references.d.ts

@@ -10,6 +10,7 @@ type ReferenceRuntimeHost = {
     getVarValue: (name: string) => unknown;
     getVarsSnapshot: () => Record<string, unknown>;
     setVarValue: (name: string, value: unknown) => void;
+    resolveI18nValue: (value: string | undefined) => string;
     ensureWidgetState: (node: DescriptionNode, key: string) => WidgetState;
     resolveItemNodeKey: (node: DescriptionNode, listKey: string, index: number, fallbackPath: string) => string;
     indexListElementNodes: (listNode: ListNode | GridViewNode, element: DescriptionNode, index: number) => void;
@@ -17,6 +18,7 @@ type ReferenceRuntimeHost = {
 export declare class ReferenceRuntime {
     private readonly host;
     constructor(host: ReferenceRuntimeHost);
+    private getListSelectionIndex;
     private resolveScopedRootReference;
     private readVarReference;
     private writeVarReference;

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

@@ -16,6 +16,11 @@ export declare class VoiceRuntime {
     private listenAnalyser;
     private listenSource;
     private listenFrameId;
+    private listeningRecorder;
+    private listeningRecorderMimeType;
+    private listeningPreRollChunks;
+    private listeningCaptureChunks;
+    private listeningCaptureActive;
     private lastSpeechAt;
     private listeningStartedAt;
     private recordingStartedFromListening;
@@ -24,6 +29,8 @@ export declare class VoiceRuntime {
     private readonly pageHideHandler;
     constructor(options: VoiceRuntimeOptions);
     play(value: unknown): Promise<void>;
+    playStatic(url: string): Promise<void>;
+    private playResolvedSource;
     stopPlaying(): Promise<void>;
     startRecording(): Promise<void>;
     stopRecording(): void;
@@ -37,6 +44,10 @@ export declare class VoiceRuntime {
     private normalizePlayablePayload;
     private getPreferredRecordingMimeType;
     private ensureInputStream;
+    private startListeningRecorder;
+    private stopListeningRecorder;
+    private beginListeningCapture;
+    private stopListeningCapture;
     private clearRecordingTimeout;
     private releaseInputStreamIfIdle;
     private stopStreamTracks;

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

@@ -3,6 +3,7 @@ import type { WidgetRenderer } from './context.js';
 export type ButtonNode = BaseNode & {
     widget: 'button';
     text?: string;
+    hint?: string;
     enabled?: boolean | string;
     type?: 'button' | 'submit';
     color?: 'bright' | 'regular';

package/dist/lib/widgets/grid-view.d.ts

@@ -4,6 +4,7 @@ export type GridViewNode = BaseNode & {
     widget: 'grid-view';
     rowSize?: number | string;
     size?: number;
+    item?: number | string;
     elements?: DescriptionNode[];
 };
 export declare const renderGridView: WidgetRenderer<GridViewNode>;

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

@@ -4,6 +4,7 @@ export type ListNode = BaseNode & {
     widget: 'list';
     orientation?: 'vertical' | 'horizontal';
     size?: number;
+    item?: number | string;
     elements?: DescriptionNode[];
 };
 export declare const renderList: WidgetRenderer<ListNode>;

package/package.json

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

package/vjt-styles.css

@@ -862,3 +862,61 @@ body {
 .vjt-confirm-actions .vjt-button {
   min-width: 120px;
 }
+
+.vjt-toast-stack {
+  position: fixed;
+  left: 50%;
+  bottom: 56px;
+  transform: translateX(-50%);
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.vjt-toast {
+  min-width: 320px;
+  max-width: min(680px, calc(100vw - 28px));
+  padding: 16px 20px;
+  border-radius: 18px;
+  border: 1px solid var(--vjt-border);
+  background: var(--vjt-surface);
+  color: var(--vjt-text);
+  box-shadow: var(--vjt-shadow);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  font-size: 17px;
+  pointer-events: auto;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.vjt-toast--info {
+  background: color-mix(in srgb, var(--vjt-surface) 88%, var(--vjt-accent) 12%);
+}
+
+.vjt-toast--error {
+  border-color: color-mix(in srgb, #d84f4f 55%, var(--vjt-border));
+  background: color-mix(in srgb, var(--vjt-surface) 80%, #a01f1f 20%);
+}
+
+@media (max-width: 720px) {
+  .vjt-toast-stack {
+    left: 16px;
+    right: 16px;
+    bottom: 32px;
+    transform: none;
+    align-items: stretch;
+  }
+
+  .vjt-toast {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+    padding: 18px 20px;
+    border-radius: 20px;
+    font-size: 18px;
+  }
+}