@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/presentation/features/molecules/FeatureCard/FeatureCard.tsx

@@ -2,16 +2,16 @@
 
 import { EntityCard, StatusChip } from '@contractspec/lib.design-system';
 import { HStack } from '@contractspec/lib.ui-kit-web/ui/stack';
-import { Zap, Radio, Layout, Shield } from 'lucide-react';
+import { Layout, Radio, Shield, Zap } from 'lucide-react';
 import { FeatureIcon, getFeatureIconTone } from '../../atoms/FeatureIcon';
 import { FeatureHoverPreview } from '../FeatureHoverPreview';
 import type { FeatureCardProps } from './types';
 
 const stabilityTone = {
-  stable: 'success' as const,
-  beta: 'warning' as const,
-  experimental: 'info' as const,
-  deprecated: 'danger' as const,
+	stable: 'success' as const,
+	beta: 'warning' as const,
+	experimental: 'info' as const,
+	deprecated: 'danger' as const,
 };
 
 /**
@@ -20,86 +20,86 @@ const stabilityTone = {
  * Includes hover preview with full feature details.
  */
 export function FeatureCard({
-  feature,
-  onSelect,
-  className,
+	feature,
+	onSelect,
+	className,
 }: FeatureCardProps) {
-  const { meta, operations, events, presentations, capabilities } = feature;
+	const { meta, operations, events, presentations, capabilities } = feature;
 
-  const tone =
-    stabilityTone[meta.stability as keyof typeof stabilityTone] ?? 'neutral';
+	const tone =
+		stabilityTone[meta.stability as keyof typeof stabilityTone] ?? 'neutral';
 
-  const iconTone = getFeatureIconTone(meta.stability);
+	const iconTone = getFeatureIconTone(meta.stability);
 
-  // Use strong emphasis for stable features for visual highlight
-  const emphasis = meta.stability === 'stable' ? 'strong' : 'default';
+	// Use strong emphasis for stable features for visual highlight
+	const emphasis = meta.stability === 'stable' ? 'strong' : 'default';
 
-  const handleClick = onSelect ? () => onSelect(feature) : undefined;
+	const handleClick = onSelect ? () => onSelect(feature) : undefined;
 
-  const hasCapabilities =
-    capabilities?.provides?.length || capabilities?.requires?.length;
+	const hasCapabilities =
+		capabilities?.provides?.length || capabilities?.requires?.length;
 
-  return (
-    <EntityCard
-      cardTitle={meta.title}
-      cardSubtitle={meta.key}
-      className={className}
-      onClick={handleClick}
-      emphasis={emphasis}
-      icon={
-        <FeatureIcon
-          domain={meta.domain}
-          tags={meta.tags}
-          stability={meta.stability}
-          size="md"
-        />
-      }
-      iconTone={iconTone}
-      chips={
-        <StatusChip tone={tone} label={meta.stability ?? 'unknown'} size="sm" />
-      }
-      meta={
-        meta.description ? (
-          <span className="text-muted-foreground line-clamp-2 text-sm">
-            {meta.description}
-          </span>
-        ) : undefined
-      }
-      preview={<FeatureHoverPreview feature={feature} />}
-      footer={
-        <HStack
-          gap="md"
-          className="text-muted-foreground w-full justify-between text-xs"
-        >
-          <HStack gap="sm">
-            {operations?.length ? (
-              <span className="flex items-center gap-1">
-                <Zap className="h-3 w-3 text-amber-500" />
-                {operations.length}
-              </span>
-            ) : null}
-            {events?.length ? (
-              <span className="flex items-center gap-1">
-                <Radio className="h-3 w-3 text-blue-500" />
-                {events.length}
-              </span>
-            ) : null}
-            {presentations?.length ? (
-              <span className="flex items-center gap-1">
-                <Layout className="h-3 w-3 text-purple-500" />
-                {presentations.length}
-              </span>
-            ) : null}
-          </HStack>
-          {hasCapabilities && (
-            <span className="flex items-center gap-1">
-              <Shield className="h-3 w-3 text-emerald-500" />
-              {(capabilities?.provides?.length ?? 0) +
-                (capabilities?.requires?.length ?? 0)}
-            </span>
-          )}
-        </HStack>
-      }
-    />
-  );
+	return (
+		<EntityCard
+			cardTitle={meta.title}
+			cardSubtitle={meta.key}
+			className={className}
+			onClick={handleClick}
+			emphasis={emphasis}
+			icon={
+				<FeatureIcon
+					domain={meta.domain}
+					tags={meta.tags}
+					stability={meta.stability}
+					size="md"
+				/>
+			}
+			iconTone={iconTone}
+			chips={
+				<StatusChip tone={tone} label={meta.stability ?? 'unknown'} size="sm" />
+			}
+			meta={
+				meta.description ? (
+					<span className="line-clamp-2 text-muted-foreground text-sm">
+						{meta.description}
+					</span>
+				) : undefined
+			}
+			preview={<FeatureHoverPreview feature={feature} />}
+			footer={
+				<HStack
+					gap="md"
+					className="w-full justify-between text-muted-foreground text-xs"
+				>
+					<HStack gap="sm">
+						{operations?.length ? (
+							<span className="flex items-center gap-1">
+								<Zap className="h-3 w-3 text-amber-500" />
+								{operations.length}
+							</span>
+						) : null}
+						{events?.length ? (
+							<span className="flex items-center gap-1">
+								<Radio className="h-3 w-3 text-blue-500" />
+								{events.length}
+							</span>
+						) : null}
+						{presentations?.length ? (
+							<span className="flex items-center gap-1">
+								<Layout className="h-3 w-3 text-purple-500" />
+								{presentations.length}
+							</span>
+						) : null}
+					</HStack>
+					{hasCapabilities && (
+						<span className="flex items-center gap-1">
+							<Shield className="h-3 w-3 text-emerald-500" />
+							{(capabilities?.provides?.length ?? 0) +
+								(capabilities?.requires?.length ?? 0)}
+						</span>
+					)}
+				</HStack>
+			}
+		/>
+	);
 }

