@contractspec/bundle.library 3.7.5 → 3.7.7

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

@@ -1,252 +1,252 @@
 'use client';
 
 import {
-  Breadcrumbs,
-  CodeBlock,
-  EmptyState,
-  PageHeaderResponsive,
-  StatusChip,
+	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';
+import type { FeatureOperationDetailTemplateProps } from './types';
 
 export function FeatureOperationDetailTemplate({
-  feature,
-  operationKey,
-  operation,
-  spec,
-  className,
+	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);
+	/* 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);
+	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>
-    );
-  }
+	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="h-12 w-12 text-muted-foreground" />}
+				/>
+			</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 },
-            ]}
-          />
-        }
-      />
+	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>
+			<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>
+			<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="h-5 w-5 text-muted-foreground" />
+								<h3 className="font-semibold text-lg">Schema Definition</h3>
+							</HStack>
 
-              {spec ? (
-                <VStack gap="lg">
-                  {spec.meta.description && (
-                    <p className="text-muted-foreground">
-                      {spec.meta.description}
-                    </p>
-                  )}
+							{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="font-medium text-muted-foreground text-sm uppercase tracking-wider">
+											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>
+									<Box className="flex-col gap-2">
+										<span className="font-medium text-muted-foreground text-sm uppercase tracking-wider">
+											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>
+				<div className="space-y-6">
+					<Card className="p-6">
+						<VStack gap="md">
+							<HStack className="items-center gap-2 border-b pb-2">
+								<Database className="h-5 w-5 text-muted-foreground" />
+								<h3 className="font-semibold text-lg">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>
+							<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>
-  );
+				{/* 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/types.ts

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

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

@@ -1,37 +1,37 @@
 'use client';
 
 import {
-  Breadcrumbs,
-  PageHeaderResponsive,
+	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';
+import type { FeatureListTemplateProps } from '../types';
 
 export function FeatureOperationsTemplate({
-  feature,
-  className,
+	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>
-  );
+	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/FeatureOverviewTemplate/FeatureOverviewTemplate.tsx

@@ -1,38 +1,38 @@
 'use client';
 
+import type { FeatureModuleSpec } from '@contractspec/lib.contracts-spec/features';
 import {
-  PageHeaderResponsive,
-  Breadcrumbs,
+	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 { FeatureDetail } from '../../organisms/FeatureDetail';
-import type { FeatureModuleSpec } from '@contractspec/lib.contracts-spec/features';
 
 export interface FeatureOverviewTemplateProps {
-  feature: FeatureModuleSpec;
-  className?: string;
+	feature: FeatureModuleSpec;
+	className?: string;
 }
 
 export function FeatureOverviewTemplate({
-  feature,
-  className,
+	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>
-  );
+	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>
+	);
 }