@juo/blocks 1.13.0 → 1.14.0

package/dist/{juo-workflow-BlG9CcAG.js → css-runtime-DWytAzZ5.js}

@@ -2,7 +2,6 @@ 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) {
@@ -21,13 +20,11 @@ class ContextProvideEvent extends Event {
   }
 }
 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;
   });
@@ -39,7 +36,6 @@ function injectContext(target, context) {
 }
 function subscribeContext(target, context, callback) {
   let unsubscribeFunction = null;
-  console.log("context:subscribe", context, target);
   const protocolCallback = (value, unsubscribe) => {
     if (unsubscribe) {
       unsubscribeFunction = unsubscribe;
@@ -63,10 +59,8 @@ class ContextRoot extends HTMLElement {
   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);
@@ -76,14 +70,12 @@ class ContextRoot extends HTMLElement {
               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);
@@ -99,7 +91,6 @@ class ContextRoot extends HTMLElement {
               currentCallbacks.splice(index, 1);
             }
           }
-          console.log("context-root:unsubscribed", ev.context);
         };
         callbacks.push(ev.callback);
         if (storedValue !== void 0) {
@@ -113,7 +104,6 @@ class ContextRoot extends HTMLElement {
         }
       }
     });
-    console.log("context-root:ready");
   }
 }
 var i = Symbol.for("preact-signals");
