@vortexm/vjt 0.1.8 → 0.1.10

package/dist/index.js

@@ -4366,6 +4366,8 @@ var ReferenceRuntime = class {
         return state.isHidden ?? true;
       case "url":
         return state.url ?? "";
+      case "base64":
+        return state.base64 ?? "";
       case "elements":
         if (state.widget === "list") {
           return (state.elements ?? []).map((descriptor, index) => ({
@@ -4453,6 +4455,9 @@ var ReferenceRuntime = class {
       case "url":
         state.url = stringifyReferenceValue(inputValue);
         break;
+      case "base64":
+        state.base64 = stringifyReferenceValue(inputValue);
+        break;
       case "condition":
         state.condition = Boolean(inputValue);
         break;
@@ -4645,9 +4650,11 @@ var ActionRuntime = class {
   assignReference;
   resolveMappedValue;
   setWidgetEnabled;
+  setWidgetVisible;
   clearWidget;
   clearListElementState;
   focusWidget;
+  moveCursorToEnd;
   scrollWidgetToTop;
   scrollWidgetToBottom;
   scrollWidgetToElementByIndex;
@@ -4685,9 +4692,11 @@ var ActionRuntime = class {
     this.assignReference = options.assignReference;
     this.resolveMappedValue = options.resolveMappedValue;
     this.setWidgetEnabled = options.setWidgetEnabled;
+    this.setWidgetVisible = options.setWidgetVisible;
     this.clearWidget = options.clearWidget;
     this.clearListElementState = options.clearListElementState;
     this.focusWidget = options.focusWidget;
+    this.moveCursorToEnd = options.moveCursorToEnd;
     this.scrollWidgetToTop = options.scrollWidgetToTop;
     this.scrollWidgetToBottom = options.scrollWidgetToBottom;
     this.scrollWidgetToElementByIndex = options.scrollWidgetToElementByIndex;
@@ -4883,6 +4892,14 @@ var ActionRuntime = class {
       this.setWidgetEnabled(name.slice(8), false);
       return null;
     }
+    if (name.startsWith("makeVisible ")) {
+      this.setWidgetVisible(name.slice(12), true);
+      return null;
+    }
+    if (name.startsWith("makeInvisible ")) {
+      this.setWidgetVisible(name.slice(14), false);
+      return null;
+    }
     if (name.startsWith("clear ")) {
       this.clearWidget(name.slice(6));
       return null;
@@ -4891,6 +4908,10 @@ var ActionRuntime = class {
       this.focusWidget(name.slice(9));
       return null;
     }
+    if (name.startsWith("moveCursorToEnd ")) {
+      this.moveCursorToEnd(name.slice(16));
+      return null;
+    }
     if (name.startsWith("scrollToTop ")) {
       this.scrollWidgetToTop(name.slice(12));
       return inputValue;
@@ -5065,7 +5086,7 @@ var ActionRuntime = class {
       if (Array.isArray(inputValue)) {
         return inputValue.map((entry) => this.resolveMappedValue(action.args, entry, context.responseValue));
       }
-      return this.resolveMappedValue(action.args, context.currentValue, context.responseValue);
+      return this.resolveMappedValue(action.args, inputValue, context.responseValue);
     }
     if (name === "ifelse") {
       const branches = isIfElseArgs(action.args) ? action.args : null;
@@ -6294,7 +6315,7 @@ var VERTICAL_ALIGN_MAP2 = { top: "flex-start", center: "center", bottom: "flex-e
 var markdownConverter = new import_showdown.default.Converter({
   simpleLineBreaks: true,
   ghCompatibleHeaderId: true,
-  tables: false,
+  tables: true,
   strikethrough: false,
   tasklists: false
 });
@@ -6409,7 +6430,10 @@ var renderCheckbox = (env, node, state, key) => {
 
 // src/lib/widgets/image.ts
 var renderImage = (env, node, state, key) => {
-  const url = env.escapeHtml(sanitizeUrl(state.url ?? node.url ?? "", { allowRelative: true }) ?? "");
+  const rawBase64 = typeof state.base64 === "string" ? state.base64 : typeof node.base64 === "string" ? node.base64 : "";
+  const rawUrl = sanitizeUrl(state.url ?? node.url ?? "", { allowRelative: true }) ?? "";
+  const imageSource = rawBase64 ? rawBase64.startsWith("data:") ? rawBase64 : `data:image/png;base64,${rawBase64}` : rawUrl;
+  const url = env.escapeHtml(imageSource);
   const styleParts = [
     "box-sizing:border-box",
     "width:100%",
@@ -6613,6 +6637,32 @@ function renderConfirmModalOverlay(env, modal) {
 }
 
 // src/lib/widgets/bindings.ts
+function readBlobAsDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : "");
+    reader.onerror = () => reject(reader.error ?? new Error("Failed to read clipboard blob"));
+    reader.readAsDataURL(blob);
+  });
+}
+async function getPasteInputValue(event) {
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) {
+    return "";
+  }
+  for (const item of Array.from(clipboardData.items)) {
+    if (!item.type.startsWith("image/")) {
+      continue;
+    }
+    const file = item.getAsFile();
+    if (!file) {
+      continue;
+    }
+    const dataUrl = await readBlobAsDataUrl(file);
+    return dataUrl;
+  }
+  return clipboardData.getData("text/plain");
+}
 function bindKeyboardSubmitEvents(element, node, key, env) {
   const hasKeyboardEvents = Boolean(
     node.events?.onEnter?.length || node.events?.onShiftEnter?.length || node.events?.onControlEnter?.length
@@ -6635,6 +6685,10 @@ function bindKeyboardSubmitEvents(element, node, key, env) {
     if (!eventName || !node.events?.[eventName]?.length) {
       return;
     }
+    if (eventName !== "onShiftEnter") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
     void env.dispatchWidgetEvent(node, eventName, key, env.getActionInputValueForElement(element, node), null);
   });
 }
@@ -6706,6 +6760,11 @@ function bindWidgetEvents(root, env) {
     }
     if (element instanceof HTMLInputElement && element.dataset.widget === "edit") {
       bindKeyboardSubmitEvents(element, node, key, env);
+      if (node.events?.onPaste?.length) {
+        element.addEventListener("paste", (event) => {
+          void getPasteInputValue(event).then((inputValue) => env.dispatchWidgetEvent(node, "onPaste", key, inputValue, null));
+        });
+      }
       element.addEventListener("input", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -6724,6 +6783,11 @@ function bindWidgetEvents(root, env) {
     }
     if (element instanceof HTMLTextAreaElement && element.dataset.widget === "textarea") {
       bindKeyboardSubmitEvents(element, node, key, env);
+      if (node.events?.onPaste?.length) {
+        element.addEventListener("paste", (event) => {
+          void getPasteInputValue(event).then((inputValue) => env.dispatchWidgetEvent(node, "onPaste", key, inputValue, null));
+        });
+      }
       element.addEventListener("input", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -7225,6 +7289,8 @@ var RuntimeRenderer = class {
   pendingScrollAction = null;
   pendingScrollFrameId = null;
   activeScrollAnimationFrameId = null;
+  pendingCursorReference = null;
+  pendingCursorFrameId = null;
   constructor(description, options = {}) {
     this.description = deepClone(description);
     this.resourceManager = options.resourceManager ?? null;
@@ -7260,6 +7326,8 @@ var RuntimeRenderer = class {
             return this.language;
           case "theme":
             return this.theme;
+          case "isMobile":
+            return typeof window === "undefined" ? false : isMobileViewport();
           case "urlPath":
             return typeof window === "undefined" ? "" : window.location.pathname;
           default:
@@ -7324,9 +7392,11 @@ var RuntimeRenderer = class {
       assignReference: (reference, inputValue, currentValue, options2) => this.referenceRuntime.assignReference(reference, inputValue, currentValue, options2),
       resolveMappedValue: (template, currentValue, responseValue) => this.referenceRuntime.resolveMappedValue(template, currentValue, responseValue),
       setWidgetEnabled: (widgetId, enabled) => this.setWidgetEnabled(widgetId, enabled),
+      setWidgetVisible: (widgetId, visible) => this.setWidgetVisible(widgetId, visible),
       clearWidget: (widgetId) => this.clearWidget(widgetId),
       clearListElementState: (listKey) => this.clearListElementState(listKey),
       focusWidget: (reference) => this.focusWidget(reference),
+      moveCursorToEnd: (reference) => this.moveCursorToEnd(reference),
       scrollWidgetToTop: (reference) => this.scrollWidgetToTop(reference),
       scrollWidgetToBottom: (reference) => this.scrollWidgetToBottom(reference),
       scrollWidgetToElementByIndex: (reference, index) => this.scrollWidgetToElementByIndex(reference, index),
@@ -7466,6 +7536,7 @@ var RuntimeRenderer = class {
     this.attachWidgetEvents(this.root);
     restoreElementState(this.root, preservedState, this.stateByKey);
     this.applyPendingScrollAction();
+    this.applyPendingCursorAction();
     this.activeContextMenu = adjustContextMenuPosition(this.root, this.activeContextMenu);
     this.pendingResetModalIds.clear();
     if (typeof this.onRuntimeSnapshot === "function") {
@@ -7986,6 +8057,9 @@ var RuntimeRenderer = class {
         existing.id = stateId2;
         this.stateById.set(stateId2, existing);
       }
+      if (existing.visible === void 0) {
+        existing.visible = normalizeBoolean(node.visible, true);
+      }
       this.syncStateDefinition(existing, node);
       return existing;
     }
@@ -8036,7 +8110,8 @@ var RuntimeRenderer = class {
           id: stateId,
           name: node.name,
           text: typeof node.text === "string" ? node.text : void 0,
-          url: "url" in node ? typeof node.url === "string" ? node.url : "" : void 0
+          url: "url" in node ? typeof node.url === "string" ? node.url : "" : void 0,
+          base64: "base64" in node ? typeof node.base64 === "string" ? node.base64 : "" : void 0
         };
         break;
       case "conditional-container":
@@ -8273,6 +8348,9 @@ var RuntimeRenderer = class {
     const key = itemContext ? this.resolveItemNodeKey(node, itemContext.listId, itemContext.index, path) : this.resolveNodeKey(node, path);
     this.nodeByKey.set(key, node);
     const state = this.ensureWidgetState(node, key);
+    if ((state.visible ?? normalizeBoolean(node.visible, true)) === false) {
+      return "";
+    }
     switch (node.widget) {
       case "adaptive-layout":
         return renderAdaptiveLayout(env, node, state, key, path, itemContext);
@@ -8762,6 +8840,13 @@ var RuntimeRenderer = class {
     }
     state.enabled = enabled;
   }
+  setWidgetVisible(widgetId, visible) {
+    const state = this.stateById.get(widgetId);
+    if (!state) {
+      return;
+    }
+    state.visible = visible;
+  }
   clearListElementState(listKey) {
     this.referenceRuntime.clearListElementState(listKey);
   }
@@ -8787,6 +8872,16 @@ var RuntimeRenderer = class {
       nestedTarget.focus({ preventScroll: true });
     }
   }
+  moveCursorToEnd(reference) {
+    this.pendingCursorReference = reference;
+    if (typeof window === "undefined" || this.pendingCursorFrameId !== null) {
+      return;
+    }
+    this.pendingCursorFrameId = window.requestAnimationFrame(() => {
+      this.pendingCursorFrameId = null;
+      this.applyPendingCursorAction();
+    });
+  }
   scrollWidgetToTop(reference) {
     this.pendingScrollAction = { kind: "top", reference };
     this.schedulePendingScrollAction();
@@ -8813,17 +8908,17 @@ var RuntimeRenderer = class {
       return;
     }
     const pending = this.pendingScrollAction;
-    const element = this.findScrollableWidgetElement(pending.reference);
-    if (!element) {
-      return;
-    }
     if (pending.kind === "top") {
-      this.animateScrollTop(element, 0);
+      this.animateScrollTop(pending.reference, 0);
       this.pendingScrollAction = null;
       return;
     }
     if (pending.kind === "bottom") {
-      this.animateScrollTop(element, element.scrollHeight);
+      const element = this.findScrollableWidgetElement(pending.reference);
+      if (!element) {
+        return;
+      }
+      this.animateScrollTop(pending.reference, element.scrollHeight);
       this.pendingScrollAction = null;
       return;
     }
@@ -8832,17 +8927,21 @@ var RuntimeRenderer = class {
       this.pendingScrollAction = null;
       return;
     }
-    this.performScrollToElementByIndex(element, index);
+    this.performScrollToElementByIndex(pending.reference, index);
     this.pendingScrollAction = null;
   }
-  performScrollToElementByIndex(element, index) {
+  performScrollToElementByIndex(reference, index) {
+    const element = this.findScrollableWidgetElement(reference);
+    if (!element) {
+      return;
+    }
     if (element instanceof HTMLSelectElement) {
       const option = element.options.item(index);
       if (!option) {
         return;
       }
       const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
-      this.animateScrollTop(element, Math.max(0, Math.min(option.offsetTop, maxScrollTop)));
+      this.animateScrollTop(reference, Math.max(0, Math.min(option.offsetTop, maxScrollTop)));
       return;
     }
     const listElement = element.querySelector(`.vjt-list-element[data-list-index="${index}"], .vjt-grid-cell[data-list-index="${index}"]`);
@@ -8853,41 +8952,88 @@ var RuntimeRenderer = class {
       const targetTop = element.scrollTop + (itemRect.top - containerRect.top);
       const remainingContentHeight = element.scrollHeight - targetTop;
       const nextScrollTop = remainingContentHeight > element.clientHeight ? Math.max(0, Math.min(targetTop, maxScrollTop)) : maxScrollTop;
-      this.animateScrollTop(element, nextScrollTop);
+      this.animateScrollTop(reference, nextScrollTop);
     }
   }
-  animateScrollTop(element, targetTop) {
+  animateScrollTop(reference, targetTop) {
+    const resolveLiveElement = () => {
+      const resolved = this.findScrollableWidgetElement(reference);
+      return resolved instanceof HTMLElement ? resolved : null;
+    };
+    const getMaxScrollTop = (element) => Math.max(
+      0,
+      element.scrollHeight - element.clientHeight
+    );
+    const initialElement = resolveLiveElement();
+    if (!initialElement) {
+      return;
+    }
     if (typeof window === "undefined") {
-      element.scrollTop = targetTop;
+      initialElement.scrollTop = Math.max(0, Math.min(targetTop, getMaxScrollTop(initialElement)));
       return;
     }
     if (this.activeScrollAnimationFrameId !== null) {
       window.cancelAnimationFrame(this.activeScrollAnimationFrameId);
       this.activeScrollAnimationFrameId = null;
     }
-    const startTop = element.scrollTop;
-    const clampedTargetTop = Math.max(0, targetTop);
+    const startTop = initialElement.scrollTop;
+    const clampedTargetTop = Math.max(0, Math.min(targetTop, getMaxScrollTop(initialElement)));
     const delta = clampedTargetTop - startTop;
     if (Math.abs(delta) < 1) {
-      element.scrollTop = clampedTargetTop;
+      initialElement.scrollTop = clampedTargetTop;
       return;
     }
     const durationMs = 300;
     const startTime = window.performance.now();
     const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
     const tick = (now) => {
+      const liveElement = resolveLiveElement();
+      if (!liveElement) {
+        this.activeScrollAnimationFrameId = null;
+        return;
+      }
       const elapsed = now - startTime;
       const progress = Math.min(1, elapsed / durationMs);
-      element.scrollTop = startTop + delta * easeInOutCubic(progress);
+      const liveTargetTop = Math.max(0, Math.min(clampedTargetTop, getMaxScrollTop(liveElement)));
+      liveElement.scrollTop = startTop + (liveTargetTop - startTop) * easeInOutCubic(progress);
       if (progress < 1) {
         this.activeScrollAnimationFrameId = window.requestAnimationFrame(tick);
       } else {
-        element.scrollTop = clampedTargetTop;
+        liveElement.scrollTop = liveTargetTop;
         this.activeScrollAnimationFrameId = null;
       }
     };
     this.activeScrollAnimationFrameId = window.requestAnimationFrame(tick);
   }
+  applyPendingCursorAction() {
+    if (!(this.root instanceof HTMLElement) || !this.pendingCursorReference) {
+      return;
+    }
+    const reference = this.pendingCursorReference;
+    const widgetId = reference.split(".")[0]?.trim();
+    if (!widgetId) {
+      this.pendingCursorReference = null;
+      return;
+    }
+    const directTarget = this.root.querySelector(`#${CSS.escape(widgetId)}`);
+    const widgetRoot = directTarget ?? this.root.querySelector(`[data-widget-id="${CSS.escape(widgetId)}"]`);
+    if (!widgetRoot) {
+      return;
+    }
+    const inputTarget = widgetRoot instanceof HTMLInputElement || widgetRoot instanceof HTMLTextAreaElement ? widgetRoot : widgetRoot.querySelector("input, textarea");
+    if (!inputTarget || inputTarget.disabled) {
+      this.pendingCursorReference = null;
+      return;
+    }
+    if (typeof inputTarget.focus === "function") {
+      inputTarget.focus({ preventScroll: true });
+    }
+    if (typeof inputTarget.setSelectionRange === "function") {
+      const end = inputTarget.value.length;
+      inputTarget.setSelectionRange(end, end);
+    }
+    this.pendingCursorReference = null;
+  }
   findScrollableWidgetElement(reference) {
     if (!(this.root instanceof HTMLElement)) {
       return null;

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

@@ -29,9 +29,11 @@ type ActionRuntimeOptions = {
     }) => void;
     resolveMappedValue: (template: unknown, currentValue: unknown, responseValue: unknown) => unknown;
     setWidgetEnabled: (widgetId: string, enabled: boolean) => void;
+    setWidgetVisible: (widgetId: string, visible: boolean) => void;
     clearWidget: (widgetId: string) => void;
     clearListElementState: (listKey: string) => void;
     focusWidget: (reference: string) => void;
+    moveCursorToEnd: (reference: string) => void;
     scrollWidgetToTop: (reference: string) => void;
     scrollWidgetToBottom: (reference: string) => void;
     scrollWidgetToElementByIndex: (reference: string, index: unknown) => void;
@@ -82,9 +84,11 @@ export declare class ActionRuntime {
     private readonly assignReference;
     private readonly resolveMappedValue;
     private readonly setWidgetEnabled;
+    private readonly setWidgetVisible;
     private readonly clearWidget;
     private readonly clearListElementState;
     private readonly focusWidget;
+    private readonly moveCursorToEnd;
     private readonly scrollWidgetToTop;
     private readonly scrollWidgetToBottom;
     private readonly scrollWidgetToElementByIndex;

package/dist/lib/types.d.ts

@@ -3,7 +3,7 @@ export type LayoutType = 'vertical' | 'horizontal' | 'grid';
 export type TextAlign = 'left' | 'center' | 'right';
 export type VerticalAlign = 'top' | 'center' | 'bottom';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter';
+export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste';
 export type SystemEventName = 'onBeforeRender' | 'onAfterRender' | 'onBeforeNavigate' | 'onAfterNavigate' | 'onSpeechDetected' | 'onRecordingStarted' | 'onRecordingStopped' | 'onRecordingError' | 'onListeningError' | 'onListeringError' | 'onPlayFinished' | 'onPlayingStopped';
 export type PrimitiveRequestType = 'int' | 'float' | 'boolean' | 'string';
 export type RouteDefinition = {
@@ -58,6 +58,7 @@ export type BaseNode = {
     name?: string;
     style?: string | string[];
     css?: string;
+    visible?: boolean | string;
     enabled?: boolean | string;
     events?: WidgetEvents;
     [key: string]: unknown;
@@ -103,8 +104,10 @@ export type WidgetState = {
     currentRef?: string;
     text?: string;
     url?: string;
+    base64?: string;
     placeholder?: string;
     enabled?: boolean;
+    visible?: boolean;
     editable?: boolean;
     checked?: boolean;
     condition?: boolean;

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

@@ -12,7 +12,7 @@ type BindingEnvironment = {
     }) => void;
     updatePointerFromEvent: (event: MouseEvent) => void;
     updateOwningListElementDescriptor: (element: HTMLElement, mutate: (descriptor: DescriptionNode) => void) => void;
-    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter', key: string, inputValue?: unknown, pointer?: {
+    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste', key: string, inputValue?: unknown, pointer?: {
         x: number;
         y: number;
     } | null) => Promise<void>;

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

@@ -3,5 +3,6 @@ import type { WidgetRenderer } from './context.js';
 export type ImageNode = BaseNode & {
     widget: 'image';
     url?: string;
+    base64?: string;
 };
 export declare const renderImage: WidgetRenderer<ImageNode>;

package/package.json

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

package/vjt-styles.css

@@ -122,6 +122,29 @@ body {
   background: color-mix(in srgb, var(--vjt-surface-muted) 86%, transparent);
 }
 
+.vjt-md-text-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+  overflow: hidden;
+  border: 1px solid var(--vjt-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--vjt-surface) 92%, transparent);
+}
+
+.vjt-md-text-body th,
+.vjt-md-text-body td {
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--vjt-border) 78%, transparent);
+  text-align: left;
+  vertical-align: top;
+}
+
+.vjt-md-text-body th {
+  font-weight: 700;
+  background: color-mix(in srgb, var(--vjt-surface-muted) 82%, transparent);
+}
+
 .vjt-static-text:is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--vjt-font-heading);
   letter-spacing: -0.02em;