@contractspec/bundle.library 0.0.0-canary-20260206014742

package/src/components/templates/todos/TaskList.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+
+import {
+  registerTemplateComponents,
+  useTemplateRuntime,
+} from '@contractspec/lib.example-shared-ui';
+import { FilterBar, type FilterState } from './FilterBar';
+import { TaskForm } from './TaskForm';
+import { TaskItem } from './TaskItem';
+import { type Task, type TaskCategory } from './types';
+
+const TASKS_QUERY = gql`
+  query Tasks($projectId: ID!) {
+    taskCategories(projectId: $projectId) {
+      id
+      name
+      color
+    }
+    tasks(projectId: $projectId) {
+      id
+      title
+      description
+      completed
+      priority
+      dueDate
+      tags
+      category {
+        id
+        name
+        color
+      }
+    }
+  }
+`;
+
+const TOGGLE_TASK = gql`
+  mutation ToggleTask($id: ID!, $completed: Boolean!) {
+    toggleTask(id: $id, completed: $completed) {
+      id
+      completed
+    }
+  }
+`;
+
+const DELETE_TASK = gql`
+  mutation DeleteTask($id: ID!) {
+    deleteTask(id: $id)
+  }
+`;
+
+export function TaskList() {
+  const { projectId } = useTemplateRuntime();
+  const [filters, setFilters] = useState<FilterState>({
+    status: 'all',
+    priority: 'all',
+    categoryId: 'all',
+    search: '',
+  });
+  const { data, loading } = useQuery<{
+    tasks: Task[];
+    taskCategories: TaskCategory[];
+  }>(TASKS_QUERY, {
+    variables: { projectId },
+    fetchPolicy: 'cache-and-network',
+  });
+  const [toggleTask] = useMutation(TOGGLE_TASK);
+  const [deleteTask] = useMutation(DELETE_TASK);
+
+  const categories: TaskCategory[] = data?.taskCategories ?? [];
+  const tasks: Task[] = data?.tasks ?? [];
+
+  const filtered = useMemo(() => {
+    return tasks.filter((task) => {
+      if (filters.status === 'active' && task.completed) return false;
+      if (filters.status === 'completed' && !task.completed) return false;
+      if (filters.priority !== 'all' && task.priority !== filters.priority)
+        return false;
+      if (
+        filters.categoryId !== 'all' &&
+        task.category?.id !== filters.categoryId
+      )
+        return false;
+      if (
+        filters.search &&
+        !task.title.toLowerCase().includes(filters.search.toLowerCase())
+      )
+        return false;
+      return true;
+    });
+  }, [tasks, filters]);
+
+  const handleToggle = async (task: Task) => {
+    await toggleTask({
+      variables: { id: task.id, completed: !task.completed },
+      optimisticResponse: {
+        toggleTask: {
+          __typename: 'Task',
+          id: task.id,
+          completed: !task.completed,
+        },
+      },
+      update(cache) {
+        cache.modify({
+          fields: {
+            tasks(existing = []) {
+              return existing.map(
+                (ref: { __ref?: string; completed?: boolean }) =>
+                  ref.__ref?.endsWith(task.id)
+                    ? { ...ref, completed: !task.completed }
+                    : ref
+              );
+            },
+          },
+        });
+      },
+    });
+  };
+
+  const handleDelete = async (task: Task) => {
+    await deleteTask({
+      variables: { id: task.id },
+      refetchQueries: [{ query: TASKS_QUERY, variables: { projectId } }],
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <FilterBar
+        value={filters}
+        onChange={setFilters}
+        categories={categories}
+      />
+      <TaskForm categories={categories} />
+
+      {loading ? (
+        <p className="text-muted-foreground text-sm">Loading tasks…</p>
+      ) : filtered.length ? (
+        <div className="space-y-3">
+          {filtered.map((task) => (
+            <TaskItem
+              key={task.id}
+              task={task}
+              onToggle={handleToggle}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="border-border rounded-2xl border border-dashed p-8 text-center">
+          <p className="text-muted-foreground">
+            No tasks match your filters. Create one above.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+registerTemplateComponents('todos-app', {
+  list: TaskList,
+  detail: TaskList,
+  form: TaskForm,
+});

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

@@ -0,0 +1,4 @@
+export * from './TaskList';
+export * from './TaskForm';
+export * from './TaskItem';
+export * from './FilterBar';

package/src/components/templates/todos/types.ts

@@ -0,0 +1,18 @@
+export type TaskPriority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+
+export interface TaskCategory {
+  id: string;
+  name: string;
+  color?: string | null;
+}
+
+export interface Task {
+  id: string;
+  title: string;
+  description?: string | null;
+  completed: boolean;
+  priority: TaskPriority;
+  dueDate?: string | null;
+  tags: string[];
+  category?: TaskCategory | null;
+}

package/src/config/contractspec-blueprint.ts

@@ -0,0 +1,71 @@
+import type {
+  AppBlueprintSpec,
+  FeatureFlagState,
+} from '@contractspec/lib.contracts/app-config';
+import type { CapabilityRef } from '@contractspec/lib.contracts/capabilities';
+import type { FeatureRef } from '@contractspec/lib.contracts/features';
+import { contractspecBrandingDefaults } from './contractspec-branding';
+import { contractspecRoutes } from './contractspec-routes';
+
+const cap = (key: string, version: string): CapabilityRef => ({ key, version });
+const feat = (key: string): FeatureRef => ({ key });
+
+/**
+ * ContractSpec application blueprint.
+ * Defines the canonical spec for the ContractSpec platform itself.
+ */
+export const contractspecBlueprint: AppBlueprintSpec = {
+  meta: {
+    key: 'contractspec.app',
+    version: '1.0.0',
+    appId: 'contractspec',
+    title: 'ContractSpec',
+    description: 'The deterministic, spec-first compiler for AI-coded systems',
+    domain: 'platform',
+    owners: ['@platform.core'],
+    tags: ['contracts', 'specs', 'ai-safety', 'code-generation'],
+    stability: 'beta',
+  },
+  capabilities: {
+    enabled: [
+      cap('contracts.operations', '1.0.0'),
+      cap('contracts.presentations', '1.0.0'),
+      cap('contracts.mcp', '1.0.0'),
+      cap('contracts.docs', '1.0.0'),
+    ],
+  },
+  features: {
+    include: [
+      feat('contractspec.docs'),
+      feat('contractspec.mcp'),
+      feat('contractspec.presentations'),
+      feat('app-config'),
+    ],
+  },
+  branding: contractspecBrandingDefaults,
+  featureFlags: [
+    {
+      key: 'feature-discovery-ui',
+      enabled: true,
+      description: 'Show feature discovery UI',
+    },
+    {
+      key: 'dark-mode',
+      enabled: true,
+      description: 'Enable dark mode theming',
+    },
+    {
+      key: 'ai-assistant',
+      enabled: false,
+      description: 'AI-powered assistant integration',
+    },
+    {
+      key: 'sandbox-enabled',
+      enabled: true,
+      description: 'Enable sandbox playground',
+    },
+  ] satisfies FeatureFlagState[],
+  routes: contractspecRoutes,
+  notes:
+    "ContractSpec platform blueprint - defines the app's capabilities, features, and configuration.",
+};

package/src/config/contractspec-branding.ts

@@ -0,0 +1,53 @@
+import type {
+  BrandingDefaults,
+  ResolvedBranding,
+} from '@contractspec/lib.contracts/app-config';
+
+/**
+ * Default branding configuration for ContractSpec.
+ * Used as blueprint defaults before tenant overrides.
+ */
+export const contractspecBrandingDefaults: BrandingDefaults = {
+  appNameKey: 'ContractSpec',
+  assets: [
+    { type: 'logo', url: '/logo.svg', dimensions: { width: 180, height: 40 } },
+    {
+      type: 'logo-dark',
+      url: '/logo-dark.svg',
+      dimensions: { width: 180, height: 40 },
+    },
+    {
+      type: 'favicon',
+      url: '/favicon.ico',
+      dimensions: { width: 32, height: 32 },
+    },
+    {
+      type: 'og-image',
+      url: '/og-image.png',
+      dimensions: { width: 1200, height: 630 },
+    },
+  ],
+  colorTokens: {
+    primary: '#0ea5e9',
+    secondary: '#6366f1',
+  },
+};
+
+/**
+ * Pre-resolved branding for ContractSpec.
+ * Ready-to-use branding values with all defaults applied.
+ */
+export const contractspecResolvedBranding: ResolvedBranding = {
+  appName: 'ContractSpec',
+  assets: {
+    logo: '/logo.svg',
+    logoDark: '/logo-dark.svg',
+    favicon: '/favicon.ico',
+    ogImage: '/og-image.png',
+  },
+  colors: {
+    primary: '#0ea5e9',
+    secondary: '#6366f1',
+  },
+  domain: 'contractspec.io',
+};

package/src/config/contractspec-routes.ts

@@ -0,0 +1,33 @@
+import type { AppRouteConfig } from '@contractspec/lib.contracts/app-config';
+
+/**
+ * Route configuration for the ContractSpec application.
+ * Defines all navigable routes with optional feature flags and guards.
+ */
+export const contractspecRoutes: AppRouteConfig[] = [
+  // Landing/Marketing
+  { path: '/', label: 'Home' },
+  { path: '/product', label: 'Product' },
+  { path: '/pricing', label: 'Pricing' },
+  { path: '/changelog', label: 'Changelog' },
+  { path: '/contact', label: 'Contact' },
+
+  // Documentation
+  { path: '/docs', label: 'Documentation' },
+  { path: '/docs/getting-started', label: 'Getting Started' },
+  { path: '/docs/architecture', label: 'Architecture' },
+  { path: '/docs/specs', label: 'Specs' },
+  { path: '/docs/integrations', label: 'Integrations' },
+  { path: '/docs/libraries', label: 'Libraries' },
+  { path: '/docs/advanced', label: 'Advanced' },
+
+  // Features
+  {
+    path: '/features',
+    label: 'Feature Discovery',
+    featureFlag: 'feature-discovery-ui',
+  },
+
+  // Sandbox
+  { path: '/sandbox', label: 'Sandbox', featureFlag: 'sandbox-enabled' },
+];

package/src/config/index.ts

@@ -0,0 +1,21 @@
+// Blueprint
+export { contractspecBlueprint } from './contractspec-blueprint';
+
+// Routes
+export { contractspecRoutes } from './contractspec-routes';
+
+// Branding
+export {
+  contractspecBrandingDefaults,
+  contractspecResolvedBranding,
+} from './contractspec-branding';
+
+// Re-export types for convenience
+export type {
+  AppBlueprintSpec,
+  TenantAppConfig,
+  ResolvedBranding,
+  AppRouteConfig,
+  BrandingDefaults,
+  FeatureFlagState,
+} from '@contractspec/lib.contracts/app-config';

package/src/features/contracts-registry.ts

@@ -0,0 +1,272 @@
+/**
+ * Central contracts registry for ContractSpec.
+ *
+ * This registry holds all operation, event, presentation, data view, and form specs
+ * so they can be resolved by key for the feature discovery system.
+ * Unlike the MCP's OperationSpecRegistry (which also binds handlers),
+ * this is a spec-only registry for documentation and discovery purposes.
+ */
+
+import {
+  OperationSpecRegistry,
+  type AnyOperationSpec,
+  EventRegistry,
+  type AnyEventSpec,
+  type PresentationSpec,
+  type DataViewSpec,
+  type FormSpec,
+} from '@contractspec/lib.contracts';
+import { PresentationRegistry } from '@contractspec/lib.contracts/presentations';
+import { DataViewRegistry } from '@contractspec/lib.contracts/data-views';
+import { FormRegistry } from '@contractspec/lib.contracts/forms';
+import {
+  serializeOperationSpec,
+  serializeEventSpec,
+  serializePresentationSpec,
+  serializeDataViewSpec,
+  serializeFormSpec,
+} from '@contractspec/lib.contracts/serialization';
+import {
+  ContractReferenceDataView,
+  ContractReferenceQuery,
+  DocsGeneratedEvent,
+  DocsGenerateCommand,
+  DocsIndexDataView,
+  DocsIndexQuery,
+  DocsLayoutPresentation,
+  DocsPublishedEvent,
+  DocsPublishCommand,
+  DocsReferencePagePresentation,
+  DocsSearchForm,
+  ExampleCatalogDataView,
+} from '@contractspec/lib.contracts/docs';
+
+// Re-export serialization types from lib.contracts for convenience
+export type {
+  SerializedSchemaModel,
+  SerializedFieldConfig,
+  SerializedOperationSpec,
+  SerializedEventSpec,
+  SerializedPresentationSpec,
+  SerializedDataViewSpec,
+  SerializedFormSpec,
+} from '@contractspec/lib.contracts/serialization';
+
+// ============================================================================
+// Operation Registry
+// ============================================================================
+
+let operationRegistry: OperationSpecRegistry | null = null;
+
+export function createContractSpecOperationRegistry(): OperationSpecRegistry {
+  const registry = new OperationSpecRegistry();
+  registry
+    .register(DocsIndexQuery)
+    .register(ContractReferenceQuery)
+    .register(DocsGenerateCommand)
+    .register(DocsPublishCommand);
+  return registry;
+}
+
+export function getContractSpecOperationRegistry(): OperationSpecRegistry {
+  if (!operationRegistry) {
+    operationRegistry = createContractSpecOperationRegistry();
+  }
+  return operationRegistry;
+}
+
+export function resolveOperationSpec(
+  key: string,
+  version?: string
+): AnyOperationSpec | undefined {
+  return getContractSpecOperationRegistry().get(key, version);
+}
+
+// ============================================================================
+// Event Registry
+// ============================================================================
+
+let eventRegistry: EventRegistry | null = null;
+
+export function createContractSpecEventRegistry(): EventRegistry {
+  const registry = new EventRegistry();
+  registry.register(DocsGeneratedEvent).register(DocsPublishedEvent);
+  return registry;
+}
+
+export function getContractSpecEventRegistry(): EventRegistry {
+  if (!eventRegistry) {
+    eventRegistry = createContractSpecEventRegistry();
+  }
+  return eventRegistry;
+}
+
+export function resolveEventSpec(
+  key: string,
+  version?: string
+): AnyEventSpec | undefined {
+  return getContractSpecEventRegistry().get(key, version);
+}
+
+// ============================================================================
+// Presentation Registry
+// ============================================================================
+
+let presentationRegistry: PresentationRegistry | null = null;
+
+export function createContractSpecPresentationRegistry(): PresentationRegistry {
+  const registry = new PresentationRegistry();
+  registry
+    .register(DocsLayoutPresentation)
+    .register(DocsReferencePagePresentation);
+  return registry;
+}
+
+export function getContractSpecPresentationRegistry(): PresentationRegistry {
+  if (!presentationRegistry) {
+    presentationRegistry = createContractSpecPresentationRegistry();
+  }
+  return presentationRegistry;
+}
+
+export function resolvePresentationSpec(
+  key: string,
+  version?: string
+): PresentationSpec | undefined {
+  return getContractSpecPresentationRegistry().get(key, version);
+}
+
+// ============================================================================
+// DataView Registry
+// ============================================================================
+
+let dataViewRegistry: DataViewRegistry | null = null;
+
+export function createContractSpecDataViewRegistry(): DataViewRegistry {
+  const registry = new DataViewRegistry();
+  registry
+    .register(DocsIndexDataView)
+    .register(ContractReferenceDataView)
+    .register(ExampleCatalogDataView);
+  return registry;
+}
+
+export function getContractSpecDataViewRegistry(): DataViewRegistry {
+  if (!dataViewRegistry) {
+    dataViewRegistry = createContractSpecDataViewRegistry();
+  }
+  return dataViewRegistry;
+}
+
+export function resolveDataViewSpec(
+  key: string,
+  version?: string
+): DataViewSpec | undefined {
+  return getContractSpecDataViewRegistry().get(key, version);
+}
+
+// ============================================================================
+// Form Registry
+// ============================================================================
+
+let formRegistry: FormRegistry | null = null;
+
+export function createContractSpecFormRegistry(): FormRegistry {
+  const registry = new FormRegistry();
+  registry.register(DocsSearchForm);
+  return registry;
+}
+
+export function getContractSpecFormRegistry(): FormRegistry {
+  if (!formRegistry) {
+    formRegistry = createContractSpecFormRegistry();
+  }
+  return formRegistry;
+}
+
+export function resolveFormSpec(
+  key: string,
+  _version?: string
+): FormSpec | undefined {
+  return getContractSpecFormRegistry().get(key);
+}
+
+// ============================================================================
+// Serialized Spec Resolution (for Server -> Client Component transfer)
+// ============================================================================
+
+/**
+ * Resolve and serialize an operation spec for passing to client components.
+ * Returns a plain JSON-serializable object.
+ */
+export function resolveSerializedOperationSpec(key: string, version?: string) {
+  const spec = resolveOperationSpec(key, version);
+  return serializeOperationSpec(spec) ?? undefined;
+}
+
+/**
+ * Resolve and serialize an event spec for passing to client components.
+ */
+export function resolveSerializedEventSpec(key: string, version?: string) {
+  const spec = resolveEventSpec(key, version);
+  return serializeEventSpec(spec) ?? undefined;
+}
+
+/**
+ * Resolve and serialize a presentation spec for passing to client components.
+ */
+export function resolveSerializedPresentationSpec(
+  key: string,
+  version?: string
+) {
+  const spec = resolvePresentationSpec(key, version);
+  return serializePresentationSpec(spec) ?? undefined;
+}
+
+/**
+ * Resolve and serialize a data view spec for passing to client components.
+ */
+export function resolveSerializedDataViewSpec(key: string, version?: string) {
+  const spec = resolveDataViewSpec(key, version);
+  return serializeDataViewSpec(spec) ?? undefined;
+}
+
+/**
+ * Resolve and serialize a form spec for passing to client components.
+ */
+export function resolveSerializedFormSpec(key: string, version?: string) {
+  const spec = resolveFormSpec(key, version);
+  return serializeFormSpec(spec) ?? undefined;
+}
+
+// ============================================================================
+// Reset all registries (for testing)
+// ============================================================================
+
+export function resetContractSpecOperationRegistry(): void {
+  operationRegistry = null;
+}
+
+export function resetContractSpecEventRegistry(): void {
+  eventRegistry = null;
+}
+
+export function resetContractSpecPresentationRegistry(): void {
+  presentationRegistry = null;
+}
+
+export function resetContractSpecDataViewRegistry(): void {
+  dataViewRegistry = null;
+}
+
+export function resetContractSpecFormRegistry(): void {
+  formRegistry = null;
+}
+
+export function resetAllContractSpecRegistries(): void {
+  resetContractSpecOperationRegistry();
+  resetContractSpecEventRegistry();
+  resetContractSpecPresentationRegistry();
+  resetContractSpecDataViewRegistry();
+  resetContractSpecFormRegistry();
+}

package/src/features/docs/docs.contracts.ts

@@ -0,0 +1,8 @@
+export {
+  DocSummaryModel,
+  DocsIndexInput as DocSearchInput,
+  DocsIndexOutput as DocSearchOutput,
+  DocsIndexQuery as docsSearchSpec,
+  DocsIndexQuery,
+  ContractReferenceQuery,
+} from '@contractspec/lib.contracts/docs';

package/src/features/docs/index.ts

@@ -0,0 +1,8 @@
+export {
+  DocSummaryModel,
+  DocSearchInput,
+  DocSearchOutput,
+  docsSearchSpec,
+  DocsIndexQuery,
+  ContractReferenceQuery,
+} from './docs.contracts';

package/src/features/docs.feature.ts

@@ -0,0 +1,35 @@
+import type { FeatureModuleSpec } from '@contractspec/lib.contracts/features';
+
+/**
+ * Documentation feature for ContractSpec.
+ * Provides comprehensive documentation system including search and navigation.
+ */
+export const DocsFeature: FeatureModuleSpec = {
+  meta: {
+    key: 'contractspec.docs',
+    version: '1.0.0',
+    title: 'Documentation',
+    description: 'Comprehensive documentation system for ContractSpec',
+    domain: 'platform',
+    owners: ['@platform.docs'],
+    tags: ['documentation', 'guides', 'api-reference'],
+    stability: 'stable',
+  },
+  operations: [
+    { key: 'docs.search', version: '1.0.0' },
+    { key: 'docs.navigate', version: '1.0.0' },
+  ],
+  events: [
+    { key: 'docs.page_viewed', version: '1.0.0' },
+    { key: 'docs.search_performed', version: '1.0.0' },
+  ],
+  presentations: [
+    { key: 'docs.landing', version: '1.0.0' },
+    { key: 'docs.getting-started', version: '1.0.0' },
+    { key: 'docs.architecture', version: '1.0.0' },
+  ],
+  capabilities: {
+    provides: [{ key: 'contracts.docs', version: '1.0.0' }],
+    requires: [],
+  },
+};