@contractspec/bundle.library 0.0.0-canary-20260206014742

package/src/presentation/features/templates/FeatureFormDetailTemplate/FeatureFormDetailTemplate.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import {
+  Breadcrumbs,
+  CodeBlock,
+  EmptyState,
+  PageHeaderResponsive,
+  StatusChip,
+} from '@contractspec/lib.design-system';
+import { Card } from '@contractspec/lib.ui-kit-web/ui/card';
+import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { FeatureFormDetailTemplateProps } from './types';
+import { BookOpen, Code, Database, PenTool } from 'lucide-react';
+import { useRelatedDocs } from '../../hooks/useRelatedDocs';
+import Link from 'next/link';
+
+export function FeatureFormDetailTemplate({
+  feature,
+  formKey,
+  form,
+  spec,
+  className,
+}: FeatureFormDetailTemplateProps) {
+  const formRef = form ?? feature.forms?.find((f) => f.key === formKey);
+
+  const relatedDocs = useRelatedDocs(formRef?.key || '', spec?.meta?.tags);
+
+  if (!formRef) {
+    return (
+      <VStack
+        gap="lg"
+        className={cn('mx-auto w-full max-w-5xl p-6', className)}
+      >
+        <PageHeaderResponsive
+          title="Form Not Found"
+          subtitle={`Form ${formKey} not found in feature ${feature.meta.key}`}
+          breadcrumb={
+            <Breadcrumbs
+              items={[
+                { label: 'Features', href: '/features' },
+                {
+                  label: feature.meta.title || feature.meta.key,
+                  href: `/features/${feature.meta.key}`,
+                },
+                { label: 'Forms' },
+              ]}
+            />
+          }
+        />
+        <EmptyState
+          title="Form not found"
+          description={`The form '${formKey}' could not be found in this feature.`}
+          icon={<PenTool className="text-muted-foreground h-12 w-12" />}
+        />
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack gap="lg" className={cn('mx-auto w-full max-w-5xl p-6', className)}>
+      <PageHeaderResponsive
+        title={formRef.key}
+        subtitle={`Form defined in ${feature.meta.title ?? feature.meta.key}`}
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: 'Features', href: '/features' },
+              {
+                label: feature.meta.title || feature.meta.key,
+                href: `/features/${feature.meta.key}`,
+              },
+              { label: 'Forms', href: `/features/${feature.meta.key}#forms` },
+              { label: formRef.key },
+            ]}
+          />
+        }
+      />
+
+      <HStack gap="sm">
+        <StatusChip
+          tone="neutral"
+          label={formRef.key}
+          size="sm"
+          icon={<PenTool className="h-3 w-3" />}
+        />
+        <StatusChip tone="neutral" label={`v${formRef.version}`} size="sm" />
+        {spec?.meta?.stability ? (
+          <StatusChip
+            tone={spec.meta.stability === 'stable' ? 'success' : 'warning'}
+            label={spec.meta.stability}
+            size="sm"
+          />
+        ) : null}
+      </HStack>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-2">
+          <Card className="p-6">
+            <VStack gap="md">
+              <HStack className="items-center gap-2 border-b pb-2">
+                <Code className="text-muted-foreground h-5 w-5" />
+                <h3 className="text-lg font-semibold">Form Definition</h3>
+              </HStack>
+
+              {spec ? (
+                <VStack gap="lg">
+                  {spec.meta.description && (
+                    <p className="text-muted-foreground">
+                      {spec.meta.description}
+                    </p>
+                  )}
+
+                  <Box className="flex-col gap-2">
+                    <span className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
+                      Fields
+                    </span>
+                    <CodeBlock
+                      code={JSON.stringify(spec.fields, null, 2)}
+                      language="json"
+                    />
+                  </Box>
+
+                  <Box className="flex-col gap-2">
+                    <span className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
+                      Actions
+                    </span>
+                    <CodeBlock
+                      code={JSON.stringify(spec.actions, null, 2)}
+                      language="json"
+                    />
+                  </Box>
+                </VStack>
+              ) : (
+                <VStack gap="md">
+                  <p className="text-muted-foreground">
+                    Full form definition details are not available for this form
+                    reference.
+                  </p>
+                  <CodeBlock
+                    code={JSON.stringify(formRef, null, 2)}
+                    language="json"
+                  />
+                </VStack>
+              )}
+            </VStack>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="p-6">
+            <VStack gap="md">
+              <HStack className="items-center gap-2 border-b pb-2">
+                <Database className="text-muted-foreground h-5 w-5" />
+                <h3 className="text-lg font-semibold">Metadata</h3>
+              </HStack>
+
+              <dl className="grid grid-cols-1 gap-4 text-sm">
+                <div>
+                  <dt className="text-muted-foreground">Key</dt>
+                  <dd className="truncate font-medium">{formRef.key}</dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">Version</dt>
+                  <dd className="font-medium">{formRef.version}</dd>
+                </div>
+                {spec?.meta?.owners && (
+                  <div>
+                    <dt className="text-muted-foreground">Owners</dt>
+                    <dd className="flex flex-wrap gap-1 font-medium">
+                      {spec.meta.owners.map((o: string) => (
+                        <StatusChip
+                          key={o}
+                          label={o}
+                          size="sm"
+                          tone="neutral"
+                        />
+                      ))}
+                    </dd>
+                  </div>
+                )}
+                {spec?.meta?.tags && (
+                  <div>
+                    <dt className="text-muted-foreground">Tags</dt>
+                    <dd className="flex flex-wrap gap-1 font-medium">
+                      {spec.meta.tags.map((t: string) => (
+                        <StatusChip
+                          key={t}
+                          label={`#${t}`}
+                          size="sm"
+                          tone="neutral"
+                        />
+                      ))}
+                    </dd>
+                  </div>
+                )}
+              </dl>
+            </VStack>
+          </Card>
+        </div>
+
+        {/* Related Docs */}
+        {relatedDocs?.length ? (
+          <div className="lg:col-span-3">
+            <Card className="p-6">
+              <VStack gap="md">
+                <HStack className="items-center gap-2 border-b pb-2">
+                  <BookOpen className="text-muted-foreground h-5 w-5" />
+                  <h3 className="text-lg font-semibold">
+                    Related Documentation
+                  </h3>
+                </HStack>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {relatedDocs.map((doc) => (
+                    <Link
+                      key={doc.id}
+                      href={doc.route || `/docs/${doc.id}`}
+                      className="group block"
+                    >
+                      <div className="hover:border-primary h-full rounded-lg border p-4 transition-colors">
+                        <h4 className="group-hover:text-primary mb-1 font-semibold">
+                          {doc.title}
+                        </h4>
+                        {doc.summary && (
+                          <p className="text-muted-foreground line-clamp-2 text-sm">
+                            {doc.summary}
+                          </p>
+                        )}
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </VStack>
+            </Card>
+          </div>
+        ) : null}
+      </div>
+    </VStack>
+  );
+}

package/src/presentation/features/templates/FeatureFormDetailTemplate/index.ts

@@ -0,0 +1,2 @@
+export * from './FeatureFormDetailTemplate';
+export * from './types';

package/src/presentation/features/templates/FeatureFormDetailTemplate/types.ts

@@ -0,0 +1,13 @@
+import type {
+  FeatureModuleSpec,
+  FormRef,
+} from '@contractspec/lib.contracts/features';
+import type { SerializedFormSpec } from '@contractspec/lib.contracts/serialization';
+
+export interface FeatureFormDetailTemplateProps {
+  feature: FeatureModuleSpec;
+  formKey: string;
+  form?: FormRef;
+  spec?: SerializedFormSpec;
+  className?: string;
+}

package/src/presentation/features/templates/FeatureFormsTemplate/FeatureFormsTemplate.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {
+  PageHeaderResponsive,
+  Breadcrumbs,
+} from '@contractspec/lib.design-system';
+import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { FeatureListTemplateProps } from '../types';
+import { FeatureFormsList } from '../../organisms/FeatureFormsList';
+
+export function FeatureFormsTemplate({
+  feature,
+  className,
+}: FeatureListTemplateProps) {
+  return (
+    <VStack gap="lg" className={cn('mx-auto w-full max-w-5xl p-6', className)}>
+      <PageHeaderResponsive
+        title="Forms"
+        subtitle={`Forms defined in ${feature.meta.title ?? feature.meta.key}`}
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: 'Features', href: '/features' },
+              {
+                label: feature.meta.title || feature.meta.key,
+                href: `/features/${feature.meta.key}`,
+              },
+              { label: 'Forms' },
+            ]}
+          />
+        }
+      />
+      <FeatureFormsList feature={feature} />
+    </VStack>
+  );
+}

