@tinkerlandai/indiana-iam 0.3.0 → 0.4.0

package/src/tab-scenes.mjs

@@ -0,0 +1,214 @@
+import { JSDOM, VirtualConsole } from "jsdom";
+import { documentDom } from "./dom-payload.mjs";
+import { createStateMachine } from "./ui-state-machine.mjs";
+import { previewUiDocument } from "./ui-preview.mjs";
+import {graphSource} from './graph-sources.mjs';
+
+/** Build thumbnail states and edges by dispatching the IAM's actual scalar transitions. */
+export function tabUiScenes(manifest, tabKey) {
+  const graph = manifest.routeTree,
+    tab = graph.ui?.tabs.find((t) => t.tabKey === tabKey);
+  if (!tab || !tab.variableKey) throw Error("Unknown controlled source Tab");
+  const render = graph.renders.find((r) => r.renderKey === tab.renderKey),
+    document = manifest.documents.find(
+      (d) => d.documentKey === render.documentKey,
+    );
+  const dom = new JSDOM(documentDom(document).html, {
+    virtualConsole: new VirtualConsole(),
+  });
+  try {
+    const doc = dom.window.document,
+      nodes = new Map(
+        [...doc.querySelectorAll("[data-iam-node]")].map((n) => [
+          n.getAttribute("data-iam-node"),
+          n,
+        ]),
+      );
+    const ancestors = [];
+    let current = nodes.get(tab.nodeId);
+    while (current && ancestors.length < 128) {
+      ancestors.push(current);
+      current = current.parentElement;
+    }
+    const conditions = {},
+      regions = {},
+      values = {},
+      ids = new Set(ancestors.map((n) => n.getAttribute("data-iam-node")));
+    for (const node of ancestors) {
+      if (node.hasAttribute("data-iam-condition")) {
+        const truthy = node.getAttribute("data-iam-alternative") === "true",
+          root = truthy ? node : node.previousElementSibling;
+        if (
+          !root ||
+          root.getAttribute("data-iam-condition") !==
+            node.getAttribute("data-iam-condition")
+        )
+          throw Error("Invalid source condition pair");
+        conditions[root.getAttribute("data-iam-node")] = truthy;
+      }
+      if (node.hasAttribute("data-iam-region-value")) {
+        const region = (graph.ui.regions ?? []).find((r) =>
+          r.options.some(
+            (o) => o.nodeId === node.getAttribute("data-iam-node"),
+          ),
+        );
+        if (region)
+          regions[region.regionKey] = node.getAttribute(
+            "data-iam-region-value",
+          );
+      }
+    }
+    for (const binding of graph.bindings.filter(
+      (b) =>
+        b.renderKey === tab.renderKey &&
+        b.property === "visible" &&
+        ids.has(b.nodeId),
+    )) {
+      if (binding.value.op === "var") values[binding.value.key] = true;
+      if (binding.value.op === "not" && binding.value.arg.op === "var")
+        values[binding.value.arg.key] = false;
+      if (
+        binding.value.op === "eq" &&
+        binding.value.left.op === "var" &&
+        binding.value.right.op === "const"
+      )
+        values[binding.value.left.key] = binding.value.right.value;
+    }
+    const scope = nodes.get(tab.scopeNodeId ?? tab.nodeId),
+      overlay = scope?.getAttribute("role") === "dialog",
+      width = Number(
+        /\bw-\[(\d+)px\]/.exec(scope?.getAttribute("class") ?? "")?.[1] || 0,
+      );
+    const viewport = overlay
+      ? {
+          width: width ? Math.max(320, width + 48) : 640,
+          height: width ? 480 : 400,
+        }
+      : { width: 480, height: 760 };
+    const base = {
+      strategy: "content",
+      conditions,
+      regions,
+      values,
+      focusNodeId: tab.scopeNodeId ?? tab.nodeId,
+      viewport,
+    };
+    const initial = createStateMachine(
+        graph,
+        tab.routeKey,
+        tab.renderKey,
+      ).snapshot(),
+      scenes = [];
+    for (const item of tab.items) {
+      const machine = createStateMachine(graph, tab.routeKey, tab.renderKey);
+      machine.preview(values);
+      const transition = graph.transitions.find(
+        (t) =>
+          t.renderKey === tab.renderKey &&
+          t.trigger.nodeId === item.nodeId &&
+          t.trigger.event === "click",
+      );
+      const result = transition
+        ? machine.dispatch(item.nodeId, "click", {})
+        : null;
+      if (!result || machine.snapshot()[tab.variableKey] !== item.value)
+        continue;
+      const changed = Object.fromEntries(
+        Object.entries(machine.snapshot()).filter(
+          ([key, value]) => initial[key] !== value || key === tab.variableKey,
+        ),
+      );
+      const options = { ...base, values: { ...values, ...changed } },
+        preview = previewUiDocument(manifest, document, options),
+        sceneDom = new JSDOM(preview.html, {
+          virtualConsole: new VirtualConsole(),
+        });
+      const focused = [
+        ...sceneDom.window.document.querySelectorAll("[data-iam-node]"),
+      ]
+        .find((n) => n.getAttribute("data-iam-node") === base.focusNodeId)
+        ?.cloneNode(true);
+      focused
+        ?.querySelectorAll("[hidden],[role=tablist]")
+        .forEach((n) => n.remove());
+      const headings = focused
+        ? [...focused.querySelectorAll("h1,h2,h3,h4,label,[role=columnheader]")]
+            .map((n) => n.textContent.replace(/\s+/g, " ").trim())
+            .filter(Boolean)
+        : [];
+      const content = focused?.textContent.replace(/\s+/g, " ").trim() ?? "";
+      const fields = focused
+        ? [...focused.querySelectorAll("input,textarea,select")].map((n) => ({
+            tag: n.tagName.toLowerCase(),
+            label: n.getAttribute("aria-label") ?? "",
+            placeholder: n.getAttribute("placeholder") ?? "",
+          }))
+        : [];
+      const allowedIds = new Set([
+        ...ancestors.map((n) => n.getAttribute("data-iam-node")),
+        ...(scope
+          ? [scope, ...scope.querySelectorAll("[data-iam-node]")].map((n) =>
+              n.getAttribute("data-iam-node"),
+            )
+          : []),
+      ]);
+      scenes.push({
+        assumptions: preview.assumptions.filter((a) =>
+          allowedIds.has(a.groupKey),
+        ),
+        value: item.value,
+        label:
+          nodes.get(item.nodeId)?.textContent.replace(/\s+/g, " ").trim() ||
+          item.value,
+        options,
+        headings: [...new Set(headings)].slice(0, 8),
+        content: content.slice(0, 1000),
+        fields,
+        collections: preview.collectionChoices.filter((c) => {
+          const row = (graph.ui.collections ?? []).find(
+              (r) => r.collectionKey === c.collectionKey,
+            ),
+            node = row && nodes.get(row.nodeId);
+          return node && (scope === node || scope?.contains(node));
+        }),
+        unobserved: preview.unobserved.filter((u) =>
+          allowedIds.has(u.groupKey),
+        ),
+        transitionKey: result.transitionKey,
+        changedNodeIds: tab.contentNodeIds ?? [],
+      });
+      sceneDom.window.close();
+    }
+    const edges = [];
+    for (const from of scenes)
+      for (const to of scenes) {
+        if (from.value === to.value) continue;
+        const item = tab.items.find((i) => i.value === to.value),
+          machine = createStateMachine(graph, tab.routeKey, tab.renderKey);
+        machine.preview(from.options.values);
+        const result = machine.dispatch(item.nodeId, "click", {});
+        if (!result || machine.snapshot()[tab.variableKey] !== to.value)
+          continue;
+        const transition = graph.transitions.find(
+          (t) => t.transitionKey === result.transitionKey,
+        );
+        edges.push({
+          from: from.value,
+          to: to.value,
+          transitionKey: result.transitionKey,
+          event: transition.trigger.event,
+          variableKey: tab.variableKey,
+          writes: transition.stateWrites.map((w) => ({
+            variableKey: w.variableKey,
+            label: graph.variables.find((v) => v.variableKey === w.variableKey)
+              .label,
+            value: machine.snapshot()[w.variableKey],
+          })),
+          sourceRefs: [graphSource(graph,transition), tab.scopeSource],
+        });
+      }
+    return { tabKey, scenes, edges };
+  } finally {
+    dom.window.close();
+  }
+}

