@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/shell/index.ts

@@ -1,4 +1,4 @@
 export * from './WorkspaceHeader';
-export * from './WorkspaceSidebar';
 export * from './WorkspaceProjectShellLayout';
 export * from './WorkspaceShellRenderer';
+export * from './WorkspaceSidebar';

package/src/components/templates/engine/index.ts

@@ -9,72 +9,73 @@
  * Import presentations dynamically or use the main templates/engine.ts
  * which handles the build order correctly.
  */
+
+import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import {
-  createDefaultTransformEngine,
-  registerBasicValidation,
-  registerDefaultReactRenderer,
-  TransformEngine,
+	createDefaultTransformEngine,
+	registerBasicValidation,
+	registerDefaultReactRenderer,
+	TransformEngine,
 } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
-import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 
 /**
  * Create a configured TransformEngine for template rendering
  */
 export function createTemplateTransformEngine(): TransformEngine {
-  const engine = createDefaultTransformEngine();
+	const engine = createDefaultTransformEngine();
 
-  // Add React renderer that returns serializable descriptors
-  registerDefaultReactRenderer(engine);
+	// Add React renderer that returns serializable descriptors
+	registerDefaultReactRenderer(engine);
 
-  // Add basic validation for description, etc.
-  registerBasicValidation(engine);
+	// Add basic validation for description, etc.
+	registerBasicValidation(engine);
 
-  return engine;
+	return engine;
 }
 
 /**
  * Find a presentation by name and version from a list
  */
 export function findPresentation(
-  presentations: PresentationSpec[],
-  name: string,
-  version: number
+	presentations: PresentationSpec[],
+	name: string,
+	version: number
 ): PresentationSpec | undefined {
-  return presentations.find(
-    (p) => p.meta.key === name && String(p.meta.version) === String(version)
-  );
+	return presentations.find(
+		(p) => p.meta.key === name && String(p.meta.version) === String(version)
+	);
 }
 
 /**
  * Get all presentations for a given domain from a list
  */
 export function filterPresentationsByDomain(
-  presentations: PresentationSpec[],
-  domain: string
+	presentations: PresentationSpec[],
+	domain: string
 ): PresentationSpec[] {
-  return presentations.filter((p) => p.meta.domain === domain);
+	return presentations.filter((p) => p.meta.domain === domain);
 }
 
 /**
  * Check if a presentation supports a given target
  */
 export function supportsTarget(
-  presentation: PresentationSpec,
-  target: 'react' | 'markdown' | 'application/json' | 'application/xml'
+	presentation: PresentationSpec,
+	target: 'react' | 'markdown' | 'application/json' | 'application/xml'
 ): boolean {
-  return presentation.targets.includes(target);
+	return presentation.targets.includes(target);
 }
 
 // Export singleton engine instance
 let engineInstance: TransformEngine | null = null;
 
 export function getTemplateEngine(): TransformEngine {
-  if (!engineInstance) {
-    engineInstance = createTemplateTransformEngine();
-  }
-  return engineInstance;
+	if (!engineInstance) {
+		engineInstance = createTemplateTransformEngine();
+	}
+	return engineInstance;
 }
 
 export function resetTemplateEngine(): void {
-  engineInstance = null;
+	engineInstance = null;
 }

package/src/components/templates/index.ts

@@ -1,5 +1,5 @@
-export * from './todos';
 export * from './messaging';
 export * from './recipes';
+export * from './todos';
 
 // Learning journey components moved to @contractspec/example.learning-journey-registry/ui

package/src/components/templates/messaging/ConversationList.tsx

@@ -1,10 +1,9 @@
-import { useQuery } from '@apollo/client/react';
 import { gql } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
 import { MessageCircle, Users } from 'lucide-react';
 import { useMemo } from 'react';
-
 import { type Conversation } from './types';