package/src/presentation/features/templates/FeatureFormsTemplate/index.ts

@@ -0,0 +1 @@
+export { FeatureFormsTemplate } from './FeatureFormsTemplate';

package/src/presentation/features/templates/FeatureOperationDetailTemplate/FeatureOperationDetailTemplate.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import {
+  Breadcrumbs,
+  CodeBlock,
+  EmptyState,
+  PageHeaderResponsive,
+  StatusChip,
+} from '@contractspec/lib.design-system';
+import { Card } from '@contractspec/lib.ui-kit-web/ui/card';
+import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { FeatureOperationDetailTemplateProps } from './types';
+import { Code, Database, Zap } from 'lucide-react';
+import { useRelatedDocs } from '../../hooks/useRelatedDocs';
+
+export function FeatureOperationDetailTemplate({
+  feature,
+  operationKey,
+  operation,
+  spec,
+  className,
+}: FeatureOperationDetailTemplateProps) {
+  /* Fallback if operation ref is not found passed directly, try to search in feature */
+  const opRef =
+    operation ?? feature.operations?.find((op) => op.key === operationKey);
+
+  const _relatedDocs = useRelatedDocs(opRef?.key || '', spec?.meta?.tags);
+
+  if (!opRef) {
+    return (
+      <VStack
+        gap="lg"
+        className={cn('mx-auto w-full max-w-5xl p-6', className)}
+      >
+        <PageHeaderResponsive
+          title="Operation Not Found"
+          subtitle={`Operation ${operationKey} not found in feature ${feature.meta.key}`}
+          breadcrumb={
+            <Breadcrumbs
+              items={[
+                { label: 'Features', href: '/features' },
+                {
+                  label: feature.meta.title || feature.meta.key,
+                  href: `/features/${feature.meta.key}`,
+                },
+                { label: 'Operations' },
+              ]}
+            />
+          }
+        />
+        <EmptyState
+          title="Operation not found"
+          description={`The operation '${operationKey}' could not be found in this feature.`}
+          icon={<Zap className="text-muted-foreground h-12 w-12" />}
+        />
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack gap="lg" className={cn('mx-auto w-full max-w-5xl p-6', className)}>
+      <PageHeaderResponsive
+        title={opRef.key}
+        subtitle={`Operation defined in ${feature.meta.title ?? feature.meta.key}`}
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: 'Features', href: '/features' },
+              {
+                label: feature.meta.title || feature.meta.key,
+                href: `/features/${feature.meta.key}`,
+              },
+              {
+                label: 'Operations',
+                href: `/features/${feature.meta.key}/operations`,
+              },
+              { label: opRef.key },
+            ]}
+          />
+        }
+      />
+
+      <HStack gap="sm">
+        <StatusChip
+          tone="neutral"
+          label={opRef.key}
+          size="sm"
+          icon={<Zap className="h-3 w-3" />}
+        />
+        <StatusChip tone="neutral" label={`v${opRef.version}`} size="sm" />
+        {spec?.meta?.stability ? (
+          <StatusChip
+            tone={spec.meta.stability === 'stable' ? 'success' : 'warning'}
+            label={spec.meta.stability}
+            size="sm"
+          />
+        ) : null}
+      </HStack>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-2">
+          <Card className="p-6">
+            <VStack gap="md">
+              <HStack className="items-center gap-2 border-b pb-2">
+                <Code className="text-muted-foreground h-5 w-5" />
+                <h3 className="text-lg font-semibold">Schema Definition</h3>
+              </HStack>
+
+              {spec ? (
+                <VStack gap="lg">
+                  {spec.meta.description && (
+                    <p className="text-muted-foreground">
+                      {spec.meta.description}
+                    </p>
+                  )}
+
+                  <Box className="flex-col gap-2">
+                    <span className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
+                      Input Schema
+                    </span>
+                    <CodeBlock
+                      className="w-full"
+                      code={JSON.stringify(spec.io.input, null, 2)}
+                      language="json"
+                    />
+                  </Box>
+
+                  <Box className="flex-col gap-2">
+                    <span className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
+                      Output Schema
+                    </span>
+                    <CodeBlock
+                      className="w-full"
+                      code={JSON.stringify(spec.io.output, null, 2)}
+                      language="json"
+                    />
+                  </Box>
+                </VStack>
+              ) : (
+                <VStack gap="md">
+                  <p className="text-muted-foreground">
+                    Full schema details are not available for this operation
+                    reference.
+                  </p>
+                  <CodeBlock
+                    code={JSON.stringify(opRef, null, 2)}
+                    language="json"
+                  />
+                </VStack>
+              )}
+            </VStack>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="p-6">
+            <VStack gap="md">
+              <HStack className="items-center gap-2 border-b pb-2">
+                <Database className="text-muted-foreground h-5 w-5" />
+                <h3 className="text-lg font-semibold">Metadata</h3>
+              </HStack>
+
+              <dl className="grid grid-cols-1 gap-4 text-sm">
+                <div>
+                  <dt className="text-muted-foreground">Key</dt>
+                  <dd className="truncate font-medium">{opRef.key}</dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">Version</dt>
+                  <dd className="font-medium">{opRef.version}</dd>
+                </div>
+                {spec?.meta?.context && (
+                  <div>
+                    <dt className="text-muted-foreground">Context</dt>
+                    <dd className="font-medium">{spec.meta.context}</dd>
+                  </div>
+                )}
+                {spec?.meta?.owners && (
+                  <div>
+                    <dt className="text-muted-foreground">Owners</dt>
+                    <dd className="flex flex-wrap gap-1 font-medium">
+                      {spec.meta.owners.map((o: string) => (
+                        <StatusChip
+                          key={o}
+                          label={o}
+                          size="sm"
+                          tone="neutral"
+                        />
+                      ))}
+                    </dd>
+                  </div>
+                )}
+                {spec?.meta?.tags && (
+                  <div>
+                    <dt className="text-muted-foreground">Tags</dt>
+                    <dd className="flex flex-wrap gap-1 font-medium">
+                      {spec.meta.tags.map((t: string) => (
+                        <StatusChip
+                          key={t}
+                          label={`#${t}`}
+                          size="sm"
+                          tone="neutral"
+                        />
+                      ))}
+                    </dd>
+                  </div>
+                )}
+              </dl>
+            </VStack>
+          </Card>
+        </div>
+
+        {/* Related Docs */}
+        {/*{relatedDocs?.length ? (*/}
+        {/*  <div className="lg:col-span-3">*/}
+        {/*    <Card className="p-6">*/}
+        {/*      <VStack gap="md">*/}
+        {/*        <HStack className="items-center gap-2 border-b pb-2">*/}
+        {/*          <BookOpen className="text-muted-foreground h-5 w-5" />*/}
+        {/*          <h3 className="text-lg font-semibold">*/}
+        {/*            Related Documentation*/}
+        {/*          </h3>*/}
+        {/*        </HStack>*/}
+        {/*        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">*/}
+        {/*          {relatedDocs.map((doc) => (*/}
+        {/*            <Link*/}
+        {/*              key={doc.id}*/}
+        {/*              href={doc.route || `/docs/${doc.id}`}*/}
+        {/*              className="group block"*/}
+        {/*            >*/}
+        {/*              <div className="hover:border-primary h-full rounded-lg border p-4 transition-colors">*/}
+        {/*                <h4 className="group-hover:text-primary mb-1 font-semibold">*/}
+        {/*                  {doc.title}*/}
+        {/*                </h4>*/}
+        {/*                {doc.summary && (*/}
+        {/*                  <p className="text-muted-foreground line-clamp-2 text-sm">*/}
+        {/*                    {doc.summary}*/}
+        {/*                  </p>*/}
+        {/*                )}*/}
+        {/*              </div>*/}
+        {/*            </Link>*/}
+        {/*          ))}*/}
+        {/*        </div>*/}
+        {/*      </VStack>*/}
+        {/*    </Card>*/}
+        {/*  </div>*/}
+        {/*) : null}*/}
+      </div>
+    </VStack>
+  );
+}

