@contractspec/lib.example-shared-ui 6.0.17 → 6.0.19

package/dist/browser/SpecDrivenTemplateShell.js

@@ -1,203 +1 @@
-// src/lib/runtime-context.tsx
-import { createContext, useContext } from "react";
-"use client";
-var TEMPLATE_RUNTIME_CONTEXT_KEY = Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");
-function getTemplateRuntimeContextSingleton() {
-  const store = globalThis;
-  store[TEMPLATE_RUNTIME_CONTEXT_KEY] ??= createContext(null);
-  return store[TEMPLATE_RUNTIME_CONTEXT_KEY];
-}
-var TemplateRuntimeContext = getTemplateRuntimeContextSingleton();
-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: "inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-muted-foreground 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: "font-semibold text-foreground",
-            children: template.name
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("button", {
-        type: "button",
-        className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-semibold text-[11px] text-muted-foreground hover:text-foreground",
-        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 { Sparkles } from "lucide-react";
-import { useState as useState2 } from "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-emerald-400 text-xs",
-        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: "rounded-2xl border border-border bg-card 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: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
-                children: "ContractSpec Templates"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("h1", {
-                className: "font-bold text-3xl",
-                children: title
-              }, undefined, false, undefined, this),
-              description ? /* @__PURE__ */ jsxDEV3("p", {
-                className: "mt-2 max-w-2xl text-muted-foreground 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: "rounded-2xl border border-border bg-card 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
-};
+import{createContext as w,useContext as R}from"react";var y=Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");function I(){let e=globalThis;return e[y]??=w(null),e[y]}var z=I();function p(){let e=R(z);if(!e)throw Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");return e}import{RefreshCw as $,Shield as q}from"lucide-react";import{useState as F}from"react";import{jsx as f,jsxs as g}from"react/jsx-runtime";function S(){let{projectId:e,templateId:m,template:a,installer:o}=p(),[r,n]=F(!1),i=async()=>{n(!0);try{await o.install(m,{projectId:e})}finally{n(!1)}};return g("div",{className:"inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-muted-foreground text-xs",children:[f(q,{className:"h-3.5 w-3.5 text-violet-400"}),g("span",{children:["Local runtime ·"," ",f("span",{className:"font-semibold text-foreground",children:a.name})]}),g("button",{type:"button",className:"inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-semibold text-[11px] text-muted-foreground hover:text-foreground",onClick:i,disabled:r,children:[f($,{className:"h-3 w-3"}),r?"Resetting…":"Reset data"]})]})}import{Sparkles as G}from"lucide-react";import{useState as N}from"react";import{jsx as b,jsxs as h}from"react/jsx-runtime";function k({organizationId:e="demo-org",projectName:m,endpoint:a,token:o}){let{installer:r,templateId:n,template:i}=p(),[l,d]=N("idle"),[u,c]=N(null);return h("div",{className:"flex flex-col items-end gap-1",children:[h("button",{type:"button",className:"btn-primary inline-flex items-center gap-2 text-sm",onClick:async()=>{d("saving"),c(null);try{await r.saveToStudio({templateId:n,projectName:m??`${i.name} demo`,organizationId:e,endpoint:a,token:o}),d("saved"),setTimeout(()=>d("idle"),3000)}catch(v){d("error"),c(v instanceof Error?v.message:"Unknown error")}},disabled:l==="saving",children:[b(G,{className:"h-4 w-4"}),l==="saving"?"Publishing…":"Save to Studio"]}),l==="error"&&u?b("p",{className:"text-destructive text-xs",children:u}):null,l==="saved"?b("p",{className:"text-emerald-400 text-xs",children:"Template sent to Studio."}):null]})}import{BundleProvider as H,BundleRenderer as J}from"@contractspec/lib.surface-runtime/react";import{jsx as t,jsxs as s}from"react/jsx-runtime";function x({plan:e,title:m,description:a,sidebar:o,actions:r,showSaveAction:n=!0,saveProps:i,children:l}){let u={header:s("header",{className:"rounded-2xl border border-border bg-card p-6 shadow-sm",children:[s("div",{className:"flex flex-wrap items-center justify-between gap-4",children:[s("div",{children:[t("p",{className:"font-semibold text-muted-foreground text-sm uppercase tracking-wide",children:"ContractSpec Templates"}),t("h1",{className:"font-bold text-3xl",children:m}),a?t("p",{className:"mt-2 max-w-2xl text-muted-foreground text-sm",children:a}):null]}),s("div",{className:"flex flex-col items-end gap-2",children:[t(S,{}),n?t(k,{...i}):null]})]}),r?t("div",{className:"mt-4",children:r}):null]}),primary:t("main",{className:"space-y-4 p-2",children:l})};if(o!=null)u.sidebar=t("aside",{className:"rounded-2xl border border-border bg-card p-4",children:o});return t(H,{plan:e,children:t(J,{slotContent:u})})}export{x as SpecDrivenTemplateShell};

package/dist/browser/SpecEditorPanel.js

@@ -1,47 +1,5 @@
-// src/lib/runtime-context.tsx
-import { createContext, useContext } from "react";
-"use client";
-var TEMPLATE_RUNTIME_CONTEXT_KEY = Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");
-function getTemplateRuntimeContextSingleton() {
-  const store = globalThis;
-  store[TEMPLATE_RUNTIME_CONTEXT_KEY] ??= createContext(null);
-  return store[TEMPLATE_RUNTIME_CONTEXT_KEY];
-}
-var TemplateRuntimeContext = getTemplateRuntimeContextSingleton();
-function useTemplateRuntime() {
-  const context = useContext(TemplateRuntimeContext);
-  if (!context) {
-    throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
-  }
-  return context;
-}
-
-// src/utils/generateSpecFromTemplate.ts
-function generateSpecFromTemplate(template) {
-  const templateId = template?.id ?? "unknown";
-  if (!template) {
-    return generateDefaultSpec(templateId);
-  }
-  switch (templateId) {
-    case "crm-pipeline":
-      return generateCrmPipelineSpec(template.schema.contracts);
-    case "saas-boilerplate":
-      return generateSaasBoilerplateSpec(template.schema.contracts);
-    case "agent-console":
-      return generateAgentConsoleSpec(template.schema.contracts);
-    case "todos-app":
-      return generateTodosSpec(template.schema.contracts);
-    case "messaging-app":
-      return generateMessagingSpec(template.schema.contracts);
-    case "recipe-app-i18n":
-      return generateRecipeSpec(template.schema.contracts);
-    default:
-      return generateDefaultSpec(templateId);
-  }
-}
-function generateCrmPipelineSpec(contracts) {
-  return `// CRM Pipeline Specs
-// Contracts: ${contracts.join(", ")}
+import{createContext as g,useContext as i}from"react";var L=Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");function m(){let q=globalThis;return q[L]??=g(null),q[L]}var c=m();function x(){let q=i(c);if(!q)throw Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");return q}function F(q){let Z=q?.id??"unknown";if(!q)return I(Z);switch(Z){case"crm-pipeline":return p(q.schema.contracts);case"saas-boilerplate":return d(q.schema.contracts);case"agent-console":return l(q.schema.contracts);case"todos-app":return r(q.schema.contracts);case"messaging-app":return s(q.schema.contracts);case"recipe-app-i18n":return o(q.schema.contracts);default:return I(Z)}}function p(q){return`// CRM Pipeline Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("crm.deal.updateStage.v1", {
   goal: "Move a deal to a different pipeline stage",
@@ -110,11 +68,8 @@ contractSpec("crm.contact.list.v1", {
       hasMore: "boolean"
     }
   }
-});`;
-}
-function generateSaasBoilerplateSpec(contracts) {
-  return `// SaaS Boilerplate Specs
-// Contracts: ${contracts.join(", ")}
+});`}function d(q){return`// SaaS Boilerplate Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("saas.project.create.v1", {
   goal: "Create a new project in an organization",
