@contractspec/bundle.library 0.0.0-canary-20260206014742

package/dist/components/docs/studio/StudioVisualBuilderPage.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+
+//#region src/components/docs/studio/StudioVisualBuilderPage.tsx
+const 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__ */ jsxs("main", {
+		className: "space-y-12 py-12",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase",
+						children: "Visual builder"
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-4xl font-bold",
+						children: "Canvas, palette, and spec editor"
+					}),
+					/* @__PURE__ */ jsx("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."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "border-border bg-card rounded-2xl border p-6",
+				children: /* @__PURE__ */ jsx(Image, {
+					src: "/assets/images/studio/visual-builder.png",
+					alt: "Studio visual builder overview",
+					width: 1024,
+					height: 576,
+					className: "border-border rounded-xl border"
+				})
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: [
+					/* @__PURE__ */ jsxs("article", {
+						className: "card-subtle space-y-2 p-6",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-semibold",
+							children: "Canvas controls"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: "Drag to pan, scroll/ pinch to zoom. The right panel shows a tree view."
+						})]
+					}),
+					/* @__PURE__ */ jsxs("article", {
+						className: "card-subtle space-y-2 p-6",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-semibold",
+							children: "Component palette"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: "Search by intent (“capture payment”) or category. Drag components or tap to add."
+						})]
+					}),
+					/* @__PURE__ */ jsxs("article", {
+						className: "card-subtle space-y-2 p-6",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-semibold",
+							children: "Spec editor"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: "Toggle between visual and code views. Changes stay in sync and include diff previews."
+						})]
+					}),
+					/* @__PURE__ */ jsxs("article", {
+						className: "card-subtle space-y-2 p-6",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-semibold",
+							children: "Deploy panel"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: "Choose environment, review validations, and deploy with one button. Rollback is one tap away."
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-semibold",
+					children: "Tips"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "space-y-2 text-sm",
+					children: tips.map((tip) => /* @__PURE__ */ jsxs("li", { children: ["• ", tip] }, tip))
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { StudioVisualBuilderPage };
+//# sourceMappingURL=StudioVisualBuilderPage.js.map

package/dist/components/docs/studio/StudioVisualBuilderPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioVisualBuilderPage.js","names":[],"sources":["../../../../src/components/docs/studio/StudioVisualBuilderPage.tsx"],"sourcesContent":["import Image from 'next/image';\n\n// export const metadata: Metadata = {\n//   title: 'Studio – Visual Builder Guide',\n//   description:\n//     'Understand the Studio visual builder: canvas controls, component palette, bindings, and validation.',\n// };\n\nconst tips = [\n  'Use two-finger drag on touch devices to pan the canvas.',\n  'Tap a component to open the spec sidebar and edit props.',\n  'The timeline records every change; tap a dot to roll back.',\n  'Validation runs automatically before deploy. Errors show inline.',\n];\n\nexport function StudioVisualBuilderPage() {\n  return (\n    <main className=\"space-y-12 py-12\">\n      <header className=\"space-y-3\">\n        <p className=\"text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase\">\n          Visual builder\n        </p>\n        <h1 className=\"text-4xl font-bold\">Canvas, palette, and spec editor</h1>\n        <p className=\"text-muted-foreground max-w-3xl text-lg\">\n          Studio’s builder keeps designers, operators, and engineers in sync.\n          Every action updates the underlying spec and can be undone.\n        </p>\n      </header>\n      <section className=\"border-border bg-card rounded-2xl border p-6\">\n        <Image\n          src=\"/assets/images/studio/visual-builder.png\"\n          alt=\"Studio visual builder overview\"\n          width={1024}\n          height={576}\n          className=\"border-border rounded-xl border\"\n        />\n      </section>\n      <section className=\"grid gap-4 md:grid-cols-2\">\n        <article className=\"card-subtle space-y-2 p-6\">\n          <h2 className=\"text-2xl font-semibold\">Canvas controls</h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Drag to pan, scroll/ pinch to zoom. The right panel shows a tree\n            view.\n          </p>\n        </article>\n        <article className=\"card-subtle space-y-2 p-6\">\n          <h2 className=\"text-2xl font-semibold\">Component palette</h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Search by intent (“capture payment”) or category. Drag components or\n            tap to add.\n          </p>\n        </article>\n        <article className=\"card-subtle space-y-2 p-6\">\n          <h2 className=\"text-2xl font-semibold\">Spec editor</h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Toggle between visual and code views. Changes stay in sync and\n            include diff previews.\n          </p>\n        </article>\n        <article className=\"card-subtle space-y-2 p-6\">\n          <h2 className=\"text-2xl font-semibold\">Deploy panel</h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Choose environment, review validations, and deploy with one button.\n            Rollback is one tap away.\n          </p>\n        </article>\n      </section>\n      <section className=\"space-y-3\">\n        <h2 className=\"text-2xl font-semibold\">Tips</h2>\n        <ul className=\"space-y-2 text-sm\">\n          {tips.map((tip) => (\n            <li key={tip}>• {tip}</li>\n          ))}\n        </ul>\n      </section>\n    </main>\n  );\n}\n"],"mappings":";;;;AAQA,MAAM,OAAO;CACX;CACA;CACA;CACA;CACD;AAED,SAAgB,0BAA0B;AACxC,QACE,qBAAC;EAAK,WAAU;;GACd,qBAAC;IAAO,WAAU;;KAChB,oBAAC;MAAE,WAAU;gBAAmE;OAE5E;KACJ,oBAAC;MAAG,WAAU;gBAAqB;OAAqC;KACxE,oBAAC;MAAE,WAAU;gBAA0C;OAGnD;;KACG;GACT,oBAAC;IAAQ,WAAU;cACjB,oBAAC;KACC,KAAI;KACJ,KAAI;KACJ,OAAO;KACP,QAAQ;KACR,WAAU;MACV;KACM;GACV,qBAAC;IAAQ,WAAU;;KACjB,qBAAC;MAAQ,WAAU;iBACjB,oBAAC;OAAG,WAAU;iBAAyB;QAAoB,EAC3D,oBAAC;OAAE,WAAU;iBAAgC;QAGzC;OACI;KACV,qBAAC;MAAQ,WAAU;iBACjB,oBAAC;OAAG,WAAU;iBAAyB;QAAsB,EAC7D,oBAAC;OAAE,WAAU;iBAAgC;QAGzC;OACI;KACV,qBAAC;MAAQ,WAAU;iBACjB,oBAAC;OAAG,WAAU;iBAAyB;QAAgB,EACvD,oBAAC;OAAE,WAAU;iBAAgC;QAGzC;OACI;KACV,qBAAC;MAAQ,WAAU;iBACjB,oBAAC;OAAG,WAAU;iBAAyB;QAAiB,EACxD,oBAAC;OAAE,WAAU;iBAAgC;QAGzC;OACI;;KACF;GACV,qBAAC;IAAQ,WAAU;eACjB,oBAAC;KAAG,WAAU;eAAyB;MAAS,EAChD,oBAAC;KAAG,WAAU;eACX,KAAK,KAAK,QACT,qBAAC,mBAAa,MAAG,QAAR,IAAiB,CAC1B;MACC;KACG;;GACL"}

package/dist/components/docs/studio/index.d.ts

@@ -0,0 +1,7 @@
+import { StudioOverviewPage } from "./StudioOverviewPage.js";
+import { StudioGettingStartedPage } from "./StudioGettingStartedPage.js";
+import { StudioVisualBuilderPage } from "./StudioVisualBuilderPage.js";
+import { StudioIntegrationsPage } from "./StudioIntegrationsPage.js";
+import { StudioDeploymentsPage } from "./StudioDeploymentsPage.js";
+import { StudioBYOKPage } from "./StudioBYOKPage.js";
+export { StudioBYOKPage, StudioDeploymentsPage, StudioGettingStartedPage, StudioIntegrationsPage, StudioOverviewPage, StudioVisualBuilderPage };

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

@@ -0,0 +1,8 @@
+import { StudioOverviewPage } from "./StudioOverviewPage.js";
+import { StudioGettingStartedPage } from "./StudioGettingStartedPage.js";
+import { StudioVisualBuilderPage } from "./StudioVisualBuilderPage.js";
+import { StudioIntegrationsPage } from "./StudioIntegrationsPage.js";
+import { StudioDeploymentsPage } from "./StudioDeploymentsPage.js";
+import { StudioBYOKPage } from "./StudioBYOKPage.js";
+
+export { StudioBYOKPage, StudioDeploymentsPage, StudioGettingStartedPage, StudioIntegrationsPage, StudioOverviewPage, StudioVisualBuilderPage };

package/dist/components/docs/tech/contracts/tech-docs.docblocks.d.ts

@@ -0,0 +1,7 @@
+import { DocBlock } from "@contractspec/lib.contracts/docs";
+
+//#region src/components/docs/tech/contracts/tech-docs.docblocks.d.ts
+declare const techContractsDocBlocks: DocBlock[];
+//#endregion
+export { techContractsDocBlocks };
+//# sourceMappingURL=tech-docs.docblocks.d.ts.map

package/dist/components/docs/tech/contracts/tech-docs.docblocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tech-docs.docblocks.d.ts","names":[],"sources":["../../../../../src/components/docs/tech/contracts/tech-docs.docblocks.ts"],"mappings":";;;cAGa,sBAAA,EAAwB,QAAA"}

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

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+
+//#region src/components/docs/tech/contracts/tech-docs.docblocks.ts
+const 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);
+
+//#endregion
+export { techContractsDocBlocks };
+//# sourceMappingURL=tech-docs.docblocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tech-docs.docblocks.js","names":[],"sources":["../../../../../src/components/docs/tech/contracts/tech-docs.docblocks.ts"],"sourcesContent":["import type { DocBlock } from '@contractspec/lib.contracts/docs';\nimport { registerDocBlocks } from '@contractspec/lib.contracts/docs';\n\nexport const techContractsDocBlocks: DocBlock[] = [\n  {\n    id: 'docs.tech.contracts.index',\n    title: 'Contracts tech docs',\n    summary: 'Entry for ContractSpec contracts technical documentation.',\n    kind: 'goal',\n    visibility: 'public',\n    route: '/docs/tech/contracts',\n    tags: ['tech', 'contracts'],\n    body: `# Contracts Tech Docs\n\nReference docs for ContractSpec contracts: app-config, capabilities, data-views, integrations, policy, presentations, overlays, and more.`,\n  },\n];\nregisterDocBlocks(techContractsDocBlocks);\n"],"mappings":";;;AAGA,MAAa,yBAAqC,CAChD;CACE,IAAI;CACJ,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACZ,OAAO;CACP,MAAM,CAAC,QAAQ,YAAY;CAC3B,MAAM;;;CAGP,CACF;AACD,kBAAkB,uBAAuB"}

package/dist/components/integrations/index.d.ts

@@ -0,0 +1,5 @@
+import { IntegrationCard, IntegrationCardProps } from "./molecules/IntegrationCard.js";
+import { IntegrationMarketplace, IntegrationMarketplaceProps, MarketplaceIntegration } from "./organisms/IntegrationMarketplace.js";
+import { IntegrationSettings, IntegrationSettingsForm, IntegrationSettingsProps } from "./organisms/IntegrationSettings.js";
+import { KnowledgeSourceItem, KnowledgeSourceList, KnowledgeSourceListProps } from "./organisms/KnowledgeSourceList.js";
+export { IntegrationCard, IntegrationCardProps, IntegrationMarketplace, IntegrationMarketplaceProps, IntegrationSettings, IntegrationSettingsForm, IntegrationSettingsProps, KnowledgeSourceItem, KnowledgeSourceList, KnowledgeSourceListProps, MarketplaceIntegration };

package/dist/components/integrations/index.js

@@ -0,0 +1,6 @@
+import { IntegrationCard } from "./molecules/IntegrationCard.js";
+import { IntegrationMarketplace } from "./organisms/IntegrationMarketplace.js";
+import { IntegrationSettings } from "./organisms/IntegrationSettings.js";
+import { KnowledgeSourceList } from "./organisms/KnowledgeSourceList.js";
+
+export { IntegrationCard, IntegrationMarketplace, IntegrationSettings, KnowledgeSourceList };

package/dist/components/integrations/molecules/IntegrationCard.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/integrations/molecules/IntegrationCard.d.ts
+interface IntegrationCardProps {
+  id: string;
+  provider: string;
+  name: string;
+  category?: string;
+  enabled?: boolean;
+  lastSyncAt?: string | null;
+  status?: 'connected' | 'disconnected' | 'error';
+  onToggle?: (id: string, enabled: boolean) => void;
+  onConfigure?: (id: string) => void;
+}
+declare function IntegrationCard({
+  id,
+  provider,
+  name,
+  category,
+  enabled,
+  lastSyncAt,
+  status,
+  onToggle,
+  onConfigure
+}: IntegrationCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { IntegrationCard, IntegrationCardProps };
+//# sourceMappingURL=IntegrationCard.d.ts.map

package/dist/components/integrations/molecules/IntegrationCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationCard.d.ts","names":[],"sources":["../../../../src/components/integrations/molecules/IntegrationCard.tsx"],"mappings":";;;UAIiB,oBAAA;EACf,EAAA;EACA,QAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;EACA,MAAA;EACA,QAAA,IAAY,EAAA,UAAY,OAAA;EACxB,WAAA,IAAe,EAAA;AAAA;AAAA,iBAGD,eAAA,CAAA;EACd,EAAA;EACA,QAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;EACA,MAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/integrations/molecules/IntegrationCard.js

@@ -0,0 +1,63 @@
+import "react";
+import { PlugZap, ToggleRight } from "lucide-react";
+import { Button } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/integrations/molecules/IntegrationCard.tsx
+function IntegrationCard({ id, provider, name, category, enabled = true, lastSyncAt, status = "connected", onToggle, onConfigure }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-card flex flex-col gap-4 rounded-2xl border p-4 shadow-sm",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xl font-semibold",
+					children: name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: provider
+				})] }), /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: `inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-wide uppercase ${status === "connected" ? "text-emerald-500 bg-emerald-500/10 border-emerald-500/30" : status === "error" ? "text-red-500 bg-red-500/10 border-red-500/30" : "text-gray-500 bg-gray-500/10 border-gray-500/30"}`,
+					onPress: () => onToggle?.(id, !enabled),
+					children: [/* @__PURE__ */ jsx(ToggleRight, { className: "h-3.5 w-3.5" }), enabled ? "Enabled" : "Disabled"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground text-sm",
+				children: [category && /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: category
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-2 flex flex-wrap items-center gap-3 text-xs tracking-wide uppercase",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(PlugZap, { className: "h-3 w-3" }), status]
+					}), /* @__PURE__ */ jsxs("span", { children: [
+						"Last sync:",
+						" ",
+						lastSyncAt ? new Date(lastSyncAt).toLocaleString() : "Not synced yet"
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					className: "flex-1",
+					onPress: () => onConfigure?.(id),
+					children: "Configure"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "flex-1",
+					onPress: () => onToggle?.(id, !enabled),
+					children: enabled ? "Disconnect" : "Connect"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { IntegrationCard };
+//# sourceMappingURL=IntegrationCard.js.map

package/dist/components/integrations/molecules/IntegrationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationCard.js","names":[],"sources":["../../../../src/components/integrations/molecules/IntegrationCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PlugZap, ToggleRight } from 'lucide-react';\nimport { Button } from '@contractspec/lib.design-system';\n\nexport interface IntegrationCardProps {\n  id: string;\n  provider: string;\n  name: string;\n  category?: string;\n  enabled?: boolean;\n  lastSyncAt?: string | null;\n  status?: 'connected' | 'disconnected' | 'error';\n  onToggle?: (id: string, enabled: boolean) => void;\n  onConfigure?: (id: string) => void;\n}\n\nexport function IntegrationCard({\n  id,\n  provider,\n  name,\n  category,\n  enabled = true,\n  lastSyncAt,\n  status = 'connected',\n  onToggle,\n  onConfigure,\n}: IntegrationCardProps) {\n  const tone =\n    status === 'connected'\n      ? 'text-emerald-500 bg-emerald-500/10 border-emerald-500/30'\n      : status === 'error'\n        ? 'text-red-500 bg-red-500/10 border-red-500/30'\n        : 'text-gray-500 bg-gray-500/10 border-gray-500/30';\n\n  return (\n    <div className=\"border-border bg-card flex flex-col gap-4 rounded-2xl border p-4 shadow-sm\">\n      <header className=\"flex items-center justify-between\">\n        <div>\n          <p className=\"text-xl font-semibold\">{name}</p>\n          <p className=\"text-muted-foreground text-sm\">{provider}</p>\n        </div>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-wide uppercase ${tone}`}\n          onPress={() => onToggle?.(id, !enabled)}\n        >\n          <ToggleRight className=\"h-3.5 w-3.5\" />\n          {enabled ? 'Enabled' : 'Disabled'}\n        </Button>\n      </header>\n      <div className=\"text-muted-foreground text-sm\">\n        {category && <span className=\"font-medium\">{category}</span>}\n        <div className=\"mt-2 flex flex-wrap items-center gap-3 text-xs tracking-wide uppercase\">\n          <span className=\"inline-flex items-center gap-1\">\n            <PlugZap className=\"h-3 w-3\" />\n            {status}\n          </span>\n          <span>\n            Last sync:{' '}\n            {lastSyncAt\n              ? new Date(lastSyncAt).toLocaleString()\n              : 'Not synced yet'}\n          </span>\n        </div>\n      </div>\n      <footer className=\"flex items-center gap-2\">\n        <Button className=\"flex-1\" onPress={() => onConfigure?.(id)}>\n          Configure\n        </Button>\n        <Button\n          variant=\"ghost\"\n          className=\"flex-1\"\n          onPress={() => onToggle?.(id, !enabled)}\n        >\n          {enabled ? 'Disconnect' : 'Connect'}\n        </Button>\n      </footer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,gBAAgB,EAC9B,IACA,UACA,MACA,UACA,UAAU,MACV,YACA,SAAS,aACT,UACA,eACuB;AAQvB,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAO,WAAU;eAChB,qBAAC,oBACC,oBAAC;KAAE,WAAU;eAAyB;MAAS,EAC/C,oBAAC;KAAE,WAAU;eAAiC;MAAa,IACvD,EACN,qBAAC;KACC,SAAQ;KACR,MAAK;KACL,WAAW,8GAhBjB,WAAW,cACP,6DACA,WAAW,UACT,iDACA;KAaA,eAAe,WAAW,IAAI,CAAC,QAAQ;gBAEvC,oBAAC,eAAY,WAAU,gBAAgB,EACtC,UAAU,YAAY;MAChB;KACF;GACT,qBAAC;IAAI,WAAU;eACZ,YAAY,oBAAC;KAAK,WAAU;eAAe;MAAgB,EAC5D,qBAAC;KAAI,WAAU;gBACb,qBAAC;MAAK,WAAU;iBACd,oBAAC,WAAQ,WAAU,YAAY,EAC9B;OACI,EACP,qBAAC;MAAK;MACO;MACV,aACG,IAAI,KAAK,WAAW,CAAC,gBAAgB,GACrC;SACC;MACH;KACF;GACN,qBAAC;IAAO,WAAU;eAChB,oBAAC;KAAO,WAAU;KAAS,eAAe,cAAc,GAAG;eAAE;MAEpD,EACT,oBAAC;KACC,SAAQ;KACR,WAAU;KACV,eAAe,WAAW,IAAI,CAAC,QAAQ;eAEtC,UAAU,eAAe;MACnB;KACF;;GACL"}

package/dist/components/integrations/organisms/IntegrationMarketplace.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/integrations/organisms/IntegrationMarketplace.d.ts
+interface MarketplaceIntegration {
+  id: string;
+  provider: string;
+  name: string;
+  category: string;
+  enabled?: boolean;
+  status?: 'connected' | 'disconnected' | 'error';
+  lastSyncAt?: string | null;
+}
+interface IntegrationMarketplaceProps {
+  integrations: MarketplaceIntegration[];
+  onToggle?: (id: string, enabled: boolean) => void;
+  onConfigure?: (id: string) => void;
+}
+declare function IntegrationMarketplace({
+  integrations,
+  onToggle,
+  onConfigure
+}: IntegrationMarketplaceProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { IntegrationMarketplace, IntegrationMarketplaceProps, MarketplaceIntegration };
+//# sourceMappingURL=IntegrationMarketplace.d.ts.map

package/dist/components/integrations/organisms/IntegrationMarketplace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationMarketplace.d.ts","names":[],"sources":["../../../../src/components/integrations/organisms/IntegrationMarketplace.tsx"],"mappings":";;;UAYiB,sBAAA;EACf,EAAA;EACA,QAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;AAAA;AAAA,UAGe,2BAAA;EACf,YAAA,EAAc,sBAAA;EACd,QAAA,IAAY,EAAA,UAAY,OAAA;EACxB,WAAA,IAAe,EAAA;AAAA;AAAA,iBAGD,sBAAA,CAAA;EACd,YAAA;EACA,QAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/integrations/organisms/IntegrationMarketplace.js

@@ -0,0 +1,81 @@
+import { IntegrationCard } from "../molecules/IntegrationCard.js";
+import * as React from "react";
+import { Boxes, Search } from "lucide-react";
+import { Input } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@contractspec/lib.ui-kit-web/ui/select";
+
+//#region src/components/integrations/organisms/IntegrationMarketplace.tsx
+function IntegrationMarketplace({ integrations, onToggle, onConfigure }) {
+	const [search, setSearch] = React.useState("");
+	const [category, setCategory] = React.useState("all");
+	const categories = React.useMemo(() => Array.from(new Set(integrations.map((integration) => integration.category))), [integrations]);
+	const filtered = integrations.filter((integration) => {
+		const matchesSearch = integration.name.toLowerCase().includes(search.toLowerCase()) || integration.provider.toLowerCase().includes(search.toLowerCase());
+		const matchesCategory = category === "all" ? true : integration.category === category;
+		return matchesSearch && matchesCategory;
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-card space-y-4 rounded-2xl border p-4",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-semibold tracking-wide uppercase",
+					children: "Integration marketplace"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Connect AI providers, payments, analytics, and internal tools with BYOK controls."
+				})] }), /* @__PURE__ */ jsx(Boxes, { className: "text-muted-foreground h-5 w-5" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-[200px] flex-1",
+					children: [/* @__PURE__ */ jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" }), /* @__PURE__ */ jsx(Input, {
+						type: "search",
+						"aria-label": "Search providers",
+						className: "w-full py-2 pr-3 pl-9 text-sm",
+						value: search,
+						onChange: (event) => setSearch(event.target.value),
+						placeholder: "Search providers"
+					})]
+				}), /* @__PURE__ */ jsxs(Select, {
+					value: category,
+					onValueChange: setCategory,
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "w-[200px]",
+						children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "All categories" })
+					}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+						value: "all",
+						children: "All categories"
+					}), categories.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+						value: item,
+						children: item
+					}, item))] })]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: filtered.length ? filtered.map((integration) => /* @__PURE__ */ jsx(IntegrationCard, {
+					id: integration.id,
+					provider: integration.provider,
+					name: integration.name,
+					category: integration.category,
+					enabled: integration.enabled,
+					status: integration.status,
+					lastSyncAt: integration.lastSyncAt,
+					onToggle,
+					onConfigure
+				}, integration.id)) : /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground border-border rounded-xl border border-dashed p-6 text-center text-sm md:col-span-2",
+					children: "No integrations match your filters."
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { IntegrationMarketplace };
+//# sourceMappingURL=IntegrationMarketplace.js.map

