@contractspec/bundle.library 3.7.5 → 3.7.7

package/src/components/docs/studio/StudioVisualBuilderPage.tsx

@@ -1,15 +1,15 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function StudioVisualBuilderPage() {
-  return (
-    <main className="space-y-6 py-12">
-      <h1 className="text-3xl font-bold">Studio docs moved</h1>
-      <p className="text-muted-foreground text-sm">
-        Visual builder documentation now lives in the Studio app docs.
-      </p>
-      <Link href="https://www.contractspec.studio/docs" className="btn-primary">
-        Open Studio docs
-      </Link>
-    </main>
-  );
+	return (
+		<main className="space-y-6 py-12">
+			<h1 className="font-bold text-3xl">Studio docs moved</h1>
+			<p className="text-muted-foreground text-sm">
+				Visual builder documentation now lives in the Studio app docs.
+			</p>
+			<Link href="https://www.contractspec.studio/docs" className="btn-primary">
+				Open Studio docs
+			</Link>
+		</main>
+	);
 }

package/src/components/docs/studio/index.ts

@@ -1,6 +1,6 @@
-export { StudioOverviewPage } from './StudioOverviewPage';
+export { StudioBYOKPage } from './StudioBYOKPage';
+export { StudioDeploymentsPage } from './StudioDeploymentsPage';
 export { StudioGettingStartedPage } from './StudioGettingStartedPage';
-export { StudioVisualBuilderPage } from './StudioVisualBuilderPage';
 export { StudioIntegrationsPage } from './StudioIntegrationsPage';
-export { StudioDeploymentsPage } from './StudioDeploymentsPage';
-export { StudioBYOKPage } from './StudioBYOKPage';
+export { StudioOverviewPage } from './StudioOverviewPage';
+export { StudioVisualBuilderPage } from './StudioVisualBuilderPage';

package/src/components/docs/tech/contracts/tech-docs.docblocks.ts

@@ -2,17 +2,17 @@ import type { DocBlock } from '@contractspec/lib.contracts-spec/docs';
 import { registerDocBlocks } from '@contractspec/lib.contracts-spec/docs';
 
 export const techContractsDocBlocks: DocBlock[] = [
-  {
-    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
+	{
+		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);

package/src/components/integrations/molecules/IntegrationCard.tsx

@@ -1,81 +1,80 @@
-import * as React from 'react';
-import { PlugZap, ToggleRight } from 'lucide-react';
 import { Button } from '@contractspec/lib.design-system';
+import { PlugZap, ToggleRight } from 'lucide-react';
 
 export 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;
+	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;
 }
 
 export function IntegrationCard({
-  id,
-  provider,
-  name,
-  category,
-  enabled = true,
-  lastSyncAt,
-  status = 'connected',
-  onToggle,
-  onConfigure,
+	id,
+	provider,
+	name,
+	category,
+	enabled = true,
+	lastSyncAt,
+	status = 'connected',
+	onToggle,
+	onConfigure,
 }: IntegrationCardProps) {
-  const tone =
-    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';
+	const tone =
+		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';
 
-  return (
-    <div className="border-border bg-card flex flex-col gap-4 rounded-2xl border p-4 shadow-sm">
-      <header className="flex items-center justify-between">
-        <div>
-          <p className="text-xl font-semibold">{name}</p>
-          <p className="text-muted-foreground text-sm">{provider}</p>
-        </div>
-        <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 ${tone}`}
-          onPress={() => onToggle?.(id, !enabled)}
-        >
-          <ToggleRight className="h-3.5 w-3.5" />
-          {enabled ? 'Enabled' : 'Disabled'}
-        </Button>
-      </header>
-      <div className="text-muted-foreground text-sm">
-        {category && <span className="font-medium">{category}</span>}
-        <div className="mt-2 flex flex-wrap items-center gap-3 text-xs tracking-wide uppercase">
-          <span className="inline-flex items-center gap-1">
-            <PlugZap className="h-3 w-3" />
-            {status}
-          </span>
-          <span>
-            Last sync:{' '}
-            {lastSyncAt
-              ? new Date(lastSyncAt).toLocaleString()
-              : 'Not synced yet'}
-          </span>
-        </div>
-      </div>
-      <footer className="flex items-center gap-2">
-        <Button className="flex-1" onPress={() => onConfigure?.(id)}>
-          Configure
-        </Button>
-        <Button
-          variant="ghost"
-          className="flex-1"
-          onPress={() => onToggle?.(id, !enabled)}
-        >
-          {enabled ? 'Disconnect' : 'Connect'}
-        </Button>
-      </footer>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-4 rounded-2xl border border-border bg-card p-4 shadow-sm">
+			<header className="flex items-center justify-between">
+				<div>
+					<p className="font-semibold text-xl">{name}</p>
+					<p className="text-muted-foreground text-sm">{provider}</p>
+				</div>
+				<Button
+					variant="outline"
+					size="sm"
+					className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 font-semibold text-xs uppercase tracking-wide ${tone}`}
+					onPress={() => onToggle?.(id, !enabled)}
+				>
+					<ToggleRight className="h-3.5 w-3.5" />
+					{enabled ? 'Enabled' : 'Disabled'}
+				</Button>
+			</header>
+			<div className="text-muted-foreground text-sm">
+				{category && <span className="font-medium">{category}</span>}
+				<div className="mt-2 flex flex-wrap items-center gap-3 text-xs uppercase tracking-wide">
+					<span className="inline-flex items-center gap-1">
+						<PlugZap className="h-3 w-3" />
+						{status}
+					</span>
+					<span>
+						Last sync:{' '}
+						{lastSyncAt
+							? new Date(lastSyncAt).toLocaleString()
+							: 'Not synced yet'}
+					</span>
+				</div>
+			</div>
+			<footer className="flex items-center gap-2">
+				<Button className="flex-1" onPress={() => onConfigure?.(id)}>
+					Configure
+				</Button>
+				<Button
+					variant="ghost"
+					className="flex-1"
+					onPress={() => onToggle?.(id, !enabled)}
+				>
+					{enabled ? 'Disconnect' : 'Connect'}
+				</Button>
+			</footer>
+		</div>
+	);
 }

