@contractspec/lib.surface-runtime 0.2.0

package/dist/react/index.js

@@ -0,0 +1,793 @@
+// @bun
+// src/adapters/blocknote-stub.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var blocknoteAdapterStub = {
+  supportsNode(_kind) {
+    return false;
+  },
+  createSchema(_registry) {
+    return {};
+  },
+  renderNode(node, _ctx) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      "data-blocknote-stub": true,
+      "data-node-id": node.nodeId,
+      children: node.title ?? node.kind
+    }, undefined, false, undefined, this);
+  },
+  async serialize(node) {
+    return { nodeId: node.nodeId, kind: node.kind };
+  },
+  async deserialize(input) {
+    const o = input;
+    return {
+      nodeId: o?.nodeId ?? "stub",
+      kind: o?.kind ?? "custom-widget"
+    };
+  }
+};
+
+// src/adapters/motion-stub.ts
+var PACE_TOKENS = {
+  deliberate: {
+    durationMs: 300,
+    enableEntrance: true,
+    layout: true
+  },
+  balanced: {
+    durationMs: 150,
+    enableEntrance: true,
+    layout: true
+  },
+  rapid: {
+    durationMs: 50,
+    enableEntrance: false,
+    layout: false
+  }
+};
+var motionAdapterStub = {
+  getTokens(pace) {
+    return PACE_TOKENS[pace] ?? PACE_TOKENS.balanced;
+  }
+};
+
+// src/adapters/resizable-panels-stub.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var LAYOUT_STORAGE_KEY = "surface-runtime:panel-layout:";
+var resizablePanelsAdapterStub = {
+  renderPanelGroup(region, ctx, renderChild) {
+    const direction = region.direction === "horizontal" ? "row" : "column";
+    return /* @__PURE__ */ jsxDEV2("div", {
+      "data-panel-group": true,
+      "data-persist-key": region.persistKey,
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        flex: 1,
+        minHeight: 0
+      },
+      children: region.children.map((child, i) => /* @__PURE__ */ jsxDEV2("div", {
+        style: { flex: 1, minWidth: 0, minHeight: 0 },
+        children: renderChild(child, ctx)
+      }, i, false, undefined, this))
+    }, undefined, false, undefined, this);
+  },
+  async restoreLayout(persistKey) {
+    if (typeof localStorage === "undefined")
+      return null;
+    try {
+      const raw = localStorage.getItem(LAYOUT_STORAGE_KEY + persistKey);
+      if (!raw)
+        return null;
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : null;
+    } catch {
+      return null;
+    }
+  },
+  async saveLayout(persistKey, sizes) {
+    if (typeof localStorage === "undefined")
+      return;
+    try {
+      localStorage.setItem(LAYOUT_STORAGE_KEY + persistKey, JSON.stringify(sizes));
+    } catch {}
+  }
+};
+
+// src/telemetry/surface-metrics.ts
+import {
+  createCounter,
+  createHistogram
+} from "@contractspec/lib.observability/metrics";
+var METER_NAME = "@contractspec/lib.surface-runtime";
+var resolutionDurationMs = createHistogram("bundle_surface_resolution_duration_ms", "Time to resolve bundle spec to surface plan in milliseconds", METER_NAME);
+var patchAcceptanceCounter = createCounter("bundle_surface_patch_acceptance_total", "Total AI patch proposals accepted by user", METER_NAME);
+var patchRejectionCounter = createCounter("bundle_surface_patch_rejection_total", "Total AI patch proposals rejected by user", METER_NAME);
+var policyDenialCounter = createCounter("bundle_surface_policy_denial_total", "Total policy denials (actions denied by policy)", METER_NAME);
+var surfaceFallbackCounter = createCounter("bundle_surface_fallback_total", "Total surface or layout fallbacks during resolution", METER_NAME);
+var missingRendererCounter = createCounter("bundle_surface_renderer_missing_total", "Total slots with no renderer for requested node kind", METER_NAME);
+
+// src/i18n/catalogs/en.ts
+import { defineTranslation } from "@contractspec/lib.contracts-spec/translations";
+var enMessages = defineTranslation({
+  meta: {
+    key: "surface-runtime.messages",
+    version: "1.0.0",
+    domain: "surface-runtime",
+    description: "User-facing strings for surface-runtime UI components",
+    owners: ["platform"],
+    stability: "experimental"
+  },
+  locale: "en",
+  fallback: "en",
+  messages: {
+    "overlay.conflicts.title": {
+      value: "Overlay conflicts",
+      description: "Title for overlay conflict resolution banner"
+    },
+    "overlay.conflicts.keepScope": {
+      value: "Keep {scope}",
+      description: "Button to keep overlay from scope A or B"
+    },
+    "patch.accept": {
+      value: "Accept",
+      description: "Accept patch proposal button"
+    },
+    "patch.reject": {
+      value: "Reject",
+      description: "Reject patch proposal button"
+    },
+    "patch.addWidget": {
+      value: "Add {title} to {slot}",
+      description: "Insert node proposal summary"
+    },
+    "patch.removeItem": {
+      value: "Remove item",
+      description: "Remove node proposal summary"
+    },
+    "patch.switchLayout": {
+      value: "Switch to {layoutId} layout",
+      description: "Set layout proposal summary"
+    },
+    "patch.showField": {
+      value: "Show field {fieldId}",
+      description: "Reveal field proposal summary"
+    },
+    "patch.hideField": {
+      value: "Hide field {fieldId}",
+      description: "Hide field proposal summary"
+    },
+    "patch.moveTo": {
+      value: "Move to {slot}",
+      description: "Move node proposal summary"
+    },
+    "patch.replaceItem": {
+      value: "Replace item",
+      description: "Replace node proposal summary"
+    },
+    "patch.promote": {
+      value: "Promote {actionId}",
+      description: "Promote action proposal summary"
+    },
+    "patch.changes": {
+      value: "{count} changes",
+      description: "Multiple patch ops summary"
+    }
+  }
+});
+
+// src/i18n/catalogs/es.ts
+import { defineTranslation as defineTranslation2 } from "@contractspec/lib.contracts-spec/translations";
+var esMessages = defineTranslation2({
+  meta: {
+    key: "surface-runtime.messages",
+    version: "1.0.0",
+    domain: "surface-runtime",
+    description: "User-facing strings for surface-runtime UI components",
+    owners: ["platform"],
+    stability: "experimental"
+  },
+  locale: "es",
+  fallback: "en",
+  messages: {
+    "overlay.conflicts.title": { value: "Conflictos de superposici\xF3n" },
+    "overlay.conflicts.keepScope": { value: "Mantener {scope}" },
+    "patch.accept": { value: "Aceptar" },
+    "patch.reject": { value: "Rechazar" },
+    "patch.addWidget": { value: "A\xF1adir {title} a {slot}" },
+    "patch.removeItem": { value: "Eliminar elemento" },
+    "patch.switchLayout": { value: "Cambiar a disposici\xF3n {layoutId}" },
+    "patch.showField": { value: "Mostrar campo {fieldId}" },
+    "patch.hideField": { value: "Ocultar campo {fieldId}" },
+    "patch.moveTo": { value: "Mover a {slot}" },
+    "patch.replaceItem": { value: "Reemplazar elemento" },
+    "patch.promote": { value: "Promover {actionId}" },
+    "patch.changes": { value: "{count} cambios" }
+  }
+});
+
+// src/i18n/catalogs/fr.ts
+import { defineTranslation as defineTranslation3 } from "@contractspec/lib.contracts-spec/translations";
+var frMessages = defineTranslation3({
+  meta: {
+    key: "surface-runtime.messages",
+    version: "1.0.0",
+    domain: "surface-runtime",
+    description: "User-facing strings for surface-runtime UI components",
+    owners: ["platform"],
+    stability: "experimental"
+  },
+  locale: "fr",
+  fallback: "en",
+  messages: {
+    "overlay.conflicts.title": { value: "Conflits de superposition" },
+    "overlay.conflicts.keepScope": { value: "Conserver {scope}" },
+    "patch.accept": { value: "Accepter" },
+    "patch.reject": { value: "Rejeter" },
+    "patch.addWidget": { value: "Ajouter {title} \xE0 {slot}" },
+    "patch.removeItem": { value: "Supprimer l'\xE9l\xE9ment" },
+    "patch.switchLayout": { value: "Passer \xE0 la disposition {layoutId}" },
+    "patch.showField": { value: "Afficher le champ {fieldId}" },
+    "patch.hideField": { value: "Masquer le champ {fieldId}" },
+    "patch.moveTo": { value: "D\xE9placer vers {slot}" },
+    "patch.replaceItem": { value: "Remplacer l'\xE9l\xE9ment" },
+    "patch.promote": { value: "Promouvoir {actionId}" },
+    "patch.changes": { value: "{count} modifications" }
+  }
+});
+
+// src/i18n/messages.ts
+import {
+  createI18nFactory
+} from "@contractspec/lib.contracts-spec/translations";
+var factory = createI18nFactory({
+  specKey: "surface-runtime.messages",
+  catalogs: [enMessages, frMessages, esMessages]
+});
+var createSurfaceI18n = factory.create;
+var getDefaultSurfaceI18n = factory.getDefault;
+
+// src/i18n/keys.ts
+var SURFACE_KEYS = {
+  "overlay.conflicts.title": "overlay.conflicts.title",
+  "overlay.conflicts.keepScope": "overlay.conflicts.keepScope",
+  "patch.accept": "patch.accept",
+  "patch.reject": "patch.reject",
+  "patch.addWidget": "patch.addWidget",
+  "patch.removeItem": "patch.removeItem",
+  "patch.switchLayout": "patch.switchLayout",
+  "patch.showField": "patch.showField",
+  "patch.hideField": "patch.hideField",
+  "patch.moveTo": "patch.moveTo",
+  "patch.replaceItem": "patch.replaceItem",
+  "patch.promote": "patch.promote",
+  "patch.changes": "patch.changes"
+};
+
+// src/i18n/index.ts
+import {
+  resolveLocale,
+  isSupportedLocale,
+  DEFAULT_LOCALE,
+  SUPPORTED_LOCALES
+} from "@contractspec/lib.contracts-spec/translations";
+
+// src/react/BundleProvider.tsx
+import { createContext, useContext } from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var BundlePlanContext = createContext(null);
+var PreferencesContext = createContext(null);
+var EditingContext = createContext(false);
+function BundleProvider({
+  plan,
+  children,
+  isEditing = false
+}) {
+  const preferences = plan.adaptation.appliedDimensions;
+  return /* @__PURE__ */ jsxDEV3(BundlePlanContext.Provider, {
+    value: plan,
+    children: /* @__PURE__ */ jsxDEV3(PreferencesContext.Provider, {
+      value: preferences,
+      children: /* @__PURE__ */ jsxDEV3(EditingContext.Provider, {
+        value: isEditing,
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function useIsEditing() {
+  return useContext(EditingContext);
+}
+function useBundlePlan() {
+  const value = useContext(BundlePlanContext);
+  if (!value) {
+    throw new Error("useBundlePlan must be used inside BundleProvider.");
+  }
+  return value;
+}
+function useBundlePreferences() {
+  const value = useContext(PreferencesContext);
+  if (!value) {
+    throw new Error("useBundlePreferences must be used inside BundleProvider.");
+  }
+  return value;
+}
+
+// src/react/RegionRenderer.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function RegionRenderer({
+  region,
+  ctx,
+  renderSlot
+}) {
+  const renderChild = (child, childCtx) => /* @__PURE__ */ jsxDEV4(RegionRenderer, {
+    region: child,
+    ctx: childCtx,
+    renderSlot
+  }, undefined, false, undefined, this);
+  switch (region.type) {
+    case "panel-group":
+      return resizablePanelsAdapterStub.renderPanelGroup(region, ctx, renderChild);
+    case "stack": {
+      const direction = region.direction === "horizontal" ? "row" : "column";
+      const gapMap = {
+        none: 0,
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24
+      };
+      const gap = gapMap[region.gap ?? "md"];
+      return /* @__PURE__ */ jsxDEV4("div", {
+        "data-region": "stack",
+        style: {
+          display: "flex",
+          flexDirection: direction,
+          gap,
+          flex: 1,
+          minHeight: 0
+        },
+        children: region.children.map((child, i) => /* @__PURE__ */ jsxDEV4("div", {
+          style: { flex: 1, minWidth: 0, minHeight: 0 },
+          children: /* @__PURE__ */ jsxDEV4(RegionRenderer, {
+            region: child,
+            ctx,
+            renderSlot
+          }, undefined, false, undefined, this)
+        }, i, false, undefined, this))
+      }, undefined, false, undefined, this);
+    }
+    case "tabs":
+      return /* @__PURE__ */ jsxDEV4("div", {
+        "data-region": "tabs",
+        children: [
+          /* @__PURE__ */ jsxDEV4("div", {
+            role: "tablist",
+            children: region.tabs.map((t) => /* @__PURE__ */ jsxDEV4("button", {
+              type: "button",
+              role: "tab",
+              children: t.title
+            }, t.key, false, undefined, this))
+          }, undefined, false, undefined, this),
+          region.tabs[0] && /* @__PURE__ */ jsxDEV4(RegionRenderer, {
+            region: region.tabs[0].child,
+            ctx,
+            renderSlot
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "slot":
+      return /* @__PURE__ */ jsxDEV4("div", {
+        "data-slot": region.slotId,
+        children: renderSlot(region.slotId, ctx)
+      }, undefined, false, undefined, this);
+    case "floating":
+      return /* @__PURE__ */ jsxDEV4("div", {
+        "data-floating": true,
+        "data-anchor": region.anchorSlotId,
+        children: /* @__PURE__ */ jsxDEV4(RegionRenderer, {
+          region: region.child,
+          ctx,
+          renderSlot
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    default:
+      return null;
+  }
+}
+
+// src/react/SlotRenderer.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function SlotRenderer({ slotId, ctx, nodes }) {
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      "data-slot-placeholder": true,
+      "data-slot-id": slotId
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("div", {
+    "data-slot": slotId,
+    children: nodes.map((node) => /* @__PURE__ */ jsxDEV5(SlotNodeRenderer, {
+      node,
+      ctx,
+      slotId
+    }, node.nodeId, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function SlotNodeRenderer({
+  node,
+  ctx,
+  slotId
+}) {
+  if (blocknoteAdapterStub.supportsNode(node.kind)) {
+    return blocknoteAdapterStub.renderNode(node, ctx);
+  }
+  if (node.kind === "entity-section") {
+    return /* @__PURE__ */ jsxDEV5("section", {
+      "data-node-id": node.nodeId,
+      "data-kind": "entity-section",
+      children: [
+        /* @__PURE__ */ jsxDEV5("header", {
+          "data-entity-section-header": true,
+          children: node.title ?? "Section"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("div", {
+          "data-entity-section-content": true,
+          children: node.children?.map((child) => child ? /* @__PURE__ */ jsxDEV5(SlotNodeRenderer, {
+            node: child,
+            ctx,
+            slotId
+          }, child.nodeId, false, undefined, this) : null)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (node.kind === "entity-field") {
+    const fieldId = node.sourceBinding?.fieldId;
+    return /* @__PURE__ */ jsxDEV5("div", {
+      "data-node-id": node.nodeId,
+      "data-kind": "entity-field",
+      "data-field-id": fieldId,
+      children: [
+        /* @__PURE__ */ jsxDEV5("span", {
+          "data-entity-field-label": true,
+          children: node.title ?? fieldId ?? "Field"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("span", {
+          "data-entity-field-value": true
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  missingRendererCounter.add(1, {
+    nodeKind: node.kind,
+    slotId
+  });
+  return /* @__PURE__ */ jsxDEV5("div", {
+    "data-node-id": node.nodeId,
+    "data-kind": node.kind,
+    "data-renderer-missing": true,
+    children: node.title ?? node.kind
+  }, undefined, false, undefined, this);
+}
+
+// src/react/PatchProposalCard.tsx
+import { useMemo } from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function PatchProposalCard({
+  proposal,
+  onAccept,
+  onReject,
+  locale
+}) {
+  const i18n = useMemo(() => createSurfaceI18n(locale), [locale]);
+  const firstOp = proposal.ops[0];
+  const summary = proposal.ops.length === 1 && firstOp ? describeOp(firstOp, i18n) : i18n.t("patch.changes", { count: proposal.ops.length });
+  return /* @__PURE__ */ jsxDEV6("div", {
+    "data-proposal-id": proposal.proposalId,
+    style: {
+      padding: "12px",
+      border: "1px solid var(--border, #e5e7eb)",
+      borderRadius: "8px",
+      marginBottom: "8px",
+      backgroundColor: "var(--muted, #f9fafb)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: { marginBottom: "8px", fontSize: "14px" },
+        children: summary
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: { display: "flex", gap: "8px" },
+        children: [
+          /* @__PURE__ */ jsxDEV6("button", {
+            type: "button",
+            onClick: () => onAccept(proposal.proposalId),
+            style: {
+              padding: "4px 12px",
+              fontSize: "13px",
+              borderRadius: "4px",
+              border: "none",
+              backgroundColor: "var(--primary, #3b82f6)",
+              color: "white",
+              cursor: "pointer"
+            },
+            children: i18n.t("patch.accept")
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("button", {
+            type: "button",
+            onClick: () => onReject(proposal.proposalId),
+            style: {
+              padding: "4px 12px",
+              fontSize: "13px",
+              borderRadius: "4px",
+              border: "1px solid var(--border, #e5e7eb)",
+              backgroundColor: "transparent",
+              cursor: "pointer"
+            },
+            children: i18n.t("patch.reject")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function describeOp(op, i18n) {
+  switch (op.op) {
+    case "insert-node":
+      return i18n.t("patch.addWidget", {
+        title: op.node?.title ?? op.node?.kind ?? "widget",
+        slot: op.slotId ?? "slot"
+      });
+    case "remove-node":
+      return i18n.t("patch.removeItem");
+    case "set-layout":
+      return i18n.t("patch.switchLayout", { layoutId: op.layoutId });
+    case "reveal-field":
+      return i18n.t("patch.showField", { fieldId: op.fieldId });
+    case "hide-field":
+      return i18n.t("patch.hideField", { fieldId: op.fieldId });
+    case "move-node":
+      return i18n.t("patch.moveTo", { slot: op.toSlotId ?? "slot" });
+    case "replace-node":
+      return i18n.t("patch.replaceItem");
+    case "promote-action":
+      return i18n.t("patch.promote", { actionId: op.actionId });
+    default:
+      return `${op.op}`;
+  }
+}
+
+// src/react/OverlayConflictResolver.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+function OverlayConflictResolver({
+  conflicts,
+  onResolve,
+  locale
+}) {
+  const i18n = useMemo2(() => createSurfaceI18n(locale), [locale]);
+  return /* @__PURE__ */ jsxDEV7("div", {
+    "data-overlay-conflicts": true,
+    style: {
+      padding: "12px",
+      marginBottom: "12px",
+      border: "1px solid var(--destructive, #ef4444)",
+      borderRadius: "8px",
+      backgroundColor: "var(--destructive/10, #fef2f2)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          fontSize: "14px",
+          fontWeight: 600,
+          marginBottom: "8px",
+          color: "var(--destructive, #ef4444)"
+        },
+        children: i18n.t("overlay.conflicts.title")
+      }, undefined, false, undefined, this),
+      conflicts.map((c) => /* @__PURE__ */ jsxDEV7("div", {
+        style: {
+          padding: "8px",
+          marginBottom: "8px",
+          backgroundColor: "white",
+          borderRadius: "4px",
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV7("span", {
+            children: c.targetKey
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7("span", {
+            style: { margin: "0 8px", color: "#9ca3af" },
+            children: [
+              "(",
+              c.scopeA,
+              " vs ",
+              c.scopeB,
+              ")"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV7("div", {
+            style: { marginTop: "8px", display: "flex", gap: "8px" },
+            children: [
+              /* @__PURE__ */ jsxDEV7("button", {
+                type: "button",
+                onClick: () => onResolve({ targetKey: c.targetKey, chosenScope: "A" }),
+                style: {
+                  padding: "4px 12px",
+                  fontSize: "12px",
+                  borderRadius: "4px",
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "white",
+                  cursor: "pointer"
+                },
+                children: i18n.t("overlay.conflicts.keepScope", { scope: c.scopeA })
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("button", {
+                type: "button",
+                onClick: () => onResolve({ targetKey: c.targetKey, chosenScope: "B" }),
+                style: {
+                  padding: "4px 12px",
+                  fontSize: "12px",
+                  borderRadius: "4px",
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "white",
+                  cursor: "pointer"
+                },
+                children: i18n.t("overlay.conflicts.keepScope", { scope: c.scopeB })
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, `${c.targetKey}-${c.overlayIdA}-${c.overlayIdB}`, true, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/BundleRenderer.tsx
+import { jsxDEV as jsxDEV8, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function BundleRenderer({
+  assistantSlotId,
+  assistantSlotContent,
+  onPatchAccept,
+  onPatchReject,
+  onOverlayConflictResolve
+} = {}) {
+  const plan = useBundlePlan();
+  const motionTokens = motionAdapterStub.getTokens(plan.adaptation.appliedDimensions.pace);
+  const ctx = {
+    plan,
+    bindings: plan.bindings,
+    preferences: plan.adaptation.appliedDimensions
+  };
+  const proposals = plan.ai?.proposals?.filter((p) => p.approvalState === "proposed");
+  const locale = plan.locale;
+  const renderSlot = (slotId, slotCtx) => {
+    if (assistantSlotId && slotId === assistantSlotId) {
+      return /* @__PURE__ */ jsxDEV8(Fragment, {
+        children: [
+          proposals && proposals.length > 0 && onPatchAccept && onPatchReject && /* @__PURE__ */ jsxDEV8("div", {
+            style: { marginBottom: "12px" },
+            children: proposals.map((p) => /* @__PURE__ */ jsxDEV8(PatchProposalCard, {
+              proposal: p,
+              onAccept: onPatchAccept,
+              onReject: onPatchReject,
+              locale
+            }, p.proposalId, false, undefined, this))
+          }, undefined, false, undefined, this),
+          assistantSlotContent
+        ]
+      }, undefined, true, undefined, this);
+    }
+    const nodes = getNodesForSlot(plan.nodes, slotId);
+    return /* @__PURE__ */ jsxDEV8(SlotRenderer, {
+      slotId,
+      ctx: slotCtx,
+      nodes
+    }, undefined, false, undefined, this);
+  };
+  const conflicts = plan.overlayConflicts ?? [];
+  return /* @__PURE__ */ jsxDEV8("div", {
+    "data-bundle-key": plan.bundleKey,
+    "data-surface-id": plan.surfaceId,
+    "data-layout-id": plan.layoutId,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      minHeight: 0,
+      transition: motionTokens.layout ? `all ${motionTokens.durationMs}ms ease` : undefined
+    },
+    children: [
+      conflicts.length > 0 && onOverlayConflictResolve && /* @__PURE__ */ jsxDEV8(OverlayConflictResolver, {
+        conflicts,
+        onResolve: onOverlayConflictResolve,
+        locale
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8(RegionRenderer, {
+        region: plan.layoutRoot,
+        ctx,
+        renderSlot
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function getNodesForSlot(nodes, slotId) {
+  if (slotId === "primary")
+    return nodes;
+  return [];
+}
+
+// src/react/WidgetPalette.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+"use client";
+function WidgetPalette({
+  registry,
+  allowedNodeKinds,
+  onInsert
+}) {
+  const widgets = registry.listByTrust("core");
+  const filtered = !allowedNodeKinds || allowedNodeKinds.includes("custom-widget") ? widgets : [];
+  return /* @__PURE__ */ jsxDEV9("div", {
+    "data-widget-palette": true,
+    style: {
+      padding: "12px",
+      minWidth: "180px",
+      borderRight: "1px solid var(--border, #e5e7eb)",
+      backgroundColor: "var(--muted, #f9fafb)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        style: {
+          fontSize: "12px",
+          fontWeight: 600,
+          marginBottom: "8px",
+          textTransform: "uppercase",
+          color: "var(--muted-foreground, #6b7280)"
+        },
+        children: "Widgets"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9("ul", {
+        style: { listStyle: "none", margin: 0, padding: 0 },
+        children: filtered.map((w) => /* @__PURE__ */ jsxDEV9("li", {
+          "data-widget-key": w.widgetKey,
+          role: onInsert ? "button" : undefined,
+          tabIndex: onInsert ? 0 : undefined,
+          style: {
+            padding: "8px 12px",
+            marginBottom: "4px",
+            borderRadius: "6px",
+            cursor: onInsert ? "grab" : "default",
+            backgroundColor: "white",
+            border: "1px solid var(--border, #e5e7eb)"
+          },
+          onClick: onInsert ? () => onInsert(w.widgetKey, "primary") : undefined,
+          onKeyDown: onInsert ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onInsert(w.widgetKey, "primary");
+            }
+          } : undefined,
+          children: w.title
+        }, w.widgetKey, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  useIsEditing,
+  useBundlePreferences,
+  useBundlePlan,
+  WidgetPalette,
+  SlotRenderer,
+  RegionRenderer,
+  PatchProposalCard,
+  OverlayConflictResolver,
+  BundleRenderer,
+  BundleProvider
+};