@contractspec/lib.example-shared-ui 6.0.5 → 6.0.7

package/src/SpecDrivenTemplateShell.tsx

@@ -1,24 +1,24 @@
-import type { ReactNode } from 'react';
 import {
-  BundleProvider,
-  BundleRenderer,
+	BundleProvider,
+	BundleRenderer,
 } from '@contractspec/lib.surface-runtime/react';
 import type { ResolvedSurfacePlan } from '@contractspec/lib.surface-runtime/runtime/resolve-bundle';
+import type { ReactNode } from 'react';
 import { LocalDataIndicator } from './LocalDataIndicator';
 import {
-  SaveToStudioButton,
-  type SaveToStudioButtonProps,
+	SaveToStudioButton,
+	type SaveToStudioButtonProps,
 } from './SaveToStudioButton';
 
 export interface SpecDrivenTemplateShellProps {
-  plan: ResolvedSurfacePlan;
-  title: string;
-  description?: string;
-  sidebar?: ReactNode;
-  actions?: ReactNode;
-  children: ReactNode;
-  showSaveAction?: boolean;
-  saveProps?: SaveToStudioButtonProps;
+	plan: ResolvedSurfacePlan;
+	title: string;
+	description?: string;
+	sidebar?: ReactNode;
+	actions?: ReactNode;
+	children: ReactNode;
+	showSaveAction?: boolean;
+	saveProps?: SaveToStudioButtonProps;
 }
 
 /**
@@ -27,53 +27,53 @@ export interface SpecDrivenTemplateShellProps {
  * Requires @contractspec/lib.surface-runtime as peer dependency.
  */
 export function SpecDrivenTemplateShell({
-  plan,
-  title,
-  description,
-  sidebar,
-  actions,
-  showSaveAction = true,
-  saveProps,
-  children,
+	plan,
+	title,
+	description,
+	sidebar,
+	actions,
+	showSaveAction = true,
+	saveProps,
+	children,
 }: SpecDrivenTemplateShellProps) {
-  const headerContent = (
-    <header className="border-border bg-card rounded-2xl border p-6 shadow-sm">
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div>
-          <p className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
-            ContractSpec Templates
-          </p>
-          <h1 className="text-3xl font-bold">{title}</h1>
-          {description ? (
-            <p className="text-muted-foreground mt-2 max-w-2xl text-sm">
-              {description}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex flex-col items-end gap-2">
-          <LocalDataIndicator />
-          {showSaveAction ? <SaveToStudioButton {...saveProps} /> : null}
-        </div>
-      </div>
-      {actions ? <div className="mt-4">{actions}</div> : null}
-    </header>
-  );
+	const headerContent = (
+		<header className="rounded-2xl border border-border bg-card p-6 shadow-sm">
+			<div className="flex flex-wrap items-center justify-between gap-4">
+				<div>
+					<p className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+						ContractSpec Templates
+					</p>
+					<h1 className="font-bold text-3xl">{title}</h1>
+					{description ? (
+						<p className="mt-2 max-w-2xl text-muted-foreground text-sm">
+							{description}
+						</p>
+					) : null}
+				</div>
+				<div className="flex flex-col items-end gap-2">
+					<LocalDataIndicator />
+					{showSaveAction ? <SaveToStudioButton {...saveProps} /> : null}
+				</div>
+			</div>
+			{actions ? <div className="mt-4">{actions}</div> : null}
+		</header>
+	);
 
-  const slotContent: Partial<Record<string, ReactNode>> = {
-    header: headerContent,
-    primary: <main className="space-y-4 p-2">{children}</main>,
-  };
-  if (sidebar != null) {
-    slotContent.sidebar = (
-      <aside className="border-border bg-card rounded-2xl border p-4">
-        {sidebar}
-      </aside>
-    );
-  }
+	const slotContent: Partial<Record<string, ReactNode>> = {
+		header: headerContent,
+		primary: <main className="space-y-4 p-2">{children}</main>,
+	};
+	if (sidebar != null) {
+		slotContent.sidebar = (
+			<aside className="rounded-2xl border border-border bg-card p-4">
+				{sidebar}
+			</aside>
+		);
+	}
 
-  return (
-    <BundleProvider plan={plan}>
-      <BundleRenderer slotContent={slotContent} />
-    </BundleProvider>
-  );
+	return (
+		<BundleProvider plan={plan}>
+			<BundleRenderer slotContent={slotContent} />
+		</BundleProvider>
+	);
 }

package/src/SpecEditorPanel.tsx

@@ -1,27 +1,27 @@
 'use client';
 
-import { useCallback, useEffect } from 'react';
 import { Button, LoaderBlock } from '@contractspec/lib.design-system';
 import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
-import type { TemplateId } from './lib/types';
+import { useCallback, useEffect } from 'react';
 import { useSpecContent } from './hooks/useSpecContent';
+import type { TemplateId } from './lib/types';
 
 export interface SpecEditorProps {
-  projectId: string;
-  type?: 'CAPABILITY' | 'DATAVIEW' | 'WORKFLOW' | 'POLICY' | 'COMPONENT';
-  content: string;
-  onChange: (content: string) => void;
-  metadata?: Record<string, unknown>;
-  onSave?: () => void;
-  onValidate?: () => void;
+	projectId: string;
+	type?: 'CAPABILITY' | 'DATAVIEW' | 'WORKFLOW' | 'POLICY' | 'COMPONENT';
+	content: string;
+	onChange: (content: string) => void;
+	metadata?: Record<string, unknown>;
+	onSave?: () => void;
+	onValidate?: () => void;
 }
 
 export interface SpecEditorPanelProps {
-  templateId: TemplateId;
-  /** SpecEditor component passed as a prop (for dynamic import compatibility) */
-  SpecEditor: React.ComponentType<SpecEditorProps>;
-  /** Callback for logging actions */
-  onLog?: (message: string) => void;
+	templateId: TemplateId;
+	/** SpecEditor component passed as a prop (for dynamic import compatibility) */
+	SpecEditor: React.ComponentType<SpecEditorProps>;
+	/** Callback for logging actions */
+	onLog?: (message: string) => void;
 }
 
 /**
@@ -29,137 +29,137 @@ export interface SpecEditorPanelProps {
  * Uses useSpecContent hook to manage spec persistence and validation.
  */
 export function SpecEditorPanel({
-  templateId,
-  SpecEditor,
-  onLog,
+	templateId,
+	SpecEditor,
+	onLog,
 }: SpecEditorPanelProps) {
-  const {
-    content,
-    loading,
-    isDirty,
-    validation,
-    setContent,
-    save,
-    validate,
-    reset,
-    lastSaved,
-  } = useSpecContent(templateId);
+	const {
+		content,
+		loading,
+		isDirty,
+		validation,
+		setContent,
+		save,
+		validate,
+		reset,
+		lastSaved,
+	} = useSpecContent(templateId);
 
-  // Log when spec is loaded
-  useEffect(() => {
-    if (!loading && content) {
-      onLog?.(`Spec loaded for ${templateId}`);
-    }
-  }, [loading, content, templateId, onLog]);
+	// Log when spec is loaded
+	useEffect(() => {
+		if (!loading && content) {
+			onLog?.(`Spec loaded for ${templateId}`);
+		}
+	}, [loading, content, templateId, onLog]);
 
-  const handleSave = useCallback(() => {
-    save();
-    onLog?.('Spec saved locally');
-  }, [save, onLog]);
+	const handleSave = useCallback(() => {
+		save();
+		onLog?.('Spec saved locally');
+	}, [save, onLog]);
 
-  const handleValidate = useCallback(() => {
-    const result = validate();
-    if (result.valid) {
-      onLog?.('Spec validation passed');
-    } else {
-      const errorCount = result.errors.filter(
-        (e) => e.severity === 'error'
-      ).length;
-      const warnCount = result.errors.filter(
-        (e) => e.severity === 'warning'
-      ).length;
-      onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
-    }
-  }, [validate, onLog]);
+	const handleValidate = useCallback(() => {
+		const result = validate();
+		if (result.valid) {
+			onLog?.('Spec validation passed');
+		} else {
+			const errorCount = result.errors.filter(
+				(e) => e.severity === 'error'
+			).length;
+			const warnCount = result.errors.filter(
+				(e) => e.severity === 'warning'
+			).length;
+			onLog?.(`Spec validation: ${errorCount} errors, ${warnCount} warnings`);
+		}
+	}, [validate, onLog]);
 
-  const handleReset = useCallback(() => {
-    reset();
-    onLog?.('Spec reset to template defaults');
-  }, [reset, onLog]);
+	const handleReset = useCallback(() => {
+		reset();
+		onLog?.('Spec reset to template defaults');
+	}, [reset, onLog]);
 
-  if (loading) {
-    return <LoaderBlock label="Loading spec..." />;
-  }
+	if (loading) {
+		return <LoaderBlock label="Loading spec..." />;
+	}
 
-  return (
-    <div className="space-y-4">
-      {/* Spec Toolbar */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Button variant="default" size="sm" onClick={handleSave}>
-            Save
-          </Button>
-          <Button variant="outline" size="sm" onClick={handleValidate}>
-            Validate
-          </Button>
-          {isDirty && (
-            <Badge
-              variant="secondary"
-              className="border-amber-500/30 bg-amber-500/20 text-amber-400"
-            >
-              Unsaved changes
-            </Badge>
-          )}
-          {validation && (
-            <Badge
-              variant={validation.valid ? 'default' : 'destructive'}
-              className={
-                validation.valid
-                  ? 'border-green-500/30 bg-green-500/20 text-green-400'
-                  : ''
-              }
-            >
-              {validation.valid
-                ? 'Valid'
-                : `${validation.errors.filter((e) => e.severity === 'error').length} errors`}
-            </Badge>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          {lastSaved && (
-            <span className="text-muted-foreground text-xs">
-              Last saved: {new Date(lastSaved).toLocaleTimeString()}
-            </span>
-          )}
-          <Button variant="ghost" size="sm" onPress={handleReset}>
-            Reset
-          </Button>
-        </div>
-      </div>
+	return (
+		<div className="space-y-4">
+			{/* Spec Toolbar */}
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<Button variant="default" size="sm" onClick={handleSave}>
+						Save
+					</Button>
+					<Button variant="outline" size="sm" onClick={handleValidate}>
+						Validate
+					</Button>
+					{isDirty && (
+						<Badge
+							variant="secondary"
+							className="border-amber-500/30 bg-amber-500/20 text-amber-400"
+						>
+							Unsaved changes
+						</Badge>
+					)}
+					{validation && (
+						<Badge
+							variant={validation.valid ? 'default' : 'destructive'}
+							className={
+								validation.valid
+									? 'border-green-500/30 bg-green-500/20 text-green-400'
+									: ''
+							}
+						>
+							{validation.valid
+								? 'Valid'
+								: `${validation.errors.filter((e) => e.severity === 'error').length} errors`}
+						</Badge>
+					)}
+				</div>
+				<div className="flex items-center gap-2">
+					{lastSaved && (
+						<span className="text-muted-foreground text-xs">
+							Last saved: {new Date(lastSaved).toLocaleTimeString()}
+						</span>
+					)}
+					<Button variant="ghost" size="sm" onPress={handleReset}>
+						Reset
+					</Button>
+				</div>
+			</div>
 
-      {/* Validation Errors */}
-      {validation && validation.errors.length > 0 && (
-        <div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-3">
-          <p className="mb-2 text-xs font-semibold text-amber-400 uppercase">
-            Validation Issues
-          </p>
-          <ul className="space-y-1">
-            {validation.errors.map((error, index) => (
-              <li
-                key={`${error.line}-${error.message}-${index}`}
-                className={`text-xs ${
-                  error.severity === 'error' ? 'text-red-400' : 'text-amber-400'
-                }`}
-              >
-                Line {error.line}: {error.message}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
+			{/* Validation Errors */}
+			{validation && validation.errors.length > 0 && (
+				<div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-3">
+					<p className="mb-2 font-semibold text-amber-400 text-xs uppercase">
+						Validation Issues
+					</p>
+					<ul className="space-y-1">
+						{validation.errors.map((error, index) => (
+							<li
+								key={`${error.line}-${error.message}-${index}`}
+								className={`text-xs ${
+									error.severity === 'error' ? 'text-red-400' : 'text-amber-400'
+								}`}
+							>
+								Line {error.line}: {error.message}
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
 
-      {/* Editor */}
-      <div className="border-border bg-card rounded-2xl border p-4">
-        <SpecEditor
-          projectId="sandbox"
-          type="CAPABILITY"
-          content={content}
-          onChange={setContent}
-          metadata={{ template: templateId }}
-          onSave={handleSave}
-          onValidate={handleValidate}
-        />
-      </div>
-    </div>
-  );
+			{/* Editor */}
+			<div className="rounded-2xl border border-border bg-card p-4">
+				<SpecEditor
+					projectId="sandbox"
+					type="CAPABILITY"
+					content={content}
+					onChange={setContent}
+					metadata={{ template: templateId }}
+					onSave={handleSave}
+					onValidate={handleValidate}
+				/>
+			</div>
+		</div>
+	);
 }

package/src/TemplateShell.tsx

@@ -2,62 +2,62 @@ import type { ReactNode } from 'react';
 
 import { LocalDataIndicator } from './LocalDataIndicator';
 import {
-  SaveToStudioButton,
-  type SaveToStudioButtonProps,
+	SaveToStudioButton,
+	type SaveToStudioButtonProps,
 } from './SaveToStudioButton';
 
 export interface TemplateShellProps {
-  title: string;
-  description?: string;
-  sidebar?: ReactNode;
-  actions?: ReactNode;
-  children: ReactNode;
-  showSaveAction?: boolean;
-  saveProps?: SaveToStudioButtonProps;
+	title: string;
+	description?: string;
+	sidebar?: ReactNode;
+	actions?: ReactNode;
+	children: ReactNode;
+	showSaveAction?: boolean;
+	saveProps?: SaveToStudioButtonProps;
 }
 
 export const TemplateShell = ({
-  title,
-  description,
-  sidebar,
-  actions,
-  showSaveAction = true,
-  saveProps,
-  children,
+	title,
+	description,
+	sidebar,
+	actions,
+	showSaveAction = true,
+	saveProps,
+	children,
 }: TemplateShellProps) => (
-  <div className="space-y-6">
-    <header className="border-border bg-card rounded-2xl border p-6 shadow-sm">
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div>
-          <p className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
-            ContractSpec Templates
-          </p>
-          <h1 className="text-3xl font-bold">{title}</h1>
-          {description ? (
-            <p className="text-muted-foreground mt-2 max-w-2xl text-sm">
-              {description}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex flex-col items-end gap-2">
-          <LocalDataIndicator />
-          {showSaveAction ? <SaveToStudioButton {...saveProps} /> : null}
-        </div>
-      </div>
-      {actions ? <div className="mt-4">{actions}</div> : null}
-    </header>
+	<div className="space-y-6">
+		<header className="rounded-2xl border border-border bg-card p-6 shadow-sm">
+			<div className="flex flex-wrap items-center justify-between gap-4">
+				<div>
+					<p className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+						ContractSpec Templates
+					</p>
+					<h1 className="font-bold text-3xl">{title}</h1>
+					{description ? (
+						<p className="mt-2 max-w-2xl text-muted-foreground text-sm">
+							{description}
+						</p>
+					) : null}
+				</div>
+				<div className="flex flex-col items-end gap-2">
+					<LocalDataIndicator />
+					{showSaveAction ? <SaveToStudioButton {...saveProps} /> : null}
+				</div>
+			</div>
+			{actions ? <div className="mt-4">{actions}</div> : null}
+		</header>
 
-    <div
-      className={
-        sidebar ? 'grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]' : 'w-full'
-      }
-    >
-      <main className="space-y-4 p-2">{children}</main>
-      {sidebar ? (
-        <aside className="border-border bg-card rounded-2xl border p-4">
-          {sidebar}
-        </aside>
-      ) : null}
-    </div>
-  </div>
+		<div
+			className={
+				sidebar ? 'grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]' : 'w-full'
+			}
+		>
+			<main className="space-y-4 p-2">{children}</main>
+			{sidebar ? (
+				<aside className="rounded-2xl border border-border bg-card p-4">
+					{sidebar}
+				</aside>
+			) : null}
+		</div>
+	</div>
 );