@contractspec/example.lifecycle-dashboard 0.0.0-canary-20260113162409

package/src/docs/lifecycle-dashboard.docblock.ts

@@ -0,0 +1,18 @@
+import type { DocBlock } from '@contractspec/lib.contracts/docs';
+import { registerDocBlocks } from '@contractspec/lib.contracts/docs';
+
+const blocks: DocBlock[] = [
+  {
+    id: 'docs.examples.lifecycle-dashboard',
+    title: 'Lifecycle Dashboard (example snippet)',
+    summary:
+      'Minimal dashboard page pattern that calls lifecycle-managed API routes and renders a status card.',
+    kind: 'reference',
+    visibility: 'public',
+    route: '/docs/examples/lifecycle-dashboard',
+    tags: ['lifecycle', 'dashboard', 'example'],
+    body: `## What this example shows\n- A simple client-driven fetch to \`POST /api/lifecycle/assessments\`.\n- A card-shaped UI pattern for stage + confidence + recommendations.\n\n## Notes\n- Keep your app design-system-first (no raw HTML in application code).\n- Add explicit loading/error/empty states with accessible messaging.\n- Implement API routes in your app as thin adapters over lifecycle-managed services.`,
+  },
+];
+
+registerDocBlocks(blocks);

package/src/example.ts

@@ -0,0 +1,31 @@
+import { defineExample } from '@contractspec/lib.contracts';
+
+const example = defineExample({
+  meta: {
+    key: 'lifecycle-dashboard',
+    version: '1.0.0',
+    title: 'Lifecycle Dashboard (snippet)',
+    description:
+      'A minimal dashboard page pattern: call lifecycle-managed endpoints and render a mobile-friendly status card.',
+    kind: 'blueprint',
+    visibility: 'public',
+    stability: 'experimental',
+    owners: ['@platform.core'],
+    tags: ['lifecycle', 'dashboard', 'nextjs', 'snippet'],
+  },
+  docs: {
+    rootDocId: 'docs.examples.lifecycle-dashboard',
+  },
+  entrypoints: {
+    packageName: '@contractspec/example.lifecycle-dashboard',
+    docs: './docs',
+  },
+  surfaces: {
+    templates: true,
+    sandbox: { enabled: true, modes: ['markdown', 'specs'] },
+    studio: { enabled: true, installable: true },
+    mcp: { enabled: true },
+  },
+});
+
+export default example;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as example } from './example';
+export * from './snippets/page';
+import './docs';

package/src/snippets/page.ts

@@ -0,0 +1,58 @@
+/**
+ * Deterministic snippet for a Next.js App Router page.
+ *
+ * We keep this as a string so `packages/examples/*` stays design-system-first and
+ * avoids raw HTML in runnable application code.
+ */
+export const lifecycleDashboardNextPageSnippet = `'use client';
+
+import { useEffect, useState } from 'react';
+
+type StageCard = {
+  stage: number;
+  name: string;
+  confidence: number;
+  recommendation?: {
+    actions: { id: string; title: string; description: string }[];
+  };
+  libraries?: { id: string; description: string }[];
+};
+
+export default function LifecycleDashboardPage() {
+  const [card, setCard] = useState<StageCard | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    void runAssessment();
+  }, []);
+
+  async function runAssessment() {
+    try {
+      setLoading(true);
+      setError(undefined);
+      const response = await fetch('/api/lifecycle/assessments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tenantId: 'demo' }),
+      });
+      if (!response.ok) throw new Error('Failed assessment');
+      const data = await response.json();
+      setCard({
+        stage: data.assessment.stage,
+        name: data.assessment.stageName ?? \`Stage \${data.assessment.stage}\`,
+        confidence: data.assessment.confidence,
+        recommendation: data.recommendation,
+        libraries: data.libraries,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Render using your app's design system components in real code.
+  return null;
+}
+`;

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@contractspec/tool.typescript/react-library.json",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  }
+}
+
+