package/src/components/integrations/organisms/IntegrationMarketplace.tsx

@@ -1,133 +1,133 @@
-import * as React from 'react';
-import { Boxes, Search } from 'lucide-react';
-import { IntegrationCard } from '../molecules/IntegrationCard';
 import { Input } from '@contractspec/lib.design-system';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from '@contractspec/lib.ui-kit-web/ui/select';
+import { Boxes, Search } from 'lucide-react';
+import * as React from 'react';
+import { IntegrationCard } from '../molecules/IntegrationCard';
 
 export interface MarketplaceIntegration {
-  id: string;
-  provider: string;
-  name: string;
-  category: string;
-  enabled?: boolean;
-  status?: 'connected' | 'disconnected' | 'error';
-  lastSyncAt?: string | null;
+	id: string;
+	provider: string;
+	name: string;
+	category: string;
+	enabled?: boolean;
+	status?: 'connected' | 'disconnected' | 'error';
+	lastSyncAt?: string | null;
 }
 
 export interface IntegrationMarketplaceProps {
-  integrations: MarketplaceIntegration[];
-  onToggle?: (id: string, enabled: boolean) => void;
-  onConfigure?: (id: string) => void;
+	integrations: MarketplaceIntegration[];
+	onToggle?: (id: string, enabled: boolean) => void;
+	onConfigure?: (id: string) => void;
 }
 
 export function IntegrationMarketplace({
-  integrations,
-  onToggle,
-  onConfigure,
+	integrations,
+	onToggle,
+	onConfigure,
 }: IntegrationMarketplaceProps) {
-  const [search, setSearch] = React.useState('');
-  const [category, setCategory] = React.useState('all');
-  // const integrationHubEnabled = Math.random() < 10 || useStudioFeatureFlag(
-  //   ContractSpecFeatureFlags.STUDIO_INTEGRATION_HUB
-  // );
+	const [search, setSearch] = React.useState('');
+	const [category, setCategory] = React.useState('all');
+	// const integrationHubEnabled = Math.random() < 10 || useStudioFeatureFlag(
+	//   ContractSpecFeatureFlags.STUDIO_INTEGRATION_HUB
+	// );
 
-  const categories = React.useMemo(
-    () =>
-      Array.from(
-        new Set(integrations.map((integration) => integration.category))
-      ),
-    [integrations]
-  );
+	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;
-  });
+	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;
+	});
 
