@contractspec/lib.example-shared-ui 1.11.0 → 1.13.0

package/dist/SpecEditorPanel.js

@@ -0,0 +1,720 @@
+// @bun
+// 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/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(", ")}
+
+contractSpec("crm.deal.updateStage.v1", {
+  goal: "Move a deal to a different pipeline stage",
+  transport: { gql: { mutation: "updateDealStage" } },
+  io: {
+    input: { 
+      dealId: "string",
+      stageId: "string",
+      notes: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        stage: "string",
+        probability: "number",
+        value: "number"
+      }
+    }
+  },
+  events: ["deal.stage.changed"],
+  policy: { auth: "user", rbac: "org:sales" }
+});
+
+contractSpec("crm.deal.create.v1", {
+  goal: "Create a new deal in the pipeline",
+  transport: { gql: { mutation: "createDeal" } },
+  io: {
+    input: { 
+      title: "string",
+      value: "number",
+      contactId: "string",
+      stageId: "string",
+      ownerId: "string?"
+    },
+    output: { 
+      deal: {
+        id: "string",
+        title: "string",
+        value: "number",
+        stage: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["deal.created"]
+});
+
+contractSpec("crm.contact.list.v1", {
+  goal: "List contacts with filtering and pagination",
+  transport: { gql: { query: "listContacts" } },
+  io: {
+    input: { 
+      filter: {
+        search: "string?",
+        companyId: "string?",
+        tags: "string[]?"
+      },
+      pagination: {
+        page: "number",
+        limit: "number"
+      }
+    },
+    output: { 
+      contacts: "array<Contact>",
+      total: "number",
+      hasMore: "boolean"
+    }
+  }
+});`;
+}
+function generateSaasBoilerplateSpec(contracts) {
+  return `// SaaS Boilerplate Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("saas.project.create.v1", {
+  goal: "Create a new project in an organization",
+  transport: { gql: { mutation: "createProject" } },
+  io: {
+    input: { 
+      orgId: "string",
+      name: "string",
+      description: "string?"
+    },
+    output: { 
+      project: {
+        id: "string",
+        name: "string",
+        description: "string?",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  policy: { auth: "user", rbac: "org:member" }
+});
+
+contractSpec("saas.billing.recordUsage.v1", {
+  goal: "Record usage for billing purposes",
+  transport: { gql: { mutation: "recordUsage" } },
+  io: {
+    input: { 
+      orgId: "string",
+      metric: "enum<'api_calls'|'storage_gb'|'seats'>",
+      quantity: "number",
+      timestamp: "ISO8601?"
+    },
+    output: { 
+      usage: {
+        id: "string",
+        metric: "string",
+        quantity: "number",
+        recordedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["billing.usage.recorded"]
+});
+
+contractSpec("saas.settings.update.v1", {
+  goal: "Update organization or user settings",
+  transport: { gql: { mutation: "updateSettings" } },
+  io: {
+    input: { 
+      scope: "enum<'org'|'user'>",
+      targetId: "string",
+      settings: "Record<string, unknown>"
+    },
+    output: { 
+      settings: {
+        scope: "string",
+        values: "Record<string, unknown>",
+        updatedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["settings.updated"]
+});`;
+}
+function generateAgentConsoleSpec(contracts) {
+  return `// Agent Console Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("agent.run.execute.v1", {
+  goal: "Execute an agent run with specified tools",
+  transport: { gql: { mutation: "executeAgentRun" } },
+  io: {
+    input: { 
+      agentId: "string",
+      input: "string",
+      tools: "string[]?",
+      maxSteps: "number?"
+    },
+    output: { 
+      runId: "string",
+      status: "enum<'running'|'completed'|'failed'>",
+      steps: "number"
+    }
+  },
+  events: ["run.started", "run.completed", "run.failed"]
+});
+
+contractSpec("agent.tool.create.v1", {
+  goal: "Register a new tool in the tool registry",
+  transport: { gql: { mutation: "createTool" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      category: "enum<'code'|'data'|'api'|'file'|'custom'>",
+      schema: "JSONSchema",
+      handler: "string"
+    },
+    output: { 
+      tool: {
+        id: "string",
+        name: "string",
+        category: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["tool.created"]
+});
+
+contractSpec("agent.agent.create.v1", {
+  goal: "Create a new AI agent configuration",
+  transport: { gql: { mutation: "createAgent" } },
+  io: {
+    input: { 
+      name: "string",
+      description: "string",
+      model: "string",
+      systemPrompt: "string?",
+      tools: "string[]?"
+    },
+    output: { 
+      agent: {
+        id: "string",
+        name: "string",
+        model: "string",
+        toolCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["agent.created"]
+});`;
+}
+function generateTodosSpec(contracts) {
+  return `// To-dos App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("tasks.board.v1", {
+  goal: "Assign and approve craft work",
+  transport: { gql: { field: "tasksBoard" } },
+  io: {
+    input: { 
+      tenantId: "string", 
+      assignee: "string?",
+      status: "enum<'pending'|'in_progress'|'completed'>?"
+    },
+    output: { 
+      tasks: "array<Task>",
+      summary: {
+        total: "number",
+        completed: "number",
+        overdue: "number"
+      }
+    }
+  }
+});
+
+contractSpec("tasks.create.v1", {
+  goal: "Create a new task",
+  transport: { gql: { mutation: "createTask" } },
+  io: {
+    input: { 
+      title: "string",
+      description: "string?",
+      assignee: "string?",
+      priority: "enum<'low'|'medium'|'high'>",
+      dueDate: "ISO8601?"
+    },
+    output: { 
+      task: {
+        id: "string",
+        title: "string",
+        status: "string",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.created"]
+});
+
+contractSpec("tasks.complete.v1", {
+  goal: "Mark a task as completed",
+  transport: { gql: { mutation: "completeTask" } },
+  io: {
+    input: { taskId: "string" },
+    output: { 
+      task: {
+        id: "string",
+        status: "string",
+        completedAt: "ISO8601"
+      }
+    }
+  },
+  events: ["task.completed"]
+});`;
+}
+function generateMessagingSpec(contracts) {
+  return `// Messaging App Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("messaging.send.v1", {
+  goal: "Deliver intent-rich updates",
+  io: {
+    input: { 
+      conversationId: "string", 
+      body: "richtext",
+      attachments: "array<Attachment>?"
+    },
+    output: { 
+      messageId: "string", 
+      deliveredAt: "ISO8601"
+    }
+  },
+  events: ["message.sent", "message.delivered"]
+});
+
+contractSpec("messaging.conversation.create.v1", {
+  goal: "Start a new conversation",
+  transport: { gql: { mutation: "createConversation" } },
+  io: {
+    input: { 
+      participants: "string[]",
+      title: "string?",
+      type: "enum<'direct'|'group'>"
+    },
+    output: { 
+      conversation: {
+        id: "string",
+        title: "string?",
+        participantCount: "number",
+        createdAt: "ISO8601"
+      }
+    }
+  },
+  events: ["conversation.created"]
+});
+
+contractSpec("messaging.read.v1", {
+  goal: "Mark messages as read",
+  transport: { gql: { mutation: "markRead" } },
+  io: {
+    input: { 
+      conversationId: "string",
+      messageIds: "string[]"
+    },
+    output: { 
+      readCount: "number",
+      readAt: "ISO8601"
+    }
+  },
+  events: ["message.read"]
+});`;
+}
+function generateRecipeSpec(contracts) {
+  return `// Recipe App (i18n) Specs
+// Contracts: ${contracts.join(", ")}
+
+contractSpec("recipes.lookup.v1", {
+  goal: "Serve bilingual rituals",
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>", 
+      slug: "string" 
+    },
+    output: { 
+      title: "string", 
+      content: "markdown",
+      ingredients: "array<Ingredient>",
+      instructions: "array<Instruction>"
+    }
+  }
+});
+
+contractSpec("recipes.list.v1", {
+  goal: "Browse recipes with filtering",
+  transport: { gql: { query: "listRecipes" } },
+  io: {
+    input: { 
+      locale: "enum<'EN'|'FR'>",
+      category: "string?",
+      search: "string?",
+      favorites: "boolean?"
+    },
+    output: { 
+      recipes: "array<RecipeSummary>",
+      categories: "array<Category>",
+      total: "number"
+    }
+  }
+});
+
+contractSpec("recipes.favorite.toggle.v1", {
+  goal: "Toggle recipe favorite status",
+  transport: { gql: { mutation: "toggleFavorite" } },
+  io: {
+    input: { recipeId: "string" },
+    output: { 
+      isFavorite: "boolean",
+      totalFavorites: "number"
+    }
+  },
+  events: ["recipe.favorited", "recipe.unfavorited"]
+});`;
+}
+function generateDefaultSpec(templateId) {
+  return `// ${templateId} Specs
+
+contractSpec("${templateId}.main.v1", {
+  goal: "Main operation for ${templateId}",
+  transport: { gql: { query: "main" } },
+  io: {
+    input: { 
+      id: "string"
+    },
+    output: { 
+      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 { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { Button, LoaderBlock } from "@contractspec/lib.design-system";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+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 text-xs font-semibold text-amber-400 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: "border-border bg-card rounded-2xl border 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
+};