package/dist/components/integrations/organisms/IntegrationMarketplace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationMarketplace.js","names":[],"sources":["../../../../src/components/integrations/organisms/IntegrationMarketplace.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Boxes, Search } from 'lucide-react';\nimport { IntegrationCard } from '../molecules/IntegrationCard';\nimport { Input } from '@contractspec/lib.design-system';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@contractspec/lib.ui-kit-web/ui/select';\n\nexport interface MarketplaceIntegration {\n  id: string;\n  provider: string;\n  name: string;\n  category: string;\n  enabled?: boolean;\n  status?: 'connected' | 'disconnected' | 'error';\n  lastSyncAt?: string | null;\n}\n\nexport interface IntegrationMarketplaceProps {\n  integrations: MarketplaceIntegration[];\n  onToggle?: (id: string, enabled: boolean) => void;\n  onConfigure?: (id: string) => void;\n}\n\nexport function IntegrationMarketplace({\n  integrations,\n  onToggle,\n  onConfigure,\n}: IntegrationMarketplaceProps) {\n  const [search, setSearch] = React.useState('');\n  const [category, setCategory] = React.useState('all');\n  // const integrationHubEnabled = Math.random() < 10 || useStudioFeatureFlag(\n  //   ContractSpecFeatureFlags.STUDIO_INTEGRATION_HUB\n  // );\n\n  const categories = React.useMemo(\n    () =>\n      Array.from(\n        new Set(integrations.map((integration) => integration.category))\n      ),\n    [integrations]\n  );\n\n  const filtered = integrations.filter((integration) => {\n    const matchesSearch =\n      integration.name.toLowerCase().includes(search.toLowerCase()) ||\n      integration.provider.toLowerCase().includes(search.toLowerCase());\n    const matchesCategory =\n      category === 'all' ? true : integration.category === category;\n    return matchesSearch && matchesCategory;\n  });\n\n  // if (!integrationHubEnabled) {\n  //   return (\n  //     <div className=\"border-border bg-card/40 rounded-2xl border border-dashed p-8 text-center\">\n  //       <FeatureGateNotice\n  //         title=\"Integration hub is still locked\"\n  //         description=\"Enable STUDIO_INTEGRATION_HUB to connect third-party providers and route credentials via BYOK.\"\n  //         actionLabel=\"Talk to sales\"\n  //       />\n  //     </div>\n  //   );\n  // }\n\n  return (\n    <div className=\"border-border bg-card space-y-4 rounded-2xl border p-4\">\n      <header className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-sm font-semibold tracking-wide uppercase\">\n            Integration marketplace\n          </p>\n          <p className=\"text-muted-foreground text-sm\">\n            Connect AI providers, payments, analytics, and internal tools with\n            BYOK controls.\n          </p>\n        </div>\n        <Boxes className=\"text-muted-foreground h-5 w-5\" />\n      </header>\n      <div className=\"flex flex-wrap gap-3\">\n        <div className=\"relative min-w-[200px] flex-1\">\n          <Search className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2\" />\n          <Input\n            type=\"search\"\n            aria-label=\"Search providers\"\n            className=\"w-full py-2 pr-3 pl-9 text-sm\"\n            value={search}\n            onChange={(event) => setSearch(event.target.value)}\n            placeholder=\"Search providers\"\n          />\n        </div>\n        <Select value={category} onValueChange={setCategory}>\n          <SelectTrigger className=\"w-[200px]\">\n            <SelectValue placeholder=\"All categories\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All categories</SelectItem>\n            {categories.map((item) => (\n              <SelectItem key={item} value={item}>\n                {item}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {filtered.length ? (\n          filtered.map((integration) => (\n            <IntegrationCard\n              key={integration.id}\n              id={integration.id}\n              provider={integration.provider}\n              name={integration.name}\n              category={integration.category}\n              enabled={integration.enabled}\n              status={integration.status}\n              lastSyncAt={integration.lastSyncAt}\n              onToggle={onToggle}\n              onConfigure={onConfigure}\n            />\n          ))\n        ) : (\n          <div className=\"text-muted-foreground border-border rounded-xl border border-dashed p-6 text-center text-sm md:col-span-2\">\n            No integrations match your filters.\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA4BA,SAAgB,uBAAuB,EACrC,cACA,UACA,eAC8B;CAC9B,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,GAAG;CAC9C,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,MAAM;CAKrD,MAAM,aAAa,MAAM,cAErB,MAAM,KACJ,IAAI,IAAI,aAAa,KAAK,gBAAgB,YAAY,SAAS,CAAC,CACjE,EACH,CAAC,aAAa,CACf;CAED,MAAM,WAAW,aAAa,QAAQ,gBAAgB;EACpD,MAAM,gBACJ,YAAY,KAAK,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC,IAC7D,YAAY,SAAS,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC;EACnE,MAAM,kBACJ,aAAa,QAAQ,OAAO,YAAY,aAAa;AACvD,SAAO,iBAAiB;GACxB;AAcF,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAO,WAAU;eAChB,qBAAC,oBACC,oBAAC;KAAE,WAAU;eAAgD;MAEzD,EACJ,oBAAC;KAAE,WAAU;eAAgC;MAGzC,IACA,EACN,oBAAC,SAAM,WAAU,kCAAkC;KAC5C;GACT,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACb,oBAAC,UAAO,WAAU,+FAA+F,EACjH,oBAAC;MACC,MAAK;MACL,cAAW;MACX,WAAU;MACV,OAAO;MACP,WAAW,UAAU,UAAU,MAAM,OAAO,MAAM;MAClD,aAAY;OACZ;MACE,EACN,qBAAC;KAAO,OAAO;KAAU,eAAe;gBACtC,oBAAC;MAAc,WAAU;gBACvB,oBAAC,eAAY,aAAY,mBAAmB;OAC9B,EAChB,qBAAC,4BACC,oBAAC;MAAW,OAAM;gBAAM;OAA2B,EAClD,WAAW,KAAK,SACf,oBAAC;MAAsB,OAAO;gBAC3B;QADc,KAEJ,CACb,IACY;MACT;KACL;GACN,oBAAC;IAAI,WAAU;cACZ,SAAS,SACR,SAAS,KAAK,gBACZ,oBAAC;KAEC,IAAI,YAAY;KAChB,UAAU,YAAY;KACtB,MAAM,YAAY;KAClB,UAAU,YAAY;KACtB,SAAS,YAAY;KACrB,QAAQ,YAAY;KACpB,YAAY,YAAY;KACd;KACG;OATR,YAAY,GAUjB,CACF,GAEF,oBAAC;KAAI,WAAU;eAA4G;MAErH;KAEJ;;GACF"}