-import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
 
 const CONVERSATIONS_QUERY = gql`
   query Conversations($projectId: ID!) {
@@ -23,76 +22,76 @@ const CONVERSATIONS_QUERY = gql`
 `;
 
 export interface ConversationListProps {
-  selectedId?: string;
-  onSelect?: (conversationId: string) => void;
+	selectedId?: string;
+	onSelect?: (conversationId: string) => void;
 }
 
 export function ConversationList({
-  selectedId,
-  onSelect,
+	selectedId,
+	onSelect,
 }: ConversationListProps) {
-  const { projectId } = useTemplateRuntime();
-  const { data, loading } = useQuery<{ conversations: Conversation[] }>(
-    CONVERSATIONS_QUERY,
-    {
-      variables: { projectId },
-      fetchPolicy: 'cache-and-network',
-    }
-  );
+	const { projectId } = useTemplateRuntime();
+	const { data, loading } = useQuery<{ conversations: Conversation[] }>(
+		CONVERSATIONS_QUERY,
+		{
+			variables: { projectId },
+			fetchPolicy: 'cache-and-network',
+		}
+	);
 
-  const conversations: Conversation[] = useMemo(
-    () => data?.conversations ?? [],
-    [data]
-  );
+	const conversations: Conversation[] = useMemo(
+		() => data?.conversations ?? [],
+		[data]
+	);
 
-  return (
-    <aside className="border-border bg-card h-full overflow-y-auto rounded-2xl border">
-      <header className="border-border px -4 flex items-center justify-between border-b px-4 py-3">
-        <div>
-          <p className="text-sm font-semibold">Conversations</p>
-          <p className="text-muted-foreground text-xs">
-            {loading ? 'Loading…' : `${conversations.length} active`}
-          </p>
-        </div>
-        <Users className="text-muted-foreground h-4 w-4" />
-      </header>
-      <div className="divide-border/70 divide-y">
-        {conversations.map((conversation) => {
-          const isSelected = selectedId === conversation.id;
-          return (
-            <button
-              key={conversation.id}
-              type="button"
-              className={`flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${
-                isSelected
-                  ? 'text-foreground bg-violet-500/10'
-                  : 'hover:bg-muted/40'
-              }`}
-              onClick={() => onSelect?.(conversation.id)}
-            >
-              <div className="flex items-center gap-2">
-                <MessageCircle className="text-muted-foreground h-4 w-4" />
-                <span className="text-sm font-medium">
-                  {conversation.name || 'Untitled conversation'}
-                </span>
-              </div>
-              <p className="text-muted-foreground text-xs">
-                {conversation.participants
-                  .map(
-                    (participant) =>
-                      participant.displayName || participant.userId
-                  )
-                  .join(' · ')}
-              </p>
-            </button>
-          );
-        })}
-        {!loading && conversations.length === 0 ? (
-          <p className="text-muted-foreground p-4 text-center text-xs">
-            No conversations yet.
-          </p>
-        ) : null}
-      </div>
-    </aside>
-  );
+	return (
+		<aside className="h-full overflow-y-auto rounded-2xl border border-border bg-card">
+			<header className="px -4 flex items-center justify-between border-border border-b px-4 py-3">
+				<div>
+					<p className="font-semibold text-sm">Conversations</p>
+					<p className="text-muted-foreground text-xs">
+						{loading ? 'Loading…' : `${conversations.length} active`}
+					</p>
+				</div>
+				<Users className="h-4 w-4 text-muted-foreground" />
+			</header>
+			<div className="divide-y divide-border/70">
+				{conversations.map((conversation) => {
+					const isSelected = selectedId === conversation.id;
+					return (
+						<button
+							key={conversation.id}
+							type="button"
+							className={`flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${
+								isSelected
+									? 'bg-violet-500/10 text-foreground'
+									: 'hover:bg-muted/40'
+							}`}
+							onClick={() => onSelect?.(conversation.id)}
+						>
+							<div className="flex items-center gap-2">
+								<MessageCircle className="h-4 w-4 text-muted-foreground" />
+								<span className="font-medium text-sm">
+									{conversation.name || 'Untitled conversation'}
+								</span>
+							</div>
+							<p className="text-muted-foreground text-xs">
+								{conversation.participants
+									.map(
+										(participant) =>
+											participant.displayName || participant.userId
+									)
+									.join(' · ')}
+							</p>
+						</button>
+					);
+				})}
+				{!loading && conversations.length === 0 ? (
+					<p className="p-4 text-center text-muted-foreground text-xs">
+						No conversations yet.
+					</p>
+				) : null}
+			</div>
+		</aside>
+	);
 }

package/src/components/templates/messaging/MessageComposer.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
-import { useMutation } from '@apollo/client/react';
 import { gql } from '@apollo/client';
-import { Send } from 'lucide-react';
+import { useMutation } from '@apollo/client/react';
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { Send } from 'lucide-react';
+import { useState } from 'react';
 import { MESSAGES_QUERY } from './MessageThread';
 
 const SEND_MESSAGE = gql`
