@contractspec/bundle.library 0.0.0-canary-20260206014742

package/src/components/shared/FeatureGateNotice.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Lock } from 'lucide-react';
+
+export interface FeatureGateNoticeProps {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function FeatureGateNotice({
+  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>
+  );
+}

package/src/components/shared/index.ts

@@ -0,0 +1 @@
+export * from './FeatureGateNotice';

package/src/components/shell/WorkspaceHeader.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@contractspec/lib.ui-kit-web/ui/select';
+
+export interface ShellSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface ShellSelect {
+  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;
+}
+
+export function WorkspaceHeader({
+  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>
+  );
+}
+
+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>
+  );
+}

package/src/components/shell/WorkspaceProjectShellLayout.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import {
+  SidebarProvider,
+  SidebarInset,
+} from '@contractspec/lib.ui-kit-web/ui/sidebar';
+import {
+  WorkspaceHeader,
+  type WorkspaceHeaderProps,
+  type ShellSelect,
+  type ShellSelectOption,
+} from './WorkspaceHeader';
+import {
+  WorkspaceSidebar,
+  type WorkspaceSidebarProps,
+  type ShellModuleItem,
+} from './WorkspaceSidebar';
+
+export type { ShellSelect, ShellSelectOption, ShellModuleItem };
+
+export interface WorkspaceProjectShellLayoutProps
+  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,
+}: 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>
+  );
+}

package/src/components/shell/WorkspaceSidebar.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Settings } from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from '@contractspec/lib.ui-kit-web/ui/sidebar';
+
+export interface ShellModuleItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+}
+
+export interface WorkspaceSidebarProps {
+  modules: ShellModuleItem[];
+  activeModuleId: string;
+  onModuleChange: (moduleId: string) => void;
+  sidebarFooter?: React.ReactNode;
+}
+
+export function WorkspaceSidebar({
+  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>
+  );
+}

package/src/components/shell/index.ts

@@ -0,0 +1,3 @@
+export * from './WorkspaceHeader';
+export * from './WorkspaceSidebar';
+export * from './WorkspaceProjectShellLayout';

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

@@ -0,0 +1,80 @@
+/**
+ * Template TransformEngine Setup
+ *
+ * Creates and configures a TransformEngine for rendering template presentations
+ * to multiple targets (React, Markdown, JSON).
+ *
+ * Note: This file provides engine creation functions.
+ * The actual presentation definitions are in example packages.
+ * Import presentations dynamically or use the main templates/engine.ts
+ * which handles the build order correctly.
+ */
+import {
+  createDefaultTransformEngine,
+  type PresentationSpec,
+  registerBasicValidation,
+  registerDefaultReactRenderer,
+  TransformEngine,
+} from '@contractspec/lib.contracts';
+
+/**
+ * Create a configured TransformEngine for template rendering
+ */
+export function createTemplateTransformEngine(): TransformEngine {
+  const engine = createDefaultTransformEngine();
+
+  // Add React renderer that returns serializable descriptors
+  registerDefaultReactRenderer(engine);
+
+  // Add basic validation for description, etc.
+  registerBasicValidation(engine);
+
+  return engine;
+}
+
+/**
+ * Find a presentation by name and version from a list
+ */
+export function findPresentation(
+  presentations: PresentationSpec[],
+  name: string,
+  version: number
+): PresentationSpec | undefined {
+  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
+): PresentationSpec[] {
+  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'
+): boolean {
+  return presentation.targets.includes(target);
+}
+
+// Export singleton engine instance
+let engineInstance: TransformEngine | null = null;
+
+export function getTemplateEngine(): TransformEngine {
+  if (!engineInstance) {
+    engineInstance = createTemplateTransformEngine();
+  }
+  return engineInstance;
+}
+
+export function resetTemplateEngine(): void {
+  engineInstance = null;
+}

package/src/components/templates/index.ts

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

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

@@ -0,0 +1,98 @@
+import { useQuery } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+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!) {
+    conversations(projectId: $projectId) {
+      id
+      name
+      isGroup
+      updatedAt
+      participants {
+        id
+        userId
+        displayName
+      }
+    }
+  }
+`;
+
+export interface ConversationListProps {
+  selectedId?: string;
+  onSelect?: (conversationId: string) => void;
+}
+
+export function ConversationList({
+  selectedId,
+  onSelect,
+}: ConversationListProps) {
+  const { projectId } = useTemplateRuntime();
+  const { data, loading } = useQuery<{ conversations: Conversation[] }>(
+    CONVERSATIONS_QUERY,
+    {
+      variables: { projectId },
+      fetchPolicy: 'cache-and-network',
+    }
+  );
+
+  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>
+  );
+}

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

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+import { Send } from 'lucide-react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { MESSAGES_QUERY } from './MessageThread';
+
+const SEND_MESSAGE = gql`
+  mutation SendMessage($input: SendMessageInput!) {
+    sendMessage(input: $input) {
+      id
+    }
+  }
+`;
+
+export interface MessageComposerProps {
+  conversationId?: string;
+  viewerId?: string;
+  viewerName?: string;
+}
+
+export function MessageComposer({
+  conversationId,
+  viewerId = 'local-user',
+  viewerName = 'You',
+}: MessageComposerProps) {
+  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('');
+  };
+
+  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>
+  );
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { useMutation, useQuery } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+import { useEffect, useRef } from 'react';
+
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { type Message } from './types';
+
+export const MESSAGES_QUERY = gql`
+  query Messages($conversationId: ID!) {
+    messages(conversationId: $conversationId, limit: 50) {
+      id
+      content
+      senderId
+      senderName
+      createdAt
+      status
+    }
+  }
+`;
+
+const SET_READ = gql`
+  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {
+    setMessagesRead(conversationId: $conversationId, userId: $userId)
+  }
+`;
+
+export interface MessageThreadProps {
+  conversationId?: string;
+  viewerId?: string;
+}
+
+export function MessageThread({
+  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 messages: Message[] = data?.messages ?? [];
+
+  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]);
+
+  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>
+    );
+  }
+
+  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>
+  );
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { useState } from 'react';
+
+import { registerTemplateComponents } from '@contractspec/lib.example-shared-ui';
+import { ConversationList } from './ConversationList';
+import { MessageThread } from './MessageThread';
+import { MessageComposer } from './MessageComposer';
+
+export function MessagingWorkspace() {
+  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>
+  );
+}
+
+registerTemplateComponents('messaging-app', {
+  list: MessagingWorkspace,
+  detail: MessageThread,
+  form: MessageComposer,
+});

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

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