@wildwinter/app-shell 0.56.0 → 0.58.0

package/dist/index.cjs

@@ -1262,10 +1262,10 @@ function mountSettingsDialog(opts) {
     for (const s of opts.sections) {
       const found = handles.get(s.id)?.firstInvalid?.();
       if (!found) continue;
-      const bad = found instanceof HTMLElement ? found : found.el;
-      const message = (found instanceof HTMLElement ? void 0 : found.message) ?? bad.dataset["tip"];
+      const bad2 = found instanceof HTMLElement ? found : found.el;
+      const message = (found instanceof HTMLElement ? void 0 : found.message) ?? bad2.dataset["tip"];
       showTab(s.id);
-      bad.focus();
+      bad2.focus();
       error.textContent = message || "Fix the highlighted fields first.";
       error.hidden = false;
       return;
@@ -1460,6 +1460,27 @@ function followButton(opts) {
     reflect();
   } };
 }
+function selectionFollowButton(opts) {
+  const what = opts.what ?? "line";
+  const b = el("button", "btn swin-follow", "Follow selection");
+  b.type = "button";
+  let on = opts.on;
+  const reflect = () => {
+    b.classList.toggle("on", on);
+    b.setAttribute("aria-pressed", String(on));
+    b.dataset["tip"] = on ? `Shows whatever is selected in the editor. Click to stay on this ${what}.` : `Stays on this ${what}. Click to follow the selection.`;
+  };
+  reflect();
+  b.addEventListener("click", () => {
+    on = !on;
+    reflect();
+    opts.onToggle(on);
+  });
+  return { el: b, set: (next) => {
+    on = next;
+    reflect();
+  } };
+}
 
 // src/exit.ts
 function closeWithExit(element, done) {
@@ -3817,6 +3838,325 @@ function historyNav(onBack, onForward) {
   };
 }
 