@@ -16,66 +16,66 @@ const SEND_MESSAGE = gql`
 `;
 
 export interface MessageComposerProps {
-  conversationId?: string;
-  viewerId?: string;
-  viewerName?: string;
+	conversationId?: string;
+	viewerId?: string;
+	viewerName?: string;
 }
 
 export function MessageComposer({
-  conversationId,
-  viewerId = 'local-user',
-  viewerName = 'You',
+	conversationId,
+	viewerId = 'local-user',
+	viewerName = 'You',
 }: MessageComposerProps) {
-  const { projectId } = useTemplateRuntime();
-  const [content, setContent] = useState('');
-  const [sendMessage, { loading }] = useMutation(SEND_MESSAGE);
+	const { projectId } = useTemplateRuntime();
+	const [content, setContent] = useState('');
+	const [sendMessage, { loading }] = useMutation(SEND_MESSAGE);
 
-  const handleSubmit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    if (!conversationId || !content.trim()) return;
-    await sendMessage({
-      variables: {
-        input: {
-          projectId,
-          conversationId,
-          senderId: viewerId,
-          senderName: viewerName,
-          content: content.trim(),
-        },
-      },
-      refetchQueries: [
-        {
-          query: MESSAGES_QUERY,
-          variables: { conversationId },
-        },
-      ],
-    });
-    setContent('');
-  };
+	const handleSubmit = async (event: React.FormEvent) => {
+		event.preventDefault();
+		if (!conversationId || !content.trim()) return;
+		await sendMessage({
+			variables: {
+				input: {
+					projectId,
+					conversationId,
+					senderId: viewerId,
+					senderName: viewerName,
+					content: content.trim(),
+				},
+			},
+			refetchQueries: [
+				{
+					query: MESSAGES_QUERY,
+					variables: { conversationId },
+				},
+			],
+		});
+		setContent('');
+	};
 
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3"
-    >
-      <input
-        type="text"
-        className="text-foreground flex-1 bg-transparent text-sm outline-none"
-        placeholder={
-          conversationId ? 'Type a message…' : 'Select a conversation to start'
-        }
-        disabled={!conversationId || loading}
-        value={content}
-        onChange={(event) => setContent(event.target.value)}
-      />
-      <button
-        type="submit"
-        className="btn-primary inline-flex items-center gap-1 text-sm"
-        disabled={!conversationId || loading || !content.trim()}
-      >
-        <Send className="h-4 w-4" />
-        Send
-      </button>
-    </form>
-  );
+	return (
+		<form
+			onSubmit={handleSubmit}
+			className="mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3"
+		>
+			<input
+				type="text"
+				className="flex-1 bg-transparent text-foreground text-sm outline-none"
+				placeholder={
+					conversationId ? 'Type a message…' : 'Select a conversation to start'
+				}
+				disabled={!conversationId || loading}
+				value={content}
+				onChange={(event) => setContent(event.target.value)}
+			/>
+			<button
+				type="submit"
+				className="btn-primary inline-flex items-center gap-1 text-sm"
+				disabled={!conversationId || loading || !content.trim()}
+			>
+				<Send className="h-4 w-4" />
+				Send
+			</button>
+		</form>
+	);
 }

package/src/components/templates/messaging/MessageThread.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { useMutation, useQuery } from '@apollo/client/react';
 import { gql } from '@apollo/client';