-  // if (!integrationHubEnabled) {
-  //   return (
-  //     <div className="border-border bg-card/40 rounded-2xl border border-dashed p-8 text-center">
-  //       <FeatureGateNotice
-  //         title="Integration hub is still locked"
-  //         description="Enable STUDIO_INTEGRATION_HUB to connect third-party providers and route credentials via BYOK."
-  //         actionLabel="Talk to sales"
-  //       />
-  //     </div>
-  //   );
-  // }
+	// if (!integrationHubEnabled) {
+	//   return (
+	//     <div className="border-border bg-card/40 rounded-2xl border border-dashed p-8 text-center">
+	//       <FeatureGateNotice
+	//         title="Integration hub is still locked"
+	//         description="Enable STUDIO_INTEGRATION_HUB to connect third-party providers and route credentials via BYOK."
+	//         actionLabel="Talk to sales"
+	//       />
+	//     </div>
+	//   );
+	// }
 
-  return (
-    <div className="border-border bg-card space-y-4 rounded-2xl border p-4">
-      <header className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p className="text-sm font-semibold tracking-wide uppercase">
-            Integration marketplace
-          </p>
-          <p className="text-muted-foreground text-sm">
-            Connect AI providers, payments, analytics, and internal tools with
-            BYOK controls.
-          </p>
-        </div>
-        <Boxes className="text-muted-foreground h-5 w-5" />
-      </header>
-      <div className="flex flex-wrap gap-3">
-        <div className="relative min-w-[200px] flex-1">
-          <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-          <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"
-          />
-        </div>
-        <Select value={category} onValueChange={setCategory}>
-          <SelectTrigger className="w-[200px]">
-            <SelectValue placeholder="All categories" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All categories</SelectItem>
-            {categories.map((item) => (
-              <SelectItem key={item} value={item}>
-                {item}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="grid gap-4 md:grid-cols-2">
-        {filtered.length ? (
-          filtered.map((integration) => (
-            <IntegrationCard
-              key={integration.id}
-              id={integration.id}
-              provider={integration.provider}
-              name={integration.name}
-              category={integration.category}
-              enabled={integration.enabled}
-              status={integration.status}
-              lastSyncAt={integration.lastSyncAt}
-              onToggle={onToggle}
-              onConfigure={onConfigure}
-            />
-          ))
-        ) : (
-          <div className="text-muted-foreground border-border rounded-xl border border-dashed p-6 text-center text-sm md:col-span-2">
-            No integrations match your filters.
-          </div>
-        )}
-      </div>
-    </div>
-  );
+	return (
+		<div className="space-y-4 rounded-2xl border border-border bg-card p-4">
+			<header className="flex flex-wrap items-center justify-between gap-3">
+				<div>
+					<p className="font-semibold text-sm uppercase tracking-wide">
+						Integration marketplace
+					</p>
+					<p className="text-muted-foreground text-sm">
+						Connect AI providers, payments, analytics, and internal tools with
+						BYOK controls.
+					</p>
+				</div>
+				<Boxes className="h-5 w-5 text-muted-foreground" />
+			</header>
+			<div className="flex flex-wrap gap-3">
+				<div className="relative min-w-[200px] flex-1">
+					<Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+					<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"
+					/>
+				</div>
+				<Select value={category} onValueChange={setCategory}>
+					<SelectTrigger className="w-[200px]">
+						<SelectValue placeholder="All categories" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">All categories</SelectItem>
+						{categories.map((item) => (
+							<SelectItem key={item} value={item}>
+								{item}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+			<div className="grid gap-4 md:grid-cols-2">
+				{filtered.length ? (
+					filtered.map((integration) => (
+						<IntegrationCard
+							key={integration.id}
+							id={integration.id}
+							provider={integration.provider}
+							name={integration.name}
+							category={integration.category}
+							enabled={integration.enabled}
+							status={integration.status}
+							lastSyncAt={integration.lastSyncAt}
+							onToggle={onToggle}
+							onConfigure={onConfigure}
+						/>
+					))
+				) : (
+					<div className="rounded-xl border border-border border-dashed p-6 text-center text-muted-foreground text-sm md:col-span-2">
+						No integrations match your filters.
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }