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

package/src/index.ts

@@ -1,16 +1,17 @@
-export * from './TemplateShell';
-export * from './SpecDrivenTemplateShell';
-export * from './LocalDataIndicator';
-export * from './SaveToStudioButton';
-export * from './overlay-types';
-export * from './MarkdownView';
-export * from './SpecEditorPanel';
+export { MarkdownRenderer } from '@contractspec/lib.design-system';
 export * from './EvolutionDashboard';
 export * from './EvolutionSidebar';
-export * from './OverlayContextProvider';
-export * from './PersonalizationInsights';
 export * from './hooks';
-export * from './utils';
-export * from './lib/runtime-context';
+export * from './LocalDataIndicator';
 export * from './lib/component-registry';
+export * from './lib/runtime-context';
 export * from './lib/types';
+export * from './MarkdownView';
+export * from './OverlayContextProvider';
+export * from './overlay-types';
+export * from './PersonalizationInsights';
+export * from './SaveToStudioButton';
+export * from './SpecDrivenTemplateShell';
+export * from './SpecEditorPanel';
+export * from './TemplateShell';
+export * from './utils';

package/src/lib/component-registry.tsx

@@ -1,64 +1,64 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { TemplateId } from './types';
 
 export interface TemplateComponentRegistration {
-  list: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
-  detail: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
-  form?: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+	list: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+	detail: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+	form?: React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export class TemplateComponentRegistry {
-  private readonly components = new Map<
-    TemplateId,
-    TemplateComponentRegistration
-  >();
-  private readonly listeners = new Set<(templateId: TemplateId) => void>();
+	private readonly components = new Map<
+		TemplateId,
+		TemplateComponentRegistration
+	>();
+	private readonly listeners = new Set<(templateId: TemplateId) => void>();
 
-  register(
-    templateId: TemplateId,
-    registration: TemplateComponentRegistration
-  ) {
-    this.components.set(templateId, registration);
-    this.listeners.forEach((l) => l(templateId));
-  }
+	register(
+		templateId: TemplateId,
+		registration: TemplateComponentRegistration
+	) {
+		this.components.set(templateId, registration);
+		this.listeners.forEach((l) => l(templateId));
+	}
 
-  get(templateId: TemplateId) {
-    return this.components.get(templateId);
-  }
+	get(templateId: TemplateId) {
+		return this.components.get(templateId);
+	}
 
-  subscribe(listener: (templateId: TemplateId) => void) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
+	subscribe(listener: (templateId: TemplateId) => void) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
 }
 
 export const templateComponentRegistry = new TemplateComponentRegistry();
 
 export function registerTemplateComponents(
-  templateId: TemplateId,
-  components: TemplateComponentRegistration
+	templateId: TemplateId,
+	components: TemplateComponentRegistration
 ) {
-  templateComponentRegistry.register(templateId, components);
+	templateComponentRegistry.register(templateId, components);
 }
 
 export function useTemplateComponents(
-  templateId: TemplateId
+	templateId: TemplateId
 ): TemplateComponentRegistration | undefined {
-  const [components, setComponents] = useState(() =>
-    templateComponentRegistry.get(templateId)
-  );
+	const [components, setComponents] = useState(() =>
+		templateComponentRegistry.get(templateId)
+	);
 
-  useEffect(() => {
-    return templateComponentRegistry.subscribe((updatedId) => {
-      if (updatedId === templateId) {
-        setComponents(templateComponentRegistry.get(templateId));
-      }
-    });
-  }, [templateId]);
+	useEffect(() => {
+		return templateComponentRegistry.subscribe((updatedId) => {
+			if (updatedId === templateId) {
+				setComponents(templateComponentRegistry.get(templateId));
+			}
+		});
+	}, [templateId]);
 
-  return components;
+	return components;
 }

package/src/lib/runtime-context.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { createContext, useContext } from 'react';
 import type { ApolloClient } from '@apollo/client';
 import type { TransformEngine } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import { createContext, useContext } from 'react';
 import type {
-  TemplateDefinition,
-  TemplateId,
-  TemplateInstaller,
+	TemplateDefinition,
+	TemplateId,
+	TemplateInstaller,
 } from './types';
 
 // Generic interface for handlers to avoid circular dependencies
@@ -14,41 +14,41 @@ import type {
 export type GenericTemplateHandlers = unknown;
 
 export interface TemplateRuntimeContextValue<
-  THandlers = GenericTemplateHandlers,
+	THandlers = GenericTemplateHandlers,
 > {
-  template: TemplateDefinition;
-  runtime: unknown; // LocalRuntimeServices
-  installer: TemplateInstaller;
-  client: ApolloClient;
-  components?: unknown; // TemplateComponentRegistration
-  /** @deprecated use template.id */
-  templateId: TemplateId;
-  projectId: string;
-  engine: TransformEngine;
-  fetchData: (
-    presentationName: string
-  ) => Promise<{ data: unknown; metadata?: unknown }>;
-  handlers: THandlers;
-  resolvePresentation?: (presentationName: string) => unknown;
+	template: TemplateDefinition;
+	runtime: unknown; // LocalRuntimeServices
+	installer: TemplateInstaller;
+	client: ApolloClient;
+	components?: unknown; // TemplateComponentRegistration
+	/** @deprecated use template.id */
+	templateId: TemplateId;
+	projectId: string;
+	engine: TransformEngine;
+	fetchData: (
+		presentationName: string
+	) => Promise<{ data: unknown; metadata?: unknown }>;
+	handlers: THandlers;
+	resolvePresentation?: (presentationName: string) => unknown;
 }
 
 export const TemplateRuntimeContext =
-  createContext<TemplateRuntimeContextValue | null>(null);
+	createContext<TemplateRuntimeContextValue | null>(null);
 
 export function useTemplateRuntime<
-  THandlers = GenericTemplateHandlers,
+	THandlers = GenericTemplateHandlers,
 >(): TemplateRuntimeContextValue<THandlers> {
-  const context = useContext(TemplateRuntimeContext);
-  if (!context) {
-    throw new Error(
-      'useTemplateRuntime must be used within a TemplateRuntimeProvider'
-    );
-  }
-  return context as TemplateRuntimeContextValue<THandlers>;
+	const context = useContext(TemplateRuntimeContext);
+	if (!context) {
+		throw new Error(
+			'useTemplateRuntime must be used within a TemplateRuntimeProvider'
+		);
+	}
+	return context as TemplateRuntimeContextValue<THandlers>;
 }
 
 export interface TemplateRuntimeProviderProps {
-  templateId: TemplateId;
-  projectId?: string;
-  lazy?: boolean;
+	templateId: TemplateId;
+	projectId?: string;
+	lazy?: boolean;
 }

package/src/lib/types.ts

@@ -1,74 +1,74 @@
 export type TemplateId = string;
 
 export type TemplateCategory =
-  | 'productivity'
-  | 'communication'
-  | 'content'
-  | 'business'
-  | 'ai';
+	| 'productivity'
+	| 'communication'
+	| 'content'
+	| 'business'
+	| 'ai';
 
 export type TemplateComplexity = 'beginner' | 'intermediate' | 'advanced';
 
 export interface TemplateDefinition {
-  id: TemplateId;
-  name: string;
-  description: string;
-  category: TemplateCategory;
-  complexity: TemplateComplexity;
-  icon: string;
-  features: string[];
-  tags: string[];
-  schema: {
-    models: string[];
-    contracts: string[];
-  };
-  components: {
-    list: string;
-    detail: string;
-    form?: string;
-    dashboard?: string;
-  };
-  preview?: {
-    demoUrl?: string;
-    videoUrl?: string;
-  };
-  docs?: {
-    quickstart?: string;
-    reference?: string;
-  };
-  /** Package name for external examples that can be cloned via Git */
-  package?: string;
-  /** Whether this template uses the new cross-cutting modules */
-  usesModules?: string[];
-  /** Feature spec key from the example package */
-  featureSpec?: string;
-  /** List of presentation names available for this template */
-  presentations?: string[];
-  /** List of render targets supported (default: ['react']) */
-  renderTargets?: ('react' | 'markdown' | 'json' | 'xml')[];
+	id: TemplateId;
+	name: string;
+	description: string;
+	category: TemplateCategory;
+	complexity: TemplateComplexity;
+	icon: string;
+	features: string[];
+	tags: string[];
+	schema: {
+		models: string[];
+		contracts: string[];
+	};
+	components: {
+		list: string;
+		detail: string;
+		form?: string;
+		dashboard?: string;
+	};
+	preview?: {
+		demoUrl?: string;
+		videoUrl?: string;
+	};
+	docs?: {
+		quickstart?: string;
+		reference?: string;
+	};
+	/** Package name for external examples that can be cloned via Git */
+	package?: string;
+	/** Whether this template uses the new cross-cutting modules */
+	usesModules?: string[];
+	/** Feature spec key from the example package */
+	featureSpec?: string;
+	/** List of presentation names available for this template */
+	presentations?: string[];
+	/** List of render targets supported (default: ['react']) */
+	renderTargets?: ('react' | 'markdown' | 'json' | 'xml')[];
 }
 
 export interface TemplateFilter {
-  category?: TemplateCategory;
-  complexity?: TemplateComplexity;
-  tag?: string;
+	category?: TemplateCategory;
+	complexity?: TemplateComplexity;
+	tag?: string;
 }
 
 export interface InstallTemplateOptions {
-  projectId?: string;
+	projectId?: string;
 }
 
 export interface SaveTemplateOptions {
-  endpoint?: string;
-  token?: string;
-  projectName: string;
-  organizationId: string;
-  templateId: TemplateId;
+	endpoint?: string;
+	token?: string;
+	projectName: string;
+	organizationId: string;
+	templateId: TemplateId;
 }
 
 export interface SaveTemplateResult {
-  projectId: string;
-  status: string;
+	projectId: string;
+	status: string;
 }
 
 /**
@@ -76,9 +76,9 @@ export interface SaveTemplateResult {
  * Mirrors the public API of the implementation in @contractspec/module.examples
  */
 export interface TemplateInstaller {
-  install(
-    templateId: TemplateId,
-    options?: InstallTemplateOptions
-  ): Promise<void>;
-  saveToStudio(options: SaveTemplateOptions): Promise<SaveTemplateResult>;
+	install(
+		templateId: TemplateId,
+		options?: InstallTemplateOptions
+	): Promise<void>;
+	saveToStudio(options: SaveTemplateOptions): Promise<SaveTemplateResult>;
 }

package/src/markdown/formatPresentationName.ts

@@ -0,0 +1,9 @@
+export function formatPresentationName(name: string): string {
+	const parts = name.split('.');
+	const lastPart = parts[parts.length - 1] ?? name;
+
+	return lastPart
+		.split('-')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(' ');
+}

package/src/markdown/useMarkdownPresentation.ts

@@ -0,0 +1,107 @@
+'use client';
+
+import type { PresentationTarget } from '@contractspec/lib.contracts-spec/presentations';
+import type { TransformEngine } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import { useCallback, useEffect, useState } from 'react';
+
+interface MarkdownOutput {
+	mimeType: string;
+	body: string;
+}
+
+interface UseMarkdownPresentationOptions {
+	engine?: TransformEngine | null;
+	fetchData: (presentationId: string) => Promise<{ data: unknown }>;
+	presentationId?: string;
+	presentations: string[];
+	resolvePresentation?: (presentationId: string) => unknown;
+	templateId?: string;
+}
+
+interface UseMarkdownPresentationResult {
+	error: Error | null;
+	loading: boolean;
+	markdownContent: string;
+	renderMarkdown: () => Promise<void>;
+	selectedPresentation: string;
+	setSelectedPresentation: (presentationId: string) => void;
+}
+
+export function useMarkdownPresentation({
+	engine,
+	fetchData,
+	presentationId,
+	presentations,
+	resolvePresentation,
+	templateId,
+}: UseMarkdownPresentationOptions): UseMarkdownPresentationResult {
+	const [selectedPresentation, setSelectedPresentation] = useState<string>('');
+	const [markdownContent, setMarkdownContent] = useState<string>('');
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+
+	useEffect(() => {
+		if (presentationId && presentations.includes(presentationId)) {
+			setSelectedPresentation(presentationId);
+			return;
+		}
+
+		if (presentations.length === 0) {
+			setSelectedPresentation('');
+			return;
+		}
+
+		if (!presentations.includes(selectedPresentation)) {
+			setSelectedPresentation(presentations[0] ?? '');
+		}
+	}, [presentationId, presentations, selectedPresentation, templateId]);
+
+	const renderMarkdown = useCallback(async () => {
+		if (!selectedPresentation || !engine) return;
+
+		setLoading(true);
+		setError(null);
+
+		try {
+			if (!resolvePresentation) {
+				throw new Error('resolvePresentation not available in runtime context');
+			}
+
+			const descriptor = resolvePresentation(selectedPresentation);
+
+			if (!descriptor) {
+				throw new Error(
+					`Presentation descriptor not found: ${selectedPresentation}`
+				);
+			}
+
+			const dataResult = await fetchData(selectedPresentation);
+			const result = await engine.render<MarkdownOutput>(
+				'markdown' as PresentationTarget,
+				descriptor as Parameters<TransformEngine['render']>[1],
+				{ data: dataResult.data }
+			);
+
+			setMarkdownContent(result.body);
+		} catch (err) {
+			setError(
+				err instanceof Error ? err : new Error('Failed to render markdown')
+			);
+		} finally {
+			setLoading(false);
+		}
+	}, [engine, fetchData, resolvePresentation, selectedPresentation]);
+
+	useEffect(() => {
+		void renderMarkdown();
+	}, [renderMarkdown]);
+
+	return {
+		error,
+		loading,
+		markdownContent,
+		renderMarkdown,
+		selectedPresentation,
+		setSelectedPresentation,
+	};
+}

package/src/overlay-types.ts

@@ -5,21 +5,21 @@
  */
 
 export interface OverlayDefinition {
-  overlayId: string;
-  version: string;
-  description: string;
-  appliesTo: {
-    presentation?: string;
-    role?: string;
-    feature?: string;
-    tier?: string;
-  };
-  modifications: OverlayModification[];
+	overlayId: string;
+	version: string;
+	description: string;
+	appliesTo: {
+		presentation?: string;
+		role?: string;
+		feature?: string;
+		tier?: string;
+	};
+	modifications: OverlayModification[];
 }
 
 export type OverlayModification =
-  | { type: 'hideField'; field: string; reason?: string }
-  | { type: 'renameLabel'; field: string; newLabel: string }
-  | { type: 'addBadge'; position: string; label: string; variant?: string }
-  | { type: 'setDefault'; field: string; value: unknown }
-  | { type: 'setLimit'; field: string; max: number; message?: string };
+	| { type: 'hideField'; field: string; reason?: string }
+	| { type: 'renameLabel'; field: string; newLabel: string }
+	| { type: 'addBadge'; position: string; label: string; variant?: string }
+	| { type: 'setDefault'; field: string; value: unknown }
+	| { type: 'setLimit'; field: string; max: number; message?: string };

package/src/utils/fetchPresentationData.ts

@@ -10,12 +10,12 @@ import type { TemplateId } from '../lib/types';
  * Data fetcher result type
  */
 export interface PresentationDataResult {
-  data: unknown;
-  metadata?: {
-    total?: number;
-    timestamp?: Date;
-    source?: string;
-  };
+	data: unknown;
+	metadata?: {
+		total?: number;
+		timestamp?: Date;
+		source?: string;
+	};
 }
 
 /**
@@ -25,24 +25,24 @@ export interface PresentationDataResult {
  * @deprecated Use fetchData from TemplateRuntimeContext instead.
  */
 export async function fetchPresentationData(
-  _presentationName: string,
-  _templateId: TemplateId
+	_presentationName: string,
+	_templateId: TemplateId
 ): Promise<PresentationDataResult> {
-  throw new Error(
-    'fetchPresentationData is deprecated. Use fetchData from TemplateRuntimeContext.'
-  );
+	throw new Error(
+		'fetchPresentationData is deprecated. Use fetchData from TemplateRuntimeContext.'
+	);
 }
 
 /**
  * @deprecated
  */
 export function hasPresentationDataFetcher(_presentationName: string): boolean {
-  return false;
+	return false;
 }
 
 /**
  * @deprecated
  */
 export function getRegisteredPresentationFetchers(): string[] {
-  return [];
+	return [];
 }