package/src/presentation/features/molecules/FeatureCard/types.ts

@@ -1,10 +1,10 @@
 import type { FeatureModuleSpec } from '@contractspec/lib.contracts-spec/features';
 
 export interface FeatureCardProps {
-  /** The feature to display. */
-  feature: FeatureModuleSpec;
-  /** Callback when the card is clicked. */
-  onSelect?: (feature: FeatureModuleSpec) => void;
-  /** Additional class name. */
-  className?: string;
+	/** The feature to display. */
+	feature: FeatureModuleSpec;
+	/** Callback when the card is clicked. */
+	onSelect?: (feature: FeatureModuleSpec) => void;
+	/** Additional class name. */
+	className?: string;
 }

package/src/presentation/features/molecules/FeatureCategoryHeader/FeatureCategoryHeader.tsx

@@ -1,67 +1,67 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
-import { ChevronDown, Boxes } from 'lucide-react';
-import { HStack } from '@contractspec/lib.ui-kit-web/ui/stack';
 import { StatusChip } from '@contractspec/lib.design-system';
+import { HStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import { Boxes, ChevronDown } from 'lucide-react';
+import * as React from 'react';
 
 export interface FeatureCategoryHeaderProps {
-  /** Category/domain title */
-  title: string;
-  /** Number of features in this category */
-  count: number;
-  /** Icon for the category */
-  icon?: React.ReactNode;
-  /** Whether the section is collapsed */
-  isCollapsed?: boolean;
-  /** Toggle collapse state */
-  onToggle?: () => void;
-  /** Additional class name */
-  className?: string;
+	/** Category/domain title */
+	title: string;
+	/** Number of features in this category */
+	count: number;
+	/** Icon for the category */
+	icon?: React.ReactNode;
+	/** Whether the section is collapsed */
+	isCollapsed?: boolean;
+	/** Toggle collapse state */
+	onToggle?: () => void;
+	/** Additional class name */
+	className?: string;
 }
 
 /**
  * Category/domain section header for grouped feature display.
  */
 export function FeatureCategoryHeader({
-  title,
-  count,
-  icon,
-  isCollapsed = false,
-  onToggle,
-  className,
+	title,
+	count,
+	icon,
+	isCollapsed = false,
+	onToggle,
+	className,
 }: FeatureCategoryHeaderProps) {
-  return (
-    <button
-      type="button"
-      onClick={onToggle}
-      className={cn(
-        'flex w-full items-center justify-between rounded-lg px-4 py-3',
-        'bg-muted/30 hover:bg-muted/50 transition-colors',
-        'group cursor-pointer',
-        className
-      )}
-    >
-      <HStack gap="sm" className="items-center">
-        <div className="text-muted-foreground group-hover:text-foreground transition-colors">
-          {icon || <Boxes className="h-5 w-5" />}
-        </div>
-        <span className="group-hover:text-primary text-lg font-semibold capitalize transition-colors">
-          {title}
-        </span>
-        <StatusChip
-          tone="neutral"
-          label={`${count} ${count === 1 ? 'feature' : 'features'}`}
-          size="sm"
-        />
-      </HStack>
-      <ChevronDown
-        className={cn(
-          'text-muted-foreground h-5 w-5 transition-transform duration-200',
-          isCollapsed && '-rotate-90'
-        )}
-      />
-    </button>
-  );
+	return (
+		<button
+			type="button"
+			onClick={onToggle}
+			className={cn(
+				'flex w-full items-center justify-between rounded-lg px-4 py-3',
+				'bg-muted/30 transition-colors hover:bg-muted/50',
+				'group cursor-pointer',
+				className
+			)}
+		>
+			<HStack gap="sm" className="items-center">
+				<div className="text-muted-foreground transition-colors group-hover:text-foreground">
+					{icon || <Boxes className="h-5 w-5" />}
+				</div>
+				<span className="font-semibold text-lg capitalize transition-colors group-hover:text-primary">
+					{title}
+				</span>
+				<StatusChip
+					tone="neutral"
+					label={`${count} ${count === 1 ? 'feature' : 'features'}`}
+					size="sm"
+				/>
+			</HStack>
+			<ChevronDown
+				className={cn(
+					'h-5 w-5 text-muted-foreground transition-transform duration-200',
+					isCollapsed && '-rotate-90'
+				)}
+			/>
+		</button>
+	);
 }

package/src/presentation/features/molecules/FeatureCategoryHeader/index.ts

@@ -1,4 +1,4 @@
 export {
-  FeatureCategoryHeader,
-  type FeatureCategoryHeaderProps,
+	FeatureCategoryHeader,
+	type FeatureCategoryHeaderProps,
 } from './FeatureCategoryHeader';

package/src/presentation/features/molecules/FeatureFilters/FeatureFilters.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Input } from '@contractspec/lib.design-system';
-import { VStack, HStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
 import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import type { FeatureFiltersBarProps } from './types';
 
@@ -10,73 +10,73 @@ import type { FeatureFiltersBarProps } from './types';
  * Provides search input, stability toggles, and tag pills.
  */
 export function FeatureFiltersBar({
-  uniqueTags,
-  uniqueStabilities,
-  filters,
-  setSearch,
-  toggleTag,
-  toggleStability,
-  clearFilters,
-  hasActiveFilters,
-  className,
+	uniqueTags,
+	uniqueStabilities,
+	filters,
+	setSearch,
+	toggleTag,
+	toggleStability,
+	clearFilters,
+	hasActiveFilters,
+	className,
 }: FeatureFiltersBarProps) {
-  return (
-    <VStack gap="md" className={cn('w-full', className)}>
-      <HStack gap="md" justify="between" className="w-full">
-        <Input
-          placeholder="Search features..."
-          value={filters.search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="max-w-md"
-          aria-label="Search features"
-        />
-        {hasActiveFilters && (
-          <Button variant="ghost" size="sm" onClick={clearFilters}>
-            Clear filters
-          </Button>
-        )}
-      </HStack>
+	return (
+		<VStack gap="md" className={cn('w-full', className)}>
+			<HStack gap="md" justify="between" className="w-full">
+				<Input
+					placeholder="Search features..."
+					value={filters.search}
+					onChange={(e) => setSearch(e.target.value)}
+					className="max-w-md"
+					aria-label="Search features"
+				/>
+				{hasActiveFilters && (
+					<Button variant="ghost" size="sm" onClick={clearFilters}>
+						Clear filters
+					</Button>
+				)}
+			</HStack>
 
-      {uniqueStabilities.length > 0 && (
-        <HStack gap="xs" wrap="wrap">
-          <span className="text-muted-foreground text-sm">Stability:</span>
-          {uniqueStabilities.map((stability) => (
-            <Button
-              key={stability}
-              variant={
-                filters.stability.includes(stability) ? 'default' : 'outline'
-              }
-              size="sm"
-              onClick={() => toggleStability(stability)}
-              aria-pressed={filters.stability.includes(stability)}
-            >
-              {stability}
-            </Button>
-          ))}
-        </HStack>
-      )}
+			{uniqueStabilities.length > 0 && (
+				<HStack gap="xs" wrap="wrap">
+					<span className="text-muted-foreground text-sm">Stability:</span>
+					{uniqueStabilities.map((stability) => (
+						<Button
+							key={stability}
+							variant={
+								filters.stability.includes(stability) ? 'default' : 'outline'
+							}
+							size="sm"
+							onClick={() => toggleStability(stability)}
+							aria-pressed={filters.stability.includes(stability)}
+						>
+							{stability}
+						</Button>
+					))}
+				</HStack>
+			)}
 
-      {uniqueTags.length > 0 && (
-        <HStack gap="xs" wrap="wrap">
-          <span className="text-muted-foreground text-sm">Tags:</span>
-          {uniqueTags.slice(0, 10).map((tag) => (
-            <Button
-              key={tag}
-              variant={filters.tags.includes(tag) ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => toggleTag(tag)}
-              aria-pressed={filters.tags.includes(tag)}
-            >
-              #{tag}
-            </Button>
-          ))}
-          {uniqueTags.length > 10 && (
-            <span className="text-muted-foreground text-sm">
-              +{uniqueTags.length - 10} more
-            </span>
-          )}
-        </HStack>
-      )}
-    </VStack>
-  );
+			{uniqueTags.length > 0 && (
+				<HStack gap="xs" wrap="wrap">
+					<span className="text-muted-foreground text-sm">Tags:</span>
+					{uniqueTags.slice(0, 10).map((tag) => (
+						<Button
+							key={tag}
+							variant={filters.tags.includes(tag) ? 'default' : 'outline'}
+							size="sm"
+							onClick={() => toggleTag(tag)}
+							aria-pressed={filters.tags.includes(tag)}
+						>
+							#{tag}
+						</Button>
+					))}
+					{uniqueTags.length > 10 && (
+						<span className="text-muted-foreground text-sm">
+							+{uniqueTags.length - 10} more
+						</span>
+					)}
+				</HStack>
+			)}
+		</VStack>
+	);
 }

package/src/presentation/features/molecules/FeatureFilters/types.ts

@@ -1,25 +1,25 @@
 import type {
-  FeatureFilters,
-  UseFeatureFiltersReturn,
+	FeatureFilters,
+	UseFeatureFiltersReturn,
 } from '../../hooks/useFeatureFilters';
 
 export interface FeatureFiltersBarProps {
-  /** Available tags to filter by. */
-  uniqueTags: string[];
-  /** Available stabilities to filter by. */
-  uniqueStabilities: string[];
-  /** Current filter state. */
-  filters: FeatureFilters;
-  /** Set the search query. */
-  setSearch: UseFeatureFiltersReturn['setSearch'];
-  /** Toggle a tag filter. */
-  toggleTag: UseFeatureFiltersReturn['toggleTag'];
-  /** Toggle a stability filter. */
-  toggleStability: UseFeatureFiltersReturn['toggleStability'];
-  /** Clear all filters. */
-  clearFilters: UseFeatureFiltersReturn['clearFilters'];
-  /** Whether any filters are active. */
-  hasActiveFilters: boolean;
-  /** Additional class name. */
-  className?: string;
+	/** Available tags to filter by. */
+	uniqueTags: string[];
+	/** Available stabilities to filter by. */
+	uniqueStabilities: string[];
+	/** Current filter state. */
+	filters: FeatureFilters;
+	/** Set the search query. */
+	setSearch: UseFeatureFiltersReturn['setSearch'];
+	/** Toggle a tag filter. */
+	toggleTag: UseFeatureFiltersReturn['toggleTag'];
+	/** Toggle a stability filter. */
+	toggleStability: UseFeatureFiltersReturn['toggleStability'];
+	/** Clear all filters. */
+	clearFilters: UseFeatureFiltersReturn['clearFilters'];
+	/** Whether any filters are active. */
+	hasActiveFilters: boolean;
+	/** Additional class name. */
+	className?: string;
 }