+// src/view-protocol.ts
+var VIEW_API = 1;
+var VIEW_PORT_CHANNEL = "wildwinter-view:port";
+var VIEW_PORT_MESSAGE = "wildwinter-view:port";
+
+// src/view-host-web.ts
+var PALETTE_TOKENS = [
+  "--bg",
+  "--surface",
+  "--card",
+  "--ink",
+  "--muted",
+  "--line",
+  "--line-soft",
+  "--accent",
+  "--accent-soft",
+  "--on-accent",
+  "--danger",
+  "--warn",
+  "--ok",
+  "--font-ui",
+  "--font-read",
+  "--font-mono",
+  ...Array.from({ length: 12 }, (_, i) => `--char-${i}`)
+];
+var GRAMMAR_TOKENS = [
+  "--color-scheme",
+  "--chrome-size",
+  "--scrim",
+  "--shadow-1",
+  "--shadow-2",
+  "--shadow-3",
+  "--ease-standard",
+  "--dur-quick",
+  "--dur-base",
+  "--dur-settle",
+  "--dur-slow",
+  "--dur-panel",
+  "--dur-exit",
+  "--radius-sm",
+  "--radius-md",
+  "--radius-lg",
+  "--radius-pill",
+  "--scroll-thumb",
+  "--scroll-thumb-hover"
+];
+var VIEW_THEME_TOKENS = [...PALETTE_TOKENS, ...GRAMMAR_TOKENS];
+function readTheme(root = document.documentElement, tokens = VIEW_THEME_TOKENS) {
+  const style = getComputedStyle(root);
+  const out = {};
+  for (const name of tokens) {
+    const value = style.getPropertyValue(name).trim();
+    if (value !== "") out[name] = value;
+  }
+  const declared = (style.getPropertyValue("color-scheme") || style.colorScheme || "").trim();
+  const words = declared.split(/\s+/);
+  let scheme = "light";
+  if (declared === "dark") scheme = "dark";
+  else if (words.includes("light") && words.includes("dark")) {
+    scheme = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return { scheme, tokens: out };
+}
+function onViewPort(fn, target = window, closed) {
+  const listener = (e) => {
+    if (e.source !== target) return;
+    const data = e.data;
+    if (!data || typeof data !== "object" || data.type !== VIEW_PORT_MESSAGE) return;
+    const port = e.ports?.[0];
+    const meta = data.meta;
+    if (!meta || typeof meta.window !== "number" || typeof meta.extension !== "string" || typeof meta.view !== "string") return;
+    if (meta.closed === true) {
+      closed?.(meta);
+      return;
+    }
+    if (!port) return;
+    fn(port, meta);
+  };
+  target.addEventListener("message", listener);
+  return () => target.removeEventListener("message", listener);
+}
+var NAME = /^[A-Za-z_][A-Za-z0-9_]*$/;
+var isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isId = (v) => typeof v === "string" && v !== "";
+function isJson(v, depth = 0) {
+  if (depth > 64) return false;
+  if (v === null || typeof v === "string" || typeof v === "boolean") return true;
+  if (typeof v === "number") return Number.isFinite(v);
+  if (Array.isArray(v)) return v.every((x) => isJson(x, depth + 1));
+  if (isObj(v)) return Object.getPrototypeOf(v) === Object.prototype && Object.values(v).every((x) => isJson(x, depth + 1));
+  return false;
+}
+var bad = (message) => ({ code: "bad-request", message });
+function argsProblem(op, args) {
+  switch (op) {
+    case "project":
+    case "selection":
+      return null;
+    case "node":
+      if (!isId(args["id"])) return "A node request names the node by its id.";
+      if (args["children"] !== void 0 && typeof args["children"] !== "boolean") return "A node request's children is true or false.";
+      return null;
+    case "media":
+      if (!Array.isArray(args["ids"]) || !args["ids"].every(isId)) return "A media request lists the lines' ids.";
+      return null;
+    case "select":
+      return isId(args["id"]) ? null : "A select request names the node by its id.";
+    case "write": {
+      if (typeof args["label"] !== "string" || args["label"].trim() === "") return "A write has a label, for the undo step.";
+      const edits = args["edits"];
+      if (!Array.isArray(edits)) return "A write lists its edits.";
+      for (const e of edits) {
+        if (!isObj(e) || !isId(e["node"])) return "Each edit names its node by id.";
+        if (typeof e["field"] !== "string" || !NAME.test(e["field"])) return "Each edit names one of the extension's fields, never a path inside one.";
+        if ("value" in e && e["value"] !== void 0 && !isJson(e["value"])) return `The value for ${e["field"]} isn't plain JSON.`;
+      }
+      return null;
+    }
+  }
+}
+var OPS = ["project", "node", "selection", "media", "write", "select"];
+function hostView(port, adapter, opts) {
+  const { meta } = opts;
+  const ext = meta.extension;
+  const allowed = /* @__PURE__ */ new Set([ext, ...opts.reads]);
+  const theme = opts.theme ?? (() => readTheme());
+  const debounceMs = opts.debounceMs ?? 100;
+  let welcomed = false;
+  let closed = false;
+  let pending = null;
+  let timer3;
+  const post = (msg) => {
+    if (!closed) port.postMessage(msg);
+  };
+  const emit = (name, value) => {
+    if (welcomed) post({ t: "event", name, value });
+  };
+  const filterNode = (node2) => {
+    const keptExt = {};
+    for (const [id, data] of Object.entries(node2.ext ?? {})) if (allowed.has(id)) keptExt[id] = data;
+    const base = { id: node2.id, kind: node2.kind, parent: node2.parent, label: node2.label, host: node2.host ?? {}, ext: keptExt };
+    const out = typeof node2.held === "string" ? { ...base, held: node2.held } : base;
+    return node2.children ? { ...out, children: node2.children.map(filterNode) } : out;
+  };
+  const answer = async (op, args) => {
+    switch (op) {
+      case "project":
+        return { value: filterNode(await adapter.project()) };
+      case "node": {
+        const node2 = await adapter.node(args["id"], args["children"] === true);
+        return { value: node2 ? filterNode(node2) : null };
+      }
+      case "selection":
+        return { value: await adapter.selection() };
+      case "media":
+        if (!adapter.media) return { refusal: { code: "unsupported", message: "This app has no recordings or timings for lines." } };
+        return { value: await adapter.media(args["ids"]) };
+      case "select":
+        return { value: await adapter.select(args["id"]) };
+      case "write": {
+        const writable = adapter.writable(ext);
+        if (writable.readOnly) return { refusal: { code: "read-only", message: writable.why ?? "This project is read-only just now." } };
+        const edits = args["edits"].map((e) => "value" in e && e.value !== void 0 ? { node: e.node, field: e.field, value: e.value } : { node: e.node, field: e.field });
+        if (edits.length === 0) return { value: { written: 0 } };
+        if (edits.length > 1) {
+          const projectId = (await adapter.project()).id;
+          const onProject = edits.filter((e) => e.node === projectId).length;
+          if (onProject > 0 && onProject < edits.length) {
+            return { refusal: bad("A write changes the project or other nodes, not both: they undo separately. Make two writes.") };
+          }
+        }
+        const refused = await adapter.write(ext, args["label"], edits);
+        if (refused) return { refusal: refused };
+        return { value: { written: edits.length } };
+      }
+    }
+  };
+  const request = async (msg) => {
+    const id = msg["id"];
+    if (typeof id !== "number" || !Number.isInteger(id)) return;
+    const reply = (r) => post("refusal" in r ? { t: "reply", id, ok: false, refusal: r.refusal } : { t: "reply", id, ok: true, value: r.value });
+    const op = msg["op"];
+    if (typeof op !== "string" || !OPS.includes(op)) {
+      reply({ refusal: bad(`There's no request called ${JSON.stringify(op)}.`) });
+      return;
+    }
+    const args = msg["args"] ?? {};
+    if (!isObj(args)) {
+      reply({ refusal: bad("A request's args are an object.") });
+      return;
+    }
+    const problem = argsProblem(op, args);
+    if (problem) {
+      reply({ refusal: bad(problem) });
+      return;
+    }
+    try {
+      reply(await answer(op, args));
+    } catch (e) {
+      reply({ refusal: { code: "failed", message: `The app couldn't do that: ${e instanceof Error ? e.message : String(e)}` } });
+    }
+  };
+  const hello = (msg) => {
+    const api = msg["api"];
+    if (api !== VIEW_API) {
+      const who = `${opts.names?.extension ?? ext}'s ${opts.names?.view ?? meta.view}`;
+      const message = typeof api === "number" ? `${who} was built for view API ${api}; this app serves ${VIEW_API}.` : `${who} didn't say which view API it was built for; this app serves ${VIEW_API}.`;
+      post({ t: "refused", message });
+      close(false);
+      return;
+    }
+    const welcome = {
+      t: "welcome",
+      api: VIEW_API,
+      host: adapter.host,
+      extension: { id: ext, version: meta.version, ...meta.pinned !== void 0 ? { pinned: meta.pinned } : {} },
+      view: meta.view,
+      settings: adapter.settings(ext),
+      theme: theme(),
+      writable: adapter.writable(ext)
+    };
+    welcomed = true;
+    post(welcome);
+  };
+  const onMessage = (e) => {
+    const msg = e.data;
+    if (closed || !isObj(msg)) return;
+    if (!welcomed) {
+      if (msg["t"] === "hello") hello(msg);
+      return;
+    }
+    if (msg["t"] === "request") void request(msg);
+    else if (msg["t"] === "key" && typeof msg["combo"] === "string") adapter.key?.(msg["combo"]);
+  };
+  port.addEventListener("message", onMessage);
+  port.start();
+  const flush = () => {
+    timer3 = void 0;
+    const nodes = pending;
+    pending = null;
+    if (nodes === null) return;
+    emit("changed", { nodes: nodes === "all" ? "all" : [...nodes] });
+  };
+  function close(sayClosing = true) {
+    if (closed) return;
+    if (sayClosing) emit("closing", {});
+    clearTimeout(timer3);
+    closed = true;
+    port.removeEventListener("message", onMessage);
+    port.close();
+  }
+  return {
+    changed(nodes) {
+      if (closed || !welcomed) return;
+      if (nodes === "all" || pending === "all") pending = "all";
+      else {
+        pending ??= /* @__PURE__ */ new Set();
+        for (const n of nodes) pending.add(n);
+      }
+      if (timer3 === void 0) timer3 = setTimeout(flush, debounceMs);
+    },
+    selection() {
+      if (closed || !welcomed) return;
+      void Promise.resolve().then(() => adapter.selection()).then((s) => emit("selection", s), () => {
+      });
+    },
+    theme() {
+      if (!closed) emit("theme", theme());
+    },
+    writable() {
+      if (!closed) emit("writable", adapter.writable(ext));
+    },
+    close: () => close(true)
+  };
+}
+function hostViews(setup, opts = {}) {
+  const handles = /* @__PURE__ */ new Map();
+  const drop = (meta) => {
+    handles.get(meta.window)?.close();
+    handles.delete(meta.window);
+  };
+  const stop = onViewPort((port, meta) => {
+    drop(meta);
+    const s = setup(meta);
+    if (!s) {
+      port.close();
+      return;
+    }
+    handles.set(meta.window, hostView(port, s.adapter, {
+      meta,
+      reads: s.reads,
+      ...s.names !== void 0 ? { names: s.names } : {},
+      ...opts.theme !== void 0 ? { theme: opts.theme } : {},
+      ...opts.debounceMs !== void 0 ? { debounceMs: opts.debounceMs } : {}
+    }));
+  }, opts.target ?? window, drop);
+  const each = (f) => {
+    for (const h of handles.values()) f(h);
+  };
+  return {
+    get size() {
+      return handles.size;
+    },
+    changed: (nodes) => each((h) => h.changed(nodes)),
+    selection: () => each((h) => h.selection()),
+    theme: () => each((h) => h.theme()),
+    writable: () => each((h) => h.writable()),
+    close: () => {
+      each((h) => h.close());
+      handles.clear();
+    },
+    dispose: () => {
+      stop();
+      each((h) => h.close());
+      handles.clear();
+    }
+  };
+}
+
 exports.EDIT_MENU = EDIT_MENU;
 exports.FILE_MENU = FILE_MENU;
 exports.GO_MENU = GO_MENU;
@@ -3832,7 +4172,11 @@ exports.PROPERTY_TYPES = PROPERTY_TYPES;
 exports.PUBLISH_MENU = PUBLISH_MENU;
 exports.RESERVED_PROPERTY_NAMES = RESERVED_PROPERTY_NAMES;
 exports.REVIEW_MENU = REVIEW_MENU;
+exports.VIEW_API = VIEW_API;
 exports.VIEW_MENU = VIEW_MENU;
+exports.VIEW_PORT_CHANNEL = VIEW_PORT_CHANNEL;
+exports.VIEW_PORT_MESSAGE = VIEW_PORT_MESSAGE;
+exports.VIEW_THEME_TOKENS = VIEW_THEME_TOKENS;
 exports.askIdentity = askIdentity;
 exports.bindPropertyName = bindPropertyName;
 exports.bindPropertyRef = bindPropertyRef;
@@ -3870,6 +4214,8 @@ exports.gameIdify = gameIdify;
 exports.hideTip = hideTip;
 exports.hintBar = hintBar;
 exports.historyNav = historyNav;
+exports.hostView = hostView;
+exports.hostViews = hostViews;
 exports.icon = icon;
 exports.iconBtn = iconBtn;
 exports.iconHtml = iconHtml;
@@ -3904,6 +4250,7 @@ exports.mountPropertyList = mountPropertyList;
 exports.mountSettingsDialog = mountSettingsDialog;
 exports.mountWelcome = mountWelcome;
 exports.moveItem = moveItem;
+exports.onViewPort = onViewPort;
 exports.openAnchoredPanel = openAnchoredPanel;
 exports.openComments = openComments;
 exports.openContextMenu = openContextMenu;
@@ -3920,6 +4267,7 @@ exports.problemName = problemName;
 exports.propertyNameProblem = propertyNameProblem;
 exports.propertyNameify = propertyNameify;
 exports.propertyRefProblem = propertyRefProblem;
+exports.readTheme = readTheme;
 exports.relativeTime = relativeTime;
 exports.renderStepperBar = renderStepperBar;
 exports.revalidatePropertyRefs = revalidatePropertyRefs;
@@ -3927,6 +4275,7 @@ exports.revealRow = revealRow;
 exports.revealRowWhenReady = revealRowWhenReady;
 exports.rungStrip = rungStrip;
 exports.saveIndicator = saveIndicator;
+exports.selectionFollowButton = selectionFollowButton;
 exports.setKeyPlatform = setKeyPlatform;
 exports.showAbout = showAbout;
 exports.showUpdaterDialog = showUpdaterDialog;