@contractspec/bundle.library 3.7.6 → 3.8.2

package/src/components/shared/FeatureGateNotice.tsx

@@ -1,35 +1,34 @@
-import * as React from 'react';
 import { Lock } from 'lucide-react';
 
 export interface FeatureGateNoticeProps {
-  title: string;
-  description: string;
-  actionLabel?: string;
-  onAction?: () => void;
+	title: string;
+	description: string;
+	actionLabel?: string;
+	onAction?: () => void;
 }
 
 export function FeatureGateNotice({
-  title,
-  description,
-  actionLabel,
-  onAction,
+	title,
+	description,
+	actionLabel,
+	onAction,
 }: FeatureGateNoticeProps) {
-  return (
-    <div className="text-center">
-      <div className="bg-muted/40 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-        <Lock className="text-muted-foreground h-5 w-5" />
-      </div>
-      <h3 className="mt-4 text-lg font-semibold">{title}</h3>
-      <p className="text-muted-foreground mt-2 text-sm">{description}</p>
-      {actionLabel ? (
-        <button
-          type="button"
-          className="btn-primary mt-4 inline-flex items-center justify-center"
-          onClick={onAction}
-        >
-          {actionLabel}
-        </button>
-      ) : null}
-    </div>
-  );
+	return (
+		<div className="text-center">
+			<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted/40">
+				<Lock className="h-5 w-5 text-muted-foreground" />
+			</div>
+			<h3 className="mt-4 font-semibold text-lg">{title}</h3>
+			<p className="mt-2 text-muted-foreground text-sm">{description}</p>
+			{actionLabel ? (
+				<button
+					type="button"
+					className="btn-primary mt-4 inline-flex items-center justify-center"
+					onClick={onAction}
+				>
+					{actionLabel}
+				</button>
+			) : null}
+		</div>
+	);
 }

package/src/components/shell/WorkspaceHeader.tsx