@@ -177,11 +132,8 @@ contractSpec("saas.settings.update.v1", {
     }
   },
   events: ["settings.updated"]
-});`;
-}
-function generateAgentConsoleSpec(contracts) {
-  return `// Agent Console Specs
-// Contracts: ${contracts.join(", ")}
+});`}function l(q){return`// Agent Console Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("agent.run.execute.v1", {
   goal: "Execute an agent run with specified tools",
@@ -247,11 +199,8 @@ contractSpec("agent.agent.create.v1", {
     }
   },
   events: ["agent.created"]
-});`;
-}
-function generateTodosSpec(contracts) {
-  return `// To-dos App Specs
-// Contracts: ${contracts.join(", ")}
+});`}function r(q){return`// To-dos App Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("tasks.board.v1", {
   goal: "Assign and approve craft work",
@@ -310,11 +259,8 @@ contractSpec("tasks.complete.v1", {
     }
   },
   events: ["task.completed"]
-});`;
-}
-function generateMessagingSpec(contracts) {
-  return `// Messaging App Specs
-// Contracts: ${contracts.join(", ")}
+});`}function s(q){return`// Messaging App Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("messaging.send.v1", {
   goal: "Deliver intent-rich updates",
@@ -367,11 +313,8 @@ contractSpec("messaging.read.v1", {
     }
   },
   events: ["message.read"]
