@contractspec/lib.example-shared-ui 3.4.3 → 4.0.0

package/dist/index.js

@@ -2129,6 +2129,79 @@ function SaveToStudioButton({
   }, undefined, true, undefined, this);
 }
 
+// src/SpecDrivenTemplateShell.tsx
+import { BundleProvider, BundleRenderer } from "@contractspec/lib.surface-runtime/react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function SpecDrivenTemplateShell({
+  plan,
+  title,
+  description,
+  sidebar,
+  actions,
+  showSaveAction = true,
+  saveProps,
+  children
+}) {
+  const headerContent = /* @__PURE__ */ jsxDEV8("header", {
+    className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex flex-wrap items-center justify-between gap-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+                children: "ContractSpec Templates"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8("h1", {
+                className: "text-3xl font-bold",
+                children: title
+              }, undefined, false, undefined, this),
+              description ? /* @__PURE__ */ jsxDEV8("p", {
+                className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+                children: description
+              }, undefined, false, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex flex-col items-end gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV8(LocalDataIndicator, {}, undefined, false, undefined, this),
+              showSaveAction ? /* @__PURE__ */ jsxDEV8(SaveToStudioButton, {
+                ...saveProps
+              }, undefined, false, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      actions ? /* @__PURE__ */ jsxDEV8("div", {
+        className: "mt-4",
+        children: actions
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+  const slotContent = {
+    header: headerContent,
+    primary: /* @__PURE__ */ jsxDEV8("main", {
+      className: "space-y-4 p-2",
+      children
+    }, undefined, false, undefined, this)
+  };
+  if (sidebar != null) {
+    slotContent.sidebar = /* @__PURE__ */ jsxDEV8("aside", {
+      className: "border-border bg-card rounded-2xl border p-4",
+      children: sidebar
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV8(BundleProvider, {
+    plan,
+    children: /* @__PURE__ */ jsxDEV8(BundleRenderer, {
+      slotContent
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
 // src/utils/generateSpecFromTemplate.ts
 function generateSpecFromTemplate(template) {
   const templateId = template?.id ?? "unknown";
@@ -2698,7 +2771,7 @@ function useSpecContent(templateId) {
 import { useCallback as useCallback8, useEffect as useEffect5 } from "react";
 import { Button as Button5, LoaderBlock as LoaderBlock3 } from "@contractspec/lib.design-system";
 import { Badge as Badge5 } from "@contractspec/lib.ui-kit-web/ui/badge";
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 "use client";
 function SpecEditorPanel({
   templateId,
@@ -2740,54 +2813,54 @@ function SpecEditorPanel({
     onLog?.("Spec reset to template defaults");
   }, [reset, onLog]);
   if (loading) {
-    return /* @__PURE__ */ jsxDEV8(LoaderBlock3, {
+    return /* @__PURE__ */ jsxDEV9(LoaderBlock3, {
       label: "Loading spec..."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     className: "space-y-4",
     children: [
-      /* @__PURE__ */ jsxDEV8("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV8("div", {
+          /* @__PURE__ */ jsxDEV9("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsxDEV8(Button5, {
+              /* @__PURE__ */ jsxDEV9(Button5, {
                 variant: "default",
                 size: "sm",
                 onClick: handleSave,
                 children: "Save"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV8(Button5, {
+              /* @__PURE__ */ jsxDEV9(Button5, {
                 variant: "outline",
                 size: "sm",
                 onClick: handleValidate,
                 children: "Validate"
               }, undefined, false, undefined, this),
-              isDirty && /* @__PURE__ */ jsxDEV8(Badge5, {
+              isDirty && /* @__PURE__ */ jsxDEV9(Badge5, {
                 variant: "secondary",
                 className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
                 children: "Unsaved changes"
               }, undefined, false, undefined, this),
-              validation && /* @__PURE__ */ jsxDEV8(Badge5, {
+              validation && /* @__PURE__ */ jsxDEV9(Badge5, {
                 variant: validation.valid ? "default" : "destructive",
                 className: validation.valid ? "border-green-500/30 bg-green-500/20 text-green-400" : "",
                 children: validation.valid ? "Valid" : `${validation.errors.filter((e) => e.severity === "error").length} errors`
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV8("div", {
+          /* @__PURE__ */ jsxDEV9("div", {
             className: "flex items-center gap-2",
             children: [
-              lastSaved && /* @__PURE__ */ jsxDEV8("span", {
+              lastSaved && /* @__PURE__ */ jsxDEV9("span", {
                 className: "text-muted-foreground text-xs",
                 children: [
                   "Last saved: ",
                   new Date(lastSaved).toLocaleTimeString()
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV8(Button5, {
+              /* @__PURE__ */ jsxDEV9(Button5, {
                 variant: "ghost",
                 size: "sm",
                 onPress: handleReset,
@@ -2797,16 +2870,16 @@ function SpecEditorPanel({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      validation && validation.errors.length > 0 && /* @__PURE__ */ jsxDEV8("div", {
+      validation && validation.errors.length > 0 && /* @__PURE__ */ jsxDEV9("div", {
         className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
         children: [
-          /* @__PURE__ */ jsxDEV8("p", {
+          /* @__PURE__ */ jsxDEV9("p", {
             className: "mb-2 text-xs font-semibold text-amber-400 uppercase",
             children: "Validation Issues"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV8("ul", {
+          /* @__PURE__ */ jsxDEV9("ul", {
             className: "space-y-1",
-            children: validation.errors.map((error, index) => /* @__PURE__ */ jsxDEV8("li", {
+            children: validation.errors.map((error, index) => /* @__PURE__ */ jsxDEV9("li", {
               className: `text-xs ${error.severity === "error" ? "text-red-400" : "text-amber-400"}`,
               children: [
                 "Line ",
@@ -2818,9 +2891,9 @@ function SpecEditorPanel({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV8("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "border-border bg-card rounded-2xl border p-4",
-        children: /* @__PURE__ */ jsxDEV8(SpecEditor, {
+        children: /* @__PURE__ */ jsxDEV9(SpecEditor, {
           projectId: "sandbox",
           type: "CAPABILITY",
           content,
@@ -2835,7 +2908,7 @@ function SpecEditorPanel({
 }
 
 // src/TemplateShell.tsx
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
 var TemplateShell = ({
   title,
   description,
@@ -2844,56 +2917,56 @@ var TemplateShell = ({
   showSaveAction = true,
   saveProps,
   children
-}) => /* @__PURE__ */ jsxDEV9("div", {
+}) => /* @__PURE__ */ jsxDEV10("div", {
   className: "space-y-6",
   children: [
-    /* @__PURE__ */ jsxDEV9("header", {
+    /* @__PURE__ */ jsxDEV10("header", {
       className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
       children: [
-        /* @__PURE__ */ jsxDEV9("div", {
+        /* @__PURE__ */ jsxDEV10("div", {
           className: "flex flex-wrap items-center justify-between gap-4",
           children: [
-            /* @__PURE__ */ jsxDEV9("div", {
+            /* @__PURE__ */ jsxDEV10("div", {
               children: [
-                /* @__PURE__ */ jsxDEV9("p", {
+                /* @__PURE__ */ jsxDEV10("p", {
                   className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
                   children: "ContractSpec Templates"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV9("h1", {
+                /* @__PURE__ */ jsxDEV10("h1", {
                   className: "text-3xl font-bold",
                   children: title
                 }, undefined, false, undefined, this),
-                description ? /* @__PURE__ */ jsxDEV9("p", {
+                description ? /* @__PURE__ */ jsxDEV10("p", {
                   className: "text-muted-foreground mt-2 max-w-2xl text-sm",
                   children: description
                 }, undefined, false, undefined, this) : null
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV9("div", {
+            /* @__PURE__ */ jsxDEV10("div", {
               className: "flex flex-col items-end gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV9(LocalDataIndicator, {}, undefined, false, undefined, this),
-                showSaveAction ? /* @__PURE__ */ jsxDEV9(SaveToStudioButton, {
+                /* @__PURE__ */ jsxDEV10(LocalDataIndicator, {}, undefined, false, undefined, this),
+                showSaveAction ? /* @__PURE__ */ jsxDEV10(SaveToStudioButton, {
                   ...saveProps
                 }, undefined, false, undefined, this) : null
               ]
             }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        actions ? /* @__PURE__ */ jsxDEV9("div", {
+        actions ? /* @__PURE__ */ jsxDEV10("div", {
           className: "mt-4",
           children: actions
         }, undefined, false, undefined, this) : null
       ]
     }, undefined, true, undefined, this),
-    /* @__PURE__ */ jsxDEV9("div", {
+    /* @__PURE__ */ jsxDEV10("div", {
       className: sidebar ? "grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]" : "w-full",
       children: [
-        /* @__PURE__ */ jsxDEV9("main", {
+        /* @__PURE__ */ jsxDEV10("main", {
           className: "space-y-4 p-2",
           children
         }, undefined, false, undefined, this),
-        sidebar ? /* @__PURE__ */ jsxDEV9("aside", {
+        sidebar ? /* @__PURE__ */ jsxDEV10("aside", {
           className: "border-border bg-card rounded-2xl border p-4",
           children: sidebar
         }, undefined, false, undefined, this) : null
@@ -3487,6 +3560,7 @@ export {
   TemplateRuntimeContext,
   TemplateComponentRegistry,
   SpecEditorPanel,
+  SpecDrivenTemplateShell,
   SaveToStudioButton,
   PersonalizationInsights,
   OverlayContextProvider,

package/dist/node/SpecDrivenTemplateShell.js

@@ -0,0 +1,194 @@
+// src/lib/runtime-context.tsx
+import { createContext, useContext } from "react";
+"use client";
+var TemplateRuntimeContext = createContext(null);
+function useTemplateRuntime() {
+  const context = useContext(TemplateRuntimeContext);
+  if (!context) {
+    throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
+  }
+  return context;
+}
+
+// src/LocalDataIndicator.tsx
+import { RefreshCw, Shield } from "lucide-react";
+import { useState } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function LocalDataIndicator() {
+  const { projectId, templateId, template, installer } = useTemplateRuntime();
+  const [isResetting, setIsResetting] = useState(false);
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      await installer.install(templateId, { projectId });
+    } finally {
+      setIsResetting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "border-border bg-muted/40 text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
+    children: [
+      /* @__PURE__ */ jsxDEV(Shield, {
+        className: "h-3.5 w-3.5 text-violet-400"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        children: [
+          "Local runtime ·",
+          " ",
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "text-foreground font-semibold",
+            children: template.name
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("button", {
+        type: "button",
+        className: "border-border text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold",
+        onClick: handleReset,
+        disabled: isResetting,
+        children: [
+          /* @__PURE__ */ jsxDEV(RefreshCw, {
+            className: "h-3 w-3"
+          }, undefined, false, undefined, this),
+          isResetting ? "Resetting…" : "Reset data"
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/SaveToStudioButton.tsx
+import { useState as useState2 } from "react";
+import { Sparkles } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function SaveToStudioButton({
+  organizationId = "demo-org",
+  projectName,
+  endpoint,
+  token
+}) {
+  const { installer, templateId, template } = useTemplateRuntime();
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const handleSave = async () => {
+    setStatus("saving");
+    setError(null);
+    try {
+      await installer.saveToStudio({
+        templateId,
+        projectName: projectName ?? `${template.name} demo`,
+        organizationId,
+        endpoint,
+        token
+      });
+      setStatus("saved");
+      setTimeout(() => setStatus("idle"), 3000);
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Unknown error");
+    }
+  };
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "flex flex-col items-end gap-1",
+    children: [
+      /* @__PURE__ */ jsxDEV2("button", {
+        type: "button",
+        className: "btn-primary inline-flex items-center gap-2 text-sm",
+        onClick: handleSave,
+        disabled: status === "saving",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Sparkles, {
+            className: "h-4 w-4"
+          }, undefined, false, undefined, this),
+          status === "saving" ? "Publishing…" : "Save to Studio"
+        ]
+      }, undefined, true, undefined, this),
+      status === "error" && error ? /* @__PURE__ */ jsxDEV2("p", {
+        className: "text-destructive text-xs",
+        children: error
+      }, undefined, false, undefined, this) : null,
+      status === "saved" ? /* @__PURE__ */ jsxDEV2("p", {
+        className: "text-xs text-emerald-400",
+        children: "Template sent to Studio."
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/SpecDrivenTemplateShell.tsx
+import { BundleProvider, BundleRenderer } from "@contractspec/lib.surface-runtime/react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function SpecDrivenTemplateShell({
+  plan,
+  title,
+  description,
+  sidebar,
+  actions,
+  showSaveAction = true,
+  saveProps,
+  children
+}) {
+  const headerContent = /* @__PURE__ */ jsxDEV3("header", {
+    className: "border-border bg-card rounded-2xl border p-6 shadow-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex flex-wrap items-center justify-between gap-4",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+                children: "ContractSpec Templates"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("h1", {
+                className: "text-3xl font-bold",
+                children: title
+              }, undefined, false, undefined, this),
+              description ? /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground mt-2 max-w-2xl text-sm",
+                children: description
+              }, undefined, false, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex flex-col items-end gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3(LocalDataIndicator, {}, undefined, false, undefined, this),
+              showSaveAction ? /* @__PURE__ */ jsxDEV3(SaveToStudioButton, {
+                ...saveProps
+              }, undefined, false, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      actions ? /* @__PURE__ */ jsxDEV3("div", {
+        className: "mt-4",
+        children: actions
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+  const slotContent = {
+    header: headerContent,
+    primary: /* @__PURE__ */ jsxDEV3("main", {
+      className: "space-y-4 p-2",
+      children
+    }, undefined, false, undefined, this)
+  };
+  if (sidebar != null) {
+    slotContent.sidebar = /* @__PURE__ */ jsxDEV3("aside", {
+      className: "border-border bg-card rounded-2xl border p-4",
+      children: sidebar
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3(BundleProvider, {
+    plan,
+    children: /* @__PURE__ */ jsxDEV3(BundleRenderer, {
+      slotContent
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  SpecDrivenTemplateShell
+};

package/dist/node/bundles/ExampleTemplateBundle.js

@@ -0,0 +1,85 @@
+// src/bundles/ExampleTemplateBundle.ts
+import { defineModuleBundle } from "@contractspec/lib.surface-runtime/spec";
+var ExampleTemplateBundle = defineModuleBundle({
+  meta: {
+    key: "example.template",
+    version: "0.1.0",
+    title: "Example Template",
+    description: "Adaptive template shell for ContractSpec examples",
+    owners: ["team-platform"],
+    tags: ["example", "template"],
+    stability: "experimental"
+  },
+  routes: [
+    {
+      routeId: "template",
+      path: "/sandbox",
+      defaultSurface: "template-shell"
+    }
+  ],
+  surfaces: {
+    "template-shell": {
+      surfaceId: "template-shell",
+      kind: "workbench",
+      title: "Template Shell",
+      slots: [
+        {
+          slotId: "header",
+          role: "header",
+          accepts: ["action-bar"],
+          cardinality: "many"
+        },
+        {
+          slotId: "primary",
+          role: "primary",
+          accepts: ["entity-section", "rich-doc", "form", "custom-widget"],
+          cardinality: "many"
+        },
+        {
+          slotId: "sidebar",
+          role: "secondary",
+          accepts: ["entity-section", "custom-widget"],
+          cardinality: "one"
+        }
+      ],
+      layouts: [
+        {
+          layoutId: "main-with-sidebar",
+          title: "Main with sidebar",
+          root: {
+            type: "panel-group",
+            direction: "horizontal",
+            persistKey: "example.template.main-sidebar",
+            children: [
+              {
+                type: "panel-group",
+                direction: "vertical",
+                persistKey: "example.template.content",
+                children: [
+                  { type: "slot", slotId: "header" },
+                  { type: "slot", slotId: "primary" }
+                ]
+              },
+              { type: "slot", slotId: "sidebar" }
+            ]
+          }
+        }
+      ],
+      data: [],
+      verification: {
+        dimensions: {
+          guidance: "Can reveal hints and walkthrough notes.",
+          density: "Can select compact or balanced layouts.",
+          dataDepth: "Controls content depth and expansion.",
+          control: "Shows advanced options when allowed.",
+          media: "Supports text-first and hybrid modes.",
+          pace: "Maps to motion tokens and transitions.",
+          narrative: "Can order summary before or after detail."
+        }
+      }
+    }
+  }
+});
+export {
+  ExampleTemplateBundle
+};

package/dist/node/bundles/index.js

@@ -0,0 +1,85 @@
+// src/bundles/ExampleTemplateBundle.ts
+import { defineModuleBundle } from "@contractspec/lib.surface-runtime/spec";
+var ExampleTemplateBundle = defineModuleBundle({
+  meta: {
+    key: "example.template",
+    version: "0.1.0",
+    title: "Example Template",
+    description: "Adaptive template shell for ContractSpec examples",
+    owners: ["team-platform"],
+    tags: ["example", "template"],
+    stability: "experimental"
+  },
+  routes: [
+    {
+      routeId: "template",
+      path: "/sandbox",
+      defaultSurface: "template-shell"
+    }
+  ],
+  surfaces: {
+    "template-shell": {
+      surfaceId: "template-shell",
+      kind: "workbench",
+      title: "Template Shell",
+      slots: [
+        {
+          slotId: "header",
+          role: "header",
+          accepts: ["action-bar"],
+          cardinality: "many"
+        },
+        {
+          slotId: "primary",
+          role: "primary",
+          accepts: ["entity-section", "rich-doc", "form", "custom-widget"],
+          cardinality: "many"
+        },
+        {
+          slotId: "sidebar",
+          role: "secondary",
+          accepts: ["entity-section", "custom-widget"],
+          cardinality: "one"
+        }
+      ],
+      layouts: [
+        {
+          layoutId: "main-with-sidebar",
+          title: "Main with sidebar",
+          root: {
+            type: "panel-group",
+            direction: "horizontal",
+            persistKey: "example.template.main-sidebar",
+            children: [
+              {
+                type: "panel-group",
+                direction: "vertical",
+                persistKey: "example.template.content",
+                children: [
+                  { type: "slot", slotId: "header" },
+                  { type: "slot", slotId: "primary" }
+                ]
+              },
+              { type: "slot", slotId: "sidebar" }
+            ]
+          }
+        }
+      ],
+      data: [],
+      verification: {
+        dimensions: {
+          guidance: "Can reveal hints and walkthrough notes.",
+          density: "Can select compact or balanced layouts.",
+          dataDepth: "Controls content depth and expansion.",
+          control: "Shows advanced options when allowed.",
+          media: "Supports text-first and hybrid modes.",
+          pace: "Maps to motion tokens and transitions.",
+          narrative: "Can order summary before or after detail."
+        }
+      }
+    }
+  }
+});
+export {
+  ExampleTemplateBundle
+};