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

package/dist/browser/TemplateShell.js

@@ -0,0 +1,189 @@
+// 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/TemplateShell.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var TemplateShell = ({
+  title,
+  description,
+  sidebar,
+  actions,
+  showSaveAction = true,
+  saveProps,
+  children
+}) => /* @__PURE__ */ jsxDEV3("div", {
+  className: "space-y-6",
+  children: [
+    /* @__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),
+    /* @__PURE__ */ jsxDEV3("div", {
+      className: sidebar ? "grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]" : "w-full",
+      children: [
+        /* @__PURE__ */ jsxDEV3("main", {
+          className: "space-y-4 p-2",
+          children
+        }, undefined, false, undefined, this),
+        sidebar ? /* @__PURE__ */ jsxDEV3("aside", {
+          className: "border-border bg-card rounded-2xl border p-4",
+          children: sidebar
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+export {
+  TemplateShell
+};