package/src/presentation/features/templates/FeatureOperationDetailTemplate/index.ts

@@ -0,0 +1,2 @@
+export * from './FeatureOperationDetailTemplate';
+export * from './types';

package/src/presentation/features/templates/FeatureOperationDetailTemplate/types.ts

@@ -0,0 +1,13 @@
+import type {
+  FeatureModuleSpec,
+  OpRef,
+} from '@contractspec/lib.contracts/features';
+import type { SerializedOperationSpec } from '@contractspec/lib.contracts/serialization';
+
+export interface FeatureOperationDetailTemplateProps {
+  feature: FeatureModuleSpec;
+  operationKey: string;
+  operation?: OpRef;
+  spec?: SerializedOperationSpec;
+  className?: string;
+}

package/src/presentation/features/templates/FeatureOperationsTemplate/FeatureOperationsTemplate.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {
+  Breadcrumbs,
+  PageHeaderResponsive,
+} from '@contractspec/lib.design-system';
+import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { FeatureListTemplateProps } from '../types';
+import { FeatureOperationsList } from '../../organisms/FeatureOperationsList';
+
+export function FeatureOperationsTemplate({
+  feature,
+  className,
+}: FeatureListTemplateProps) {
+  return (
+    <VStack gap="lg" className={cn('mx-auto w-full max-w-5xl p-6', className)}>
+      <PageHeaderResponsive
+        title="Operations"
+        subtitle={`Operations defined in ${feature.meta.title ?? feature.meta.key}`}
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: 'Features', href: '/features' },
+              {
+                label: feature.meta.title || feature.meta.key,
+                href: `/features/${feature.meta.key}`,
+              },
+              { label: 'Operations' },
+            ]}
+          />
+        }
+      />
+      <FeatureOperationsList feature={feature} />
+    </VStack>
+  );
+}