@@ -121,22 +111,22 @@ function t() {
   if (!(s > 1)) {
     var i2, t2 = false;
     while (void 0 !== h) {
-      var r = h;
+      var r2 = 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) {
+      while (void 0 !== r2) {
+        var o2 = r2.o;
+        r2.o = void 0;
+        r2.f &= -3;
+        if (!(8 & r2.f) && c(r2)) try {
+          r2.c();
+        } catch (r3) {
           if (!t2) {
-            i2 = r2;
+            i2 = r3;
             t2 = true;
           }
         }
-        r = o2;
+        r2 = o2;
       }
     }
     f = 0;
@@ -144,6 +134,15 @@ function t() {
     if (t2) throw i2;
   } else s--;
 }
+function r(i2) {
+  if (s > 0) return i2();
+  s++;
+  try {
+    return i2();
+  } finally {
+    t();
+  }
+}
 var o = void 0;
 function n(i2) {
   var t2 = o;
@@ -192,11 +191,11 @@ 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;
+  var t2 = this, r2 = this.t;
+  if (r2 !== i2 && void 0 === i2.e) {
+    i2.x = r2;
     this.t = i2;
-    if (void 0 !== r) r.e = i2;
+    if (void 0 !== r2) r2.e = i2;
     else n(function() {
       var i3;
       null == (i3 = t2.W) || i3.call(t2);
@@ -206,13 +205,13 @@ u.prototype.S = function(i2) {
 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;
+    var r2 = i2.e, o2 = i2.x;
+    if (void 0 !== r2) {
+      r2.x = o2;
       i2.e = void 0;
     }
     if (void 0 !== o2) {
-      o2.e = r;
+      o2.e = r2;
       i2.x = void 0;
     }
     if (i2 === this.t) {
@@ -227,10 +226,10 @@ u.prototype.U = function(i2) {
 u.prototype.subscribe = function(i2) {
   var t2 = this;
   return E(function() {
-    var r = t2.value, n2 = o;
+    var r2 = t2.value, n2 = o;
     o = void 0;
     try {
-      i2(r);
+      i2(r2);
     } finally {
       o = n2;
     }
@@ -266,7 +265,7 @@ Object.defineProperty(u.prototype, "value", { get: function() {
     v++;
     s++;
     try {
-      for (var r = this.t; void 0 !== r; r = r.x) r.t.N();
+      for (var r2 = this.t; void 0 !== r2; r2 = r2.x) r2.t.N();
     } finally {
       t();
     }
@@ -281,8 +280,8 @@ function c(i2) {
 }
 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;
+    var r2 = t2.S.n;
+    if (void 0 !== r2) t2.r = r2;
     t2.S.n = t2;
     t2.i = -1;
     if (void 0 === t2.n) {
@@ -292,19 +291,19 @@ function a(i2) {
   }
 }
 function l(i2) {
-  var t2 = i2.s, r = void 0;
+  var t2 = i2.s, r2 = 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;
+    } else r2 = t2;
     t2.S.n = t2.r;
     if (void 0 !== t2.r) t2.r = void 0;
     t2 = o2;
   }
-  i2.s = r;
+  i2.s = r2;
 }
 function y(i2, t2) {
   u.call(this, void 0);
@@ -382,14 +381,14 @@ function w(i2, t2) {
   return new y(i2, t2);
 }
 function _(i2) {
-  var r = i2.u;
+  var r2 = i2.u;
   i2.u = void 0;
-  if ("function" == typeof r) {
+  if ("function" == typeof r2) {
     s++;
     var n2 = o;
     o = void 0;
     try {
-      r();
+      r2();
     } catch (t2) {
       i2.f &= -2;
       i2.f |= 8;
@@ -466,14 +465,19 @@ function E(i2) {
     t2.d();
     throw i3;
   }
-  var r = t2.d.bind(t2);
-  r[Symbol.dispose] = r;
-  return r;
+  var r2 = t2.d.bind(t2);
+  r2[Symbol.dispose] = r2;
+  return r2;
 }
 function isEditorPreview() {
   if (typeof window === "undefined") return false;
   return new URLSearchParams(window.location.search).get("editor") === "true";
 }
+const layoutSystemEnabled = d(false);
+function setLayoutSystemEnabled(enabled) {
+  if (layoutSystemEnabled.peek() === enabled) return;
+  layoutSystemEnabled.value = enabled;
+}
 function hasRenderedContent(scope) {
   var _a;
   for (const child of scope.children) {
@@ -581,7 +585,9 @@ function withWrapper(fn) {
     }
     if (wrapper === null) {
       if (isEditorPreview()) {
-        wrapper = document.createElement("juo-editor-block-wrapper");
+        wrapper = document.createElement(
+          layoutSystemEnabled.value ? "juo-editor-layout-block-wrapper" : "juo-editor-block-wrapper"
+        );
         wrapper.setAttribute("data-block-id", block.id);
         (_a = wrapper.setBlock) == null ? void 0 : _a.call(wrapper, block);
         wrapper.appendChild(rendered);
@@ -895,8 +901,14 @@ function indexOverrides(overrides) {
 function createThemeState(deps) {
   var _a;
   const surfaces = {
-    page: { blocks: d([]) },
-    overlay: { blocks: d([]) }
+    page: {
+      blocks: d([]),
+      layout: d(null)
+    },
+    overlay: {
+      blocks: d([]),
+      layout: d(null)
+    }
   };
   const locale = d("en");
   const catalogs = d(null);
@@ -906,6 +918,9 @@ function createThemeState(deps) {
   function setGlobalStyles(styles) {
     globalStyles.value = styles;
   }
+  E(() => {
+    setLayoutSystemEnabled(globalStyles.value.layoutEngine === "grid-v1");
+  });
   async function collectBlockDefaults(loc) {
     const nextDefaults = {};
     const nextModes = {};
@@ -949,10 +964,13 @@ function createThemeState(deps) {
   }
   async function resolve(surface, path) {
     var _a2, _b, _c, _d;
-    surfaces[surface].blocks.value = [];
+    r(() => {
+      surfaces[surface].blocks.value = [];
+      surfaces[surface].layout.value = null;
+    });
     const stored = await deps.resolve(surface, path);
     if (stored != null) {
-      surfaces[surface].blocks.value = stored.blocks.flatMap((block) => {
+      const hydratedBlocks = stored.blocks.flatMap((block) => {
         try {
           return [createBlockInstanceFromObject(block)];
         } catch (error) {
@@ -967,6 +985,10 @@ function createThemeState(deps) {
           return [];
         }
       });
+      r(() => {
+        surfaces[surface].blocks.value = hydratedBlocks;
+        surfaces[surface].layout.value = stored.layout ?? null;
+      });
       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;
@@ -1068,610 +1090,443 @@ function createTranslationService(locales, options = {}) {
     }
   };
 }
-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 });
+const GRID_V1_ENGINE_ID = "grid-v1";
+const PAGE_ROOT_SLOT = "content";
+const DEFAULT_GRID = { cols: 12, gap: 16, rowUnit: 40 };
+const MAX_BLOCKS_PER_ROW = 3;
+const DEFAULT_BREAKPOINTS = [
+  { id: "desktop", cols: 12 },
+  { id: "mobile", cols: 1, query: { maxWidth: 600 } }
+];
+function sharesRowBand$1(a2, b2) {
+  return a2.r < b2.r + b2.h && a2.r + a2.h > b2.r;
 }
-function hasDefaultBlockForAction(actionType) {
-  const blockName = `action:${actionType}`;
-  return getDefinedBlocks().some((b2) => b2.name === blockName);
+function minFillCols(cols) {
+  return Math.max(1, Math.ceil(Math.max(1, cols) / MAX_BLOCKS_PER_ROW));
 }
-const WorkflowServiceContext = createContext("services/workflow");
-const RUN_SCOPED_RESET = {
-  firstPollReason: null,
-  feedbackCollected: false
-};
-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 clampRect(rect, cols) {
+  const w2 = Math.max(1, Math.min(rect.w, cols));
+  const c2 = Math.max(0, Math.min(rect.c, cols - w2));
+  const h2 = Math.max(1, rect.h);
+  const r2 = Math.max(0, rect.r);
+  return { ...rect, c: c2, r: r2, w: w2, h: h2 };
 }
-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,
-    ...RUN_SCOPED_RESET
-  });
-  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 rectsOverlap(a2, b2) {
+  return a2.c < b2.c + b2.w && a2.c + a2.w > b2.c && a2.r < b2.r + b2.h && a2.r + a2.h > b2.r;
+}
+function readingOrder(items) {
+  return Object.keys(items).sort((idA, idB) => {
+    const a2 = items[idA];
+    const b2 = items[idB];
+    if (a2.r !== b2.r) return a2.r - b2.r;
+    return a2.c - b2.c;
   });
-  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);
+}
+function compactItems(items, cols) {
+  const columnBottoms = new Array(Math.max(1, cols)).fill(0);
+  const compacted = {};
+  for (const id of readingOrder(items)) {
+    const rect = clampRect(items[id], cols);
+    let top = 0;
+    for (let c2 = rect.c; c2 < rect.c + rect.w; c2++) {
+      top = Math.max(top, columnBottoms[c2] ?? 0);
+    }
+    compacted[id] = { ...rect, r: top };
+    for (let c2 = rect.c; c2 < rect.c + rect.w; c2++) {
+      columnBottoms[c2] = top + rect.h;
     }
-    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)}`;
+  return compacted;
+}
+function rowBandBounds(items, target, cols, excludeId) {
+  let left = 0;
+  let right = Math.max(1, cols);
+  for (const [id, rect] of Object.entries(items)) {
+    if (id === excludeId) continue;
+    const sharesRow = rect.r < target.r + target.h && rect.r + rect.h > target.r;
+    if (!sharesRow) continue;
+    const rectRight = rect.c + rect.w;
+    if (rectRight <= target.c) {
+      left = Math.max(left, rectRight);
+    } else if (rect.c >= target.c + target.w) {
+      right = Math.min(right, rect.c);
+    }
   }
-  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,
-        ...RUN_SCOPED_RESET
-      });
+  return { left, right };
+}
+function fillSegmentBounds(target, nonFill, cols) {
+  let left = 0;
+  let right = Math.max(1, cols);
+  for (const rect of nonFill) {
+    if (!sharesRowBand$1(rect, target)) continue;
+    const rectRight = rect.c + rect.w;
+    if (rectRight <= target.c) {
+      left = Math.max(left, rectRight);
+    } else if (rect.c >= target.c) {
+      right = Math.min(right, rect.c);
+    } else {
+      left = Math.max(left, rectRight);
     }
   }
-  function handleError(error) {
-    const message = error instanceof Error ? error.message : "Unknown error";
-    updateState({
-      status: "error",
-      error: message
-    });
+  return { left, right: Math.max(left, right) };
+}
+function applyFillExpansion(items, cols) {
+  const next = {};
+  for (const id of readingOrder(items)) {
+    next[id] = items[id];
   }
-  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
+  const fillIds = readingOrder(next).filter((id) => next[id].fill === true);
+  if (fillIds.length === 0) return next;
+  const nonFill = Object.values(next).filter((rect) => rect.fill !== true);
+  const groups = [];
+  for (const id of fillIds) {
+    const rect = next[id];
+    const seg = fillSegmentBounds(rect, nonFill, cols);
+    const group = groups.find(
+      (g2) => g2.left === seg.left && g2.right === seg.right && g2.members.some((memberId) => sharesRowBand$1(next[memberId], rect))
     );
-    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()
-      }
-    });
+    if (group) group.members.push(id);
+    else groups.push({ left: seg.left, right: seg.right, members: [id] });
   }
-  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
-      };
+  const minCols = minFillCols(cols);
+  const overflow = [];
+  for (const group of groups) {
+    const span = Math.max(1, group.right - group.left);
+    const fit = Math.min(group.members.length, Math.floor(span / minCols));
+    if (fit <= 0) {
+      overflow.push(...group.members);
+      continue;
     }
-    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 staying = group.members.slice(0, fit);
+    overflow.push(...group.members.slice(fit));
+    const base = Math.floor(span / fit);
+    const remainder = span - base * fit;
+    let pos = group.left;
+    staying.forEach((id, index) => {
+      const w2 = base + (index < remainder ? 1 : 0);
+      next[id] = { ...next[id], c: pos, w: Math.max(1, w2) };
+      pos += w2;
     });
   }
-  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,
-        ...RUN_SCOPED_RESET
-      });
-      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 });
-          }
-        }
-        if (!_state.value.feedbackCollected && currentInteraction2.actionType === "collect_feedback" && responseType === "submitted") {
-          const feedback = responseData == null ? void 0 : responseData.feedback;
-          if (typeof feedback === "string" && feedback.trim().length > 0) {
-            updateState({ feedbackCollected: true });
-          }
-        }
-        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 {
-        }
+  if (overflow.length === 0) return next;
+  for (const id of overflow) {
+    const rect = next[id];
+    let bandBottom = rect.r;
+    for (const [otherId, other] of Object.entries(next)) {
+      if (otherId === id || overflow.includes(otherId)) continue;
+      if (sharesRowBand$1(other, rect)) {
+        bandBottom = Math.max(bandBottom, other.r + other.h);
       }
-      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,
-        ...RUN_SCOPED_RESET
-      });
-    },
-    async refresh() {
-      const { runId } = _state.value;
-      if (!runId) return;
-      try {
-        const data = await api.getState(runId);
-        handleFlowResponse(data);
-      } catch (error) {
-        handleError(error);
+    }
+    next[id] = { ...next[id], c: 0, r: bandBottom, w: cols };
+  }
+  return compactItems(next, cols);
+}
+function findFreeRect(items, size, cols) {
+  const w2 = Math.max(1, Math.min(size.w, cols));
+  const h2 = Math.max(1, size.h);
+  const existing = Object.values(items);
+  for (let r2 = 0; ; r2++) {
+    for (let c2 = 0; c2 <= cols - w2; c2++) {
+      const candidate = { c: c2, r: r2, w: w2, h: h2 };
+      if (!existing.some((rect) => rectsOverlap(candidate, rect))) {
+        return candidate;
       }
     }
-  };
-  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);
+function deriveLayout(base, target) {
+  const cols = target.cols;
+  const items = {};
+  let r2 = 0;
+  for (const id of readingOrder(base.items)) {
+    const h2 = Math.max(1, base.items[id].h);
+    items[id] = clampRect({ c: 0, r: r2, w: cols, h: h2 }, cols);
+    r2 += h2;
   }
-  connectedCallback() {
-    this.style.display = "contents";
-    this.unsubscribeContext = subscribeContext(
-      this,
-      WorkflowServiceContext,
-      (service) => {
-        this.workflowService = service;
-        this.setupSubscription();
-      }
-    );
+  return { grid: { ...base.grid, cols }, items };
+}
+function resolveLayout(doc, breakpointId) {
+  var _a;
+  const present = doc.layouts[breakpointId];
+  if (present) return present;
+  const baseId = (_a = doc.breakpoints[0]) == null ? void 0 : _a.id;
+  const baseLayout = baseId ? doc.layouts[baseId] : void 0;
+  const target = doc.breakpoints.find((b2) => b2.id === breakpointId);
+  if (!baseLayout || !target) {
+    return { grid: { ...DEFAULT_GRID, cols: (target == null ? void 0 : target.cols) ?? 1 }, items: {} };
   }
-  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;
+  return deriveLayout(baseLayout, target);
+}
+function containerRule(scope, grid) {
+  return `${scope}{display:grid;grid-template-columns:repeat(${grid.cols},minmax(0,1fr));--juo-layout-cols:${grid.cols};--juo-layout-gap:var(--juo-layout-spacing,${grid.gap}px);column-gap:var(--juo-layout-gap);row-gap:0;margin-block-end:calc(-1 * var(--juo-layout-gap));}`;
+}
+function baseSpacingRule(scope) {
+  return `${scope} > [data-block-id]{margin-block-end:var(--juo-layout-gap);}`;
+}
+function collapseRule(scope) {
+  return `${scope} > [data-empty],${scope} > :has(> [data-empty]){margin-block-end:0;}`;
+}
+function itemRule(scope, blockId, rect) {
+  return `${scope} > [data-block-id="${blockId}"]{grid-column:${rect.c + 1}/span ${rect.w};grid-row:${rect.r + 1}/span ${rect.h};--juo-layout-c:${rect.c};}`;
+}
+function breakpointCss(scope, layout) {
+  const rules = [containerRule(scope, layout.grid)];
+  for (const blockId of Object.keys(layout.items)) {
+    rules.push(itemRule(scope, blockId, layout.items[blockId]));
   }
-  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);
-        }
-      });
-    });
+  return rules.join("");
+}
+function sharesRowBand(a2, b2) {
+  return a2.r < b2.r + b2.h && a2.r + a2.h > b2.r;
+}
+function nonEmptySubsets(ids) {
+  const out = [];
+  for (let mask = 1; mask < 1 << ids.length; mask++) {
+    const subset = [];
+    for (let i2 = 0; i2 < ids.length; i2++) {
+      if (mask & 1 << i2) subset.push(ids[i2]);
+    }
+    out.push(subset);
   }
-  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 out;
+}
+function reclaimSelector(scope, fillId, emptyMates, domIndex) {
+  const fillIdx = domIndex.get(fillId) ?? 0;
+  const byDom = (a2, b2) => (domIndex.get(a2) ?? 0) - (domIndex.get(b2) ?? 0);
+  const before = emptyMates.filter((id) => (domIndex.get(id) ?? 0) < fillIdx).sort(byDom);
+  const after = emptyMates.filter((id) => (domIndex.get(id) ?? 0) > fillIdx).sort(byDom);
+  const emptyBefore = (id) => `[data-block-id="${id}"]:is([data-empty],:has(> [data-empty]))`;
+  const emptyAfterHas = (id) => `~ [data-block-id="${id}"][data-empty],~ [data-block-id="${id}"] > [data-empty]`;
+  let sel = "";
+  for (const id of before) sel += `${emptyBefore(id)} ~ `;
+  sel += `[data-block-id="${fillId}"]`;
+  for (const id of after) sel += `:has(${emptyAfterHas(id)})`;
+  return `${scope} > ${sel}`;
+}
+function reclaimCss(scope, layout, domOrder) {
+  const items = layout.items;
+  const cols = layout.grid.cols;
+  const domIndex = new Map(domOrder.map((id, index) => [id, index]));
+  const rules = [];
+  for (const [fillId, fillRect] of Object.entries(items)) {
+    if (fillRect.fill !== true) continue;
+    const mateIds = Object.entries(items).filter(([id, rect]) => id !== fillId && sharesRowBand(rect, fillRect)).map(([id]) => id);
+    if (mateIds.length === 0 || mateIds.length > 4) continue;
+    for (const emptyMates of nonEmptySubsets(mateIds)) {
+      const remaining = {};
+      for (const [id, rect] of Object.entries(items)) {
+        if (id === fillId || emptyMates.includes(id)) continue;
+        remaining[id] = rect;
       }
-      return;
+      const { left, right } = rowBandBounds(remaining, fillRect, cols);
+      if (left >= fillRect.c && right <= fillRect.c + fillRect.w) continue;
+      const selector = reclaimSelector(scope, fillId, emptyMates, domIndex);
+      rules.push(
+        `${selector}{grid-column:${left + 1}/span ${Math.max(1, right - left)};--juo-layout-c:${left};}`
+      );
+    }
+  }
+  return rules.join("");
+}
+function projectToCss(doc, opts) {
+  const base = doc.breakpoints[0];
+  if (!base) return "";
+  const baseLayout = resolveLayout(doc, base.id);
+  const domOrder = opts.domOrder ?? Object.keys(baseLayout.items);
+  const parts = [
+    breakpointCss(opts.scope, baseLayout),
+    baseSpacingRule(opts.scope),
+    collapseRule(opts.scope),
+    reclaimCss(opts.scope, baseLayout, domOrder)
+  ];
+  for (const bp of doc.breakpoints.slice(1)) {
+    if (!bp.query) continue;
+    parts.push(
+      `@container (max-width:${bp.query.maxWidth}px){` + breakpointCss(opts.scope, resolveLayout(doc, bp.id)) + `}`
+    );
+  }
+  return parts.join("");
+}
+function createDefaultLayoutDocument(blockIds) {
+  const items = {};
+  blockIds.forEach((id, index) => {
+    items[id] = { c: 0, r: index, w: DEFAULT_GRID.cols, h: 1 };
+  });
+  return {
+    version: 1,
+    engine: GRID_V1_ENGINE_ID,
+    breakpoints: structuredClone([...DEFAULT_BREAKPOINTS]),
+    layouts: {
+      [DEFAULT_BREAKPOINTS[0].id]: { grid: { ...DEFAULT_GRID }, items }
     }
-    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 }
-        })
+  };
+}
+function reconcileLayout(doc, blockIds) {
+  var _a;
+  if (!doc) return createDefaultLayoutDocument(blockIds);
+  const next = structuredClone(doc);
+  const baseId = (_a = next.breakpoints[0]) == null ? void 0 : _a.id;
+  if (!baseId) return createDefaultLayoutDocument(blockIds);
+  const layout = next.layouts[baseId] ?? { grid: { ...DEFAULT_GRID }, items: {} };
+  const known = new Set(blockIds);
+  for (const id of Object.keys(layout.items)) {
+    if (!known.has(id)) delete layout.items[id];
+  }
+  for (const id of blockIds) {
+    if (!layout.items[id]) {
+      layout.items[id] = findFreeRect(
+        layout.items,
+        { w: layout.grid.cols, h: 1 },
+        layout.grid.cols
       );
     }
   }
+  next.layouts[baseId] = layout;
+  return next;
 }
-if (typeof customElements !== "undefined" && !customElements.get("juo-workflow")) {
-  customElements.define("juo-workflow", JuoWorkflowElement);
+function compactLayoutDocument(doc) {
+  var _a;
+  if (!doc) return doc;
+  const next = structuredClone(doc);
+  const baseId = (_a = next.breakpoints[0]) == null ? void 0 : _a.id;
+  if (!baseId) return next;
+  const layout = next.layouts[baseId];
+  if (!layout) return next;
+  layout.items = compactItems(layout.items, layout.grid.cols);
+  next.layouts[baseId] = layout;
+  return next;
+}
+function expandFillLayoutDocument(doc) {
+  var _a;
+  if (!doc) return doc;
+  const next = structuredClone(doc);
+  const baseId = (_a = next.breakpoints[0]) == null ? void 0 : _a.id;
+  if (!baseId) return next;
+  const layout = next.layouts[baseId];
+  if (!layout) return next;
+  layout.items = applyFillExpansion(layout.items, layout.grid.cols);
+  next.layouts[baseId] = layout;
+  return next;
+}
+function classifyRowDividers(items, blockIds) {
+  const leaderBlockIds = /* @__PURE__ */ new Set();
+  const rowBlockIds = /* @__PURE__ */ new Set();
+  const placed = blockIds.filter((id) => items[id] != null);
+  if (placed.length === 0) return { leaderBlockIds, rowBlockIds };
+  const rects = placed.map((id) => items[id]);
+  const minRow = Math.min(...rects.map((rect) => rect.r));
+  const boundaryIsCrossed = (boundary) => rects.some((rect) => rect.r < boundary && rect.r + rect.h > boundary);
+  const ordered = [...placed].sort((a2, b2) => {
+    const ra = items[a2];
+    const rb = items[b2];
+    return ra.r - rb.r || ra.c - rb.c;
+  });
+  let lastLeaderRow = null;
+  for (const id of ordered) {
+    const { r: r2 } = items[id];
+    if (r2 <= minRow || boundaryIsCrossed(r2)) continue;
+    rowBlockIds.add(id);
+    if (r2 !== lastLeaderRow) {
+      leaderBlockIds.add(id);
+      lastLeaderRow = r2;
+    }
+  }
+  return { leaderBlockIds, rowBlockIds };
+}
+const LAYOUT_SCOPE_ATTR = "data-juo-layout";
+function layoutScopeSelector(scopeId) {
+  return `[${LAYOUT_SCOPE_ATTR}="${scopeId}"]`;
+}
+function buildLayoutCss(layout, blockIds, scopeId) {
+  const reconciled = reconcileLayout(layout, blockIds);
+  return projectToCss(reconciled, {
+    scope: layoutScopeSelector(scopeId),
+    domOrder: blockIds
+  });
+}
+function buildGridLayout(layout, blockIds, scopeId) {
+  var _a, _b;
+  const scope = layoutScopeSelector(scopeId);
+  const reconciled = reconcileLayout(layout, blockIds);
+  const baseId = (_a = reconciled.breakpoints[0]) == null ? void 0 : _a.id;
+  const layoutItems = (baseId != null ? (_b = reconciled.layouts[baseId]) == null ? void 0 : _b.items : null) ?? {};
+  const { leaderBlockIds, rowBlockIds } = classifyRowDividers(
+    layoutItems,
+    blockIds
+  );
+  const fullWidthBlockIds = /* @__PURE__ */ new Set();
+  for (const [id, rect] of Object.entries(layoutItems)) {
+    if (rect.fill === true) fullWidthBlockIds.add(id);
+  }
+  return {
+    css: projectToCss(reconciled, { scope, domOrder: blockIds }),
+    dividerBlockIds: leaderBlockIds,
+    dividerRowBlockIds: rowBlockIds,
+    fullWidthBlockIds
+  };
 }
 export {
-  isEditorPreview as A,
+  reconcileLayout as $,
+  createDefaultLayoutDocument as A,
   BlockWrapperEvent as B,
   ContextProvideEvent as C,
-  DEFAULT_GLOBAL_STYLES as D,
+  DEFAULT_GRID 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,
+  createSelectedBlock as F,
+  GRID_V1_ENGINE_ID as G,
+  createThemeState as H,
+  createTranslationService as I,
+  defineBlockRuntime as J,
+  deriveLayout as K,
+  LAYOUT_SCOPE_ATTR as L,
+  expandFillLayoutDocument as M,
+  hasRenderedContent as N,
+  indexOverrides as O,
+  PAGE_ROOT_SLOT as P,
+  injectContext as Q,
+  isEditorPreview as R,
   SelectedBlockContext as S,
   ThemeStateContext as T,
-  WorkflowServiceContext as W,
-  ContextRequestEvent as a,
-  TranslationContext as b,
+  isStubDefinition as U,
+  layoutScopeSelector as V,
+  layoutSystemEnabled as W,
+  onRegisterBlock as X,
+  projectToCss as Y,
+  provideContext as Z,
+  readingOrder as _,
+  createBlockInstance as a,
+  rectsOverlap as a0,
+  resolveLayout as a1,
+  serializeBlocks as a2,
+  setLayoutSystemEnabled as a3,
+  n as a4,
+  withWrapper as a5,
+  ContextRoot as a6,
+  MAX_BLOCKS_PER_ROW as a7,
+  defineBlock 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,
+  clampRect as e,
+  applyFillExpansion as f,
+  getDefinedBlocks as g,
+  compactItems as h,
+  findFreeRect as i,
+  ContextRequestEvent as j,
+  DEFAULT_BREAKPOINTS as k,
+  DEFAULT_GLOBAL_STYLES as l,
+  TranslationContext as m,
+  attachEmptyTracking as n,
+  backfillInstanceDefaults as o,
+  buildGridLayout as p,
+  buildLayoutCss as q,
   registerBlock as r,
-  getDefaultBlockForAction as s,
-  getDefinedBlocks as t,
+  subscribeContext as s,
+  classifyRowDividers as t,
   u,
-  hasDefaultBlockForAction as v,
+  compactLayoutDocument as v,
   w,
-  hasRenderedContent as x,
-  indexOverrides as y,
-  injectContext as z
+  createBlockInstanceFromJSON as x,
+  createBlockInstanceFromObject as y,
+  createCeRenderer as z
 };