@contractspec/lib.example-shared-ui 6.0.6 → 6.0.10

package/src/hooks/useRegistryTemplates.ts

@@ -1,49 +1,49 @@
 import { useQuery } from '@tanstack/react-query';
 
 export interface RegistryTemplate {
-  id: string;
-  name: string;
-  description: string;
-  tags: string[];
-  source: 'registry';
-  registryUrl?: string | null;
+	id: string;
+	name: string;
+	description: string;
+	tags: string[];
+	source: 'registry';
+	registryUrl?: string | null;
 }
 
 export function useRegistryTemplates() {
-  return useQuery({
-    queryKey: ['registryTemplates'] as const,
-    queryFn: async (): Promise<RegistryTemplate[]> => {
-      const registryUrl =
-        process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL ?? '';
-      if (!registryUrl) return [];
-      const res = await fetch(
-        `${registryUrl.replace(/\/$/, '')}/r/contractspec.json`,
-        {
-          method: 'GET',
-          headers: { Accept: 'application/json' },
-        }
-      );
-      if (!res.ok) return [];
-      const json = (await res.json()) as {
-        items?: {
-          name: string;
-          type: string;
-          title: string;
-          description: string;
-          meta?: { tags?: string[] };
-        }[];
-      };
-      const items = json.items ?? [];
-      return items
-        .filter((i) => i.type === 'contractspec:template')
-        .map((i) => ({
-          id: i.name,
-          name: i.title ?? i.name,
-          description: i.description,
-          tags: i.meta?.tags ?? [],
-          source: 'registry' as const,
-          registryUrl,
-        }));
-    },
-  });
+	return useQuery({
+		queryKey: ['registryTemplates'] as const,
+		queryFn: async (): Promise<RegistryTemplate[]> => {
+			const registryUrl =
+				process.env.NEXT_PUBLIC_CONTRACTSPEC_REGISTRY_URL ?? '';
+			if (!registryUrl) return [];
+			const res = await fetch(
+				`${registryUrl.replace(/\/$/, '')}/r/contractspec.json`,
+				{
+					method: 'GET',
+					headers: { Accept: 'application/json' },
+				}
+			);
+			if (!res.ok) return [];
+			const json = (await res.json()) as {
+				items?: {
+					name: string;
+					type: string;
+					title: string;
+					description: string;
+					meta?: { tags?: string[] };
+				}[];
+			};
+			const items = json.items ?? [];
+			return items
+				.filter((i) => i.type === 'contractspec:template')
+				.map((i) => ({
+					id: i.name,
+					name: i.title ?? i.name,
+					description: i.description,
+					tags: i.meta?.tags ?? [],
+					source: 'registry' as const,
+					registryUrl,
+				}));
+		},
+	});
 }

package/src/hooks/useSpecContent.ts

@@ -1,8 +1,8 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import type { TemplateId } from '../lib/types';
 import { useTemplateRuntime } from '../lib/runtime-context';