-});`;
-}
-function generateRecipeSpec(contracts) {
-  return `// Recipe App (i18n) Specs
-// Contracts: ${contracts.join(", ")}
+});`}function o(q){return`// Recipe App (i18n) Specs
+// Contracts: ${q.join(", ")}
 
 contractSpec("recipes.lookup.v1", {
   goal: "Serve bilingual rituals",
@@ -418,13 +361,10 @@ contractSpec("recipes.favorite.toggle.v1", {
     }
   },
   events: ["recipe.favorited", "recipe.unfavorited"]
-});`;
-}
-function generateDefaultSpec(templateId) {
-  return `// ${templateId} Specs
+});`}function I(q){return`// ${q} Specs
 
-contractSpec("${templateId}.main.v1", {
-  goal: "Main operation for ${templateId}",
+contractSpec("${q}.main.v1", {
+  goal: "Main operation for ${q}",
   transport: { gql: { query: "main" } },
   io: {
     input: { 
@@ -434,292 +374,5 @@ contractSpec("${templateId}.main.v1", {
       result: "unknown"
     }
   }
-});`;
-}
-
-// src/hooks/useSpecContent.ts
-import { useCallback, useEffect, useState } from "react";
-"use client";
-var SPEC_STORAGE_KEY = "contractspec-spec-content";
-function useSpecContent(templateId) {
-  const { template } = useTemplateRuntime();
-  const [content, setContentState] = useState("");
-  const [savedContent, setSavedContent] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [validation, setValidation] = useState(null);
-  const [lastSaved, setLastSaved] = useState(null);
-  useEffect(() => {
-    setLoading(true);
-    try {
-      const stored = localStorage.getItem(`${SPEC_STORAGE_KEY}-${templateId}`);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        if (parsed.content) {
-          setContentState(parsed.content);
-          setSavedContent(parsed.content);
-          setLastSaved(parsed.savedAt);
-        } else {
-          const generated = generateSpecFromTemplate(template);
-          setContentState(generated);
-          setSavedContent(generated);
-        }
-      } else {
-        const generated = generateSpecFromTemplate(template);
-        setContentState(generated);
-        setSavedContent(generated);
-      }
-    } catch {
-      const generated = generateSpecFromTemplate(template);
-      setContentState(generated);
-      setSavedContent(generated);
-    }
-    setLoading(false);
-  }, [templateId]);
-  const setContent = useCallback((newContent) => {
-    setContentState(newContent);
-    setValidation(null);
-  }, []);
-  const save = useCallback(() => {
-    try {
-      const savedAt = new Date().toISOString();
-      localStorage.setItem(`${SPEC_STORAGE_KEY}-${templateId}`, JSON.stringify({
-        content,
-        savedAt
-      }));
-      setSavedContent(content);
-      setLastSaved(savedAt);
-    } catch {}
-  }, [content, templateId]);
-  const validate = useCallback(() => {
-    const errors = [];
-    const lines = content.split(`
-`);
-    if (!content.includes("contractSpec(")) {
-      errors.push({
-        line: 1,
-        message: "Spec must contain a contractSpec() definition",
-        severity: "error"
-      });
-    }
-    if (!content.includes("goal:")) {
-      errors.push({
-        line: 1,
-        message: "Spec should have a goal field",
-        severity: "warning"
-      });
-    }
-    if (!content.includes("io:")) {
-      errors.push({
-        line: 1,
-        message: "Spec should define io (input/output)",
-        severity: "warning"
-      });
-    }
-    const openBraces = (content.match(/{/g) ?? []).length;
-    const closeBraces = (content.match(/}/g) ?? []).length;
-    if (openBraces !== closeBraces) {
-      errors.push({
-        line: lines.length,
-        message: `Unbalanced braces: ${openBraces} opening, ${closeBraces} closing`,
-        severity: "error"
-      });
-    }
-    const openParens = (content.match(/\(/g) ?? []).length;
-    const closeParens = (content.match(/\)/g) ?? []).length;
-    if (openParens !== closeParens) {
-      errors.push({
-        line: lines.length,
-        message: `Unbalanced parentheses: ${openParens} opening, ${closeParens} closing`,
-        severity: "error"
-      });
-    }
-    lines.forEach((line, index) => {
-      const singleQuotes = (line.match(/'/g) ?? []).length;
-      const doubleQuotes = (line.match(/"/g) ?? []).length;
-      if (singleQuotes % 2 !== 0) {
-        errors.push({
-          line: index + 1,
-          message: "Unclosed single quote",
-          severity: "error"
-        });
-      }
-      if (doubleQuotes % 2 !== 0) {
-        errors.push({
-          line: index + 1,
-          message: "Unclosed double quote",
-          severity: "error"
-        });
-      }
-    });
-    const result = {
-      valid: errors.filter((e) => e.severity === "error").length === 0,
-      errors
-    };
-    setValidation(result);
-    return result;
-  }, [content]);
-  const reset = useCallback(() => {
-    const generated = generateSpecFromTemplate(template);
-    setContentState(generated);
-    setSavedContent(generated);
-    setValidation(null);
-    setLastSaved(null);
-    try {
-      localStorage.removeItem(`${SPEC_STORAGE_KEY}-${templateId}`);
-    } catch {}
-  }, [templateId]);
-  return {
-    content,
-    loading,
-    isDirty: content !== savedContent,
-    validation,
-    setContent,
-    save,
-    validate,
-    reset,
-    lastSaved
-  };
-}
-
-// src/SpecEditorPanel.tsx
-import { Button, LoaderBlock } from "@contractspec/lib.design-system";
-import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
-import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function SpecEditorPanel({
-  templateId,
-  SpecEditor,
-  onLog
-}) {
-  const {
-    content,
-    loading,
-    isDirty,
-    validation,
-    setContent,
-    save,
-    validate,
-    reset,
-    lastSaved
-  } = useSpecContent(templateId);
-  useEffect2(() => {
-    if (!loading && content) {
-      onLog?.(`Spec loaded for ${templateId}`);
-    }
-  }, [loading, content, templateId, onLog]);
-  const handleSave = useCallback2(() => {
-    save();
-    onLog?.("Spec saved locally");
-  }, [save, onLog]);
-  const handleValidate = useCallback2(() => {
-    const result = validate();
-    if (result.valid) {
-      onLog?.("Spec validation passed");
-    } else {
-      const errorCount = result.errors.filter((e) => e.severity === "error").length;
-      const warnCount = result.errors.filter((e) => e.severity === "warning").length;
-      onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
-    }
-  }, [validate, onLog]);
-  const handleReset = useCallback2(() => {
-    reset();
-    onLog?.("Spec reset to template defaults");
-  }, [reset, onLog]);
-  if (loading) {
-    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
-      label: "Loading spec..."
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "default",
-                size: "sm",
-                onClick: handleSave,
-                children: "Save"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "outline",
-                size: "sm",
-                onClick: handleValidate,
-                children: "Validate"
-              }, undefined, false, undefined, this),
-              isDirty && /* @__PURE__ */ jsxDEV(Badge, {
-                variant: "secondary",
-                className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
-                children: "Unsaved changes"
-              }, undefined, false, undefined, this),
-              validation && /* @__PURE__ */ jsxDEV(Badge, {
-                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__ */ jsxDEV("div", {
-            className: "flex items-center gap-2",
-            children: [
-              lastSaved && /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground text-xs",
-                children: [
-                  "Last saved: ",
-                  new Date(lastSaved).toLocaleTimeString()
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "ghost",
-                size: "sm",
-                onPress: handleReset,
-                children: "Reset"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      validation && validation.errors.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-        className: "rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",
-        children: [
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "mb-2 font-semibold text-amber-400 text-xs uppercase",
-            children: "Validation Issues"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
-            className: "space-y-1",
-            children: validation.errors.map((error, index) => /* @__PURE__ */ jsxDEV("li", {
-              className: `text-xs ${error.severity === "error" ? "text-red-400" : "text-amber-400"}`,
-              children: [
-                "Line ",
-                error.line,
-                ": ",
-                error.message
-              ]
-            }, `${error.line}-${error.message}-${index}`, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "rounded-2xl border border-border bg-card p-4",
-        children: /* @__PURE__ */ jsxDEV(SpecEditor, {
-          projectId: "sandbox",
-          type: "CAPABILITY",
-          content,
-          onChange: setContent,
-          metadata: { template: templateId },
-          onSave: handleSave,
-          onValidate: handleValidate
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  SpecEditorPanel
-};
+});`}import{useCallback as A,useEffect as n,useState as K}from"react";var R="contractspec-spec-content";function v(q){let{template:Z}=x(),[H,$]=K(""),[w,X]=K(""),[y,M]=K(!0),[O,D]=K(null),[V,N]=K(null);n(()=>{M(!0);try{let z=localStorage.getItem(`${R}-${q}`);if(z){let W=JSON.parse(z);if(W.content)$(W.content),X(W.content),N(W.savedAt);else{let U=F(Z);$(U),X(U)}}else{let W=F(Z);$(W),X(W)}}catch{let z=F(Z);$(z),X(z)}M(!1)},[q]);let Y=A((z)=>{$(z),D(null)},[]),h=A(()=>{try{let z=new Date().toISOString();localStorage.setItem(`${R}-${q}`,JSON.stringify({content:H,savedAt:z})),X(H),N(z)}catch{}},[H,q]),P=A(()=>{let z=[],W=H.split(`
+`);if(!H.includes("contractSpec("))z.push({line:1,message:"Spec must contain a contractSpec() definition",severity:"error"});if(!H.includes("goal:"))z.push({line:1,message:"Spec should have a goal field",severity:"warning"});if(!H.includes("io:"))z.push({line:1,message:"Spec should define io (input/output)",severity:"warning"});let U=(H.match(/{/g)??[]).length,B=(H.match(/}/g)??[]).length;if(U!==B)z.push({line:W.length,message:`Unbalanced braces: ${U} opening, ${B} closing`,severity:"error"});let _=(H.match(/\(/g)??[]).length,j=(H.match(/\)/g)??[]).length;if(_!==j)z.push({line:W.length,message:`Unbalanced parentheses: ${_} opening, ${j} closing`,severity:"error"});W.forEach((f,E)=>{let u=(f.match(/'/g)??[]).length,S=(f.match(/"/g)??[]).length;if(u%2!==0)z.push({line:E+1,message:"Unclosed single quote",severity:"error"});if(S%2!==0)z.push({line:E+1,message:"Unclosed double quote",severity:"error"})});let T={valid:z.filter((f)=>f.severity==="error").length===0,errors:z};return D(T),T},[H]),J=A(()=>{let z=F(Z);$(z),X(z),D(null),N(null);try{localStorage.removeItem(`${R}-${q}`)}catch{}},[q]);return{content:H,loading:y,isDirty:H!==w,validation:O,setContent:Y,save:h,validate:P,reset:J,lastSaved:V}}import{Button as b,LoaderBlock as a}from"@contractspec/lib.design-system";import{Badge as C}from"@contractspec/lib.ui-kit-web/ui/badge";import{useCallback as k,useEffect as t}from"react";import{jsx as Q,jsxs as G}from"react/jsx-runtime";function Xq({templateId:q,SpecEditor:Z,onLog:H}){let{content:$,loading:w,isDirty:X,validation:y,setContent:M,save:O,validate:D,reset:V,lastSaved:N}=v(q);t(()=>{if(!w&&$)H?.(`Spec loaded for ${q}`)},[w,$,q,H]);let Y=k(()=>{O(),H?.("Spec saved locally")},[O,H]),h=k(()=>{let J=D();if(J.valid)H?.("Spec validation passed");else{let z=J.errors.filter((U)=>U.severity==="error").length,W=J.errors.filter((U)=>U.severity==="warning").length;H?.(`Spec validation: ${z} errors, ${W} warnings`)}},[D,H]),P=k(()=>{V(),H?.("Spec reset to template defaults")},[V,H]);if(w)return Q(a,{label:"Loading spec..."});return G("div",{className:"space-y-4",children:[G("div",{className:"flex items-center justify-between",children:[G("div",{className:"flex items-center gap-2",children:[Q(b,{variant:"default",size:"sm",onClick:Y,children:"Save"}),Q(b,{variant:"outline",size:"sm",onClick:h,children:"Validate"}),X&&Q(C,{variant:"secondary",className:"border-amber-500/30 bg-amber-500/20 text-amber-400",children:"Unsaved changes"}),y&&Q(C,{variant:y.valid?"default":"destructive",className:y.valid?"border-green-500/30 bg-green-500/20 text-green-400":"",children:y.valid?"Valid":`${y.errors.filter((J)=>J.severity==="error").length} errors`})]}),G("div",{className:"flex items-center gap-2",children:[N&&G("span",{className:"text-muted-foreground text-xs",children:["Last saved: ",new Date(N).toLocaleTimeString()]}),Q(b,{variant:"ghost",size:"sm",onPress:P,children:"Reset"})]})]}),y&&y.errors.length>0&&G("div",{className:"rounded-lg border border-amber-500/50 bg-amber-500/10 p-3",children:[Q("p",{className:"mb-2 font-semibold text-amber-400 text-xs uppercase",children:"Validation Issues"}),Q("ul",{className:"space-y-1",children:y.errors.map((J,z)=>G("li",{className:`text-xs ${J.severity==="error"?"text-red-400":"text-amber-400"}`,children:["Line ",J.line,": ",J.message]},`${J.line}-${J.message}-${z}`))})]}),Q("div",{className:"rounded-2xl border border-border bg-card p-4",children:Q(Z,{projectId:"sandbox",type:"CAPABILITY",content:$,onChange:M,metadata:{template:q},onSave:Y,onValidate:h})})]})}export{Xq as SpecEditorPanel};