-import { useEffect, useRef } from 'react';
-
+import { useMutation, useQuery } from '@apollo/client/react';
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useEffect, useRef } from 'react';
 import { type Message } from './types';
 
 export const MESSAGES_QUERY = gql`
@@ -27,84 +26,84 @@ const SET_READ = gql`
 `;
 
 export interface MessageThreadProps {
-  conversationId?: string;
-  viewerId?: string;
+	conversationId?: string;
+	viewerId?: string;
 }
 
 export function MessageThread({
-  conversationId,
-  viewerId = 'local-user',
+	conversationId,
+	viewerId = 'local-user',
 }: MessageThreadProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const enabled = Boolean(conversationId);
-  const { data, loading } = useQuery<{ messages: Message[] }>(MESSAGES_QUERY, {
-    variables: { conversationId },
-    skip: !enabled,
-    fetchPolicy: 'cache-and-network',
-  });
-  const [setRead] = useMutation(SET_READ);
-  const { projectId } = useTemplateRuntime();
-  void projectId; // reserved for future perms
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const enabled = Boolean(conversationId);
+	const { data, loading } = useQuery<{ messages: Message[] }>(MESSAGES_QUERY, {
+		variables: { conversationId },
+		skip: !enabled,
+		fetchPolicy: 'cache-and-network',
+	});
+	const [setRead] = useMutation(SET_READ);
+	const { projectId } = useTemplateRuntime();
+	void projectId; // reserved for future perms
 
-  const messages: Message[] = data?.messages ?? [];
+	const messages: Message[] = data?.messages ?? [];
 
-  useEffect(() => {
-    if (!enabled || !conversationId) return;
-    setRead({ variables: { conversationId, userId: viewerId } }).catch(() => {
-      /* ignore */
-    });
-  }, [conversationId, enabled, setRead, viewerId]);
+	useEffect(() => {
+		if (!enabled || !conversationId) return;
+		setRead({ variables: { conversationId, userId: viewerId } }).catch(() => {
+			/* ignore */
+		});
+	}, [conversationId, enabled, setRead, viewerId]);
 
-  useEffect(() => {
-    const container = scrollRef.current;
-    if (!container) return;
-    container.scrollTop = container.scrollHeight;
-  }, [messages]);
+	useEffect(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		container.scrollTop = container.scrollHeight;
+	}, [messages]);
 
-  if (!conversationId) {
-    return (
-      <div className="border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed">
-        <p className="text-muted-foreground text-sm">Select a conversation</p>
-      </div>
-    );
-  }
+	if (!conversationId) {
+		return (
+			<div className="flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed">
+				<p className="text-muted-foreground text-sm">Select a conversation</p>
+			</div>
+		);
+	}
 
-  return (
-    <div className="border-border bg-card flex flex-1 flex-col rounded-2xl border">
-      <div ref={scrollRef} className="flex-1 space-y-3 overflow-y-auto p-4">
-        {loading ? (
-          <p className="text-muted-foreground text-center text-sm">Loading…</p>
-        ) : (
-          messages
-            .slice()
-            .reverse()
-            .map((message) => (
-              <div
-                key={message.id}
-                className={`flex flex-col ${
-                  message.senderId === viewerId ? 'items-end' : 'items-start'
-                }`}
-              >
-                <div
-                  className={`max-w-xs rounded-2xl px-3 py-2 text-sm ${
-                    message.senderId === viewerId
-                      ? 'bg-violet-500 text-white'
-                      : 'bg-muted text-foreground'
-                  }`}
-                >
-                  <p>{message.content}</p>
-                </div>
-                <span className="text-muted-foreground mt-1 text-xs">
-                  {message.senderName || message.senderId} ·{' '}
-                  {new Date(message.createdAt).toLocaleTimeString([], {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  })}
-                </span>
-              </div>
-            ))
-        )}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-1 flex-col rounded-2xl border border-border bg-card">
+			<div ref={scrollRef} className="flex-1 space-y-3 overflow-y-auto p-4">
+				{loading ? (
+					<p className="text-center text-muted-foreground text-sm">Loading…</p>
+				) : (
+					messages
+						.slice()
+						.reverse()
+						.map((message) => (
+							<div
+								key={message.id}
+								className={`flex flex-col ${
+									message.senderId === viewerId ? 'items-end' : 'items-start'
+								}`}
+							>
+								<div
+									className={`max-w-xs rounded-2xl px-3 py-2 text-sm ${
+										message.senderId === viewerId
+											? 'bg-violet-500 text-white'
+											: 'bg-muted text-foreground'
+									}`}
+								>
+									<p>{message.content}</p>
+								</div>
+								<span className="mt-1 text-muted-foreground text-xs">
+									{message.senderName || message.senderId} ·{' '}
+									{new Date(message.createdAt).toLocaleTimeString([], {
+										hour: '2-digit',
+										minute: '2-digit',
+									})}
+								</span>
+							</div>
+						))
+				)}
+			</div>
+		</div>
+	);
 }

package/src/components/templates/messaging/MessagingWorkspace.tsx

@@ -1,31 +1,30 @@
 'use client';
 
-import { useState } from 'react';
-
 import { registerTemplateComponents } from '@contractspec/lib.example-shared-ui';
+import { useState } from 'react';
 import { ConversationList } from './ConversationList';
-import { MessageThread } from './MessageThread';
 import { MessageComposer } from './MessageComposer';
+import { MessageThread } from './MessageThread';
 
 export function MessagingWorkspace() {
-  const [conversationId, setConversationId] = useState<string | undefined>();
+	const [conversationId, setConversationId] = useState<string | undefined>();
 
-  return (
-    <div className="grid gap-4 md:grid-cols-[280px,1fr]">
-      <ConversationList
-        selectedId={conversationId}
-        onSelect={setConversationId}
-      />
-      <div className="flex flex-col gap-3">
-        <MessageThread conversationId={conversationId} />
-        <MessageComposer conversationId={conversationId} />
-      </div>
-    </div>
-  );
+	return (
+		<div className="grid gap-4 md:grid-cols-[280px,1fr]">
+			<ConversationList
+				selectedId={conversationId}
+				onSelect={setConversationId}
+			/>
+			<div className="flex flex-col gap-3">
+				<MessageThread conversationId={conversationId} />
+				<MessageComposer conversationId={conversationId} />
+			</div>
+		</div>
+	);
 }
 
 registerTemplateComponents('messaging-app', {
-  list: MessagingWorkspace,
-  detail: MessageThread,
-  form: MessageComposer,
+	list: MessagingWorkspace,
+	detail: MessageThread,
+	form: MessageComposer,
 });

package/src/components/templates/messaging/index.ts

@@ -1,4 +1,4 @@
 export * from './ConversationList';
-export * from './MessageThread';
 export * from './MessageComposer';
+export * from './MessageThread';
 export * from './MessagingWorkspace';