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

package/dist/node/index.js

@@ -2128,6 +2128,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";
@@ -2697,7 +2770,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,
@@ -2739,54 +2812,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,
@@ -2796,16 +2869,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 ",
@@ -2817,9 +2890,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,
@@ -2834,7 +2907,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,
@@ -2843,56 +2916,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
@@ -3486,6 +3559,7 @@ export {
   TemplateRuntimeContext,
   TemplateComponentRegistry,
   SpecEditorPanel,
+  SpecDrivenTemplateShell,
   SaveToStudioButton,
   PersonalizationInsights,
   OverlayContextProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/lib.example-shared-ui",
-  "version": "3.4.3",
+  "version": "4.0.0",
   "type": "module",
   "exports": {
     ".": {
@@ -10,6 +10,27 @@
       "browser": "./dist/browser/index.js",
       "default": "./dist/index.js"
     },
+    "./bundles": {
+      "types": "./dist/bundles/index.d.ts",
+      "bun": "./dist/bundles/index.js",
+      "node": "./dist/node/bundles/index.js",
+      "browser": "./dist/browser/bundles/index.js",
+      "default": "./dist/bundles/index.js"
+    },
+    "./bundles/ExampleTemplateBundle": {
+      "types": "./dist/bundles/ExampleTemplateBundle.d.ts",
+      "bun": "./dist/bundles/ExampleTemplateBundle.js",
+      "node": "./dist/node/bundles/ExampleTemplateBundle.js",
+      "browser": "./dist/browser/bundles/ExampleTemplateBundle.js",
+      "default": "./dist/bundles/ExampleTemplateBundle.js"
+    },
+    "./bundles/index": {
+      "types": "./dist/bundles/index.d.ts",
+      "bun": "./dist/bundles/index.js",
+      "node": "./dist/node/bundles/index.js",
+      "browser": "./dist/browser/bundles/index.js",
+      "default": "./dist/bundles/index.js"
+    },
     "./EvolutionDashboard": {
       "types": "./dist/EvolutionDashboard.d.ts",
       "bun": "./dist/EvolutionDashboard.js",
@@ -136,6 +157,13 @@
       "browser": "./dist/browser/SaveToStudioButton.js",
       "default": "./dist/SaveToStudioButton.js"
     },
+    "./SpecDrivenTemplateShell": {
+      "types": "./dist/SpecDrivenTemplateShell.d.ts",
+      "bun": "./dist/SpecDrivenTemplateShell.js",
+      "node": "./dist/node/SpecDrivenTemplateShell.js",
+      "browser": "./dist/browser/SpecDrivenTemplateShell.js",
+      "default": "./dist/SpecDrivenTemplateShell.js"
+    },
     "./SpecEditorPanel": {
       "types": "./dist/SpecEditorPanel.d.ts",
       "bun": "./dist/SpecEditorPanel.js",
@@ -205,6 +233,27 @@
         "browser": "./dist/browser/index.js",
         "default": "./dist/index.js"
       },
+      "./bundles": {
+        "types": "./dist/bundles/index.d.ts",
+        "bun": "./dist/bundles/index.js",
+        "node": "./dist/node/bundles/index.js",
+        "browser": "./dist/browser/bundles/index.js",
+        "default": "./dist/bundles/index.js"
+      },
+      "./bundles/ExampleTemplateBundle": {
+        "types": "./dist/bundles/ExampleTemplateBundle.d.ts",
+        "bun": "./dist/bundles/ExampleTemplateBundle.js",
+        "node": "./dist/node/bundles/ExampleTemplateBundle.js",
+        "browser": "./dist/browser/bundles/ExampleTemplateBundle.js",
+        "default": "./dist/bundles/ExampleTemplateBundle.js"
+      },
+      "./bundles/index": {
+        "types": "./dist/bundles/index.d.ts",
+        "bun": "./dist/bundles/index.js",
+        "node": "./dist/node/bundles/index.js",
+        "browser": "./dist/browser/bundles/index.js",
+        "default": "./dist/bundles/index.js"
+      },
       "./EvolutionDashboard": {
         "types": "./dist/EvolutionDashboard.d.ts",
         "bun": "./dist/EvolutionDashboard.js",
@@ -331,6 +380,13 @@
         "browser": "./dist/browser/SaveToStudioButton.js",
         "default": "./dist/SaveToStudioButton.js"
       },
+      "./SpecDrivenTemplateShell": {
+        "types": "./dist/SpecDrivenTemplateShell.d.ts",
+        "bun": "./dist/SpecDrivenTemplateShell.js",
+        "node": "./dist/node/SpecDrivenTemplateShell.js",
+        "browser": "./dist/browser/SpecDrivenTemplateShell.js",
+        "default": "./dist/SpecDrivenTemplateShell.js"
+      },
       "./SpecEditorPanel": {
         "types": "./dist/SpecEditorPanel.d.ts",
         "bun": "./dist/SpecEditorPanel.js",
@@ -375,24 +431,35 @@
       }
     }
   },