package/src/ui-preview.mjs

@@ -0,0 +1,225 @@
+import { JSDOM, VirtualConsole } from "jsdom";
+import { documentDom } from "./dom-payload.mjs";
+import { createStateMachine } from "./ui-state-machine.mjs";
+import { applySourceAttributes } from "./source-attributes.mjs";
+import {
+  applySourceCollections,
+  markUnobservedData,
+} from "./source-collections.mjs";
+
+/** Inert source alternatives for UI inspection. This never changes the admitted render or SDK targets. */
+export function previewUiDocument(manifest, document, options = {}) {
+  const graph = manifest.routeTree,
+    render = graph.renders.find((r) => r.documentKey === document.documentKey);
+  if (!render) throw Error("Unknown UI preview render");
+  const dom = new JSDOM(documentDom(document).html, {
+    virtualConsole: new VirtualConsole(),
+  });
+  try {
+    const doc = dom.window.document;
+    const nodes = new Map(
+      [...doc.querySelectorAll("[data-iam-node]")].map((n) => [
+        n.getAttribute("data-iam-node"),
+        n,
+      ]),
+    );
+    const sourceConditions = new Map(
+      (graph.ui?.conditions ?? []).map((c) => [c.conditionKey, c]),
+    );
+    const conditions = [
+      ...doc.querySelectorAll(
+        '[data-iam-condition][data-iam-alternative="true"]',
+      ),
+    ].map((node) => {
+      const source = sourceConditions.get(
+        node.getAttribute("data-iam-condition"),
+      );
+      if (!source) throw Error("Unknown source condition");
+      const other = node.nextElementSibling;
+      return {
+        ...source,
+        defaultChoice:
+          node.getAttribute("data-iam-condition-default") === "false"
+            ? false
+            : undefined,
+        groupKey: node.getAttribute("data-iam-node"),
+        truthyNodeId: node.getAttribute("data-iam-node"),
+        falsyNodeId:
+          other?.getAttribute("data-iam-condition") === source.conditionKey &&
+          other.getAttribute("data-iam-alternative") === "false"
+            ? other.getAttribute("data-iam-node")
+            : null,
+      };
+    });
+    const selections = new Map();
+    const groups = new Map();
+    for (const row of conditions) {
+      if (!groups.has(row.groupKey)) groups.set(row.groupKey, []);
+      groups.get(row.groupKey).push(row);
+    }
+    if (options.strategy !== undefined && options.strategy !== "content")
+      throw Error("Unknown UI preview strategy");
+    for (const [key, rows] of groups) {
+      const supplied = options.conditions?.[key];
+      if (supplied !== undefined && typeof supplied !== "boolean")
+        throw Error("Invalid UI condition choice");
+      if (supplied !== undefined) selections.set(key, supplied);
+      else if (options.strategy === "content") {
+        if (rows[0].observation) continue;
+        if (rows[0].defaultChoice !== undefined) {
+          selections.set(key, rows[0].defaultChoice);
+          continue;
+        }
+        const score = (id) => {
+          const node = nodes.get(id);
+          return node
+            ? node.textContent.trim().length +
+                node.querySelectorAll("input,button,a,textarea,select").length *
+                  24
+            : 0;
+        };
+        selections.set(
+          key,
+          rows.reduce(
+            (n, r) => n + score(r.truthyNodeId) - score(r.falsyNodeId),
+            0,
+          ) >= 0,
+        );
+      }
+    }
+    for (const key of Object.keys(options.conditions ?? {}))
+      if (!groups.has(key)) throw Error("Unknown UI condition");
+    for (const row of conditions)
+      if (selections.has(row.groupKey)) {
+        nodes
+          .get(row.truthyNodeId)
+          ?.toggleAttribute("hidden", !selections.get(row.groupKey));
+        if (row.falsyNodeId)
+          nodes
+            .get(row.falsyNodeId)
+            ?.toggleAttribute("hidden", selections.get(row.groupKey));
+      }
+    const machine = createStateMachine(
+      graph,
+      render.routeKey,
+      render.renderKey,
+    );
+    if (options.values) machine.preview(options.values);
+    for (const binding of machine.bindings()) {
+      const node = nodes.get(binding.nodeId);
+      if (!node) continue;
+      if (binding.property === "visible")
+        node.toggleAttribute("hidden", !binding.value);
+      else if (binding.property === "text")
+        node.textContent = String(binding.value);
+      else if (binding.property === "className")
+        node.setAttribute("class", String(binding.value));
+      else if (["disabled", "checked"].includes(binding.property))
+        node.toggleAttribute(binding.property, Boolean(binding.value));
+      else if (
+        binding.property === "value" &&
+        node.getAttribute("type") !== "password"
+      )
+        node.setAttribute("value", String(binding.value));
+    }
+    const values = machine.snapshot();
+    for (const tab of graph.ui?.tabs ?? [])
+      if (tab.renderKey === render.renderKey) {
+        const selected = tab.variableKey
+          ? values[tab.variableKey]
+          : tab.initialValue;
+        for (const item of tab.items)
+          nodes
+            .get(item.nodeId)
+            ?.setAttribute("aria-selected", String(item.value === selected));
+      }
+    const regions = (graph.ui?.regions ?? []).filter(
+        (r) => r.renderKey === render.renderKey,
+      ),
+      componentChoices = [];
+    for (const key of Object.keys(options.regions ?? {}))
+      if (!regions.some((r) => r.regionKey === key))
+        throw Error("Unknown component region");
+    for (const region of regions) {
+      const requested = options.regions?.[region.regionKey],
+        stateValue = region.variableKey ? values[region.variableKey] : null;
+      const selected =
+        requested ??
+        (options.strategy === "content"
+          ? region.options.some((o) => o.value === stateValue)
+            ? stateValue
+            : (region.initialValue ?? region.options[0].value)
+          : null);
+      if (
+        selected !== null &&
+        !region.options.some((o) => o.value === selected)
+      )
+        throw Error("Unknown source component alternative");
+      if (selected !== null) {
+        for (const option of region.options)
+          nodes
+            .get(option.nodeId)
+            ?.toggleAttribute("hidden", option.value !== selected);
+        componentChoices.push({
+          regionKey: region.regionKey,
+          value: selected,
+          source: region.source,
+          expression: region.expression,
+        });
+      }
+    }
+    applySourceAttributes(doc, graph.ui, render.renderKey, values);
+    const focus = options.focusNodeId ? nodes.get(options.focusNodeId) : null;
+    const collectionUi = focus
+      ? {
+          ...graph.ui,
+          collections: (graph.ui?.collections ?? []).filter((row) => {
+            const node = nodes.get(row.nodeId);
+            return node && focus.contains(node);
+          }),
+        }
+      : graph.ui;
+    const collectionChoices = applySourceCollections(
+      doc,
+      collectionUi,
+      render.renderKey,
+      values,
+      options.strategy === "content" || Boolean(options.values),
+    );
+    const unobserved = markUnobservedData(
+      doc,
+      graph.ui,
+      options.strategy === "content",
+      selections,
+    );
+    const assumptions = [...groups].flatMap(([key, rows]) => {
+      if (!selections.has(key)) return [];
+      const row = rows.find((r) => {
+        const node = nodes.get(
+          selections.get(key) ? r.truthyNodeId : r.falsyNodeId,
+        );
+        return node && !node.parentElement?.closest("[hidden]");
+      });
+      return row
+        ? [
+            {
+              groupKey: key,
+              expression: row.expression,
+              selected: selections.get(key),
+              source: row.source,
+            },
+          ]
+        : [];
+    });
+    return {
+      html: doc.documentElement.outerHTML,
+      assumptions,
+      values,
+      componentChoices,
+      collectionChoices,
+      unobserved,
+    };
+  } finally {
+    dom.window.close();
+  }
+}

