@contractspec/lib.surface-runtime 0.2.0

package/dist/node/react/OverlayConflictResolver.js

@@ -0,0 +1,255 @@
+// 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ón" },
+    "overlay.conflicts.keepScope": { value: "Mantener {scope}" },
+    "patch.accept": { value: "Aceptar" },
+    "patch.reject": { value: "Rechazar" },
+    "patch.addWidget": { value: "Añadir {title} a {slot}" },
+    "patch.removeItem": { value: "Eliminar elemento" },
+    "patch.switchLayout": { value: "Cambiar a disposición {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} à {slot}" },
+    "patch.removeItem": { value: "Supprimer l'élément" },
+    "patch.switchLayout": { value: "Passer à la disposition {layoutId}" },
+    "patch.showField": { value: "Afficher le champ {fieldId}" },
+    "patch.hideField": { value: "Masquer le champ {fieldId}" },
+    "patch.moveTo": { value: "Déplacer vers {slot}" },
+    "patch.replaceItem": { value: "Remplacer l'élément" },
+    "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/OverlayConflictResolver.tsx
+import { useMemo } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function OverlayConflictResolver({
+  conflicts,
+  onResolve,
+  locale
+}) {
+  const i18n = useMemo(() => createSurfaceI18n(locale), [locale]);
+  return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("div", {
+        style: {
+          padding: "8px",
+          marginBottom: "8px",
+          backgroundColor: "white",
+          borderRadius: "4px",
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            children: c.targetKey
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            style: { margin: "0 8px", color: "#9ca3af" },
+            children: [
+              "(",
+              c.scopeA,
+              " vs ",
+              c.scopeB,
+              ")"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            style: { marginTop: "8px", display: "flex", gap: "8px" },
+            children: [
+              /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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);
+}
+export {
+  OverlayConflictResolver
+};

package/dist/node/react/PatchProposalCard.js

@@ -0,0 +1,255 @@
+// 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ón" },
+    "overlay.conflicts.keepScope": { value: "Mantener {scope}" },
+    "patch.accept": { value: "Aceptar" },
+    "patch.reject": { value: "Rechazar" },
+    "patch.addWidget": { value: "Añadir {title} a {slot}" },
+    "patch.removeItem": { value: "Eliminar elemento" },
+    "patch.switchLayout": { value: "Cambiar a disposición {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} à {slot}" },
+    "patch.removeItem": { value: "Supprimer l'élément" },
+    "patch.switchLayout": { value: "Passer à la disposition {layoutId}" },
+    "patch.showField": { value: "Afficher le champ {fieldId}" },
+    "patch.hideField": { value: "Masquer le champ {fieldId}" },
+    "patch.moveTo": { value: "Déplacer vers {slot}" },
+    "patch.replaceItem": { value: "Remplacer l'élément" },
+    "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/PatchProposalCard.tsx
+import { useMemo } from "react";
+import { jsxDEV } 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__ */ jsxDEV("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__ */ jsxDEV("div", {
+        style: { marginBottom: "8px", fontSize: "14px" },
+        children: summary
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: { display: "flex", gap: "8px" },
+        children: [
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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}`;
+  }
+}
+export {
+  PatchProposalCard
+};

package/dist/node/react/RegionRenderer.js

@@ -0,0 +1,128 @@
+// src/adapters/resizable-panels-stub.tsx
+import { jsxDEV } 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__ */ jsxDEV("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__ */ jsxDEV("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/react/RegionRenderer.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function RegionRenderer({
+  region,
+  ctx,
+  renderSlot
+}) {
+  const renderChild = (child, childCtx) => /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2("div", {
+        "data-region": "stack",
+        style: {
+          display: "flex",
+          flexDirection: direction,
+          gap,
+          flex: 1,
+          minHeight: 0
+        },
+        children: region.children.map((child, i) => /* @__PURE__ */ jsxDEV2("div", {
+          style: { flex: 1, minWidth: 0, minHeight: 0 },
+          children: /* @__PURE__ */ jsxDEV2(RegionRenderer, {
+            region: child,
+            ctx,
+            renderSlot
+          }, undefined, false, undefined, this)
+        }, i, false, undefined, this))
+      }, undefined, false, undefined, this);
+    }
+    case "tabs":
+      return /* @__PURE__ */ jsxDEV2("div", {
+        "data-region": "tabs",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            role: "tablist",
+            children: region.tabs.map((t) => /* @__PURE__ */ jsxDEV2("button", {
+              type: "button",
+              role: "tab",
+              children: t.title
+            }, t.key, false, undefined, this))
+          }, undefined, false, undefined, this),
+          region.tabs[0] && /* @__PURE__ */ jsxDEV2(RegionRenderer, {
+            region: region.tabs[0].child,
+            ctx,
+            renderSlot
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "slot":
+      return /* @__PURE__ */ jsxDEV2("div", {
+        "data-slot": region.slotId,
+        children: renderSlot(region.slotId, ctx)
+      }, undefined, false, undefined, this);
+    case "floating":
+      return /* @__PURE__ */ jsxDEV2("div", {
+        "data-floating": true,
+        "data-anchor": region.anchorSlotId,
+        children: /* @__PURE__ */ jsxDEV2(RegionRenderer, {
+          region: region.child,
+          ctx,
+          renderSlot
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    default:
+      return null;
+  }
+}
+export {
+  RegionRenderer
+};