+  "peerDependencies": {
+    "@contractspec/lib.surface-runtime": "0.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@contractspec/lib.surface-runtime": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@apollo/client": "^4.1.6",
-    "@contractspec/lib.contracts-spec": "3.4.3",
-    "@contractspec/lib.design-system": "3.4.3",
-    "@contractspec/lib.ui-kit-web": "3.4.3",
+    "@contractspec/lib.contracts-spec": "3.5.0",
+    "@contractspec/lib.design-system": "3.5.0",
+    "@contractspec/lib.ui-kit-web": "3.5.0",
     "@tanstack/react-query": "^5.90.21",
-    "framer-motion": "^12.35.0",
+    "framer-motion": "^12.35.1",
     "lucide-react": "^0.577.0",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
+  "optionalDependencies": {
+    "@contractspec/lib.surface-runtime": "0.3.0"
+  },
   "devDependencies": {
-    "@contractspec/tool.typescript": "3.4.3",
+    "@contractspec/tool.typescript": "3.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.2",
     "eslint": "^9.39.2",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.4.3"
+    "@contractspec/tool.bun": "3.5.0"
   },
   "types": "./dist/index.d.ts"
 }

package/src/SpecDrivenTemplateShell.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import { BundleProvider, BundleRenderer } from '@contractspec/lib.surface-runtime/react';
+import type { ResolvedSurfacePlan } from '@contractspec/lib.surface-runtime/runtime/resolve-bundle';
+import { LocalDataIndicator } from './LocalDataIndicator';
+import {
+  SaveToStudioButton,
+  type SaveToStudioButtonProps,
+} from './SaveToStudioButton';
+
+export interface SpecDrivenTemplateShellProps {
+  plan: ResolvedSurfacePlan;
+  title: string;
+  description?: string;
+  sidebar?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  showSaveAction?: boolean;
+  saveProps?: SaveToStudioButtonProps;
+}
+
+/**
+ * Template shell driven by surface-runtime bundle spec.
+ * Uses BundleRenderer for adaptive, preference-driven layouts.
+ * Requires @contractspec/lib.surface-runtime as peer dependency.
+ */
+export function SpecDrivenTemplateShell({
+  plan,
+  title,
+  description,
+  sidebar,
+  actions,
+  showSaveAction = true,
+  saveProps,
+  children,
+}: SpecDrivenTemplateShellProps) {
+  const headerContent = (
+    <header className="border-border bg-card rounded-2xl border p-6 shadow-sm">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <p className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
+            ContractSpec Templates
+          </p>
+          <h1 className="text-3xl font-bold">{title}</h1>
+          {description ? (
+            <p className="text-muted-foreground mt-2 max-w-2xl text-sm">
+              {description}
+            </p>
+          ) : null}
+        </div>
+        <div className="flex flex-col items-end gap-2">
+          <LocalDataIndicator />
+          {showSaveAction ? <SaveToStudioButton {...saveProps} /> : null}
+        </div>
+      </div>
+      {actions ? <div className="mt-4">{actions}</div> : null}
+    </header>
+  );
+
+  const slotContent: Partial<Record<string, ReactNode>> = {
+    header: headerContent,
+    primary: <main className="space-y-4 p-2">{children}</main>,
+  };
+  if (sidebar != null) {
+    slotContent.sidebar = (
+      <aside className="border-border bg-card rounded-2xl border p-4">
+        {sidebar}
+      </aside>
+    );
+  }
+
+  return (
+    <BundleProvider plan={plan}>
+      <BundleRenderer slotContent={slotContent} />
+    </BundleProvider>
+  );
+}

package/src/bundles/ExampleTemplateBundle.ts

@@ -0,0 +1,91 @@
+/**
+ * Minimal bundle spec for example template shells.
+ * Requires @contractspec/lib.surface-runtime when used.
+ */
+
+import { defineModuleBundle } from '@contractspec/lib.surface-runtime/spec';
+
+export const 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.',
+        },
+      },
+    },
+  },
+});

package/src/bundles/index.ts

@@ -0,0 +1 @@
+export { ExampleTemplateBundle } from './ExampleTemplateBundle';

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './TemplateShell';
+export * from './SpecDrivenTemplateShell';
 export * from './LocalDataIndicator';
 export * from './SaveToStudioButton';
 export * from './overlay-types';