+import type { TemplateId } from '../lib/types';
 import { generateSpecFromTemplate } from '../utils/generateSpecFromTemplate';
 
 /**
@@ -14,36 +14,36 @@ const SPEC_STORAGE_KEY = 'contractspec-spec-content';
  * Validation result for spec content
  */
 export interface SpecValidationResult {
-  valid: boolean;
-  errors: {
-    line: number;
-    message: string;
-    severity: 'error' | 'warning';
-  }[];
+	valid: boolean;
+	errors: {
+		line: number;
+		message: string;
+		severity: 'error' | 'warning';
+	}[];
 }
 
 /**
  * Hook return type
  */
 export interface UseSpecContentReturn {
-  /** Current spec content */
-  content: string;
-  /** Whether the spec is loading */
-  loading: boolean;
-  /** Whether the spec has unsaved changes */
-  isDirty: boolean;
-  /** Last validation result */
-  validation: SpecValidationResult | null;
-  /** Update spec content */
-  setContent: (content: string) => void;
-  /** Save spec content to storage */
-  save: () => void;
-  /** Validate spec content */
-  validate: () => SpecValidationResult;
-  /** Reset to template default */
-  reset: () => void;
-  /** Last saved timestamp */
-  lastSaved: string | null;
+	/** Current spec content */
+	content: string;
+	/** Whether the spec is loading */
+	loading: boolean;
+	/** Whether the spec has unsaved changes */
+	isDirty: boolean;
+	/** Last validation result */
+	validation: SpecValidationResult | null;
+	/** Update spec content */
+	setContent: (content: string) => void;
+	/** Save spec content to storage */
+	save: () => void;
+	/** Validate spec content */
+	validate: () => SpecValidationResult;
+	/** Reset to template default */
+	reset: () => void;
+	/** Last saved timestamp */
+	lastSaved: string | null;
 }
 
 /**
@@ -51,193 +51,193 @@ export interface UseSpecContentReturn {
  * Uses localStorage for persistence in the sandbox environment.
  */
 export function useSpecContent(templateId: TemplateId): UseSpecContentReturn {
-  const { template } = useTemplateRuntime();
-  const [content, setContentState] = useState<string>('');
-  const [savedContent, setSavedContent] = useState<string>('');
-  const [loading, setLoading] = useState(true);
-  const [validation, setValidation] = useState<SpecValidationResult | null>(
-    null
-  );
-  const [lastSaved, setLastSaved] = useState<string | null>(null);
-
-  // Load spec content from storage on mount
-  useEffect(() => {
-    setLoading(true);
-    try {
-      const stored = localStorage.getItem(`${SPEC_STORAGE_KEY}-${templateId}`);
-      if (stored) {
-        const parsed = JSON.parse(stored) as {
-          content: string;
-          savedAt: string;
-        };
-        if (parsed.content) {
-          setContentState(parsed.content);
-          setSavedContent(parsed.content);
-          setLastSaved(parsed.savedAt);
-        } else {
-          // Invalid stored state, generate from template
-          const generated = generateSpecFromTemplate(template);
-          setContentState(generated);
-          setSavedContent(generated);
-        }
-      } else {
-        // No stored state, generate from template
-        const generated = generateSpecFromTemplate(template);
-        setContentState(generated);
-        setSavedContent(generated);
-      }
-    } catch {
-      // On error, generate from template
-      const generated = generateSpecFromTemplate(template);
-      setContentState(generated);
-      setSavedContent(generated);
-    }
-    setLoading(false);
-  }, [templateId]);
-
-  /**
-   * Update spec content (in-memory only until save)
-   */
-  const setContent = useCallback((newContent: string): void => {
-    setContentState(newContent);
-    // Clear validation when content changes
-    setValidation(null);
-  }, []);
-
-  /**
-   * Save spec content to storage
-   */
-  const save = useCallback((): void => {
-    try {
-      const savedAt = new Date().toISOString();
-      localStorage.setItem(
-        `${SPEC_STORAGE_KEY}-${templateId}`,
-        JSON.stringify({
-          content,
-          savedAt,
-        })
-      );
-      setSavedContent(content);
-      setLastSaved(savedAt);
-    } catch {
-      // Ignore storage errors
-    }
-  }, [content, templateId]);
-
-  /**
-   * Validate spec content
-   * Performs basic syntax validation
-   */
-  const validate = useCallback((): SpecValidationResult => {
-    const errors: SpecValidationResult['errors'] = [];
-
-    // Basic validation rules
-    const lines = content.split('\n');
-
-    // Check for contractSpec function call
-    if (!content.includes('contractSpec(')) {
-      errors.push({
-        line: 1,
-        message: 'Spec must contain a contractSpec() definition',
-        severity: 'error',
-      });
-    }
-
-    // Check for required fields
-    if (!content.includes('goal:')) {
-      errors.push({
-        line: 1,
-        message: 'Spec should have a goal field',
-        severity: 'warning',
-      });
-    }
-
-    if (!content.includes('io:')) {
-      errors.push({
-        line: 1,
-        message: 'Spec should define io (input/output)',
-        severity: 'warning',
-      });
-    }
-
-    // Check for balanced braces
-    const openBraces = (content.match(/{/g) ?? []).length;
-    const closeBraces = (content.match(/}/g) ?? []).length;
-    if (openBraces !== closeBraces) {
-      errors.push({
-        line: lines.length,
-        message: `Unbalanced braces: ${openBraces} opening, ${closeBraces} closing`,
-        severity: 'error',
-      });
-    }
-
-    // Check for balanced parentheses
-    const openParens = (content.match(/\(/g) ?? []).length;
-    const closeParens = (content.match(/\)/g) ?? []).length;
-    if (openParens !== closeParens) {
-      errors.push({
-        line: lines.length,
-        message: `Unbalanced parentheses: ${openParens} opening, ${closeParens} closing`,
-        severity: 'error',
-      });
-    }
-
-    // Check for unclosed strings (basic check)
-    lines.forEach((line, index) => {
-      const singleQuotes = (line.match(/'/g) ?? []).length;
-      const doubleQuotes = (line.match(/"/g) ?? []).length;
-      if (singleQuotes % 2 !== 0) {
-        errors.push({
-          line: index + 1,
-          message: 'Unclosed single quote',
-          severity: 'error',
-        });
-      }
-      if (doubleQuotes % 2 !== 0) {
-        errors.push({
-          line: index + 1,
-          message: 'Unclosed double quote',
-          severity: 'error',
-        });
-      }
-    });
-
-    const result: SpecValidationResult = {
-      valid: errors.filter((e) => e.severity === 'error').length === 0,
-      errors,
-    };
-
-    setValidation(result);
-    return result;
-  }, [content]);
-
-  /**
-   * Reset to template default
-   */
-  const reset = useCallback((): void => {
-    const generated = generateSpecFromTemplate(template);
-    setContentState(generated);
-    setSavedContent(generated);
-    setValidation(null);
-    setLastSaved(null);
-
-    // Clear from storage
-    try {
-      localStorage.removeItem(`${SPEC_STORAGE_KEY}-${templateId}`);
-    } catch {
-      // Ignore storage errors
-    }
-  }, [templateId]);
-
-  return {
-    content,
-    loading,
-    isDirty: content !== savedContent,
-    validation,
-    setContent,
-    save,
-    validate,
-    reset,
-    lastSaved,
-  };
+	const { template } = useTemplateRuntime();
+	const [content, setContentState] = useState<string>('');
+	const [savedContent, setSavedContent] = useState<string>('');
+	const [loading, setLoading] = useState(true);
+	const [validation, setValidation] = useState<SpecValidationResult | null>(
+		null
+	);
+	const [lastSaved, setLastSaved] = useState<string | null>(null);
+
+	// Load spec content from storage on mount
+	useEffect(() => {
+		setLoading(true);
+		try {
+			const stored = localStorage.getItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+			if (stored) {
+				const parsed = JSON.parse(stored) as {
+					content: string;
+					savedAt: string;
+				};
+				if (parsed.content) {
+					setContentState(parsed.content);
+					setSavedContent(parsed.content);
+					setLastSaved(parsed.savedAt);
+				} else {
+					// Invalid stored state, generate from template
+					const generated = generateSpecFromTemplate(template);
+					setContentState(generated);
+					setSavedContent(generated);
+				}
+			} else {
+				// No stored state, generate from template
+				const generated = generateSpecFromTemplate(template);
+				setContentState(generated);
+				setSavedContent(generated);
+			}
+		} catch {
+			// On error, generate from template
+			const generated = generateSpecFromTemplate(template);
+			setContentState(generated);
+			setSavedContent(generated);
+		}
+		setLoading(false);
+	}, [templateId]);
+
+	/**
+	 * Update spec content (in-memory only until save)
+	 */
+	const setContent = useCallback((newContent: string): void => {
+		setContentState(newContent);
+		// Clear validation when content changes
+		setValidation(null);
+	}, []);
+
+	/**
+	 * Save spec content to storage
+	 */
+	const save = useCallback((): void => {
+		try {
+			const savedAt = new Date().toISOString();
+			localStorage.setItem(
+				`${SPEC_STORAGE_KEY}-${templateId}`,
+				JSON.stringify({
+					content,
+					savedAt,
+				})
+			);
+			setSavedContent(content);
+			setLastSaved(savedAt);
+		} catch {
+			// Ignore storage errors
+		}
+	}, [content, templateId]);
+
+	/**
+	 * Validate spec content
+	 * Performs basic syntax validation
+	 */
+	const validate = useCallback((): SpecValidationResult => {
+		const errors: SpecValidationResult['errors'] = [];
+
+		// Basic validation rules
+		const lines = content.split('\n');
+
+		// Check for contractSpec function call
+		if (!content.includes('contractSpec(')) {
+			errors.push({
+				line: 1,
+				message: 'Spec must contain a contractSpec() definition',
+				severity: 'error',
+			});
+		}
+
+		// Check for required fields
+		if (!content.includes('goal:')) {
+			errors.push({
+				line: 1,
+				message: 'Spec should have a goal field',
+				severity: 'warning',
+			});
+		}
+
+		if (!content.includes('io:')) {
+			errors.push({
+				line: 1,
+				message: 'Spec should define io (input/output)',
+				severity: 'warning',
+			});
+		}
+
+		// Check for balanced braces
+		const openBraces = (content.match(/{/g) ?? []).length;
+		const closeBraces = (content.match(/}/g) ?? []).length;
+		if (openBraces !== closeBraces) {
+			errors.push({
+				line: lines.length,
+				message: `Unbalanced braces: ${openBraces} opening, ${closeBraces} closing`,
+				severity: 'error',
+			});
+		}
+
+		// Check for balanced parentheses
+		const openParens = (content.match(/\(/g) ?? []).length;
+		const closeParens = (content.match(/\)/g) ?? []).length;
+		if (openParens !== closeParens) {
+			errors.push({
+				line: lines.length,
+				message: `Unbalanced parentheses: ${openParens} opening, ${closeParens} closing`,
+				severity: 'error',
+			});
+		}
+
+		// Check for unclosed strings (basic check)
+		lines.forEach((line, index) => {
+			const singleQuotes = (line.match(/'/g) ?? []).length;
+			const doubleQuotes = (line.match(/"/g) ?? []).length;
+			if (singleQuotes % 2 !== 0) {
+				errors.push({
+					line: index + 1,
+					message: 'Unclosed single quote',
+					severity: 'error',
+				});
+			}
+			if (doubleQuotes % 2 !== 0) {
+				errors.push({
+					line: index + 1,
+					message: 'Unclosed double quote',
+					severity: 'error',
+				});
+			}
+		});
+
+		const result: SpecValidationResult = {
+			valid: errors.filter((e) => e.severity === 'error').length === 0,
+			errors,
+		};
+
+		setValidation(result);
+		return result;
+	}, [content]);
+
+	/**
+	 * Reset to template default
+	 */
+	const reset = useCallback((): void => {
+		const generated = generateSpecFromTemplate(template);
+		setContentState(generated);
+		setSavedContent(generated);
+		setValidation(null);
+		setLastSaved(null);
+
+		// Clear from storage
+		try {
+			localStorage.removeItem(`${SPEC_STORAGE_KEY}-${templateId}`);
+		} catch {
+			// Ignore storage errors
+		}
+	}, [templateId]);
+
+	return {
+		content,
+		loading,
+		isDirty: content !== savedContent,
+		validation,
+		setContent,
+		save,
+		validate,
+		reset,
+		lastSaved,
+	};
 }