@juo/blocks 1.11.0-alpha.0 → 1.12.0-alpha.0

package/dist/juo-workflow-CkyZRq60.js

@@ -0,0 +1,1667 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { reportBlockError, reportBlockWarning } from "./observability.js";
+import { a as createEditorBridge, e as createSelectBlockMessage } from "./bridge-w5KQ-czl.js";
+const createContext = (key) => key;
+class ContextRequestEvent extends Event {
+  constructor(context, callback, subscribe) {
+    super("context-request", { bubbles: true, composed: true });
+    this.context = context;
+    this.callback = callback;
+    this.subscribe = subscribe;
+  }
+}
+class ContextProvideEvent extends Event {
+  constructor(context, value, subscribe) {
+    super("context-provide", { bubbles: true, composed: true });
+    this.context = context;
+    this.value = value;
+    this.subscribe = subscribe;
+  }
+}
+function provideContext(target, context, init) {
+  console.log("context:provide", context, target);
+  const ev = new ContextProvideEvent(context, init);
+  target.dispatchEvent(ev);
+}
+function injectContext(target, context) {
+  let value = void 0;
+  console.log("context:inject", context, target);
+  const ev = new ContextRequestEvent(context, (received) => {
+    value = received;
+  });
+  target.dispatchEvent(ev);
+  if (value === void 0) {
+    throw new Error(`Context '${context}' not defined`);
+  }
+  return value;
+}
+function subscribeContext(target, context, callback) {
+  let unsubscribeFunction = null;
+  console.log("context:subscribe", context, target);
+  const protocolCallback = (value, unsubscribe) => {
+    if (unsubscribe) {
+      unsubscribeFunction = unsubscribe;
+    }
+    callback(value);
+  };
+  const ev = new ContextRequestEvent(context, protocolCallback, true);
+  target.dispatchEvent(ev);
+  return () => {
+    if (unsubscribeFunction) {
+      unsubscribeFunction();
+    }
+  };
+}
+class ContextRoot extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "store", /* @__PURE__ */ new Map());
+    __publicField(this, "callbacks", /* @__PURE__ */ new Map());
+  }
+  connectedCallback() {
+    this.addEventListener("context-provide", (ev) => {
+      ev.stopPropagation();
+      console.log("context-root:provide", ev.context, ev.value);
+      this.store.set(ev.context, ev.value);
+      const registeredCallbacks = this.callbacks.get(ev.context) ?? [];
+      console.log("callbacks", registeredCallbacks);
+      registeredCallbacks.forEach((cb) => {
+        const unsubscribe = () => {
+          const callbacks = this.callbacks.get(ev.context);
+          if (callbacks) {
+            const cbIndex = callbacks.indexOf(cb);
+            if (cbIndex > -1) {
+              callbacks.splice(cbIndex, 1);
+            }
+          }
+          console.log("context-root:unsubscribed", ev.context);
+        };
+        cb(ev.value, unsubscribe);
+      });
+    });
+    this.addEventListener("context-request", (ev) => {
+      ev.stopPropagation();
+      console.log("context-root:request", ev.context, ev);
+      const storedValue = this.store.get(ev.context);
+      if (ev.subscribe) {
+        let callbacks = this.callbacks.get(ev.context);
+        if (!callbacks) {
+          callbacks = [];
+          this.callbacks.set(ev.context, callbacks);
+        }
+        const unsubscribe = () => {
+          const currentCallbacks = this.callbacks.get(ev.context);
+          if (currentCallbacks) {
+            const index = currentCallbacks.indexOf(ev.callback);
+            if (index > -1) {
+              currentCallbacks.splice(index, 1);
+            }
+          }
+          console.log("context-root:unsubscribed", ev.context);
+        };
+        callbacks.push(ev.callback);
+        if (storedValue !== void 0) {
+          ev.callback(storedValue, unsubscribe);
+        }
+      } else {
+        if (storedValue !== void 0) {
+          ev.callback(storedValue);
+        } else {
+          console.warn("Context not present in store: " + String(ev.context));
+        }
+      }
+    });
+    console.log("context-root:ready");
+  }
+}
+var i = Symbol.for("preact-signals");
+function t() {
+  if (!(s > 1)) {
+    var i2, t2 = false;
+    while (void 0 !== h) {
+      var r = h;
+      h = void 0;
+      f++;
+      while (void 0 !== r) {
+        var o2 = r.o;
+        r.o = void 0;
+        r.f &= -3;
+        if (!(8 & r.f) && c(r)) try {
+          r.c();
+        } catch (r2) {
+          if (!t2) {
+            i2 = r2;
+            t2 = true;
+          }
+        }
+        r = o2;
+      }
+    }
+    f = 0;
+    s--;
+    if (t2) throw i2;
+  } else s--;
+}
+var o = void 0;
+function n(i2) {
+  var t2 = o;
+  o = void 0;
+  try {
+    return i2();
+  } finally {
+    o = t2;
+  }
+}
+var h = void 0, s = 0, f = 0, v = 0;
+function e(i2) {
+  if (void 0 !== o) {
+    var t2 = i2.n;
+    if (void 0 === t2 || t2.t !== o) {
+      t2 = { i: 0, S: i2, p: o.s, n: void 0, t: o, e: void 0, x: void 0, r: t2 };
+      if (void 0 !== o.s) o.s.n = t2;
+      o.s = t2;
+      i2.n = t2;
+      if (32 & o.f) i2.S(t2);
+      return t2;
+    } else if (-1 === t2.i) {
+      t2.i = 0;
+      if (void 0 !== t2.n) {
+        t2.n.p = t2.p;
+        if (void 0 !== t2.p) t2.p.n = t2.n;
+        t2.p = o.s;
+        t2.n = void 0;
+        o.s.n = t2;
+        o.s = t2;
+      }
+      return t2;
+    }
+  }
+}
+function u(i2, t2) {
+  this.v = i2;
+  this.i = 0;
+  this.n = void 0;
+  this.t = void 0;
+  this.W = null == t2 ? void 0 : t2.watched;
+  this.Z = null == t2 ? void 0 : t2.unwatched;
+}
+u.prototype.brand = i;
+u.prototype.h = function() {
+  return true;
+};
+u.prototype.S = function(i2) {
+  var t2 = this, r = this.t;
+  if (r !== i2 && void 0 === i2.e) {
+    i2.x = r;
+    this.t = i2;
+    if (void 0 !== r) r.e = i2;
+    else n(function() {
+      var i3;
+      null == (i3 = t2.W) || i3.call(t2);
+    });
+  }
+};
+u.prototype.U = function(i2) {
+  var t2 = this;
+  if (void 0 !== this.t) {
+    var r = i2.e, o2 = i2.x;
+    if (void 0 !== r) {
+      r.x = o2;
+      i2.e = void 0;
+    }
+    if (void 0 !== o2) {
+      o2.e = r;
+      i2.x = void 0;
+    }
+    if (i2 === this.t) {
+      this.t = o2;
+      if (void 0 === o2) n(function() {
+        var i3;
+        null == (i3 = t2.Z) || i3.call(t2);
+      });
+    }
+  }
+};
+u.prototype.subscribe = function(i2) {
+  var t2 = this;
+  return E(function() {
+    var r = t2.value, n2 = o;
+    o = void 0;
+    try {
+      i2(r);
+    } finally {
+      o = n2;
+    }
+  });
+};
+u.prototype.valueOf = function() {
+  return this.value;
+};
+u.prototype.toString = function() {
+  return this.value + "";
+};
+u.prototype.toJSON = function() {
+  return this.value;
+};
+u.prototype.peek = function() {
+  var i2 = o;
+  o = void 0;
+  try {
+    return this.value;
+  } finally {
+    o = i2;
+  }
+};
+Object.defineProperty(u.prototype, "value", { get: function() {
+  var i2 = e(this);
+  if (void 0 !== i2) i2.i = this.i;
+  return this.v;
+}, set: function(i2) {
+  if (i2 !== this.v) {
+    if (f > 100) throw new Error("Cycle detected");
+    this.v = i2;
+    this.i++;
+    v++;
+    s++;
+    try {
+      for (var r = this.t; void 0 !== r; r = r.x) r.t.N();
+    } finally {
+      t();
+    }
+  }
+} });
+function d(i2, t2) {
+  return new u(i2, t2);
+}
+function c(i2) {
+  for (var t2 = i2.s; void 0 !== t2; t2 = t2.n) if (t2.S.i !== t2.i || !t2.S.h() || t2.S.i !== t2.i) return true;
+  return false;
+}
+function a(i2) {
+  for (var t2 = i2.s; void 0 !== t2; t2 = t2.n) {
+    var r = t2.S.n;
+    if (void 0 !== r) t2.r = r;
+    t2.S.n = t2;
+    t2.i = -1;
+    if (void 0 === t2.n) {
+      i2.s = t2;
+      break;
+    }
+  }
+}
+function l(i2) {
+  var t2 = i2.s, r = void 0;
+  while (void 0 !== t2) {
+    var o2 = t2.p;
+    if (-1 === t2.i) {
+      t2.S.U(t2);
+      if (void 0 !== o2) o2.n = t2.n;
+      if (void 0 !== t2.n) t2.n.p = o2;
+    } else r = t2;
+    t2.S.n = t2.r;
+    if (void 0 !== t2.r) t2.r = void 0;
+    t2 = o2;
+  }
+  i2.s = r;
+}
+function y(i2, t2) {
+  u.call(this, void 0);
+  this.x = i2;
+  this.s = void 0;
+  this.g = v - 1;
+  this.f = 4;
+  this.W = null == t2 ? void 0 : t2.watched;
+  this.Z = null == t2 ? void 0 : t2.unwatched;
+}
+y.prototype = new u();
+y.prototype.h = function() {
+  this.f &= -3;
+  if (1 & this.f) return false;
+  if (32 == (36 & this.f)) return true;
+  this.f &= -5;
+  if (this.g === v) return true;
+  this.g = v;
+  this.f |= 1;
+  if (this.i > 0 && !c(this)) {
+    this.f &= -2;
+    return true;
+  }
+  var i2 = o;
+  try {
+    a(this);
+    o = this;
+    var t2 = this.x();
+    if (16 & this.f || this.v !== t2 || 0 === this.i) {
+      this.v = t2;
+      this.f &= -17;
+      this.i++;
+    }
+  } catch (i3) {
+    this.v = i3;
+    this.f |= 16;
+    this.i++;
+  }
+  o = i2;
+  l(this);
+  this.f &= -2;
+  return true;
+};
+y.prototype.S = function(i2) {
+  if (void 0 === this.t) {
+    this.f |= 36;
+    for (var t2 = this.s; void 0 !== t2; t2 = t2.n) t2.S.S(t2);
+  }
+  u.prototype.S.call(this, i2);
+};
+y.prototype.U = function(i2) {
+  if (void 0 !== this.t) {
+    u.prototype.U.call(this, i2);
+    if (void 0 === this.t) {
+      this.f &= -33;
+      for (var t2 = this.s; void 0 !== t2; t2 = t2.n) t2.S.U(t2);
+    }
+  }
+};
+y.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 6;
+    for (var i2 = this.t; void 0 !== i2; i2 = i2.x) i2.t.N();
+  }
+};
+Object.defineProperty(y.prototype, "value", { get: function() {
+  if (1 & this.f) throw new Error("Cycle detected");
+  var i2 = e(this);
+  this.h();
+  if (void 0 !== i2) i2.i = this.i;
+  if (16 & this.f) throw this.v;
+  return this.v;
+} });
+function w(i2, t2) {
+  return new y(i2, t2);
+}
+function _(i2) {
+  var r = i2.u;
+  i2.u = void 0;
+  if ("function" == typeof r) {
+    s++;
+    var n2 = o;
+    o = void 0;
+    try {
+      r();
+    } catch (t2) {
+      i2.f &= -2;
+      i2.f |= 8;
+      b(i2);
+      throw t2;
+    } finally {
+      o = n2;
+      t();
+    }
+  }
+}
+function b(i2) {
+  for (var t2 = i2.s; void 0 !== t2; t2 = t2.n) t2.S.U(t2);
+  i2.x = void 0;
+  i2.s = void 0;
+  _(i2);
+}
+function g(i2) {
+  if (o !== this) throw new Error("Out-of-order effect");
+  l(this);
+  o = i2;
+  this.f &= -2;
+  if (8 & this.f) b(this);
+  t();
+}
+function p(i2) {
+  this.x = i2;
+  this.u = void 0;
+  this.s = void 0;
+  this.o = void 0;
+  this.f = 32;
+}
+p.prototype.c = function() {
+  var i2 = this.S();
+  try {
+    if (8 & this.f) return;
+    if (void 0 === this.x) return;
+    var t2 = this.x();
+    if ("function" == typeof t2) this.u = t2;
+  } finally {
+    i2();
+  }
+};
+p.prototype.S = function() {
+  if (1 & this.f) throw new Error("Cycle detected");
+  this.f |= 1;
+  this.f &= -9;
+  _(this);
+  a(this);
+  s++;
+  var i2 = o;
+  o = this;
+  return g.bind(this, i2);
+};
+p.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 2;
+    this.o = h;
+    h = this;
+  }
+};
+p.prototype.d = function() {
+  this.f |= 8;
+  if (!(1 & this.f)) b(this);
+};
+p.prototype.dispose = function() {
+  this.d();
+};
+function E(i2) {
+  var t2 = new p(i2);
+  try {
+    t2.c();
+  } catch (i3) {
+    t2.d();
+    throw i3;
+  }
+  var r = t2.d.bind(t2);
+  r[Symbol.dispose] = r;
+  return r;
+}
+function isEditorPreview() {
+  if (typeof window === "undefined") return false;
+  return new URLSearchParams(window.location.search).get("editor") === "true";
+}
+function hasRenderedContent(scope) {
+  var _a;
+  for (const child of scope.children) {
+    if (!(child instanceof HTMLElement)) {
+      continue;
+    }
+    const display = (_a = child.ownerDocument.defaultView) == null ? void 0 : _a.getComputedStyle(child).display;
+    if (display === "contents") {
+      if (hasRenderedContent(child)) {
+        return true;
+      }
+      continue;
+    }
+    if (child.checkVisibility()) {
+      return true;
+    }
+  }
+  return false;
+}
+function attachEmptyTracking(host, scope) {
+  let observer = null;
+  let disposed = false;
+  queueMicrotask(() => {
+    if (disposed) return;
+    const observed = scope ?? host.shadowRoot ?? host;
+    const sync = () => host.toggleAttribute("data-empty", !hasRenderedContent(observed));
+    observer = new MutationObserver(sync);
+    observer.observe(observed, { childList: true, subtree: true });
+    sync();
+  });
+  return () => {
+    disposed = true;
+    observer == null ? void 0 : observer.disconnect();
+    observer = null;
+  };
+}
+function serializeBlocks(blocks) {
+  return blocks.map((block) => serializeBlock(block));
+}
+function serializeBlock(block) {
+  return {
+    id: block.id,
+    type: block.type,
+    props: JSON.parse(JSON.stringify(block.props)),
+    slots: Object.fromEntries(
+      Object.entries(block.slots ?? {}).map(([key, value]) => [
+        key,
+        Array.isArray(value) ? value.map(
+          (v2) => typeof v2 === "string" ? v2 : serializeBlock(v2)
+        ) : typeof value === "string" ? value : serializeBlock(value)
+      ])
+    )
+  };
+}
+function createSelectedBlock() {
+  const selected = d(null);
+  function setSelection(block) {
+    selected.value = null;
+    selected.value = block;
+  }
+  function clearSelection(block) {
+    var _a;
+    if (block == null || ((_a = selected.value) == null ? void 0 : _a.id) === block.id) {
+      selected.value = null;
+    }
+  }
+  return { selected, setSelection, clearSelection };
+}
+const SelectedBlockContext = createContext("selectedBlock");
+const blockDefinitions = (() => {
+  if (typeof window !== "undefined") {
+    window._juoBlocks = window._juoBlocks || /* @__PURE__ */ new Map();
+    return window._juoBlocks;
+  }
+  return /* @__PURE__ */ new Map();
+})();
+class BlockWrapperEvent extends Event {
+  constructor(block, callback) {
+    super("juo:block-wrapper-render", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.block = block;
+    this.callback = callback;
+  }
+}
+function withWrapper(fn) {
+  let wrapper = null;
+  return (block) => {
+    var _a;
+    let rendered;
+    try {
+      rendered = fn(block);
+    } catch (error) {
+      reportBlockError(error, {
+        site: "block.withWrapper",
+        block: { id: block.id, type: block.type, definition: block.definition },
+        keys: {
+          props: Object.keys(block.props ?? {}),
+          slots: Object.keys(block.slots ?? {})
+        }
+      });
+      rendered = createStubDefinition(block.type).render(block);
+    }
+    if (wrapper === null) {
+      if (isEditorPreview()) {
+        wrapper = document.createElement("juo-editor-block-wrapper");
+        wrapper.setAttribute("data-block-id", block.id);
+        (_a = wrapper.setBlock) == null ? void 0 : _a.call(wrapper, block);
+        wrapper.appendChild(rendered);
+      } else {
+        const evt = new BlockWrapperEvent(block, (evtWrapper) => {
+          wrapper = evtWrapper;
+        });
+        document.dispatchEvent(evt);
+      }
+    }
+    if (!wrapper) {
+      return rendered;
+    }
+    wrapper.replaceChildren(rendered);
+    return wrapper;
+  };
+}
+const registerBlockListeners = [];
+function registerBlock(block) {
+  blockDefinitions.set(block.name, block);
+  stubDefinitionCache.delete(block.name);
+  registerBlockListeners.forEach((cb) => cb(block.name, block));
+}
+function onRegisterBlock(cb) {
+  registerBlockListeners.push(cb);
+  return () => {
+    const idx = registerBlockListeners.indexOf(cb);
+    if (idx >= 0) registerBlockListeners.splice(idx, 1);
+  };
+}
+function defineBlock(name, opts) {
+  const definition = {
+    name,
+    displayName: opts.displayName,
+    group: opts.group,
+    schema: opts.schema,
+    initialValue: opts.initialValue,
+    render: opts.renderer,
+    presets: opts.presets,
+    locales: opts.locales
+  };
+  return definition;
+}
+function defineBlockRuntime(name, opts) {
+  const definition = {
+    name,
+    displayName: opts.displayName,
+    group: opts.group,
+    schema: {},
+    initialValue() {
+      throw new Error("Initial value cannot be called in runtime mode");
+    },
+    render: opts.renderer
+  };
+  return definition;
+}
+function getDefinedBlocks() {
+  return [...blockDefinitions.values()];
+}
+function createCeRenderer(name) {
+  function renderSlots(slots, block) {
+    if (!slots) {
+      return slots;
+    }
+    return Object.entries(slots).flatMap(([key, value]) => {
+      const values = Array.isArray(value) ? value : [value];
+      return values.flatMap((value2) => {
+        if (typeof value2 === "string") {
+          const el = document.createElement("span");
+          if (key !== "default") {
+            el.slot = key;
+          }
+          el.innerText = value2;
+          return [el];
+        }
+        try {
+          const el = value2.definition.render({
+            ...value2,
+            props: {
+              ...value2.props,
+              parentProps: block.props
+            }
+          });
+          if (key !== "default") {
+            el.slot = key;
+          }
+          return [el];
+        } catch (error) {
+          reportBlockError(error, {
+            site: "block.createCeRenderer.renderSlots",
+            block: { id: value2.id, type: value2.type, definition: value2.definition },
+            extra: {
+              parentBlockId: block.id,
+              parentBlockType: block.type,
+              slotKey: key
+            }
+          });
+          return [];
+        }
+      });
+    });
+  }
+  return (block) => {
+    const el = document.createElement(name);
+    el.setAttribute("data-block-id", block.id);
+    el.setAttribute("data-block-type", block.type);
+    Object.entries(block.props).forEach(([key, value]) => {
+      el[key] = value;
+    });
+    el.replaceChildren(...renderSlots(block.slots, block));
+    attachEmptyTracking(el);
+    return el;
+  };
+}
+const stubDefinitionCache = /* @__PURE__ */ new Map();
+function createStubDefinition(name) {
+  const cached = stubDefinitionCache.get(name);
+  if (cached) return cached;
+  const stub = {
+    name,
+    group: "internal",
+    schema: {},
+    initialValue: { props: {}, slots: {} },
+    __stub: true,
+    render() {
+      const el = document.createElement("div");
+      el.dataset.stubBlock = name;
+      if (isEditorPreview()) {
+        el.textContent = `Block definition not found: ${name}`;
+      } else {
+        el.style.display = "none";
+      }
+      return el;
+    }
+  };
+  stubDefinitionCache.set(name, stub);
+  reportBlockWarning(`Block definition '${name}' not found`, {
+    site: "block.createStubDefinition",
+    block: { id: "(none)", type: name }
+  });
+  console.warn(
+    `[juo/blocks] Block definition '${name}' not found. This block may have been removed or renamed. Rendering a hidden stub.`
+  );
+  return stub;
+}
+function isStubDefinition(definition) {
+  return definition.__stub === true;
+}
+function backfillInstanceDefaults(block) {
+  if (Object.keys(block.props ?? {}).length > 0) return false;
+  if (Object.keys(block.slots ?? {}).length > 0) return false;
+  if (isStubDefinition(block.definition)) return false;
+  let defaults;
+  try {
+    const iv = block.definition.initialValue;
+    defaults = (typeof iv === "function" ? iv() : iv) ?? {};
+  } catch (error) {
+    reportBlockError(error, {
+      site: "block.backfillInstanceDefaults",
+      block: { id: block.id, type: block.type, definition: block.definition }
+    });
+    return false;
+  }
+  const propsDefault = defaults.props ?? {};
+  const slotsDefault = defaults.slots ?? {};
+  const hasProps = Object.keys(propsDefault).length > 0;
+  const hasSlots = Object.keys(slotsDefault).length > 0;
+  if (!hasProps && !hasSlots) return false;
+  if (hasProps) Object.assign(block.props, propsDefault);
+  if (hasSlots) Object.assign(block.slots, slotsDefault);
+  return true;
+}
+function getDefinitionByName(name) {
+  const definition = blockDefinitions.get(name);
+  if (definition != null) {
+    return definition;
+  }
+  return createStubDefinition(name);
+}
+function createBlockInstance(name, opts) {
+  const initialValue = (() => {
+    const value = getDefinitionByName(name).initialValue ?? {};
+    if (typeof value === "function") {
+      return value();
+    }
+    return value;
+  })();
+  if ((opts == null ? void 0 : opts.props) == null && initialValue == null) {
+    const error = new Error(
+      `Block '${name}' cannot be created without value in runtime mode`
+    );
+    reportBlockError(error, {
+      site: "block.createBlockInstance",
+      block: { id: "(none)", type: name }
+    });
+    throw error;
+  }
+  const slots = {
+    ...initialValue.slots,
+    ...(opts == null ? void 0 : opts.slots) ?? {}
+  };
+  const props = {
+    ...initialValue.props ?? {},
+    ...(opts == null ? void 0 : opts.props) ?? {}
+  };
+  return {
+    // TODO: This should be unique
+    id: (opts == null ? void 0 : opts.id) ?? Math.round(1e3 * Math.random()).toString(10),
+    type: name,
+    props,
+    slots,
+    get definition() {
+      return getDefinitionByName(name);
+    }
+  };
+}
+function createBlockInstanceFromObject(input) {
+  const { id, type, props, slots } = input;
+  return createBlockInstance(type, {
+    props,
+    slots: Object.fromEntries(
+      Object.entries(slots).map(([key, value]) => [
+        key,
+        (Array.isArray(value) ? value : [value]).map(
+          (child) => createBlockInstanceFromObject(child)
+        )
+      ])
+    ),
+    id
+  });
+}
+function createBlockInstanceFromJSON(input) {
+  try {
+    return createBlockInstanceFromObject(JSON.parse(input));
+  } catch (error) {
+    reportBlockError(error, {
+      site: "block.createBlockInstanceFromJSON",
+      extra: { inputLength: input.length }
+    });
+    throw error;
+  }
+}
+const DEFAULT_GLOBAL_STYLES = {
+  volume: "comfort",
+  style: "ghost",
+  corners: "round",
+  buttonCorners: "round",
+  thumbnailCorners: "circle",
+  theme: "preset",
+  themeType: "neutral",
+  colors: {
+    accent: "#000000",
+    secondary: "#000000",
+    tint: "#111111",
+    callout: "#F5F5F5",
+    success: "#287a25",
+    error: "#a93c3c",
+    information: "#0075a3",
+    warning: "#8a5e00",
+    background: "#FFFFFF"
+  }
+};
+const ThemeStateContext = createContext("theme-state");
+function normalizeLocale(locale) {
+  return locale.trim().toLowerCase().split("-")[0] || "en";
+}
+function toStringRecord$1(input) {
+  if (input == null) return {};
+  return Object.fromEntries(
+    Object.entries(input).filter(([, value]) => typeof value === "string")
+  );
+}
+function parseBlockLocaleFile(file) {
+  if (file == null) {
+    return { defaults: {}, modes: {} };
+  }
+  const entries = Object.entries(file).filter(
+    ([key, value]) => key !== "overrides" && typeof value === "string"
+  );
+  const topLevel = Object.fromEntries(entries);
+  const overrides = toStringRecord$1(file.overrides);
+  return {
+    defaults: { ...topLevel, ...overrides },
+    modes: {
+      ...Object.fromEntries(
+        Object.keys(topLevel).map((key) => [key, "default"])
+      ),
+      ...Object.fromEntries(
+        Object.keys(overrides).map((key) => [key, "override"])
+      )
+    }
+  };
+}
+function indexOverrides(overrides) {
+  const indexed = {
+    theme: {},
+    blocks: {}
+  };
+  for (const item of overrides) {
+    if (item.scope.kind === "theme") {
+      indexed.theme[item.key] = item.value;
+      continue;
+    }
+    if (indexed.blocks[item.scope.blockId] == null) {
+      indexed.blocks[item.scope.blockId] = {};
+    }
+    indexed.blocks[item.scope.blockId][item.key] = item.value;
+  }
+  return indexed;
+}
+function createThemeState(deps) {
+  var _a;
+  const surfaces = {
+    page: { blocks: d([]) },
+    overlay: { blocks: d([]) }
+  };
+  const locale = d("en");
+  const catalogs = d(null);
+  const globalStyles = d(
+    deps.initialGlobalStyles ?? DEFAULT_GLOBAL_STYLES
+  );
+  function setGlobalStyles(styles) {
+    globalStyles.value = styles;
+  }
+  async function collectBlockDefaults(loc) {
+    const nextDefaults = {};
+    const nextModes = {};
+    for (const block of getDefinedBlocks()) {
+      if (block.locales == null) continue;
+      let file = null;
+      try {
+        file = await block.locales.load(loc);
+      } catch {
+        file = null;
+      }
+      const parsed = parseBlockLocaleFile(file);
+      nextDefaults[block.name] = parsed.defaults;
+      nextModes[block.name] = parsed.modes;
+    }
+    return { defaults: nextDefaults, modes: nextModes };
+  }
+  async function setLocale(nextLocaleRaw) {
+    var _a2;
+    const nextLocale = normalizeLocale(nextLocaleRaw);
+    const [blockData, loadedOverrides] = await Promise.all([
+      collectBlockDefaults(nextLocale),
+      ((_a2 = deps.translations) == null ? void 0 : _a2.resolveTranslations(nextLocale).catch(() => [])) ?? Promise.resolve([])
+    ]);
+    const overrides = loadedOverrides.filter(
+      (item) => normalizeLocale(item.locale) === nextLocale
+    );
+    const indexed = indexOverrides(overrides);
+    catalogs.value = {
+      theme: {
+        defaults: {},
+        overrides: indexed.theme
+      },
+      blocks: {
+        defaults: blockData.defaults,
+        modes: blockData.modes,
+        overrides: indexed.blocks
+      }
+    };
+    locale.value = nextLocale;
+  }
+  async function resolve(surface, path) {
+    var _a2, _b, _c, _d;
+    surfaces[surface].blocks.value = [];
+    const stored = await deps.resolve(surface, path);
+    if (stored != null) {
+      surfaces[surface].blocks.value = stored.blocks.flatMap((block) => {
+        try {
+          return [createBlockInstanceFromObject(block)];
+        } catch (error) {
+          reportBlockError(error, {
+            site: "theme-state.resolve.hydrate",
+            extra: {
+              surface,
+              path,
+              blockType: typeof (block == null ? void 0 : block.type) === "string" ? block.type : "(unknown)"
+            }
+          });
+          return [];
+        }
+      });
+      return stored;
+    }
+    const blockToUse = surface === "page" ? (_b = (_a2 = deps.routerService) == null ? void 0 : _a2.getPages().find((p2) => p2.path === path)) == null ? void 0 : _b.block : (_c = getDefinedBlocks().find((b2) => b2.name === path)) == null ? void 0 : _c.name;
+    if (blockToUse != null) {
+      const instance = createBlockInstance(blockToUse);
+      surfaces[surface].blocks.value = [instance];
+      const serialized = serializeBlocks([instance]);
+      (_d = deps.upsertState) == null ? void 0 : _d.call(deps, surface, path, serialized);
+      return { blocks: serialized };
+    }
+    return { blocks: [] };
+  }
+  onRegisterBlock(async (_2, block) => {
+    if (block.locales == null || catalogs.value == null) return;
+    const localeAtLoadStart = locale.value;
+    let file = null;
+    try {
+      file = await block.locales.load(localeAtLoadStart);
+    } catch {
+      file = null;
+    }
+    if (catalogs.value == null || locale.value !== localeAtLoadStart) return;
+    const parsed = parseBlockLocaleFile(file);
+    const current = catalogs.value;
+    catalogs.value = {
+      ...current,
+      blocks: {
+        ...current.blocks,
+        defaults: {
+          ...current.blocks.defaults,
+          [block.name]: parsed.defaults
+        },
+        modes: {
+          ...current.blocks.modes,
+          [block.name]: parsed.modes
+        }
+      }
+    };
+  });
+  (_a = deps.routerService) == null ? void 0 : _a.subscribe(({ path }) => {
+    resolve("page", path);
+  });
+  return {
+    page: surfaces.page,
+    overlay: surfaces.overlay,
+    locales: { locale, catalogs, setLocale },
+    globalStyles,
+    setGlobalStyles,
+    resolve
+  };
+}
+const TranslationContext = createContext("translation");
+function toStringRecord(input) {
+  if (input == null) return {};
+  return Object.fromEntries(
+    Object.entries(input).filter(([, value]) => typeof value === "string")
+  );
+}
+function createTranslationService(locales, options = {}) {
+  const loadedThemeDefaults = d({});
+  if (options.loadDefaultTranslations) {
+    let loadVersion = 0;
+    E(() => {
+      const locale = locales.locale.value;
+      const currentVersion = ++loadVersion;
+      void options.loadDefaultTranslations(locale).then((result) => toStringRecord(result)).catch(() => ({})).then((result) => {
+        if (currentVersion !== loadVersion) return;
+        loadedThemeDefaults.value = result;
+      });
+    });
+  }
+  return {
+    locale: locales.locale,
+    resolve(blockType, blockId, key) {
+      var _a, _b, _c;
+      const data = locales.catalogs.value;
+      const themeDefault = loadedThemeDefaults.value[key] ?? (data == null ? void 0 : data.theme.defaults[key]);
+      if (data == null) {
+        return themeDefault ?? key;
+      }
+      if (blockId && ((_a = data.blocks.overrides[blockId]) == null ? void 0 : _a[key]) !== void 0) {
+        return data.blocks.overrides[blockId][key];
+      }
+      const blockDefault = blockType != null ? (_b = data.blocks.defaults[blockType]) == null ? void 0 : _b[key] : void 0;
+      const mode = (blockType != null ? (_c = data.blocks.modes[blockType]) == null ? void 0 : _c[key] : void 0) ?? "override";
+      if (blockDefault !== void 0 && mode === "override") {
+        return blockDefault;
+      }
+      if (data.theme.overrides[key] !== void 0) {
+        return data.theme.overrides[key];
+      }
+      if (themeDefault !== void 0) {
+        return themeDefault;
+      }
+      if (blockDefault !== void 0) {
+        return blockDefault;
+      }
+      return key;
+    }
+  };
+}
+function getDefaultBlockForAction(actionType, actionConfig, blockId) {
+  const blockName = `action:${actionType}`;
+  const definedBlocks = getDefinedBlocks();
+  const exists = definedBlocks.some((b2) => b2.name === blockName);
+  if (!exists) {
+    throw new Error(
+      `No default block registered for action type "${actionType}". Expected a block named "${blockName}" to be registered in blocks-extensions.`
+    );
+  }
+  return createBlockInstance(blockName, { props: actionConfig, id: blockId });
+}
+function hasDefaultBlockForAction(actionType) {
+  const blockName = `action:${actionType}`;
+  return getDefinedBlocks().some((b2) => b2.name === blockName);
+}
+const WorkflowServiceContext = createContext("services/workflow");
+function createWorkflowApiAdapter(sdk) {
+  return {
+    async start(flowType, context, workflowId, dryRun) {
+      const { data } = await sdk.post("/customer/v1/workflows/start", {
+        flowType,
+        context,
+        ...workflowId ? { workflowId } : {},
+        ...dryRun ? { dryRun: true } : {}
+      });
+      return data;
+    },
+    async respond(runId, interactionId, responseType, responseData, expectedRunVersion, eventId) {
+      const { data } = await sdk.post(
+        "/customer/v1/workflows/{runId}/respond",
+        {
+          runId,
+          interactionId,
+          responseType,
+          responseData,
+          expectedRunVersion,
+          eventId
+        }
+      );
+      return data;
+    },
+    async getState(runId) {
+      const { data } = await sdk.get("/customer/v1/workflows/{runId}", {
+        runId
+      });
+      return data;
+    },
+    async cancel(runId) {
+      const { data } = await sdk.post("/customer/v1/workflows/{runId}/cancel", {
+        runId
+      });
+      return data;
+    }
+  };
+}
+function createWorkflowService(deps) {
+  const { api } = deps;
+  const editor = createEditorBridge();
+  const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+  const previewWorkflowTrigger = (urlParams == null ? void 0 : urlParams.get("trigger")) ?? null;
+  const previewStepId = (urlParams == null ? void 0 : urlParams.get("step-id")) ?? null;
+  const previewWorkflowId = (urlParams == null ? void 0 : urlParams.get("workflow-id")) ?? null;
+  const isEditorMode = editor.isEditorMode || previewWorkflowTrigger !== null;
+  const _state = d({
+    status: "idle",
+    flowType: null,
+    workflowId: null,
+    workflowVersion: null,
+    runId: null,
+    runVersion: null,
+    currentStepId: null,
+    currentInteraction: null,
+    error: null,
+    result: null,
+    flowParams: null,
+    invalidatedResources: [],
+    outcome: null,
+    completionData: null,
+    dryRun: null,
+    firstPollReason: null
+  });
+  const _backendInteractionId = d(null);
+  const _registeredRootBlocks = /* @__PURE__ */ new Set();
+  const isActive = w(() => _state.value.status === "active");
+  const isLoading = w(() => _state.value.status === "loading");
+  const isCompleted = w(() => _state.value.status === "completed");
+  const hasError = w(() => _state.value.status === "error");
+  const currentInteraction = w(() => _state.value.currentInteraction);
+  const canRespond = w(() => {
+    const interaction = _state.value.currentInteraction;
+    const backendId = _backendInteractionId.value;
+    if (!interaction || !backendId) return false;
+    return interaction.interactionId === backendId;
+  });
+  const currentStepInfo = w(() => {
+    const interaction = _state.value.currentInteraction;
+    if (!interaction) return null;
+    const actionConfig = deps.shopCurrencyCode ? { ...interaction.actionConfig, currency: deps.shopCurrencyCode } : interaction.actionConfig;
+    return {
+      interactionId: interaction.interactionId,
+      stepId: interaction.stepId,
+      actionType: interaction.actionType,
+      actionConfig,
+      availableResponses: interaction.availableResponses
+    };
+  });
+  function updateState(updates) {
+    _state.value = { ..._state.value, ...updates };
+  }
+  function hashString(value) {
+    let hash = 2166136261;
+    for (let index = 0; index < value.length; index += 1) {
+      hash ^= value.charCodeAt(index);
+      hash = Math.imul(hash, 16777619);
+    }
+    return (hash >>> 0).toString(36);
+  }
+  function shortenId(value, slugLength = 6) {
+    const compact = value.toLowerCase().replace(/[^a-z0-9]/g, "");
+    const slug = (compact || "id").slice(0, slugLength);
+    return `${slug}-${hashString(value)}`;
+  }
+  function createStableStepBlockId(workflowId, stepId) {
+    return `wf-${shortenId(workflowId)}-${shortenId(stepId)}`;
+  }
+  function handleFlowResponse(data) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const mergedInvalidated = [
+      ..._state.value.invalidatedResources,
+      ...data.invalidatedResources ?? []
+    ];
+    if (data.status === "waiting_interaction") {
+      const currentStepId = ((_a = data.pendingInteraction) == null ? void 0 : _a.stepId) ?? (isEditorMode ? (_c = (_b = data.interactiveSteps) == null ? void 0 : _b[0]) == null ? void 0 : _c.stepId : null);
+      _backendInteractionId.value = ((_d = data.pendingInteraction) == null ? void 0 : _d.interactionId) ?? null;
+      const isInitialResponse = _state.value.runId == null;
+      updateState({
+        status: "active",
+        workflowId: data.workflowId,
+        workflowVersion: data.workflowVersion,
+        runId: data.runId,
+        runVersion: data.runVersion,
+        currentStepId,
+        currentInteraction: data.pendingInteraction,
+        invalidatedResources: mergedInvalidated,
+        outcome: null
+      });
+      if (editor.isEditorMode) {
+        const displayStepId = isInitialResponse && previewStepId && ((_e = data.interactiveSteps) == null ? void 0 : _e.some((s2) => s2.stepId === previewStepId)) ? previewStepId : currentStepId;
+        const overlayBlocks = deps.themeState.overlay.blocks.value;
+        const rootBlock = overlayBlocks[0];
+        const stepSlot = displayStepId ? (_f = rootBlock == null ? void 0 : rootBlock.slots) == null ? void 0 : _f[displayStepId] : null;
+        const stepBlock = Array.isArray(stepSlot) ? stepSlot[0] : null;
+        const blockId = stepBlock && typeof stepBlock === "object" && "id" in stepBlock ? stepBlock.id : null;
+        if (blockId) {
+          editor.sendMessage(
+            createSelectBlockMessage({ blockId }, blockId)
+          );
+        }
+      }
+    } else if (data.status === "completed") {
+      _backendInteractionId.value = null;
+      updateState({
+        status: "completed",
+        currentStepId: null,
+        currentInteraction: null,
+        runVersion: data.runVersion,
+        result: data.result || null,
+        invalidatedResources: mergedInvalidated,
+        outcome: data.outcome || null,
+        completionData: data.completionData || null
+      });
+    } else if (data.status === "failed") {
+      _backendInteractionId.value = null;
+      handleError(new Error(((_g = data.error) == null ? void 0 : _g.message) || "Flow failed"));
+    } else if (data.status === "cancelled") {
+      _backendInteractionId.value = null;
+      updateState({
+        status: "idle",
+        flowType: null,
+        workflowId: null,
+        workflowVersion: null,
+        runId: null,
+        runVersion: null,
+        currentStepId: null,
+        currentInteraction: null,
+        error: null,
+        result: null,
+        invalidatedResources: [],
+        outcome: null,
+        completionData: null,
+        firstPollReason: null
+      });
+    }
+  }
+  function handleError(error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    updateState({
+      status: "error",
+      error: message
+    });
+  }
+  function maybeApplyPreviewStep(flowType, data) {
+    var _a;
+    if (!previewWorkflowTrigger) return;
+    if (flowType !== previewWorkflowTrigger) return;
+    if (data.status !== "waiting_interaction") return;
+    const step = (_a = data.interactiveSteps) == null ? void 0 : _a.find(
+      (interactiveStep) => interactiveStep.stepId === previewStepId
+    );
+    if (!step) return;
+    updateState({
+      currentStepId: step.stepId,
+      currentInteraction: {
+        interactionId: `preview-${data.runId}-${step.stepId}`,
+        stepId: step.stepId,
+        actionType: step.actionType,
+        actionBehavior: "input",
+        actionConfig: step.actionConfig,
+        availableResponses: step.availableResponses,
+        presentedAt: /* @__PURE__ */ new Date()
+      }
+    });
+  }
+  function initWorkflowRootBlock(data) {
+    if (_registeredRootBlocks.has(data.workflowId)) {
+      return;
+    }
+    const allSteps = data.interactiveSteps ?? (data.pendingInteraction ? [
+      {
+        stepId: data.pendingInteraction.stepId,
+        actionType: data.pendingInteraction.actionType,
+        actionConfig: data.pendingInteraction.actionConfig,
+        availableResponses: data.pendingInteraction.availableResponses
+      }
+    ] : []);
+    const slotProperties = {};
+    for (const step of allSteps) {
+      slotProperties[step.stepId] = {};
+    }
+    const presets = {};
+    const baseLabelFor = (step) => {
+      var _a;
+      return ((_a = getDefinedBlocks().find((b2) => b2.name === `action:${step.actionType}`)) == null ? void 0 : _a.displayName) ?? step.stepId;
+    };
+    const totalCounts = /* @__PURE__ */ new Map();
+    for (const step of allSteps) {
+      const baseLabel = baseLabelFor(step);
+      totalCounts.set(baseLabel, (totalCounts.get(baseLabel) ?? 0) + 1);
+    }
+    const seenCounts = /* @__PURE__ */ new Map();
+    for (const step of allSteps) {
+      const baseLabel = baseLabelFor(step);
+      const occurrence = (seenCounts.get(baseLabel) ?? 0) + 1;
+      seenCounts.set(baseLabel, occurrence);
+      const isDuplicated = (totalCounts.get(baseLabel) ?? 0) > 1;
+      const label = isDuplicated ? `${baseLabel} (${occurrence})` : baseLabel;
+      presets[step.stepId] = {
+        label,
+        description: step.actionType,
+        state: step.stepId,
+        // @ts-expect-error Untyped
+        context: step
+      };
+    }
+    registerBlock(
+      defineBlock(`workflow:${data.workflowId}`, {
+        group: "workflow",
+        schema: {
+          type: "object",
+          properties: {
+            props: { type: "object" },
+            slots: {
+              type: "object",
+              properties: slotProperties
+            }
+          },
+          required: ["props", "slots"],
+          additionalProperties: true
+        },
+        initialValue: () => ({
+          props: {},
+          slots: Object.fromEntries(
+            allSteps.map((step) => [
+              step.stepId,
+              [
+                getDefaultBlockForAction(
+                  step.actionType,
+                  step.actionConfig,
+                  createStableStepBlockId(data.workflowId, step.stepId)
+                )
+              ]
+            ])
+          )
+        }),
+        presets,
+        renderer() {
+          return null;
+        }
+      })
+    );
+    _registeredRootBlocks.add(data.workflowId);
+  }
+  async function initWorkflowState(data) {
+    const { blocks } = await deps.themeState.resolve(
+      "overlay",
+      `workflow:${data.workflowId}`
+    );
+    if (blocks.length === 0) return;
+    editor.onBlockPresetChange(blocks[0].id, (preset) => {
+      if (!preset) {
+        return;
+      }
+      updateState({
+        // @ts-expect-error Untyped
+        currentStepId: preset.state,
+        // @ts-expect-error Untyped
+        currentInteraction: { ...preset == null ? void 0 : preset.context }
+      });
+    });
+  }
+  const service = {
+    // State signals (readonly)
+    state: _state,
+    /** True when the portal is running inside the Blocks Editor (editorMode dep
+     *  or ?trigger=... URL param). Consumers use this to suppress auto-start. */
+    isPreviewMode: isEditorMode,
+    // Computed signals
+    isActive,
+    isLoading,
+    isCompleted,
+    hasError,
+    canRespond,
+    currentInteraction,
+    currentStepInfo,
+    // Methods
+    async startFlow(flowType, context, workflowId) {
+      const isDryRun = isEditorMode;
+      updateState({
+        status: "loading",
+        error: null,
+        flowParams: context,
+        flowType,
+        dryRun: isDryRun,
+        firstPollReason: null
+      });
+      try {
+        const data = await api.start(
+          flowType,
+          context,
+          workflowId,
+          isDryRun || void 0
+        );
+        if (data.status === "no_workflow") {
+          service.reset();
+          return;
+        }
+        if (data.status === "completed_silently") {
+          updateState({
+            status: "completed",
+            currentStepId: null,
+            currentInteraction: null,
+            result: null,
+            invalidatedResources: data.invalidatedResources ?? [],
+            outcome: data.outcome || null,
+            completionData: data.completionData || null
+          });
+          return;
+        }
+        initWorkflowRootBlock(data);
+        await initWorkflowState(data);
+        handleFlowResponse(data);
+        maybeApplyPreviewStep(flowType, data);
+      } catch (error) {
+        handleError(error);
+      }
+    },
+    async respond(responseType, responseData) {
+      const { runId, runVersion, currentInteraction: currentInteraction2 } = _state.value;
+      if (!runId || !currentInteraction2) {
+        throw new Error("No active interaction to respond to");
+      }
+      updateState({ status: "loading" });
+      try {
+        const data = await api.respond(
+          runId,
+          currentInteraction2.interactionId,
+          responseType,
+          responseData,
+          runVersion ?? void 0
+        );
+        if (_state.value.firstPollReason == null && currentInteraction2.actionType === "poll") {
+          const reason = responseData == null ? void 0 : responseData.reason;
+          if (typeof reason === "string" && reason.length > 0) {
+            updateState({ firstPollReason: reason });
+          }
+        }
+        handleFlowResponse(data);
+      } catch (error) {
+        handleError(error);
+      }
+    },
+    async cancel() {
+      const { runId, status } = _state.value;
+      const isTerminal = status === "completed" || status === "error";
+      if (runId && !isTerminal) {
+        try {
+          const data = await api.cancel(runId);
+          if (data.outcome) {
+            updateState({
+              status: "completed",
+              flowType: null,
+              workflowId: null,
+              workflowVersion: null,
+              runId: null,
+              runVersion: null,
+              currentStepId: null,
+              currentInteraction: null,
+              error: null,
+              result: null,
+              flowParams: null,
+              invalidatedResources: data.invalidatedResources ?? [],
+              outcome: data.outcome || null,
+              dryRun: null
+            });
+            return;
+          }
+        } catch {
+        }
+      }
+      service.reset();
+    },
+    reset() {
+      _backendInteractionId.value = null;
+      updateState({
+        status: "idle",
+        flowType: null,
+        workflowId: null,
+        workflowVersion: null,
+        runId: null,
+        runVersion: null,
+        currentStepId: null,
+        currentInteraction: null,
+        error: null,
+        result: null,
+        flowParams: null,
+        invalidatedResources: [],
+        outcome: null,
+        completionData: null,
+        firstPollReason: null
+      });
+    },
+    async refresh() {
+      const { runId } = _state.value;
+      if (!runId) return;
+      try {
+        const data = await api.getState(runId);
+        handleFlowResponse(data);
+      } catch (error) {
+        handleError(error);
+      }
+    }
+  };
+  if (previewWorkflowTrigger) {
+    void service.startFlow(
+      previewWorkflowTrigger,
+      {},
+      previewWorkflowId ?? void 0
+    );
+  }
+  return service;
+}
+class JuoWorkflowElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "workflowService", null);
+    __publicField(this, "unsubscribeContext", null);
+    __publicField(this, "unsubscribeEffect", null);
+    /** Tracks which step is currently mounted to avoid unnecessary DOM teardown. */
+    __publicField(this, "renderedStepId", null);
+    /**
+     * Optional function to wrap rendered content (step blocks).
+     * Must be set before workflow becomes active for correct behavior.
+     */
+    __publicField(this, "blockWrapper", null);
+  }
+  connectedCallback() {
+    this.style.display = "contents";
+    this.unsubscribeContext = subscribeContext(
+      this,
+      WorkflowServiceContext,
+      (service) => {
+        this.workflowService = service;
+        this.setupSubscription();
+      }
+    );
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.unsubscribeContext) == null ? void 0 : _a.call(this);
+    (_b = this.unsubscribeEffect) == null ? void 0 : _b.call(this);
+    this.unsubscribeContext = null;
+    this.unsubscribeEffect = null;
+    this.renderedStepId = null;
+  }
+  setupSubscription() {
+    var _a;
+    if (!this.workflowService) return;
+    (_a = this.unsubscribeEffect) == null ? void 0 : _a.call(this);
+    this.unsubscribeEffect = E(() => {
+      var _a2, _b;
+      const status = ((_a2 = this.workflowService) == null ? void 0 : _a2.state.value.status) ?? "idle";
+      const stepInfo = (_b = this.workflowService) == null ? void 0 : _b.currentStepInfo.value;
+      const stepId = (stepInfo == null ? void 0 : stepInfo.stepId) ?? null;
+      queueMicrotask(() => {
+        if (this.isConnected) {
+          this.render(status, stepId);
+        }
+      });
+    });
+  }
+  render(status, stepId) {
+    var _a;
+    if ((status === "active" || status === "loading") && stepId) {
+      if (this.renderedStepId !== stepId) {
+        this.innerHTML = "";
+        this.renderedStepId = stepId;
+        const extensionRoot = document.createElement(
+          "juo-extension-root"
+        );
+        extensionRoot.setAttribute("surface", "overlay");
+        extensionRoot.setAttribute("name", stepId);
+        extensionRoot.blockWrapper = this.blockWrapper;
+        this.appendChild(extensionRoot);
+      }
+      return;
+    }
+    this.innerHTML = "";
+    this.renderedStepId = null;
+    if (status === "error") {
+      const error = ((_a = this.workflowService) == null ? void 0 : _a.state.value.error) ?? "Unknown error";
+      this.dispatchEvent(
+        new CustomEvent("juo-workflow-error", {
+          bubbles: true,
+          composed: true,
+          detail: { error }
+        })
+      );
+    }
+  }
+}
+if (typeof customElements !== "undefined" && !customElements.get("juo-workflow")) {
+  customElements.define("juo-workflow", JuoWorkflowElement);
+}
+export {
+  isEditorPreview as A,
+  BlockWrapperEvent as B,
+  ContextProvideEvent as C,
+  DEFAULT_GLOBAL_STYLES as D,
+  E,
+  isStubDefinition as F,
+  onRegisterBlock as G,
+  provideContext as H,
+  serializeBlocks as I,
+  subscribeContext as J,
+  n as K,
+  withWrapper as L,
+  ContextRoot as M,
+  SelectedBlockContext as S,
+  ThemeStateContext as T,
+  WorkflowServiceContext as W,
+  ContextRequestEvent as a,
+  TranslationContext as b,
+  createContext as c,
+  d,
+  attachEmptyTracking as e,
+  backfillInstanceDefaults as f,
+  createBlockInstance as g,
+  createBlockInstanceFromJSON as h,
+  createBlockInstanceFromObject as i,
+  createCeRenderer as j,
+  createSelectedBlock as k,
+  createThemeState as l,
+  createTranslationService as m,
+  createWorkflowApiAdapter as n,
+  createWorkflowService as o,
+  defineBlock as p,
+  defineBlockRuntime as q,
+  registerBlock as r,
+  getDefaultBlockForAction as s,
+  getDefinedBlocks as t,
+  u,
+  hasDefaultBlockForAction as v,
+  w,
+  hasRenderedContent as x,
+  indexOverrides as y,
+  injectContext as z
+};