package/src/presentation/features/templates/FeatureOperationsTemplate/index.ts

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

package/src/presentation/features/templates/FeatureOverviewTemplate/FeatureOverviewTemplate.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  PageHeaderResponsive,
+  Breadcrumbs,
+} from '@contractspec/lib.design-system';
+import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import { FeatureDetail } from '../../organisms/FeatureDetail';
+import type { FeatureModuleSpec } from '@contractspec/lib.contracts/features';
+
+export interface FeatureOverviewTemplateProps {
+  feature: FeatureModuleSpec;
+  className?: string;
+}
+
+export function FeatureOverviewTemplate({
+  feature,
+  className,
+}: FeatureOverviewTemplateProps) {
+  return (
+    <VStack gap="lg" className={cn('mx-auto w-full max-w-5xl p-6', className)}>
+      <PageHeaderResponsive
+        title={feature.meta.title || feature.meta.key}
+        subtitle={feature.meta.description || 'Feature overview'}
+        breadcrumb={
+          <Breadcrumbs
+            items={[
+              { label: 'Features', href: '/features' },
+              { label: feature.meta.title || feature.meta.key },
+            ]}
+          />
+        }
+      />
+      <FeatureDetail feature={feature} />
+    </VStack>
+  );
+}

package/src/presentation/features/templates/FeatureOverviewTemplate/index.ts

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