package/src/ui-state-machine.mjs

@@ -0,0 +1,76 @@
+/* Generated from assets/state-machine.js by build-runtime.mjs. */
+/* Indiana declarative UI state machine. Pure computation; no merchant callbacks. */
+export function createStateMachine(graph, routeKey, renderKey) {
+  {
+    renderKey ??= graph.routes.find(route => route.routeKey === routeKey)?.initialRenderKey;
+    if (!graph.renders.some(render => render.renderKey === renderKey && render.routeKey === routeKey)) throw new Error("Unknown UI render");
+  }
+  const owns = row => row.routeKey === routeKey && row.renderKey === renderKey;
+  const variables = new Map(graph.variables.filter(owns).map(v => [v.variableKey, v]));
+  const transitions = graph.transitions.filter(t => owns(t) && t.simulation === "implemented");
+  let values = Object.fromEntries([...variables].map(([key, v]) => [key, v.initialValue]));
+  const read = (expression, payload, snapshot, depth = 0) => {
+    if (depth > 24) throw new Error("Expression budget exceeded");
+    const next = e => read(e, payload, snapshot, depth + 1);
+    switch (expression.op) {
+      case "const": return expression.value;
+      case "var": {
+        if (!variables.has(expression.key)) throw new Error("Unknown variable");
+        return snapshot[expression.key];
+      }
+      case "event": {
+        if (!Object.hasOwn(payload, expression.key)) throw new Error("Missing event input");
+        return payload[expression.key];
+      }
+      case "not": return !next(expression.arg);
+      case "eq": return next(expression.left) === next(expression.right);
+      case "ne": return next(expression.left) !== next(expression.right);
+      case "add":
+      case "subtract": {
+        const left = next(expression.left), right = next(expression.right);
+        if (typeof left !== "number" || typeof right !== "number" || !Number.isFinite(left) || !Number.isFinite(right)) throw new Error("Invalid numeric expression");
+        const value = expression.op === "add" ? left + right : left - right;
+        if (!Number.isFinite(value)) throw new Error("Invalid numeric result");
+        return value;
+      }
+      case "all": return expression.args.every(e => next(e) === true);
+      case "any": return expression.args.some(e => next(e) === true);
+      case "classes": return expression.parts.filter(part=>next(part.when)===true).map(part=>part.value).join(' ');
+      default: throw new Error("Unsupported expression");
+    }
+  };
+  return {
+    snapshot: () => ({ ...values }),
+    preview(input) {
+      if (!input || Array.isArray(input) || typeof input !== "object" || Object.keys(input).length > variables.size) throw new Error("Invalid preview values");
+      const writes = Object.create(null);
+      for (const [key, value] of Object.entries(input)) {
+        const variable = variables.get(key);
+        if (!variable || typeof value !== variable.valueType || typeof value === "string" && value.length > 4000 || typeof value === "number" && !Number.isFinite(value)) throw new Error("Invalid preview value");
+        writes[key] = value;
+      }
+      values = { ...values, ...writes };
+      return { values: { ...values }, evidence: "manual-ui-preview" };
+    },
+    reset: () => { values = Object.fromEntries([...variables].map(([key, v]) => [key, v.initialValue])); },
+    bindings: () => graph.bindings.filter(owns).map(b => ({ ...b, value: read(b.value, {}, values) })),
+    dispatch(nodeId, event, payload = {}) {
+      const candidates = transitions.filter(t => t.trigger.nodeId === nodeId && t.trigger.event === event);
+      for (const t of candidates) {
+        const expected = Object.keys(t.trigger.payload);
+        if (Object.keys(payload).some(key => !expected.includes(key)) || expected.some(key => typeof payload[key] !== t.trigger.payload[key] || typeof payload[key] === "string" && payload[key].length > 4000)) throw new Error("Invalid event input");
+      }
+      const eligible = candidates.filter(t => read(t.guard, payload, values) === true);
+      if (eligible.length > 1) throw new Error("Ambiguous UI transition");
+      if (!eligible.length) return null;
+      const t = eligible[0], writes = Object.create(null);
+      for (const w of t.stateWrites) {
+        const value = read(w.value, payload, values), variable = variables.get(w.variableKey);
+        if (!variable || typeof value !== variable.valueType || typeof value === "string" && value.length > 4000 || typeof value === "number" && !Number.isFinite(value)) throw new Error("Invalid state write");
+        writes[w.variableKey] = value;
+      }
+      values = { ...values, ...writes };
+      return { transitionKey: t.transitionKey, values: { ...values } };
+    },
+  };
+}