@ai-ecoverse/slicc-spectrum 1.23.2 → 1.24.0

package/dist/slicc-ui.js

@@ -8549,6 +8549,7 @@ var ModelElement = class extends i2 {
   connectedCallback() {
     super.connectedCallback();
     this.#bind();
+    this.requestUpdate();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -19195,11 +19196,58 @@ var bridge = `(() => {
   });
   post({ type: 'slicc-ready' });
 })();`;
-function frameDocument(source, color, name) {
+function literal(value) {
+  try {
+    return JSON.stringify(value ?? null).replace(/</g, "\\u003c");
+  } catch {
+    return "null";
+  }
+}
+function store(state) {
+  return `(() => {
+  let state = ${literal(state)};
+  const tag = Math.random().toString(36).slice(2);
+  const pending = new Map();
+  let next = 0;
+  const call = (method, args) => new Promise((resolve, reject) => {
+    const id = tag + ':' + ++next;
+    pending.set(id, { resolve, reject });
+    try {
+      parent.postMessage({ type: 'slicc-call', id, method, args }, '*');
+    } catch (error) {
+      pending.delete(id);
+      reject(error);
+    }
+  });
+  addEventListener('message', (event) => {
+    if (event.source !== parent) return;
+    const message = event.data || {};
+    const waiting = message.type === 'slicc-result' && pending.get(message.id);
+    if (!waiting) return;
+    pending.delete(message.id);
+    if (typeof message.error === 'string') waiting.reject(new Error(message.error));
+    else waiting.resolve(message.value);
+  });
+  Object.assign(window.slicc, {
+    readFile: (path) => call('readFile', [path]),
+    exists: (path) => call('exists', [path]),
+    getState: () => state,
+    setState(value) {
+      try {
+        state = JSON.parse(JSON.stringify(value === undefined ? null : value));
+      } catch (error) {
+        return Promise.reject(error);
+      }
+      return call('setState', [state]).then(() => undefined);
+    },
+  });
+})();`;
+}
+function frameDocument(source, color, name, state) {
   const scheme = `<style>${sprinkleTokens}${sprinkle_theme_default}</style>`;
   const light = `<script>document.documentElement.classList.toggle('theme-light', ${color === "light"});<\/script>`;
   const script = `<script data-name="${name.replace(/"/g, "&quot;")}">${bridge}<\/script>`;
-  const injection = light + scheme + script;
+  const injection = light + scheme + script + (state ? `<script>${store(state.value)}<\/script>` : "");
   const head2 = source.match(/<head\b[^>]*>/i);
   if (!head2 || head2.index === void 0) return injection + source;
   const at = head2.index + head2[0].length;
@@ -19229,6 +19277,12 @@ async function frameFonts(files, base) {
     (font) => Boolean(font.data)
   );
 }
+var sprinkleMethods = /* @__PURE__ */ new Set([
+  "readFile",
+  "exists",
+  "getState",
+  "setState"
+]);
 var grip = w`<svg class="grip" viewBox="0 0 8 14" width="8" height="14" aria-hidden="true">${[2, 7, 12].flatMap((y7) => [2, 6].map((x5) => w`<circle cx=${x5} cy=${y7} r="1.25"></circle>`))}</svg>`;
 var SliccSprinkle = class extends ThemedElement {
   static properties = {
@@ -19328,11 +19382,52 @@ var SliccSprinkle = class extends ThemedElement {
       source.postMessage({ type: "slicc-fonts", fonts }, "*");
     } else if (data.type === "slicc-size" && typeof data.height === "number") {
       this.height = data.height;
+    } else if (data.type === "slicc-call") {
+      await this.#call(source, data);
+    }
+  };
+  async #call(source, data) {
+    const port = this.model?.sprinkles;
+    if (!port?.call || typeof data.method !== "string" || !sprinkleMethods.has(data.method)) return;
+    const method = data.method;
+    const args2 = Array.isArray(data.args) ? data.args : [];
+    if (method === "setState") this.#held.value = args2[0] ?? null;
+    try {
+      const value = await port.call(this.sprinkle, method, args2);
+      source.postMessage({ type: "slicc-result", id: data.id, value }, "*");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      source.postMessage({ type: "slicc-result", id: data.id, error: message }, "*");
     }
+  }
+  #held = {
+    port: null,
+    id: "",
+    ready: false,
+    value: null
   };
+  #hold(port, ask, id) {
+    const held = { port, id, ready: false, value: null };
+    this.#held = held;
+    this.#frame = { key: "", doc: "" };
+    const settle = (value) => {
+      held.value = value ?? null;
+      held.ready = true;
+      if (this.#held === held) this.requestUpdate();
+    };
+    ask.call(port, id, "getState", []).then(settle, () => settle(null));
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const port = this.model?.sprinkles;
+    if (port?.call && (this.#held.port !== port || this.#held.id !== this.sprinkle))
+      this.#hold(port, port.call, this.sprinkle);
+  }
   #dips = new Dips();
+  #focusLater = false;
   focus() {
-    this.focusOn("iframe");
+    if (this.model?.sprinkles.call && !this.#held.ready) this.#focusLater = true;
+    else this.focusOn("iframe");
   }
   subscribe(model) {
     this.#dips = dipsOf(this) ?? this.#dips;
@@ -19357,16 +19452,22 @@ var SliccSprinkle = class extends ThemedElement {
     return this.model?.sprinkles.list().find((candidate) => candidate.id === this.sprinkle);
   }
   #frame = { key: "", doc: "" };
-  #document(data) {
-    const key2 = `${data.name}
+  #document(data, state) {
+    const key2 = `${!!state}
+${data.name}
 ${data.html}`;
     if (this.#frame.key !== key2)
-      this.#frame = { key: key2, doc: frameDocument(data.html, this.color, data.name) };
+      this.#frame = { key: key2, doc: frameDocument(data.html, this.color, data.name, state) };
     return this.#frame.doc;
   }
   updated(changed) {
     super.updated(changed);
-    this.renderRoot.querySelector("iframe")?.contentWindow?.postMessage({ type: "slicc-theme", color: this.color }, "*");
+    const frame = this.renderRoot.querySelector("iframe");
+    frame?.contentWindow?.postMessage({ type: "slicc-theme", color: this.color }, "*");
+    if (frame && this.#focusLater) {
+      this.#focusLater = false;
+      frame.focus();
+    }
   }
   render() {
     const data = this.#data;
@@ -19378,8 +19479,11 @@ ${data.html}`;
         <sp-action-button size="s" quiet @click=${() => this.#send("show-surface", `sprinkle:${data.id}`)}>Show</sp-action-button>
       </div>`;
     }
+    const bridged = !!this.model?.sprinkles.call;
+    if (bridged && !this.#held.ready) return b``;
+    const state = bridged ? this.#held : void 0;
     const style = `color-scheme:${this.color};${this.inline ? `height:${this.height}px;` : ""}`;
-    const frame = b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${this.#document(data)}></iframe>`;
+    const frame = b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${this.#document(data, state)}></iframe>`;
     if (!this.inline) return frame;
     return b`<div class="handle" draggable="true" title="Drag into the dock or a rail to open as a panel" @dragstart=${this.#drag}>
         ${grip}
@@ -31320,20 +31424,20 @@ function canParticipateWithNode(capture, node) {
   throw new Error("Unexpected path");
 }
 function cloneCapturingGroup(obj, originMap, up, up2) {
-  const store = Array.isArray(obj) ? [] : {};
+  const store2 = Array.isArray(obj) ? [] : {};
   for (const [key2, value] of Object.entries(obj)) {
     if (key2 === "parent") {
-      store.parent = Array.isArray(up) ? up2 : up;
+      store2.parent = Array.isArray(up) ? up2 : up;
     } else if (value && typeof value === "object") {
-      store[key2] = cloneCapturingGroup(value, originMap, store, up);
+      store2[key2] = cloneCapturingGroup(value, originMap, store2, up);
     } else {
       if (key2 === "type" && value === "CapturingGroup") {
-        originMap.set(store, originMap.get(obj) ?? obj);
+        originMap.set(store2, originMap.get(obj) ?? obj);
       }
-      store[key2] = value;
+      store2[key2] = value;
     }
   }
-  return store;
+  return store2;
 }
 function createRecursion(ref) {
   const node = O2(ref);
@@ -64848,8 +64952,8 @@ function buildSoaNodeStore(snapshot) {
     childIdsFlat
   };
 }
-function sweepOpenVisibleCountsSoa(store) {
-  const { nodeCount, rootId, flattenEmptyDirectories, depthAndFlags, subtreeNodeCount, visibleSubtreeCount, childStart, childCount, childIdsFlat } = store;
+function sweepOpenVisibleCountsSoa(store2) {
+  const { nodeCount, rootId, flattenEmptyDirectories, depthAndFlags, subtreeNodeCount, visibleSubtreeCount, childStart, childCount, childIdsFlat } = store2;
   for (let id = nodeCount - 1; id >= 1; id -= 1) {
     if ((depthAndFlags[id] & KIND_MASK) === 0) continue;
     const base = childStart[id];