@@ -1,98 +1,98 @@
-import * as React from 'react';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from '@contractspec/lib.ui-kit-web/ui/select';
+import * as React from 'react';
 
 export interface ShellSelectOption {
-  value: string;
-  label: string;
+	value: string;
+	label: string;
 }
 
 export interface ShellSelect {
-  label: string;
-  value: string;
-  options: ShellSelectOption[];
-  onChange: (value: string) => void;
-  placeholder?: string;
+	label: string;
+	value: string;
+	options: ShellSelectOption[];
+	onChange: (value: string) => void;
+	placeholder?: string;
 }
 
 export interface WorkspaceHeaderProps {
-  title: string;
-  subtitle?: string;
-  workspaceSelect?: ShellSelect;
-  projectSelect?: ShellSelect;
-  environmentSelect?: ShellSelect;
-  stickyHeaderOffsetPx?: number;
-  headerRight?: React.ReactNode;
+	title: string;
+	subtitle?: string;
+	workspaceSelect?: ShellSelect;
+	projectSelect?: ShellSelect;
+	environmentSelect?: ShellSelect;
+	stickyHeaderOffsetPx?: number;
+	headerRight?: React.ReactNode;
 }
 
 export function WorkspaceHeader({
-  title,
-  subtitle,
-  workspaceSelect,
-  projectSelect,
-  environmentSelect,
-  stickyHeaderOffsetPx,
-  headerRight,
+	title,
+	subtitle,
+	workspaceSelect,
+	projectSelect,
+	environmentSelect,
+	stickyHeaderOffsetPx,
+	headerRight,
 }: WorkspaceHeaderProps) {
-  return (
-    <div
-      className="border-border bg-card sticky top-0 z-10 border-b"
-      style={{ top: stickyHeaderOffsetPx ?? 0 }}
-    >
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between">
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <p className="truncate text-base font-semibold">{title}</p>
-            {subtitle ? (
-              <p className="text-muted-foreground hidden text-sm md:block">
-                {subtitle}
-              </p>
-            ) : null}
-          </div>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {workspaceSelect ? (
-              <ShellSelectControl select={workspaceSelect} />
-            ) : null}
-            {projectSelect ? (
-              <ShellSelectControl select={projectSelect} />
-            ) : null}
-            {environmentSelect ? (
-              <ShellSelectControl select={environmentSelect} />
-            ) : null}
-          </div>
-        </div>
-        <div className="flex items-center justify-between gap-2 md:justify-end">
-          {headerRight}
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div
+			className="sticky top-0 z-10 border-border border-b bg-card"
+			style={{ top: stickyHeaderOffsetPx ?? 0 }}
+		>
+			<div className="mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between">
+				<div className="min-w-0">
+					<div className="flex items-center gap-2">
+						<p className="truncate font-semibold text-base">{title}</p>
+						{subtitle ? (
+							<p className="hidden text-muted-foreground text-sm md:block">
+								{subtitle}
+							</p>
+						) : null}
+					</div>
+					<div className="mt-2 flex flex-wrap gap-2">
+						{workspaceSelect ? (
+							<ShellSelectControl select={workspaceSelect} />
+						) : null}
+						{projectSelect ? (
+							<ShellSelectControl select={projectSelect} />
+						) : null}
+						{environmentSelect ? (
+							<ShellSelectControl select={environmentSelect} />
+						) : null}
+					</div>
+				</div>
+				<div className="flex items-center justify-between gap-2 md:justify-end">
+					{headerRight}
+				</div>
+			</div>
+		</div>
+	);
 }
 
 function ShellSelectControl({ select }: { select: ShellSelect }) {
-  const labelId = React.useId();
-  return (
-    <div className="flex min-w-[220px] flex-col gap-1">
-      <span id={labelId} className="text-muted-foreground text-xs">
-        {select.label}
-      </span>
-      <Select value={select.value} onValueChange={select.onChange}>
-        <SelectTrigger aria-labelledby={labelId} className="w-full">
-          <SelectValue placeholder={select.placeholder ?? select.label} />
-        </SelectTrigger>
-        <SelectContent>
-          {select.options.map((o) => (
-            <SelectItem key={o.value} value={o.value}>
-              {o.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
+	const labelId = React.useId();
+	return (
+		<div className="flex min-w-[220px] flex-col gap-1">
+			<span id={labelId} className="text-muted-foreground text-xs">
+				{select.label}
+			</span>
+			<Select value={select.value} onValueChange={select.onChange}>
+				<SelectTrigger aria-labelledby={labelId} className="w-full">
+					<SelectValue placeholder={select.placeholder ?? select.label} />
+				</SelectTrigger>
+				<SelectContent>
+					{select.options.map((o) => (
+						<SelectItem key={o.value} value={o.value}>
+							{o.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
 }

package/src/components/shell/WorkspaceProjectShellLayout.tsx

@@ -1,72 +1,73 @@
-import * as React from 'react';
-import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import {
-  SidebarProvider,
-  SidebarInset,
+	SidebarInset,
+	SidebarProvider,
 } from '@contractspec/lib.ui-kit-web/ui/sidebar';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import * as React from 'react';
 import {
-  WorkspaceHeader,
-  type WorkspaceHeaderProps,
-  type ShellSelect,
-  type ShellSelectOption,
+	type ShellSelect,
+	type ShellSelectOption,
+	WorkspaceHeader,
+	type WorkspaceHeaderProps,
 } from './WorkspaceHeader';
 import {
-  WorkspaceSidebar,
-  type WorkspaceSidebarProps,
-  type ShellModuleItem,
+	type ShellModuleItem,
+	WorkspaceSidebar,
+	type WorkspaceSidebarProps,
 } from './WorkspaceSidebar';
 
-export type { ShellSelect, ShellSelectOption, ShellModuleItem };
+export type { ShellModuleItem, ShellSelect, ShellSelectOption };
 
 export interface WorkspaceProjectShellLayoutProps
-  extends WorkspaceSidebarProps, WorkspaceHeaderProps {
-  assistant?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
+	extends WorkspaceSidebarProps,
+		WorkspaceHeaderProps {
+	assistant?: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
 }
 
 export function WorkspaceProjectShellLayout({
-  // Header props
-  title,
-  subtitle,
-  workspaceSelect,
-  projectSelect,
-  environmentSelect,
-  stickyHeaderOffsetPx,
-  headerRight,
-  // Sidebar props
-  modules,
-  activeModuleId,
-  onModuleChange,
-  sidebarFooter,
-  // Layout props
-  assistant,
-  children,
-  className,
+	// Header props
+	title,
+	subtitle,
+	workspaceSelect,
+	projectSelect,
+	environmentSelect,
+	stickyHeaderOffsetPx,
+	headerRight,
+	// Sidebar props
+	modules,
+	activeModuleId,
+	onModuleChange,
+	sidebarFooter,
+	// Layout props
+	assistant,
+	children,
+	className,
 }: WorkspaceProjectShellLayoutProps) {
-  return (
-    <SidebarProvider>
-      <WorkspaceSidebar
-        modules={modules}
-        activeModuleId={activeModuleId}
-        onModuleChange={onModuleChange}
-        sidebarFooter={sidebarFooter}
-      />
-      <SidebarInset>
-        <div className={cn('bg-background min-h-svh', className)}>
-          <WorkspaceHeader
-            title={title}
-            subtitle={subtitle}
-            workspaceSelect={workspaceSelect}
-            projectSelect={projectSelect}
-            environmentSelect={environmentSelect}
-            stickyHeaderOffsetPx={stickyHeaderOffsetPx}
-            headerRight={headerRight}
-          />
-          <main className="m-4">{children}</main>
-        </div>
-      </SidebarInset>
-      {assistant}
-    </SidebarProvider>
-  );
+	return (
+		<SidebarProvider>
+			<WorkspaceSidebar
+				modules={modules}
+				activeModuleId={activeModuleId}
+				onModuleChange={onModuleChange}
+				sidebarFooter={sidebarFooter}
+			/>
+			<SidebarInset>
+				<div className={cn('min-h-svh bg-background', className)}>
+					<WorkspaceHeader
+						title={title}
+						subtitle={subtitle}
+						workspaceSelect={workspaceSelect}
+						projectSelect={projectSelect}
+						environmentSelect={environmentSelect}
+						stickyHeaderOffsetPx={stickyHeaderOffsetPx}
+						headerRight={headerRight}
+					/>
+					<main className="m-4">{children}</main>
+				</div>
+			</SidebarInset>
+			{assistant}
+		</SidebarProvider>
+	);
 }

package/src/components/shell/WorkspaceShellRenderer.tsx

@@ -1,32 +1,33 @@
 'use client';
 
-import * as React from 'react';
-import { SidebarProvider } from '@contractspec/lib.ui-kit-web/ui/sidebar';
 import {
-  BundleProvider,
-  BundleRenderer,
+	BundleProvider,
+	BundleRenderer,
 } from '@contractspec/lib.surface-runtime/react';
 import type { ResolvedSurfacePlan } from '@contractspec/lib.surface-runtime/runtime/resolve-bundle';
-import { WorkspaceHeader } from './WorkspaceHeader';
-import { WorkspaceSidebar } from './WorkspaceSidebar';
+import { SidebarProvider } from '@contractspec/lib.ui-kit-web/ui/sidebar';
+import * as React from 'react';
 import type {
-  WorkspaceHeaderProps,
-  ShellSelect,
-  ShellSelectOption,
+	ShellSelect,
+	ShellSelectOption,
+	WorkspaceHeaderProps,
 } from './WorkspaceHeader';
+import { WorkspaceHeader } from './WorkspaceHeader';
 import type {
-  WorkspaceSidebarProps,
-  ShellModuleItem,
+	ShellModuleItem,
+	WorkspaceSidebarProps,
 } from './WorkspaceSidebar';
+import { WorkspaceSidebar } from './WorkspaceSidebar';
 
-export type { ShellSelect, ShellSelectOption, ShellModuleItem };
+export type { ShellModuleItem, ShellSelect, ShellSelectOption };
 
 export interface WorkspaceShellRendererProps
-  extends WorkspaceSidebarProps, WorkspaceHeaderProps {
-  plan: ResolvedSurfacePlan;
-  assistant?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
+	extends WorkspaceSidebarProps,
+		WorkspaceHeaderProps {
+	plan: ResolvedSurfacePlan;
+	assistant?: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
 }
 
 /**
@@ -35,57 +36,57 @@ export interface WorkspaceShellRendererProps
  * Replaces WorkspaceProjectShellLayout when surface-runtime is available.
  */
 export function WorkspaceShellRenderer({
-  plan,
-  title,
-  subtitle,
-  workspaceSelect,
-  projectSelect,
-  environmentSelect,
-  stickyHeaderOffsetPx,
-  headerRight,
-  modules,
-  activeModuleId,
-  onModuleChange,
-  sidebarFooter,
-  assistant,
-  children,
-  className,
+	plan,
+	title,
+	subtitle,
+	workspaceSelect,
+	projectSelect,
+	environmentSelect,
+	stickyHeaderOffsetPx,
+	headerRight,
+	modules,
+	activeModuleId,
+	onModuleChange,
+	sidebarFooter,
+	assistant,
+	children,
+	className,
 }: WorkspaceShellRendererProps) {
-  const slotContent: Partial<Record<string, React.ReactNode>> = {
-    header: (
-      <WorkspaceHeader
-        title={title}
-        subtitle={subtitle}
-        workspaceSelect={workspaceSelect}
-        projectSelect={projectSelect}
-        environmentSelect={environmentSelect}
-        stickyHeaderOffsetPx={stickyHeaderOffsetPx}
-        headerRight={headerRight}
-      />
-    ),
-    sidebar: (
-      <WorkspaceSidebar
-        modules={modules}
-        activeModuleId={activeModuleId}
-        onModuleChange={onModuleChange}
-        sidebarFooter={sidebarFooter}
-      />
-    ),
-    primary: (
-      <main className={className ? `m-4 ${className}` : 'm-4'}>{children}</main>
-    ),
-  };
-  if (assistant != null) {
-    slotContent.assistant = assistant;
-  }
+	const slotContent: Partial<Record<string, React.ReactNode>> = {
+		header: (
+			<WorkspaceHeader
+				title={title}
+				subtitle={subtitle}
+				workspaceSelect={workspaceSelect}
+				projectSelect={projectSelect}
+				environmentSelect={environmentSelect}
+				stickyHeaderOffsetPx={stickyHeaderOffsetPx}
+				headerRight={headerRight}
+			/>
+		),
+		sidebar: (
+			<WorkspaceSidebar
+				modules={modules}
+				activeModuleId={activeModuleId}
+				onModuleChange={onModuleChange}
+				sidebarFooter={sidebarFooter}
+			/>
+		),
+		primary: (
+			<main className={className ? `m-4 ${className}` : 'm-4'}>{children}</main>
+		),
+	};
+	if (assistant != null) {
+		slotContent.assistant = assistant;
+	}
 
-  return (
-    <SidebarProvider>
-      <BundleProvider plan={plan}>
-        <div className="bg-background min-h-svh">
-          <BundleRenderer slotContent={slotContent} />
-        </div>
-      </BundleProvider>
-    </SidebarProvider>
-  );
+	return (
+		<SidebarProvider>
+			<BundleProvider plan={plan}>
+				<div className="min-h-svh bg-background">
+					<BundleRenderer slotContent={slotContent} />
+				</div>
+			</BundleProvider>
+		</SidebarProvider>
+	);
 }

package/src/components/shell/WorkspaceSidebar.tsx

@@ -1,70 +1,70 @@
-import * as React from 'react';
-import { Settings } from 'lucide-react';
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarRail,
 } from '@contractspec/lib.ui-kit-web/ui/sidebar';
+import { Settings } from 'lucide-react';
+import * as React from 'react';
 
 export interface ShellModuleItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  badge?: string | number;
+	id: string;
+	label: string;
+	icon?: React.ReactNode;
+	badge?: string | number;
 }
 
 export interface WorkspaceSidebarProps {
-  modules: ShellModuleItem[];
-  activeModuleId: string;
-  onModuleChange: (moduleId: string) => void;
-  sidebarFooter?: React.ReactNode;
+	modules: ShellModuleItem[];
+	activeModuleId: string;
+	onModuleChange: (moduleId: string) => void;
+	sidebarFooter?: React.ReactNode;
 }
 
 export function WorkspaceSidebar({
-  modules,
-  activeModuleId,
-  onModuleChange,
-  sidebarFooter,
+	modules,
+	activeModuleId,
+	onModuleChange,
+	sidebarFooter,
 }: WorkspaceSidebarProps) {
-  return (
-    <Sidebar>
-      <SidebarRail />
-      <SidebarHeader />
-      <SidebarContent>
-        <SidebarMenu>
-          {modules.map((m) => (
-            <SidebarMenuItem key={m.id}>
-              <SidebarMenuButton
-                isActive={m.id === activeModuleId}
-                onClick={() => onModuleChange(m.id)}
-              >
-                {m.icon}
-                <span>{m.label}</span>
-                {m.badge != null ? (
-                  <span className="text-muted-foreground ml-auto text-xs">
-                    {String(m.badge)}
-                  </span>
-                ) : null}
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              isActive={activeModuleId === 'settings'}
-              onClick={() => onModuleChange('settings')}
-            >
-              <Settings className="size-4" />
-              <span>Settings</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarContent>
-      <SidebarFooter>{sidebarFooter}</SidebarFooter>
-    </Sidebar>
-  );
+	return (
+		<Sidebar>
+			<SidebarRail />
+			<SidebarHeader />
+			<SidebarContent>
+				<SidebarMenu>
+					{modules.map((m) => (
+						<SidebarMenuItem key={m.id}>
+							<SidebarMenuButton
+								isActive={m.id === activeModuleId}
+								onClick={() => onModuleChange(m.id)}
+							>
+								{m.icon}
+								<span>{m.label}</span>
+								{m.badge != null ? (
+									<span className="ml-auto text-muted-foreground text-xs">
+										{String(m.badge)}
+									</span>
+								) : null}
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					))}
+					<SidebarMenuItem>
+						<SidebarMenuButton
+							isActive={activeModuleId === 'settings'}
+							onClick={() => onModuleChange('settings')}
+						>
+							<Settings className="size-4" />
+							<span>Settings</span>
+						</SidebarMenuButton>
+					</SidebarMenuItem>
+				</SidebarMenu>
+			</SidebarContent>
+			<SidebarFooter>{sidebarFooter}</SidebarFooter>
+		</Sidebar>
+	);
 }