@contractspec/bundle.library 1.11.1 → 1.13.0

package/dist/node/components/docs/studio/index.js

@@ -0,0 +1,537 @@
+// src/components/docs/studio/StudioOverviewPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var sections = [
+  {
+    title: "1. Getting started",
+    body: "Provision your Studio workspace, create a project, and run the first deployment.",
+    href: "/docs/studio/getting-started"
+  },
+  {
+    title: "2. Visual builder",
+    body: "Learn the canvas controls, component palette, and spec validation workflow.",
+    href: "/docs/studio/visual-builder"
+  },
+  {
+    title: "3. Deployments",
+    body: "Switch between shared and dedicated environments, monitor health, and roll back safely.",
+    href: "/docs/studio/deployments"
+  },
+  {
+    title: "4. BYOK security",
+    body: "Configure your vault, rotate keys, and audit credential access.",
+    href: "/docs/studio/byok"
+  },
+  {
+    title: "5. Integration hub",
+    body: "Connect third-party providers, sync data, and index knowledge sources.",
+    href: "/docs/studio/integrations"
+  }
+];
+function StudioOverviewPage() {
+  return /* @__PURE__ */ jsxDEV("main", {
+    className: "space-y-16 py-16",
+    children: [
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "section-padding",
+        children: [
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "Studio docs"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "mt-4 text-4xl font-bold",
+            children: "Everything you need to run Studio."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground mt-4 max-w-3xl text-lg",
+            children: "ContractSpec Studio pairs a visual builder with managed infrastructure. These guides keep teams aligned—especially when engineers and operators share the same console."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "section-padding grid gap-4",
+        children: sections.map((section) => /* @__PURE__ */ jsxDEV(Link, {
+          href: section.href,
+          className: "card-subtle group space-y-2 p-6 transition hover:border-violet-500/40",
+          children: [
+            /* @__PURE__ */ jsxDEV("h2", {
+              className: "text-xl font-semibold group-hover:text-violet-400",
+              children: section.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground text-sm",
+              children: section.body
+            }, undefined, false, undefined, this)
+          ]
+        }, section.href, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/studio/StudioGettingStartedPage.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var steps = [
+  {
+    title: "1. Create a Studio workspace",
+    body: "Sign in, pick “Studio managed” as product, and invite teammates. We provision the workspace plus default shared environments."
+  },
+  {
+    title: "2. Add your first project",
+    body: "Click “New project”, choose Starter tier, and keep BYOK disabled for the trial. You can upgrade later."
+  },
+  {
+    title: "3. Author a spec",
+    body: "Use the Visual Builder or Spec Editor. Pick “Capability” as type and describe the operation (e.g., capture donation)."
+  },
+  {
+    title: "4. Deploy to shared infra",
+    body: "Open the deployment panel, select Development, and hit Deploy. Studio provisions the runtime slice automatically."
+  },
+  {
+    title: "5. Wire integrations",
+    body: "From Integration Hub, connect one provider (e.g., PostHog). Starter plan supports two providers."
+  }
+];
+function StudioGettingStartedPage() {
+  return /* @__PURE__ */ jsxDEV2("main", {
+    className: "space-y-12 py-12",
+    children: [
+      /* @__PURE__ */ jsxDEV2("header", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "Getting started"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Launch your first Studio project"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground max-w-3xl text-lg",
+            children: "This short guide takes you from workspace creation to the first deployment. Every step is mobile-friendly and safe to undo."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("section", {
+        className: "grid gap-4",
+        children: steps.map((step) => /* @__PURE__ */ jsxDEV2("article", {
+          className: "card-subtle space-y-2 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV2("h2", {
+              className: "text-xl font-semibold",
+              children: step.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("p", {
+              className: "text-muted-foreground text-sm",
+              children: step.body
+            }, undefined, false, undefined, this)
+          ]
+        }, step.title, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("section", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-semibold",
+            children: "CLI helper (optional)"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Prefer automation? Use the CLI to pull specs and push overlays."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("pre", {
+            className: "bg-muted/40 border-border overflow-auto rounded-xl border p-4 text-left font-mono text-sm",
+            children: `# Authenticate
+cs login
+
+# List projects
+cs studio projects list
+
+# Pull specs locally
+cs studio specs pull <project-id>
+
+# Push after editing
+cs studio specs push <project-id>`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/studio/StudioVisualBuilderPage.tsx
+import Image from "next/image";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var tips = [
+  "Use two-finger drag on touch devices to pan the canvas.",
+  "Tap a component to open the spec sidebar and edit props.",
+  "The timeline records every change; tap a dot to roll back.",
+  "Validation runs automatically before deploy. Errors show inline."
+];
+function StudioVisualBuilderPage() {
+  return /* @__PURE__ */ jsxDEV3("main", {
+    className: "space-y-12 py-12",
+    children: [
+      /* @__PURE__ */ jsxDEV3("header", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "Visual builder"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("h1", {
+            className: "text-4xl font-bold",
+            children: "Canvas, palette, and spec editor"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground max-w-3xl text-lg",
+            children: "Studio’s builder keeps designers, operators, and engineers in sync. Every action updates the underlying spec and can be undone."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("section", {
+        className: "border-border bg-card rounded-2xl border p-6",
+        children: /* @__PURE__ */ jsxDEV3(Image, {
+          src: "/assets/images/studio/visual-builder.png",
+          alt: "Studio visual builder overview",
+          width: 1024,
+          height: 576,
+          className: "border-border rounded-xl border"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("section", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: [
+          /* @__PURE__ */ jsxDEV3("article", {
+            className: "card-subtle space-y-2 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-semibold",
+                children: "Canvas controls"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Drag to pan, scroll/ pinch to zoom. The right panel shows a tree view."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("article", {
+            className: "card-subtle space-y-2 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-semibold",
+                children: "Component palette"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Search by intent (“capture payment”) or category. Drag components or tap to add."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("article", {
+            className: "card-subtle space-y-2 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-semibold",
+                children: "Spec editor"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Toggle between visual and code views. Changes stay in sync and include diff previews."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("article", {
+            className: "card-subtle space-y-2 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-semibold",
+                children: "Deploy panel"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Choose environment, review validations, and deploy with one button. Rollback is one tap away."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("section", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-semibold",
+            children: "Tips"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("ul", {
+            className: "space-y-2 text-sm",
+            children: tips.map((tip) => /* @__PURE__ */ jsxDEV3("li", {
+              children: [
+                "• ",
+                tip
+              ]
+            }, tip, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/studio/StudioIntegrationsPage.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var flow = [
+  {
+    title: "Connect a provider",
+    body: "Choose a provider from the marketplace, enter credentials, and run the test connection. Studio encrypts secrets immediately."
+  },
+  {
+    title: "Schedule syncs",
+    body: "Define sync cadence (manual, hourly, daily). Studio tracks usage count and last sync timestamp."
+  },
+  {
+    title: "Index knowledge",
+    body: "Add documentation or API specs as knowledge sources. Reindex whenever files change."
+  }
+];
+function StudioIntegrationsPage() {
+  return /* @__PURE__ */ jsxDEV4("main", {
+    className: "space-y-12 py-12",
+    children: [
+      /* @__PURE__ */ jsxDEV4("header", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "Integration hub"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("h1", {
+            className: "text-4xl font-bold",
+            children: "Unified connections with BYOK"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground max-w-3xl text-lg",
+            children: "Manage SaaS providers and knowledge sources without scattering secrets across tools. Studio gives you a simple card layout plus CLI automation."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("section", {
+        className: "grid gap-4 md:grid-cols-3",
+        children: flow.map((step) => /* @__PURE__ */ jsxDEV4("article", {
+          className: "card-subtle space-y-2 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV4("h2", {
+              className: "text-xl font-semibold",
+              children: step.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("p", {
+              className: "text-muted-foreground text-sm",
+              children: step.body
+            }, undefined, false, undefined, this)
+          ]
+        }, step.title, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("section", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-semibold",
+            children: "Monitoring"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Every integration exposes sync logs and failure alerts. Use the webhook to forward sync events to Slack or PagerDuty."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/studio/StudioDeploymentsPage.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var comparisons = [
+  {
+    label: "Shared",
+    points: [
+      "Ready in seconds",
+      "DEV + STAGE by default",
+      "Best for prototypes",
+      "Managed SSL"
+    ]
+  },
+  {
+    label: "Dedicated",
+    points: [
+      "Isolated clusters",
+      "Choose region + VPC",
+      "Rolling deploys",
+      "Custom observability sinks"
+    ]
+  }
+];
+var checklist = [
+  "Validate specs before deploying (Studio does this automatically).",
+  "Tag deployments with a description so rituals have context.",
+  "Monitor status cards—failed deploys trigger alerts and auto rollback.",
+  "Use the CLI to export deployment manifests if you want infra-as-code."
+];
+function StudioDeploymentsPage() {
+  return /* @__PURE__ */ jsxDEV5("main", {
+    className: "space-y-12 py-12",
+    children: [
+      /* @__PURE__ */ jsxDEV5("header", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "Deployments"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("h1", {
+            className: "text-4xl font-bold",
+            children: "Shared vs dedicated workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground max-w-3xl text-lg",
+            children: "Studio abstracts infra, but you still stay in control. This guide explains how environments are provisioned, monitored, and rolled back."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("section", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: comparisons.map((option) => /* @__PURE__ */ jsxDEV5("article", {
+          className: "card-subtle space-y-2 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV5("h2", {
+              className: "text-2xl font-semibold",
+              children: [
+                option.label,
+                " deployments"
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV5("ul", {
+              className: "space-y-1 text-sm",
+              children: option.points.map((point) => /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  "• ",
+                  point
+                ]
+              }, point, true, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, option.label, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("section", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-semibold",
+            children: "Health & rollback"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Every deployment emits health events. If a check fails, Studio pauses traffic and offers rollback controls with diff context."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "space-y-2 text-sm",
+            children: checklist.map((item) => /* @__PURE__ */ jsxDEV5("li", {
+              children: [
+                "• ",
+                item
+              ]
+            }, item, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/studio/StudioBYOKPage.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var steps2 = [
+  {
+    title: "1. Provide vault endpoint",
+    body: "Enter your Vault/HSM URL and the key identifier. Studio only stores the reference."
+  },
+  {
+    title: "2. Verify encryption",
+    body: "Studio runs a test by encrypting a dummy payload and asking you to decrypt it."
+  },
+  {
+    title: "3. Store credentials",
+    body: "When integrations are connected, secrets get encrypted client side before landing in the database."
+  },
+  {
+    title: "4. Rotate keys",
+    body: "Trigger rotation from the BYOK manager. Studio fetches existing secrets, decrypts with the old key, and re-encrypts with the new one."
+  }
+];
+function StudioBYOKPage() {
+  return /* @__PURE__ */ jsxDEV6("main", {
+    className: "space-y-12 py-12",
+    children: [
+      /* @__PURE__ */ jsxDEV6("header", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+            children: "BYOK"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("h1", {
+            className: "text-4xl font-bold",
+            children: "Bring your own key to Studio"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground max-w-3xl text-lg",
+            children: "Keep secrets under your control. Studio never touches plaintext credentials; everything is encrypted with tenant-specific material."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("section", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: steps2.map((step) => /* @__PURE__ */ jsxDEV6("article", {
+          className: "card-subtle space-y-2 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV6("h2", {
+              className: "text-xl font-semibold",
+              children: step.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV6("p", {
+              className: "text-muted-foreground text-sm",
+              children: step.body
+            }, undefined, false, undefined, this)
+          ]
+        }, step.title, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("section", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-semibold",
+            children: "Audit trail"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Every decrypt operation logs who requested it, what integration was involved, and the purpose (sync, deploy, manual action)."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground text-sm",
+            children: "You can stream audit logs to your SIEM via webhooks or export CSVs for compliance reviews."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  StudioVisualBuilderPage,
+  StudioOverviewPage,
+  StudioIntegrationsPage,
+  StudioGettingStartedPage,
+  StudioDeploymentsPage,
+  StudioBYOKPage
+};

package/dist/node/components/docs/tech/contracts/tech-docs.docblocks.js

@@ -0,0 +1,20 @@
+// src/components/docs/tech/contracts/tech-docs.docblocks.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var techContractsDocBlocks = [
+  {
+    id: "docs.tech.contracts.index",
+    title: "Contracts tech docs",
+    summary: "Entry for ContractSpec contracts technical documentation.",
+    kind: "goal",
+    visibility: "public",
+    route: "/docs/tech/contracts",
+    tags: ["tech", "contracts"],
+    body: `# Contracts Tech Docs
+
+Reference docs for ContractSpec contracts: app-config, capabilities, data-views, integrations, policy, presentations, overlays, and more.`
+  }
+];
+registerDocBlocks(techContractsDocBlocks);
+export {
+  techContractsDocBlocks
+};