package/dist/components/integrations/organisms/IntegrationSettings.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/integrations/organisms/IntegrationSettings.d.ts
+interface IntegrationSettingsForm {
+  apiKey: string;
+  secret?: string;
+  ownershipMode?: 'managed' | 'byok';
+  secretProvider?: 'env' | 'gcp';
+  secretRef?: string;
+  config?: string;
+}
+interface IntegrationSettingsProps {
+  provider: string;
+  initialValues?: IntegrationSettingsForm;
+  onTestConnection?: (values: IntegrationSettingsForm) => Promise<void> | void;
+  onSave?: (values: IntegrationSettingsForm) => Promise<void> | void;
+  isSaving?: boolean;
+  isTesting?: boolean;
+}
+declare function IntegrationSettings({
+  provider,
+  initialValues,
+  onTestConnection,
+  onSave,
+  isSaving,
+  isTesting
+}: IntegrationSettingsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { IntegrationSettings, IntegrationSettingsForm, IntegrationSettingsProps };
+//# sourceMappingURL=IntegrationSettings.d.ts.map

package/dist/components/integrations/organisms/IntegrationSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationSettings.d.ts","names":[],"sources":["../../../../src/components/integrations/organisms/IntegrationSettings.tsx"],"mappings":";;;UAaiB,uBAAA;EACf,MAAA;EACA,MAAA;EACA,aAAA;EACA,cAAA;EACA,SAAA;EACA,MAAA;AAAA;AAAA,UAGe,wBAAA;EACf,QAAA;EACA,aAAA,GAAgB,uBAAA;EAChB,gBAAA,IAAoB,MAAA,EAAQ,uBAAA,KAA4B,OAAA;EACxD,MAAA,IAAU,MAAA,EAAQ,uBAAA,KAA4B,OAAA;EAC9C,QAAA;EACA,SAAA;AAAA;AAAA,iBAGc,mBAAA,CAAA;EACd,QAAA;EACA,aAAA;EACA,gBAAA;EACA,MAAA;EACA,QAAA;EACA;AAAA,GACC,wBAAA,GAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA"}