@contractspec/bundle.library 3.7.6 → 3.8.2

package/dist/node/presentation/features/index.js

@@ -1,45 +1,45 @@
 // src/features/docs/docs.contracts.ts
 import {
+  ContractReferenceQuery,
   DocSummaryModel,
   DocsIndexInput,
   DocsIndexOutput,
   DocsIndexQuery,
-  DocsIndexQuery as DocsIndexQuery2,
-  ContractReferenceQuery
+  DocsIndexQuery as DocsIndexQuery2
 } from "@contractspec/lib.contracts-spec/docs";
 // src/features/contracts-registry.ts
 import {
-  OperationSpecRegistry,
-  EventRegistry
+  EventRegistry,
+  OperationSpecRegistry
 } from "@contractspec/lib.contracts-spec";
-import {
-  PresentationRegistry
-} from "@contractspec/lib.contracts-spec/presentations";
 import {
   DataViewRegistry
 } from "@contractspec/lib.contracts-spec/data-views";
-import { FormRegistry } from "@contractspec/lib.contracts-spec/forms";
-import {
-  serializeOperationSpec,
-  serializeEventSpec,
-  serializePresentationSpec,
-  serializeDataViewSpec,
-  serializeFormSpec
-} from "@contractspec/lib.contracts-spec/serialization";
 import {
   ContractReferenceDataView,
   ContractReferenceQuery as ContractReferenceQuery2,
-  DocsGeneratedEvent,
   DocsGenerateCommand,
+  DocsGeneratedEvent,
   DocsIndexDataView,
   DocsIndexQuery as DocsIndexQuery3,
   DocsLayoutPresentation,
-  DocsPublishedEvent,
   DocsPublishCommand,
+  DocsPublishedEvent,
   DocsReferencePagePresentation,
   DocsSearchForm,
   ExampleCatalogDataView
 } from "@contractspec/lib.contracts-spec/docs";
+import { FormRegistry } from "@contractspec/lib.contracts-spec/forms";
+import {
+  PresentationRegistry
+} from "@contractspec/lib.contracts-spec/presentations";
+import {
+  serializeDataViewSpec,
+  serializeEventSpec,
+  serializeFormSpec,
+  serializeOperationSpec,
+  serializePresentationSpec
+} from "@contractspec/lib.contracts-spec/serialization";
 var operationRegistry = null;
 function createContractSpecOperationRegistry() {
   const registry = new OperationSpecRegistry;
@@ -249,8 +249,8 @@ var PresentationsFeature = {
 };
 
 // src/features/registry.ts
-import { FeatureRegistry } from "@contractspec/lib.contracts-spec/features";
 import { AppConfigFeature } from "@contractspec/lib.contracts-spec/app-config";
+import { FeatureRegistry } from "@contractspec/lib.contracts-spec/features";
 function createContractSpecFeatureRegistry() {
   const features = new FeatureRegistry;
   features.register(DocsFeature);
@@ -274,19 +274,19 @@ function resetContractSpecFeatureRegistry() {
 import { FeatureRegistry as FeatureRegistry2 } from "@contractspec/lib.contracts-spec/features";
 
 // src/presentation/features/atoms/FeatureIcon/FeatureIcon.tsx
-import * as React from "react";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
 import {
-  FileText,
   Boxes,
-  Settings,
-  Globe,
-  Shield,
   Database,
-  MessageSquare,
+  FileText,
+  Globe,
   Layout,
+  MessageSquare,
+  Settings,
+  Shield,
   Workflow
 } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 "use client";
 var domainIconMap = {
@@ -366,41 +366,20 @@ function getFeatureIconTone(stability) {
     return "primary";
   return stabilityToneMap[stability] || "primary";
 }
-// src/presentation/features/hooks/useFeatureRegistry.ts
+// src/presentation/features/hooks/useContractsRegistry.ts
 import { useMemo as useMemo2 } from "react";
 "use client";
-function useFeatureRegistry() {
-  const registry = useMemo2(() => getContractSpecFeatureRegistry(), []);
-  return useMemo2(() => {
-    const features = registry.list();
-    return {
-      features,
-      getFeature: (key) => registry.get(key),
-      getByTag: (tag) => registry.listByTag(tag),
-      getByOwner: (owner) => registry.listByOwner(owner),
-      getUniqueTags: () => registry.getUniqueTags(),
-      getUniqueDomains: () => {
-        const domains = new Set;
-        for (const f of features) {
-          if (f.meta.domain)
-            domains.add(f.meta.domain);
-        }
-        return [...domains].sort();
-      },
-      getUniqueStabilities: () => {
-        const stabilities = new Set;
-        for (const f of features) {
-          if (f.meta.stability)
-            stabilities.add(f.meta.stability);
-        }
-        return [...stabilities].sort();
-      }
-    };
-  }, [registry]);
+function useContractsRegistry() {
+  const registry = useMemo2(() => getContractSpecOperationRegistry(), []);
+  return useMemo2(() => ({
+    resolveOperation: (ref) => resolveOperationSpec(ref.key, ref.version),
+    getOperationSpec: (key, version) => resolveOperationSpec(key, version),
+    listOperations: () => registry.list()
+  }), [registry]);
 }
 
 // src/presentation/features/hooks/useFeatureFilters.ts
-import { useState, useMemo as useMemo3, useCallback } from "react";
+import { useCallback, useMemo as useMemo3, useState } from "react";
 "use client";
 var defaultFilters = {
   search: "",
@@ -472,20 +451,41 @@ function useFeatureFilters(features) {
   };
 }
 
-// src/presentation/features/hooks/useContractsRegistry.ts
+// src/presentation/features/hooks/useFeatureRegistry.ts
 import { useMemo as useMemo4 } from "react";
 "use client";
-function useContractsRegistry() {
-  const registry = useMemo4(() => getContractSpecOperationRegistry(), []);
-  return useMemo4(() => ({
-    resolveOperation: (ref) => resolveOperationSpec(ref.key, ref.version),
-    getOperationSpec: (key, version) => resolveOperationSpec(key, version),
-    listOperations: () => registry.list()
-  }), [registry]);
+function useFeatureRegistry() {
+  const registry = useMemo4(() => getContractSpecFeatureRegistry(), []);
+  return useMemo4(() => {
+    const features = registry.list();
+    return {
+      features,
+      getFeature: (key) => registry.get(key),
+      getByTag: (tag) => registry.listByTag(tag),
+      getByOwner: (owner) => registry.listByOwner(owner),
+      getUniqueTags: () => registry.getUniqueTags(),
+      getUniqueDomains: () => {
+        const domains = new Set;
+        for (const f of features) {
+          if (f.meta.domain)
+            domains.add(f.meta.domain);
+        }
+        return [...domains].sort();
+      },
+      getUniqueStabilities: () => {
+        const stabilities = new Set;
+        for (const f of features) {
+          if (f.meta.stability)
+            stabilities.add(f.meta.stability);
+        }
+        return [...stabilities].sort();
+      }
+    };
+  }, [registry]);
 }
 // src/presentation/features/hooks/useRelatedDocs.ts
-import { useMemo as useMemo5 } from "react";
 import { defaultDocRegistry } from "@contractspec/lib.contracts-spec/docs";
+import { useMemo as useMemo5 } from "react";
 "use client";
 function useRelatedDocs(key, tags) {
   const docs2 = useMemo5(() => {
@@ -587,7 +587,7 @@ function FeatureHoverPreview({ feature }) {
         ]
       }),
       hasCapabilities && /* @__PURE__ */ jsxs("div", {
-        className: "border-border/50 space-y-1.5 border-t pt-1",
+        className: "space-y-1.5 border-border/50 border-t pt-1",
         children: [
           capabilities?.provides?.length ? /* @__PURE__ */ jsxs(HStack, {
             gap: "xs",
@@ -646,13 +646,13 @@ function FeatureHoverPreview({ feature }) {
       meta.tags?.length ? /* @__PURE__ */ jsxs(HStack, {
         gap: "xs",
         wrap: "wrap",
-        className: "border-border/50 items-center border-t pt-1",
+        className: "items-center border-border/50 border-t pt-1",
         children: [
           /* @__PURE__ */ jsx2(Tag, {
-            className: "text-muted-foreground h-3.5 w-3.5"
+            className: "h-3.5 w-3.5 text-muted-foreground"
           }),
           meta.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxs("span", {
-            className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-xs",
+            className: "rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs",
             children: [
               "#",
               tag
@@ -669,7 +669,7 @@ function FeatureHoverPreview({ feature }) {
       }) : null,
       meta.owners?.length ? /* @__PURE__ */ jsxs(HStack, {
         gap: "xs",
-        className: "text-muted-foreground items-center text-xs",
+        className: "items-center text-muted-foreground text-xs",
         children: [
           /* @__PURE__ */ jsx2(Users, {
             className: "h-3.5 w-3.5"
@@ -685,7 +685,7 @@ function FeatureHoverPreview({ feature }) {
 // src/presentation/features/molecules/FeatureCard/FeatureCard.tsx
 import { EntityCard, StatusChip as StatusChip2 } from "@contractspec/lib.design-system";
 import { HStack as HStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { Zap as Zap2, Radio as Radio2, Layout as Layout3, Shield as Shield3 } from "lucide-react";
+import { Layout as Layout3, Radio as Radio2, Shield as Shield3, Zap as Zap2 } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 "use client";
 var stabilityTone = {
@@ -724,7 +724,7 @@ function FeatureCard({
       size: "sm"
     }),
     meta: meta.description ? /* @__PURE__ */ jsx3("span", {
-      className: "text-muted-foreground line-clamp-2 text-sm",
+      className: "line-clamp-2 text-muted-foreground text-sm",
       children: meta.description
     }) : undefined,
     preview: /* @__PURE__ */ jsx3(FeatureHoverPreview, {
@@ -732,7 +732,7 @@ function FeatureCard({
     }),
     footer: /* @__PURE__ */ jsxs2(HStack2, {
       gap: "md",
-      className: "text-muted-foreground w-full justify-between text-xs",
+      className: "w-full justify-between text-muted-foreground text-xs",
       children: [
         /* @__PURE__ */ jsxs2(HStack2, {
           gap: "sm",
@@ -779,12 +779,59 @@ function FeatureCard({
     })
   });
 }
-// src/presentation/features/molecules/FeatureFilters/FeatureFilters.tsx
-import { Button, Input } from "@contractspec/lib.design-system";
-import { VStack, HStack as HStack3 } from "@contractspec/lib.ui-kit-web/ui/stack";
+// src/presentation/features/molecules/FeatureCategoryHeader/FeatureCategoryHeader.tsx
+import { StatusChip as StatusChip3 } from "@contractspec/lib.design-system";
+import { HStack as HStack3 } from "@contractspec/lib.ui-kit-web/ui/stack";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Boxes as Boxes2, ChevronDown } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
+function FeatureCategoryHeader({
+  title,
+  count,
+  icon,
+  isCollapsed = false,
+  onToggle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3("button", {
+    type: "button",
+    onClick: onToggle,
+    className: cn2("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),
+    children: [
+      /* @__PURE__ */ jsxs3(HStack3, {
+        gap: "sm",
+        className: "items-center",
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: "text-muted-foreground transition-colors group-hover:text-foreground",
+            children: icon || /* @__PURE__ */ jsx4(Boxes2, {
+              className: "h-5 w-5"
+            })
+          }),
+          /* @__PURE__ */ jsx4("span", {
+            className: "font-semibold text-lg capitalize transition-colors group-hover:text-primary",
+            children: title
+          }),
+          /* @__PURE__ */ jsx4(StatusChip3, {
+            tone: "neutral",
+            label: `${count} ${count === 1 ? "feature" : "features"}`,
+            size: "sm"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4(ChevronDown, {
+        className: cn2("h-5 w-5 text-muted-foreground transition-transform duration-200", isCollapsed && "-rotate-90")
+      })
+    ]
+  });
+}
+// src/presentation/features/molecules/FeatureFilters/FeatureFilters.tsx
+import { Button, Input } from "@contractspec/lib.design-system";
+import { HStack as HStack4, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+"use client";
 function FeatureFiltersBar({
   uniqueTags,
   uniqueStabilities,
@@ -796,23 +843,23 @@ function FeatureFiltersBar({
   hasActiveFilters,
   className
 }) {
-  return /* @__PURE__ */ jsxs3(VStack, {
+  return /* @__PURE__ */ jsxs4(VStack, {
     gap: "md",
-    className: cn2("w-full", className),
+    className: cn3("w-full", className),
     children: [
-      /* @__PURE__ */ jsxs3(HStack3, {
+      /* @__PURE__ */ jsxs4(HStack4, {
         gap: "md",
         justify: "between",
         className: "w-full",
         children: [
-          /* @__PURE__ */ jsx4(Input, {
+          /* @__PURE__ */ jsx5(Input, {
             placeholder: "Search features...",
             value: filters.search,
             onChange: (e) => setSearch(e.target.value),
             className: "max-w-md",
             "aria-label": "Search features"
           }),
-          hasActiveFilters && /* @__PURE__ */ jsx4(Button, {
+          hasActiveFilters && /* @__PURE__ */ jsx5(Button, {
             variant: "ghost",
             size: "sm",
             onClick: clearFilters,
@@ -820,15 +867,15 @@ function FeatureFiltersBar({
           })
         ]
       }),
-      uniqueStabilities.length > 0 && /* @__PURE__ */ jsxs3(HStack3, {
+      uniqueStabilities.length > 0 && /* @__PURE__ */ jsxs4(HStack4, {
         gap: "xs",
         wrap: "wrap",
         children: [
-          /* @__PURE__ */ jsx4("span", {
+          /* @__PURE__ */ jsx5("span", {
             className: "text-muted-foreground text-sm",
             children: "Stability:"
           }),
-          uniqueStabilities.map((stability) => /* @__PURE__ */ jsx4(Button, {
+          uniqueStabilities.map((stability) => /* @__PURE__ */ jsx5(Button, {
             variant: filters.stability.includes(stability) ? "default" : "outline",
             size: "sm",
             onClick: () => toggleStability(stability),
@@ -837,15 +884,15 @@ function FeatureFiltersBar({
           }, stability))
         ]
       }),
-      uniqueTags.length > 0 && /* @__PURE__ */ jsxs3(HStack3, {
+      uniqueTags.length > 0 && /* @__PURE__ */ jsxs4(HStack4, {
         gap: "xs",
         wrap: "wrap",
         children: [
-          /* @__PURE__ */ jsx4("span", {
+          /* @__PURE__ */ jsx5("span", {
             className: "text-muted-foreground text-sm",
             children: "Tags:"
           }),
-          uniqueTags.slice(0, 10).map((tag) => /* @__PURE__ */ jsxs3(Button, {
+          uniqueTags.slice(0, 10).map((tag) => /* @__PURE__ */ jsxs4(Button, {
             variant: filters.tags.includes(tag) ? "default" : "outline",
             size: "sm",
             onClick: () => toggleTag(tag),
@@ -855,7 +902,7 @@ function FeatureFiltersBar({
               tag
             ]
           }, tag)),
-          uniqueTags.length > 10 && /* @__PURE__ */ jsxs3("span", {
+          uniqueTags.length > 10 && /* @__PURE__ */ jsxs4("span", {
             className: "text-muted-foreground text-sm",
             children: [
               "+",
@@ -868,88 +915,219 @@ function FeatureFiltersBar({
     ]
   });
 }
-// src/presentation/features/molecules/FeatureCategoryHeader/FeatureCategoryHeader.tsx
-import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { ChevronDown, Boxes as Boxes2 } from "lucide-react";
-import { HStack as HStack4 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { StatusChip as StatusChip3 } from "@contractspec/lib.design-system";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/presentation/features/organisms/FeatureDataViewsList.tsx
+import { EntityCard as EntityCard2 } from "@contractspec/lib.design-system";
+import { Table } from "lucide-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 "use client";
-function FeatureCategoryHeader({
-  title,
-  count,
-  icon,
-  isCollapsed = false,
-  onToggle,
-  className
+function FeatureDataViewsList({
+  feature
 }) {
-  return /* @__PURE__ */ jsxs4("button", {
-    type: "button",
-    onClick: onToggle,
-    className: cn3("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),
+  if (!feature.dataViews?.length)
+    return null;
+  return /* @__PURE__ */ jsx6("div", {
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: feature.dataViews.map((view) => {
+      const spec = resolveSerializedDataViewSpec(view.key, view.version);
+      return /* @__PURE__ */ jsx6(EntityCard2, {
+        cardTitle: view.key,
+        cardSubtitle: `v${view.version}`,
+        footer: spec?.meta.description,
+        icon: /* @__PURE__ */ jsx6(Table, {
+          className: "h-4 w-4"
+        }),
+        href: `/features/${feature.meta.key}/dataviews/${view.key}`
+      }, view.key);
+    })
+  });
+}
+
+// src/presentation/features/organisms/FeatureDetail/FeatureDetail.tsx
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip as StatusChip4
+} from "@contractspec/lib.design-system";
+import { Box, HStack as HStack5, VStack as VStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import Link from "next/link";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+"use client";
+var stabilityTone2 = {
+  stable: "success",
+  beta: "warning",
+  experimental: "info",
+  deprecated: "danger"
+};
+function FeatureDetail({ feature, className }) {
+  const { meta, operations, events, presentations, capabilities } = feature;
+  const tone = stabilityTone2[meta.stability] ?? "neutral";
+  return /* @__PURE__ */ jsxs5(VStack2, {
+    gap: "lg",
+    className: cn4("w-full", className),
     children: [
-      /* @__PURE__ */ jsxs4(HStack4, {
+      /* @__PURE__ */ jsxs5(HStack5, {
         gap: "sm",
-        className: "items-center",
         children: [
-          /* @__PURE__ */ jsx5("div", {
-            className: "text-muted-foreground group-hover:text-foreground transition-colors",
-            children: icon || /* @__PURE__ */ jsx5(Boxes2, {
-              className: "h-5 w-5"
-            })
+          /* @__PURE__ */ jsx7(StatusChip4, {
+            tone,
+            label: meta.stability ?? "unknown"
           }),
-          /* @__PURE__ */ jsx5("span", {
-            className: "group-hover:text-primary text-lg font-semibold capitalize transition-colors",
-            children: title
+          /* @__PURE__ */ jsx7(StatusChip4, {
+            tone: "neutral",
+            label: meta.key,
+            size: "sm"
           }),
-          /* @__PURE__ */ jsx5(StatusChip3, {
+          /* @__PURE__ */ jsx7(StatusChip4, {
             tone: "neutral",
-            label: `${count} ${count === 1 ? "feature" : "features"}`,
+            label: `v${meta.version}`,
             size: "sm"
           })
         ]
       }),
-      /* @__PURE__ */ jsx5(ChevronDown, {
-        className: cn3("text-muted-foreground h-5 w-5 transition-transform duration-200", isCollapsed && "-rotate-90")
-      })
-    ]
-  });
-}
-// src/presentation/features/organisms/FeatureDiscovery/FeatureDiscovery.tsx
-import * as React2 from "react";
-import {
-  PageHeaderResponsive,
-  EmptyState,
-  Button as Button2,
-  StatusChip as StatusChip4
-} from "@contractspec/lib.design-system";
-import { VStack as VStack2, HStack as HStack5 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn4 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { LayoutGrid, List, Star } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-"use client";
-function groupFeaturesByDomain(features) {
-  const groups = {};
-  for (const feature of features) {
-    const domain = feature.meta.domain || "Other";
-    if (!groups[domain])
-      groups[domain] = [];
-    groups[domain].push(feature);
-  }
-  return groups;
-}
-function groupFeaturesByStability(features) {
-  const order = ["stable", "beta", "experimental", "deprecated", "unknown"];
-  const groups = {};
-  for (const feature of features) {
-    const stability = feature.meta.stability || "unknown";
-    if (!groups[stability])
-      groups[stability] = [];
-    groups[stability].push(feature);
-  }
-  const sorted = {};
-  for (const key of order) {
-    if (groups[key])
+      /* @__PURE__ */ jsxs5(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsx7(Link, {
+            href: `./${feature.meta.key}/operations`,
+            children: /* @__PURE__ */ jsx7(StatCard, {
+              label: "Operations",
+              value: operations?.length ?? 0
+            })
+          }),
+          /* @__PURE__ */ jsx7(Link, {
+            href: `./${feature.meta.key}/events`,
+            children: /* @__PURE__ */ jsx7(StatCard, {
+              label: "Events",
+              value: events?.length ?? 0
+            })
+          }),
+          /* @__PURE__ */ jsx7(Link, {
+            href: `./${feature.meta.key}/presentations`,
+            children: /* @__PURE__ */ jsx7(StatCard, {
+              label: "Presentations",
+              value: presentations?.length ?? 0
+            })
+          })
+        ]
+      }),
+      capabilities?.provides?.length ? /* @__PURE__ */ jsxs5(Box, {
+        className: "flex-col rounded-lg border p-4",
+        gap: "sm",
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsx7("span", {
+            className: "font-semibold",
+            children: "Provides Capabilities"
+          }),
+          /* @__PURE__ */ jsx7(HStack5, {
+            gap: "xs",
+            wrap: "wrap",
+            children: capabilities.provides.map((cap) => /* @__PURE__ */ jsx7(StatusChip4, {
+              tone: "success",
+              label: `${cap.key} v${cap.version}`,
+              size: "sm"
+            }, `${cap.key}-${cap.version}`))
+          })
+        ]
+      }) : null,
+      capabilities?.requires?.length ? /* @__PURE__ */ jsxs5(Box, {
+        className: "flex-col rounded-lg border p-4",
+        gap: "sm",
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsx7("span", {
+            className: "font-semibold",
+            children: "Requires Capabilities"
+          }),
+          /* @__PURE__ */ jsx7(HStack5, {
+            gap: "xs",
+            wrap: "wrap",
+            children: capabilities.requires.map((req) => /* @__PURE__ */ jsx7(StatusChip4, {
+              tone: "info",
+              label: `${req.key}${req.version ? ` v${req.version}` : ""}${req.optional ? " (optional)" : ""}`,
+              size: "sm"
+            }, req.key))
+          })
+        ]
+      }) : null,
+      meta.tags?.length ? /* @__PURE__ */ jsxs5(Box, {
+        className: "flex-col rounded-lg border p-4",
+        gap: "sm",
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsx7("span", {
+            className: "font-semibold",
+            children: "Tags"
+          }),
+          /* @__PURE__ */ jsx7(HStack5, {
+            gap: "xs",
+            wrap: "wrap",
+            children: meta.tags.map((tag) => /* @__PURE__ */ jsx7(StatusChip4, {
+              tone: "neutral",
+              label: `#${tag}`,
+              size: "sm"
+            }, tag))
+          })
+        ]
+      }) : null,
+      meta.owners?.length ? /* @__PURE__ */ jsxs5(Box, {
+        className: "flex-col rounded-lg border p-4",
+        gap: "sm",
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsx7("span", {
+            className: "font-semibold",
+            children: "Owners"
+          }),
+          /* @__PURE__ */ jsx7(HStack5, {
+            gap: "xs",
+            wrap: "wrap",
+            children: meta.owners.map((owner) => /* @__PURE__ */ jsx7(StatusChip4, {
+              tone: "neutral",
+              label: owner,
+              size: "sm"
+            }, owner))
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+// src/presentation/features/organisms/FeatureDiscovery/FeatureDiscovery.tsx
+import {
+  Button as Button2,
+  EmptyState,
+  PageHeaderResponsive,
+  StatusChip as StatusChip5
+} from "@contractspec/lib.design-system";
+import { HStack as HStack6, VStack as VStack3 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { LayoutGrid, List, Star } from "lucide-react";
+import * as React2 from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+"use client";
+function groupFeaturesByDomain(features) {
+  const groups = {};
+  for (const feature of features) {
+    const domain = feature.meta.domain || "Other";
+    if (!groups[domain])
+      groups[domain] = [];
+    groups[domain].push(feature);
+  }
+  return groups;
+}
+function groupFeaturesByStability(features) {
+  const order = ["stable", "beta", "experimental", "deprecated", "unknown"];
+  const groups = {};
+  for (const feature of features) {
+    const stability = feature.meta.stability || "unknown";
+    if (!groups[stability])
+      groups[stability] = [];
+    groups[stability].push(feature);
+  }
+  const sorted = {};
+  for (const key of order) {
+    if (groups[key])
       sorted[key] = groups[key];
   }
   return sorted;
@@ -996,42 +1174,42 @@ function FeatureDiscovery({
     });
   };
   const gridClasses = viewMode === "grid" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" : "flex flex-col gap-3";
-  const renderFeatureCards = (featureList) => /* @__PURE__ */ jsx6("div", {
+  const renderFeatureCards = (featureList) => /* @__PURE__ */ jsx8("div", {
     className: gridClasses,
-    children: featureList.map((feature) => /* @__PURE__ */ jsx6(FeatureCard, {
+    children: featureList.map((feature) => /* @__PURE__ */ jsx8(FeatureCard, {
       feature,
       onSelect: onSelectFeature
     }, feature.meta.key))
   });
-  return /* @__PURE__ */ jsxs5(VStack2, {
+  return /* @__PURE__ */ jsxs6(VStack3, {
     gap: "lg",
-    className: cn4("w-full p-6", className),
+    className: cn5("w-full p-6", className),
     children: [
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
         children: [
-          /* @__PURE__ */ jsx6(PageHeaderResponsive, {
+          /* @__PURE__ */ jsx8(PageHeaderResponsive, {
             title: "Feature Discovery",
             subtitle: `Browse ${features.length} available ContractSpec features`
           }),
-          /* @__PURE__ */ jsxs5(HStack5, {
+          /* @__PURE__ */ jsxs6(HStack6, {
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsx6("button", {
+              /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: () => setViewMode("grid"),
-                className: cn4("rounded-md p-2 transition-colors", viewMode === "grid" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80 text-muted-foreground"),
+                className: cn5("rounded-md p-2 transition-colors", viewMode === "grid" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"),
                 "aria-label": "Grid view",
-                children: /* @__PURE__ */ jsx6(LayoutGrid, {
+                children: /* @__PURE__ */ jsx8(LayoutGrid, {
                   className: "h-4 w-4"
                 })
               }),
-              /* @__PURE__ */ jsx6("button", {
+              /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: () => setViewMode("list"),
-                className: cn4("rounded-md p-2 transition-colors", viewMode === "list" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80 text-muted-foreground"),
+                className: cn5("rounded-md p-2 transition-colors", viewMode === "list" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"),
                 "aria-label": "List view",
-                children: /* @__PURE__ */ jsx6(List, {
+                children: /* @__PURE__ */ jsx8(List, {
                   className: "h-4 w-4"
                 })
               })
@@ -1039,7 +1217,7 @@ function FeatureDiscovery({
           })
         ]
       }),
-      /* @__PURE__ */ jsx6(FeatureFiltersBar, {
+      /* @__PURE__ */ jsx8(FeatureFiltersBar, {
         uniqueTags,
         uniqueStabilities,
         filters,
@@ -1049,32 +1227,32 @@ function FeatureDiscovery({
         clearFilters,
         hasActiveFilters
       }),
-      filteredFeatures.length === 0 ? /* @__PURE__ */ jsx6(EmptyState, {
+      filteredFeatures.length === 0 ? /* @__PURE__ */ jsx8(EmptyState, {
         title: "No features found",
         description: hasActiveFilters ? "Try adjusting your search or filters" : "No features are registered yet",
-        primaryAction: hasActiveFilters ? /* @__PURE__ */ jsx6(Button2, {
+        primaryAction: hasActiveFilters ? /* @__PURE__ */ jsx8(Button2, {
           variant: "outline",
           onClick: clearFilters,
           children: "Clear filters"
         }) : undefined
-      }) : /* @__PURE__ */ jsxs5(VStack2, {
+      }) : /* @__PURE__ */ jsxs6(VStack3, {
         gap: "lg",
         children: [
-          showFeatured && featuredFeatures.length > 0 && /* @__PURE__ */ jsxs5(VStack2, {
+          showFeatured && featuredFeatures.length > 0 && /* @__PURE__ */ jsxs6(VStack3, {
             gap: "sm",
             children: [
-              /* @__PURE__ */ jsxs5(HStack5, {
+              /* @__PURE__ */ jsxs6(HStack6, {
                 gap: "sm",
                 className: "items-center",
                 children: [
-                  /* @__PURE__ */ jsx6(Star, {
+                  /* @__PURE__ */ jsx8(Star, {
                     className: "h-5 w-5 fill-amber-500 text-amber-500"
                   }),
-                  /* @__PURE__ */ jsx6("span", {
-                    className: "text-lg font-semibold",
+                  /* @__PURE__ */ jsx8("span", {
+                    className: "font-semibold text-lg",
                     children: "Featured"
                   }),
-                  /* @__PURE__ */ jsx6(StatusChip4, {
+                  /* @__PURE__ */ jsx8(StatusChip5, {
                     tone: "success",
                     label: `${featuredFeatures.length} stable`,
                     size: "sm"
@@ -1084,12 +1262,12 @@ function FeatureDiscovery({
               renderFeatureCards(featuredFeatures)
             ]
           }),
-          groupedFeatures ? /* @__PURE__ */ jsx6(VStack2, {
+          groupedFeatures ? /* @__PURE__ */ jsx8(VStack3, {
             gap: "md",
-            children: Object.entries(groupedFeatures).map(([group, groupFeatures]) => /* @__PURE__ */ jsxs5(VStack2, {
+            children: Object.entries(groupedFeatures).map(([group, groupFeatures]) => /* @__PURE__ */ jsxs6(VStack3, {
               gap: "sm",
               children: [
-                /* @__PURE__ */ jsx6(FeatureCategoryHeader, {
+                /* @__PURE__ */ jsx8(FeatureCategoryHeader, {
                   title: group,
                   count: groupFeatures.length,
                   isCollapsed: collapsedGroups.has(group),
@@ -1104,322 +1282,414 @@ function FeatureDiscovery({
     ]
   });
 }
-// src/presentation/features/organisms/FeatureDetail/FeatureDetail.tsx
+// src/presentation/features/organisms/FeatureEventsList.tsx
+import { EntityCard as EntityCard3 } from "@contractspec/lib.design-system";
+import { Radio as Radio3 } from "lucide-react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+"use client";
+function FeatureEventsList({ feature }) {
+  if (!feature.events?.length)
+    return null;
+  return /* @__PURE__ */ jsx9("div", {
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: feature.events.map((ev) => {
+      const spec = resolveSerializedEventSpec(ev.key, ev.version);
+      return /* @__PURE__ */ jsx9(EntityCard3, {
+        cardTitle: ev.key,
+        cardSubtitle: `v${ev.version}`,
+        footer: spec?.meta.description,
+        icon: /* @__PURE__ */ jsx9(Radio3, {
+          className: "h-4 w-4"
+        }),
+        href: `/features/${feature.meta.key}/events/${ev.key}`
+      }, ev.key);
+    })
+  });
+}
+
+// src/presentation/features/organisms/FeatureFormsList.tsx
+import { EntityCard as EntityCard4 } from "@contractspec/lib.design-system";
+import { FormInput } from "lucide-react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+"use client";
+function FeatureFormsList({ feature }) {
+  if (!feature.forms?.length)
+    return null;
+  return /* @__PURE__ */ jsx10("div", {
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: feature.forms.map((form) => {
+      const spec = resolveSerializedFormSpec(form.key, form.version);
+      return /* @__PURE__ */ jsx10(EntityCard4, {
+        cardTitle: form.key,
+        cardSubtitle: form.version ? `v${form.version}` : undefined,
+        footer: spec?.meta.description,
+        icon: /* @__PURE__ */ jsx10(FormInput, {
+          className: "h-4 w-4"
+        }),
+        href: `/features/${feature.meta.key}/forms/${form.key}`
+      }, form.key);
+    })
+  });
+}
+
+// src/presentation/features/organisms/FeatureOperationsList.tsx
+import { EntityCard as EntityCard5 } from "@contractspec/lib.design-system";
+import { Zap as Zap3 } from "lucide-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+"use client";
+function FeatureOperationsList({
+  feature
+}) {
+  if (!feature.operations?.length)
+    return null;
+  return /* @__PURE__ */ jsx11("div", {
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: feature.operations.map((op) => {
+      const spec = resolveSerializedOperationSpec(op.key, op.version);
+      return /* @__PURE__ */ jsx11(EntityCard5, {
+        cardTitle: op.key,
+        cardSubtitle: `v${op.version}`,
+        footer: spec?.meta.description,
+        icon: /* @__PURE__ */ jsx11(Zap3, {
+          className: "h-4 w-4"
+        }),
+        href: `/features/${feature.meta.key}/operations/${op.key}`
+      }, op.key);
+    })
+  });
+}
+
+// src/presentation/features/organisms/FeaturePresentationsList.tsx
+import { EntityCard as EntityCard6 } from "@contractspec/lib.design-system";
+import { Layout as Layout4 } from "lucide-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+"use client";
+function FeaturePresentationsList({
+  feature
+}) {
+  if (!feature.presentations?.length)
+    return null;
+  return /* @__PURE__ */ jsx12("div", {
+    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: feature.presentations.map((pres) => {
+      const spec = resolveSerializedPresentationSpec(pres.key, pres.version);
+      return /* @__PURE__ */ jsx12(EntityCard6, {
+        cardTitle: pres.key,
+        cardSubtitle: `v${pres.version}`,
+        footer: spec?.meta.description,
+        icon: /* @__PURE__ */ jsx12(Layout4, {
+          className: "h-4 w-4"
+        }),
+        href: `/features/${feature.meta.key}/presentations/${pres.key}`
+      }, pres.key);
+    })
+  });
+}
+
+// src/presentation/features/templates/FeatureDataViewDetailTemplate/FeatureDataViewDetailTemplate.tsx
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip as StatusChip5
+  Breadcrumbs,
+  CodeBlock,
+  EmptyState as EmptyState2,
+  PageHeaderResponsive as PageHeaderResponsive2,
+  StatusChip as StatusChip6
 } from "@contractspec/lib.design-system";
-import { Box, HStack as HStack6, VStack as VStack3 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn5 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import Link from "next/link";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Box as Box2, HStack as HStack7, VStack as VStack4 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn6 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { BookOpen, Code, Database as Database2, Table as Table2 } from "lucide-react";
+import Link2 from "next/link";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 "use client";
-var stabilityTone2 = {
-  stable: "success",
-  beta: "warning",
-  experimental: "info",
-  deprecated: "danger"
-};
-function FeatureDetail({ feature, className }) {
-  const { meta, operations, events, presentations, capabilities } = feature;
-  const tone = stabilityTone2[meta.stability] ?? "neutral";
-  return /* @__PURE__ */ jsxs6(VStack3, {
+function FeatureDataViewDetailTemplate({
+  feature,
+  viewKey,
+  view,
+  spec,
+  className
+}) {
+  const viewRef = view ?? feature.dataViews?.find((v) => v.key === viewKey);
+  const relatedDocs = useRelatedDocs(viewRef?.key || "", spec?.meta?.tags);
+  if (!viewRef) {
+    return /* @__PURE__ */ jsxs7(VStack4, {
+      gap: "lg",
+      className: cn6("mx-auto w-full max-w-5xl p-6", className),
+      children: [
+        /* @__PURE__ */ jsx13(PageHeaderResponsive2, {
+          title: "Data View Not Found",
+          subtitle: `Data View ${viewKey} not found in feature ${feature.meta.key}`,
+          breadcrumb: /* @__PURE__ */ jsx13(Breadcrumbs, {
+            items: [
+              { label: "Features", href: "/features" },
+              {
+                label: feature.meta.title || feature.meta.key,
+                href: `/features/${feature.meta.key}`
+              },
+              { label: "Data Views" }
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsx13(EmptyState2, {
+          title: "Data View not found",
+          description: `The data view '${viewKey}' could not be found in this feature.`,
+          icon: /* @__PURE__ */ jsx13(Table2, {
+            className: "h-12 w-12 text-muted-foreground"
+          })
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs7(VStack4, {
     gap: "lg",
-    className: cn5("w-full", className),
+    className: cn6("mx-auto w-full max-w-5xl p-6", className),
     children: [
-      /* @__PURE__ */ jsxs6(HStack6, {
+      /* @__PURE__ */ jsx13(PageHeaderResponsive2, {
+        title: viewRef.key,
+        subtitle: `Data View defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx13(Breadcrumbs, {
+          items: [
+            { label: "Features", href: "/features" },
+            {
+              label: feature.meta.title || feature.meta.key,
+              href: `/features/${feature.meta.key}`
+            },
+            {
+              label: "Data Views",
+              href: `/features/${feature.meta.key}#dataviews`
+            },
+            { label: viewRef.key }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsxs7(HStack7, {
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx7(StatusChip5, {
-            tone,
-            label: meta.stability ?? "unknown"
+          /* @__PURE__ */ jsx13(StatusChip6, {
+            tone: "neutral",
+            label: viewRef.key,
+            size: "sm",
+            icon: /* @__PURE__ */ jsx13(Table2, {
+              className: "h-3 w-3"
+            })
           }),
-          /* @__PURE__ */ jsx7(StatusChip5, {
+          /* @__PURE__ */ jsx13(StatusChip6, {
             tone: "neutral",
-            label: meta.key,
+            label: `v${viewRef.version}`,
             size: "sm"
           }),
-          /* @__PURE__ */ jsx7(StatusChip5, {
-            tone: "neutral",
-            label: `v${meta.version}`,
+          spec?.meta?.stability ? /* @__PURE__ */ jsx13(StatusChip6, {
+            tone: spec.meta.stability === "stable" ? "success" : "warning",
+            label: spec.meta.stability,
             size: "sm"
-          })
+          }) : null
         ]
       }),
-      /* @__PURE__ */ jsxs6(StatCardGroup, {
+      /* @__PURE__ */ jsxs7("div", {
+        className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
         children: [
-          /* @__PURE__ */ jsx7(Link, {
-            href: `./${feature.meta.key}/operations`,
-            children: /* @__PURE__ */ jsx7(StatCard, {
-              label: "Operations",
-              value: operations?.length ?? 0
-            })
-          }),
-          /* @__PURE__ */ jsx7(Link, {
-            href: `./${feature.meta.key}/events`,
-            children: /* @__PURE__ */ jsx7(StatCard, {
-              label: "Events",
-              value: events?.length ?? 0
+          /* @__PURE__ */ jsx13("div", {
+            className: "space-y-6 lg:col-span-2",
+            children: /* @__PURE__ */ jsx13(Card, {
+              className: "p-6",
+              children: /* @__PURE__ */ jsxs7(VStack4, {
+                gap: "md",
+                children: [
+                  /* @__PURE__ */ jsxs7(HStack7, {
+                    className: "items-center gap-2 border-b pb-2",
+                    children: [
+                      /* @__PURE__ */ jsx13(Code, {
+                        className: "h-5 w-5 text-muted-foreground"
+                      }),
+                      /* @__PURE__ */ jsx13("h3", {
+                        className: "font-semibold text-lg",
+                        children: "View Definition"
+                      })
+                    ]
+                  }),
+                  spec ? /* @__PURE__ */ jsxs7(VStack4, {
+                    gap: "lg",
+                    children: [
+                      spec.meta.description && /* @__PURE__ */ jsx13("p", {
+                        className: "text-muted-foreground",
+                        children: spec.meta.description
+                      }),
+                      /* @__PURE__ */ jsxs7(Box2, {
+                        className: "flex-col gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx13("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Source Query"
+                          }),
+                          /* @__PURE__ */ jsx13(CodeBlock, {
+                            code: JSON.stringify(spec.source, null, 2),
+                            language: "json"
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs7(Box2, {
+                        className: "flex-col gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx13("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "View Configuration"
+                          }),
+                          /* @__PURE__ */ jsx13(CodeBlock, {
+                            code: JSON.stringify(spec.view, null, 2),
+                            language: "json"
+                          })
+                        ]
+                      })
+                    ]
+                  }) : /* @__PURE__ */ jsxs7(VStack4, {
+                    gap: "md",
+                    children: [
+                      /* @__PURE__ */ jsx13("p", {
+                        className: "text-muted-foreground",
+                        children: "Full definition details are not available for this data view reference."
+                      }),
+                      /* @__PURE__ */ jsx13(CodeBlock, {
+                        code: JSON.stringify(viewRef, null, 2),
+                        language: "json"
+                      })
+                    ]
+                  })
+                ]
+              })
             })
           }),
-          /* @__PURE__ */ jsx7(Link, {
-            href: `./${feature.meta.key}/presentations`,
-            children: /* @__PURE__ */ jsx7(StatCard, {
-              label: "Presentations",
-              value: presentations?.length ?? 0
+          /* @__PURE__ */ jsx13("div", {
+            className: "space-y-6",
+            children: /* @__PURE__ */ jsx13(Card, {
+              className: "p-6",
+              children: /* @__PURE__ */ jsxs7(VStack4, {
+                gap: "md",
+                children: [
+                  /* @__PURE__ */ jsxs7(HStack7, {
+                    className: "items-center gap-2 border-b pb-2",
+                    children: [
+                      /* @__PURE__ */ jsx13(Database2, {
+                        className: "h-5 w-5 text-muted-foreground"
+                      }),
+                      /* @__PURE__ */ jsx13("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Metadata"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs7("dl", {
+                    className: "grid grid-cols-1 gap-4 text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxs7("div", {
+                        children: [
+                          /* @__PURE__ */ jsx13("dt", {
+                            className: "text-muted-foreground",
+                            children: "Key"
+                          }),
+                          /* @__PURE__ */ jsx13("dd", {
+                            className: "truncate font-medium",
+                            children: viewRef.key
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs7("div", {
+                        children: [
+                          /* @__PURE__ */ jsx13("dt", {
+                            className: "text-muted-foreground",
+                            children: "Version"
+                          }),
+                          /* @__PURE__ */ jsx13("dd", {
+                            className: "font-medium",
+                            children: viewRef.version
+                          })
+                        ]
+                      }),
+                      spec?.meta?.owners && /* @__PURE__ */ jsxs7("div", {
+                        children: [
+                          /* @__PURE__ */ jsx13("dt", {
+                            className: "text-muted-foreground",
+                            children: "Owners"
+                          }),
+                          /* @__PURE__ */ jsx13("dd", {
+                            className: "flex flex-wrap gap-1 font-medium",
+                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx13(StatusChip6, {
+                              label: o,
+                              size: "sm",
+                              tone: "neutral"
+                            }, o))
+                          })
+                        ]
+                      }),
+                      spec?.meta?.tags && /* @__PURE__ */ jsxs7("div", {
+                        children: [
+                          /* @__PURE__ */ jsx13("dt", {
+                            className: "text-muted-foreground",
+                            children: "Tags"
+                          }),
+                          /* @__PURE__ */ jsx13("dd", {
+                            className: "flex flex-wrap gap-1 font-medium",
+                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx13(StatusChip6, {
+                              label: `#${t}`,
+                              size: "sm",
+                              tone: "neutral"
+                            }, t))
+                          })
+                        ]
+                      })
+                    ]
+                  })
+                ]
+              })
             })
-          })
-        ]
-      }),
-      capabilities?.provides?.length ? /* @__PURE__ */ jsxs6(Box, {
-        className: "flex-col rounded-lg border p-4",
-        gap: "sm",
-        align: "start",
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            className: "font-semibold",
-            children: "Provides Capabilities"
           }),
-          /* @__PURE__ */ jsx7(HStack6, {
-            gap: "xs",
-            wrap: "wrap",
-            children: capabilities.provides.map((cap) => /* @__PURE__ */ jsx7(StatusChip5, {
-              tone: "success",
-              label: `${cap.key} v${cap.version}`,
-              size: "sm"
-            }, `${cap.key}-${cap.version}`))
-          })
-        ]
-      }) : null,
-      capabilities?.requires?.length ? /* @__PURE__ */ jsxs6(Box, {
-        className: "flex-col rounded-lg border p-4",
-        gap: "sm",
-        align: "start",
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            className: "font-semibold",
-            children: "Requires Capabilities"
-          }),
-          /* @__PURE__ */ jsx7(HStack6, {
-            gap: "xs",
-            wrap: "wrap",
-            children: capabilities.requires.map((req) => /* @__PURE__ */ jsx7(StatusChip5, {
-              tone: "info",
-              label: `${req.key}${req.version ? ` v${req.version}` : ""}${req.optional ? " (optional)" : ""}`,
-              size: "sm"
-            }, req.key))
-          })
-        ]
-      }) : null,
-      meta.tags?.length ? /* @__PURE__ */ jsxs6(Box, {
-        className: "flex-col rounded-lg border p-4",
-        gap: "sm",
-        align: "start",
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            className: "font-semibold",
-            children: "Tags"
-          }),
-          /* @__PURE__ */ jsx7(HStack6, {
-            gap: "xs",
-            wrap: "wrap",
-            children: meta.tags.map((tag) => /* @__PURE__ */ jsx7(StatusChip5, {
-              tone: "neutral",
-              label: `#${tag}`,
-              size: "sm"
-            }, tag))
-          })
-        ]
-      }) : null,
-      meta.owners?.length ? /* @__PURE__ */ jsxs6(Box, {
-        className: "flex-col rounded-lg border p-4",
-        gap: "sm",
-        align: "start",
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            className: "font-semibold",
-            children: "Owners"
-          }),
-          /* @__PURE__ */ jsx7(HStack6, {
-            gap: "xs",
-            wrap: "wrap",
-            children: meta.owners.map((owner) => /* @__PURE__ */ jsx7(StatusChip5, {
-              tone: "neutral",
-              label: owner,
-              size: "sm"
-            }, owner))
-          })
-        ]
-      }) : null
-    ]
-  });
-}
-// src/presentation/features/organisms/FeatureOperationsList.tsx
-import { EntityCard as EntityCard2 } from "@contractspec/lib.design-system";
-import { Zap as Zap3 } from "lucide-react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-"use client";
-function FeatureOperationsList({
-  feature
-}) {
-  if (!feature.operations?.length)
-    return null;
-  return /* @__PURE__ */ jsx8("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-    children: feature.operations.map((op) => {
-      const spec = resolveSerializedOperationSpec(op.key, op.version);
-      return /* @__PURE__ */ jsx8(EntityCard2, {
-        cardTitle: op.key,
-        cardSubtitle: `v${op.version}`,
-        footer: spec?.meta.description,
-        icon: /* @__PURE__ */ jsx8(Zap3, {
-          className: "h-4 w-4"
-        }),
-        href: `/features/${feature.meta.key}/operations/${op.key}`
-      }, op.key);
-    })
-  });
-}
-
-// src/presentation/features/organisms/FeatureEventsList.tsx
-import { EntityCard as EntityCard3 } from "@contractspec/lib.design-system";
-import { Radio as Radio3 } from "lucide-react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-"use client";
-function FeatureEventsList({ feature }) {
-  if (!feature.events?.length)
-    return null;
-  return /* @__PURE__ */ jsx9("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-    children: feature.events.map((ev) => {
-      const spec = resolveSerializedEventSpec(ev.key, ev.version);
-      return /* @__PURE__ */ jsx9(EntityCard3, {
-        cardTitle: ev.key,
-        cardSubtitle: `v${ev.version}`,
-        footer: spec?.meta.description,
-        icon: /* @__PURE__ */ jsx9(Radio3, {
-          className: "h-4 w-4"
-        }),
-        href: `/features/${feature.meta.key}/events/${ev.key}`
-      }, ev.key);
-    })
-  });
-}
-
-// src/presentation/features/organisms/FeaturePresentationsList.tsx
-import { EntityCard as EntityCard4 } from "@contractspec/lib.design-system";
-import { Layout as Layout4 } from "lucide-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-"use client";
-function FeaturePresentationsList({
-  feature
-}) {
-  if (!feature.presentations?.length)
-    return null;
-  return /* @__PURE__ */ jsx10("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-    children: feature.presentations.map((pres) => {
-      const spec = resolveSerializedPresentationSpec(pres.key, pres.version);
-      return /* @__PURE__ */ jsx10(EntityCard4, {
-        cardTitle: pres.key,
-        cardSubtitle: `v${pres.version}`,
-        footer: spec?.meta.description,
-        icon: /* @__PURE__ */ jsx10(Layout4, {
-          className: "h-4 w-4"
-        }),
-        href: `/features/${feature.meta.key}/presentations/${pres.key}`
-      }, pres.key);
-    })
-  });
-}
-
-// src/presentation/features/organisms/FeatureDataViewsList.tsx
-import { EntityCard as EntityCard5 } from "@contractspec/lib.design-system";
-import { Table } from "lucide-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-"use client";
-function FeatureDataViewsList({
-  feature
-}) {
-  if (!feature.dataViews?.length)
-    return null;
-  return /* @__PURE__ */ jsx11("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-    children: feature.dataViews.map((view) => {
-      const spec = resolveSerializedDataViewSpec(view.key, view.version);
-      return /* @__PURE__ */ jsx11(EntityCard5, {
-        cardTitle: view.key,
-        cardSubtitle: `v${view.version}`,
-        footer: spec?.meta.description,
-        icon: /* @__PURE__ */ jsx11(Table, {
-          className: "h-4 w-4"
-        }),
-        href: `/features/${feature.meta.key}/dataviews/${view.key}`
-      }, view.key);
-    })
-  });
-}
-
-// src/presentation/features/organisms/FeatureFormsList.tsx
-import { EntityCard as EntityCard6 } from "@contractspec/lib.design-system";
-import { FormInput } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-"use client";
-function FeatureFormsList({ feature }) {
-  if (!feature.forms?.length)
-    return null;
-  return /* @__PURE__ */ jsx12("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-    children: feature.forms.map((form) => {
-      const spec = resolveSerializedFormSpec(form.key, form.version);
-      return /* @__PURE__ */ jsx12(EntityCard6, {
-        cardTitle: form.key,
-        cardSubtitle: form.version ? `v${form.version}` : undefined,
-        footer: spec?.meta.description,
-        icon: /* @__PURE__ */ jsx12(FormInput, {
-          className: "h-4 w-4"
-        }),
-        href: `/features/${feature.meta.key}/forms/${form.key}`
-      }, form.key);
-    })
-  });
-}
-
-// src/presentation/features/templates/FeatureOverviewTemplate/FeatureOverviewTemplate.tsx
-import {
-  PageHeaderResponsive as PageHeaderResponsive2,
-  Breadcrumbs
-} from "@contractspec/lib.design-system";
-import { VStack as VStack4 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn6 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-"use client";
-function FeatureOverviewTemplate({
-  feature,
-  className
-}) {
-  return /* @__PURE__ */ jsxs7(VStack4, {
-    gap: "lg",
-    className: cn6("mx-auto w-full max-w-5xl p-6", className),
-    children: [
-      /* @__PURE__ */ jsx13(PageHeaderResponsive2, {
-        title: feature.meta.title || feature.meta.key,
-        subtitle: feature.meta.description || "Feature overview",
-        breadcrumb: /* @__PURE__ */ jsx13(Breadcrumbs, {
-          items: [
-            { label: "Features", href: "/features" },
-            { label: feature.meta.title || feature.meta.key }
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx13(FeatureDetail, {
-        feature
+          relatedDocs?.length ? /* @__PURE__ */ jsx13("div", {
+            className: "lg:col-span-3",
+            children: /* @__PURE__ */ jsx13(Card, {
+              className: "p-6",
+              children: /* @__PURE__ */ jsxs7(VStack4, {
+                gap: "md",
+                children: [
+                  /* @__PURE__ */ jsxs7(HStack7, {
+                    className: "items-center gap-2 border-b pb-2",
+                    children: [
+                      /* @__PURE__ */ jsx13(BookOpen, {
+                        className: "h-5 w-5 text-muted-foreground"
+                      }),
+                      /* @__PURE__ */ jsx13("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Related Documentation"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx13("div", {
+                    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx13(Link2, {
+                      href: doc.route || `/docs/${doc.id}`,
+                      className: "group block",
+                      children: /* @__PURE__ */ jsxs7("div", {
+                        className: "h-full rounded-lg border p-4 transition-colors hover:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx13("h4", {
+                            className: "mb-1 font-semibold group-hover:text-primary",
+                            children: doc.title
+                          }),
+                          doc.summary && /* @__PURE__ */ jsx13("p", {
+                            className: "line-clamp-2 text-muted-foreground text-sm",
+                            children: doc.summary
+                          })
+                        ]
+                      })
+                    }, doc.id))
+                  })
+                ]
+              })
+            })
+          }) : null
+        ]
       })
     ]
   });
 }
-// src/presentation/features/templates/FeatureOperationsTemplate/FeatureOperationsTemplate.tsx
+// src/presentation/features/templates/FeatureDataViewsTemplate/FeatureDataViewsTemplate.tsx
 import {
   Breadcrumbs as Breadcrumbs2,
   PageHeaderResponsive as PageHeaderResponsive3
@@ -1428,7 +1698,7 @@ import { VStack as VStack5 } from "@contractspec/lib.ui-kit-web/ui/stack";
 import { cn as cn7 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 "use client";
-function FeatureOperationsTemplate({
+function FeatureDataViewsTemplate({
   feature,
   className
 }) {
@@ -1437,8 +1707,8 @@ function FeatureOperationsTemplate({
     className: cn7("mx-auto w-full max-w-5xl p-6", className),
     children: [
       /* @__PURE__ */ jsx14(PageHeaderResponsive3, {
-        title: "Operations",
-        subtitle: `Operations defined in ${feature.meta.title ?? feature.meta.key}`,
+        title: "Data Views",
+        subtitle: `Data views defined in ${feature.meta.title ?? feature.meta.key}`,
         breadcrumb: /* @__PURE__ */ jsx14(Breadcrumbs2, {
           items: [
             { label: "Features", href: "/features" },
@@ -1446,328 +1716,166 @@ function FeatureOperationsTemplate({
               label: feature.meta.title || feature.meta.key,
               href: `/features/${feature.meta.key}`
             },
-            { label: "Operations" }
+            { label: "Data Views" }
           ]
         })
       }),
-      /* @__PURE__ */ jsx14(FeatureOperationsList, {
+      /* @__PURE__ */ jsx14(FeatureDataViewsList, {
         feature
       })
     ]
   });
 }
-// src/presentation/features/templates/FeatureEventsTemplate/FeatureEventsTemplate.tsx
+// src/presentation/features/templates/FeatureEventDetailTemplate/FeatureEventDetailTemplate.tsx
 import {
   Breadcrumbs as Breadcrumbs3,
-  PageHeaderResponsive as PageHeaderResponsive4
+  CodeBlock as CodeBlock2,
+  EmptyState as EmptyState3,
+  PageHeaderResponsive as PageHeaderResponsive4,
+  StatusChip as StatusChip7
 } from "@contractspec/lib.design-system";
-import { VStack as VStack6 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Card as Card2 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Box as Box3, HStack as HStack8, VStack as VStack6 } from "@contractspec/lib.ui-kit-web/ui/stack";
 import { cn as cn8 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { BookOpen as BookOpen2, Code as Code2, Database as Database3, Radio as Radio4 } from "lucide-react";
+import Link3 from "next/link";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 "use client";
-function FeatureEventsTemplate({
-  feature,
-  className
-}) {
-  return /* @__PURE__ */ jsxs9(VStack6, {
-    gap: "lg",
-    className: cn8("mx-auto w-full max-w-5xl p-6", className),
-    children: [
-      /* @__PURE__ */ jsx15(PageHeaderResponsive4, {
-        title: "Events",
-        subtitle: `Events defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx15(Breadcrumbs3, {
-          items: [
-            { label: "Features", href: "/features" },
-            {
-              label: feature.meta.title || feature.meta.key,
-              href: `/features/${feature.meta.key}`
-            },
-            { label: "Events" }
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx15(FeatureEventsList, {
-        feature
-      })
-    ]
-  });
-}
-// src/presentation/features/templates/FeaturePresentationsTemplate/FeaturePresentationsTemplate.tsx
-import {
-  Breadcrumbs as Breadcrumbs4,
-  PageHeaderResponsive as PageHeaderResponsive5
-} from "@contractspec/lib.design-system";
-import { VStack as VStack7 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn9 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-"use client";
-function FeaturePresentationsTemplate({
-  feature,
-  className
-}) {
-  return /* @__PURE__ */ jsxs10(VStack7, {
-    gap: "lg",
-    className: cn9("mx-auto w-full max-w-5xl p-6", className),
-    children: [
-      /* @__PURE__ */ jsx16(PageHeaderResponsive5, {
-        title: "Presentations",
-        subtitle: `Presentations defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx16(Breadcrumbs4, {
-          items: [
-            { label: "Features", href: "/features" },
-            {
-              label: feature.meta.title || feature.meta.key,
-              href: `/features/${feature.meta.key}`
-            },
-            { label: "Presentations" }
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx16(FeaturePresentationsList, {
-        feature
-      })
-    ]
-  });
-}
-// src/presentation/features/templates/FeatureDataViewsTemplate/FeatureDataViewsTemplate.tsx
-import {
-  PageHeaderResponsive as PageHeaderResponsive6,
-  Breadcrumbs as Breadcrumbs5
-} from "@contractspec/lib.design-system";
-import { VStack as VStack8 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn10 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-"use client";
-function FeatureDataViewsTemplate({
-  feature,
-  className
-}) {
-  return /* @__PURE__ */ jsxs11(VStack8, {
-    gap: "lg",
-    className: cn10("mx-auto w-full max-w-5xl p-6", className),
-    children: [
-      /* @__PURE__ */ jsx17(PageHeaderResponsive6, {
-        title: "Data Views",
-        subtitle: `Data views defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx17(Breadcrumbs5, {
-          items: [
-            { label: "Features", href: "/features" },
-            {
-              label: feature.meta.title || feature.meta.key,
-              href: `/features/${feature.meta.key}`
-            },
-            { label: "Data Views" }
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx17(FeatureDataViewsList, {
-        feature
-      })
-    ]
-  });
-}
-// src/presentation/features/templates/FeatureFormsTemplate/FeatureFormsTemplate.tsx
-import {
-  PageHeaderResponsive as PageHeaderResponsive7,
-  Breadcrumbs as Breadcrumbs6
-} from "@contractspec/lib.design-system";
-import { VStack as VStack9 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn11 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-"use client";
-function FeatureFormsTemplate({
-  feature,
-  className
-}) {
-  return /* @__PURE__ */ jsxs12(VStack9, {
-    gap: "lg",
-    className: cn11("mx-auto w-full max-w-5xl p-6", className),
-    children: [
-      /* @__PURE__ */ jsx18(PageHeaderResponsive7, {
-        title: "Forms",
-        subtitle: `Forms defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx18(Breadcrumbs6, {
-          items: [
-            { label: "Features", href: "/features" },
-            {
-              label: feature.meta.title || feature.meta.key,
-              href: `/features/${feature.meta.key}`
-            },
-            { label: "Forms" }
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx18(FeatureFormsList, {
-        feature
-      })
-    ]
-  });
-}
-// src/presentation/features/templates/FeatureOperationDetailTemplate/FeatureOperationDetailTemplate.tsx
-import {
-  Breadcrumbs as Breadcrumbs7,
-  CodeBlock,
-  EmptyState as EmptyState2,
-  PageHeaderResponsive as PageHeaderResponsive8,
-  StatusChip as StatusChip6
-} from "@contractspec/lib.design-system";
-import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Box as Box2, HStack as HStack7, VStack as VStack10 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn12 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { Code, Database as Database2, Zap as Zap4 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-"use client";
-function FeatureOperationDetailTemplate({
+function FeatureEventDetailTemplate({
   feature,
-  operationKey,
-  operation,
+  eventKey,
+  event,
   spec,
   className
 }) {
-  const opRef = operation ?? feature.operations?.find((op) => op.key === operationKey);
-  const _relatedDocs = useRelatedDocs(opRef?.key || "", spec?.meta?.tags);
-  if (!opRef) {
-    return /* @__PURE__ */ jsxs13(VStack10, {
+  const eventRef = event ?? feature.events?.find((ev) => ev.key === eventKey);
+  const relatedDocs = useRelatedDocs(eventRef?.key || "", spec?.meta?.tags);
+  if (!eventRef) {
+    return /* @__PURE__ */ jsxs9(VStack6, {
       gap: "lg",
-      className: cn12("mx-auto w-full max-w-5xl p-6", className),
+      className: cn8("mx-auto w-full max-w-5xl p-6", className),
       children: [
-        /* @__PURE__ */ jsx19(PageHeaderResponsive8, {
-          title: "Operation Not Found",
-          subtitle: `Operation ${operationKey} not found in feature ${feature.meta.key}`,
-          breadcrumb: /* @__PURE__ */ jsx19(Breadcrumbs7, {
+        /* @__PURE__ */ jsx15(PageHeaderResponsive4, {
+          title: "Event Not Found",
+          subtitle: `Event ${eventKey} not found in feature ${feature.meta.key}`,
+          breadcrumb: /* @__PURE__ */ jsx15(Breadcrumbs3, {
             items: [
               { label: "Features", href: "/features" },
               {
                 label: feature.meta.title || feature.meta.key,
                 href: `/features/${feature.meta.key}`
               },
-              { label: "Operations" }
+              {
+                label: "Events",
+                href: `/features/${feature.meta.key}/events`
+              }
             ]
           })
         }),
-        /* @__PURE__ */ jsx19(EmptyState2, {
-          title: "Operation not found",
-          description: `The operation '${operationKey}' could not be found in this feature.`,
-          icon: /* @__PURE__ */ jsx19(Zap4, {
-            className: "text-muted-foreground h-12 w-12"
+        /* @__PURE__ */ jsx15(EmptyState3, {
+          title: "Event not found",
+          description: `The event '${eventKey}' could not be found in this feature.`,
+          icon: /* @__PURE__ */ jsx15(Radio4, {
+            className: "h-12 w-12 text-muted-foreground"
           })
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs13(VStack10, {
+  return /* @__PURE__ */ jsxs9(VStack6, {
     gap: "lg",
-    className: cn12("mx-auto w-full max-w-5xl p-6", className),
+    className: cn8("mx-auto w-full max-w-5xl p-6", className),
     children: [
-      /* @__PURE__ */ jsx19(PageHeaderResponsive8, {
-        title: opRef.key,
-        subtitle: `Operation defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx19(Breadcrumbs7, {
+      /* @__PURE__ */ jsx15(PageHeaderResponsive4, {
+        title: eventRef.key,
+        subtitle: `Event defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx15(Breadcrumbs3, {
           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 }
+            { label: "Events", href: `/features/${feature.meta.key}#events` },
+            { label: eventRef.key }
           ]
         })
       }),
-      /* @__PURE__ */ jsxs13(HStack7, {
+      /* @__PURE__ */ jsxs9(HStack8, {
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx19(StatusChip6, {
+          /* @__PURE__ */ jsx15(StatusChip7, {
             tone: "neutral",
-            label: opRef.key,
+            label: eventRef.key,
             size: "sm",
-            icon: /* @__PURE__ */ jsx19(Zap4, {
+            icon: /* @__PURE__ */ jsx15(Radio4, {
               className: "h-3 w-3"
             })
           }),
-          /* @__PURE__ */ jsx19(StatusChip6, {
+          /* @__PURE__ */ jsx15(StatusChip7, {
             tone: "neutral",
-            label: `v${opRef.version}`,
+            label: `v${eventRef.version}`,
             size: "sm"
           }),
-          spec?.meta?.stability ? /* @__PURE__ */ jsx19(StatusChip6, {
+          spec?.meta?.stability ? /* @__PURE__ */ jsx15(StatusChip7, {
             tone: spec.meta.stability === "stable" ? "success" : "warning",
             label: spec.meta.stability,
             size: "sm"
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsxs13("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
         children: [
-          /* @__PURE__ */ jsx19("div", {
+          /* @__PURE__ */ jsx15("div", {
             className: "space-y-6 lg:col-span-2",
-            children: /* @__PURE__ */ jsx19(Card, {
+            children: /* @__PURE__ */ jsx15(Card2, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs13(VStack10, {
+              children: /* @__PURE__ */ jsxs9(VStack6, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs13(HStack7, {
+                  /* @__PURE__ */ jsxs9(HStack8, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx19(Code, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx15(Code2, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx19("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Schema Definition"
+                      /* @__PURE__ */ jsx15("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Payload Definition"
                       })
                     ]
                   }),
-                  spec ? /* @__PURE__ */ jsxs13(VStack10, {
+                  spec ? /* @__PURE__ */ jsxs9(VStack6, {
                     gap: "lg",
                     children: [
-                      spec.meta.description && /* @__PURE__ */ jsx19("p", {
+                      spec.meta.description && /* @__PURE__ */ jsx15("p", {
                         className: "text-muted-foreground",
                         children: spec.meta.description
                       }),
-                      /* @__PURE__ */ jsxs13(Box2, {
-                        className: "flex-col gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx19("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Input Schema"
-                          }),
-                          /* @__PURE__ */ jsx19(CodeBlock, {
-                            className: "w-full",
-                            code: JSON.stringify(spec.io.input, null, 2),
-                            language: "json"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs13(Box2, {
+                      /* @__PURE__ */ jsxs9(Box3, {
                         className: "flex-col gap-2",
                         children: [
-                          /* @__PURE__ */ jsx19("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Output Schema"
+                          /* @__PURE__ */ jsx15("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Payload Schema"
                           }),
-                          /* @__PURE__ */ jsx19(CodeBlock, {
-                            className: "w-full",
-                            code: JSON.stringify(spec.io.output, null, 2),
+                          /* @__PURE__ */ jsx15(CodeBlock2, {
+                            code: JSON.stringify(spec.payload, null, 2),
                             language: "json"
                           })
                         ]
                       })
                     ]
-                  }) : /* @__PURE__ */ jsxs13(VStack10, {
+                  }) : /* @__PURE__ */ jsxs9(VStack6, {
                     gap: "md",
                     children: [
-                      /* @__PURE__ */ jsx19("p", {
+                      /* @__PURE__ */ jsx15("p", {
                         className: "text-muted-foreground",
-                        children: "Full schema details are not available for this operation reference."
+                        children: "Full payload details are not available for this event reference."
                       }),
-                      /* @__PURE__ */ jsx19(CodeBlock, {
-                        code: JSON.stringify(opRef, null, 2),
+                      /* @__PURE__ */ jsx15(CodeBlock2, {
+                        code: JSON.stringify(eventRef, null, 2),
                         language: "json"
                       })
                     ]
@@ -1776,257 +1884,319 @@ function FeatureOperationDetailTemplate({
               })
             })
           }),
-          /* @__PURE__ */ jsx19("div", {
+          /* @__PURE__ */ jsx15("div", {
             className: "space-y-6",
-            children: /* @__PURE__ */ jsx19(Card, {
+            children: /* @__PURE__ */ jsx15(Card2, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs13(VStack10, {
+              children: /* @__PURE__ */ jsxs9(VStack6, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs13(HStack7, {
+                  /* @__PURE__ */ jsxs9(HStack8, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx19(Database2, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx15(Database3, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx19("h3", {
-                        className: "text-lg font-semibold",
+                      /* @__PURE__ */ jsx15("h3", {
+                        className: "font-semibold text-lg",
                         children: "Metadata"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsxs13("dl", {
+                  /* @__PURE__ */ jsxs9("dl", {
                     className: "grid grid-cols-1 gap-4 text-sm",
                     children: [
-                      /* @__PURE__ */ jsxs13("div", {
+                      /* @__PURE__ */ jsxs9("div", {
                         children: [
-                          /* @__PURE__ */ jsx19("dt", {
+                          /* @__PURE__ */ jsx15("dt", {
                             className: "text-muted-foreground",
                             children: "Key"
                           }),
-                          /* @__PURE__ */ jsx19("dd", {
+                          /* @__PURE__ */ jsx15("dd", {
                             className: "truncate font-medium",
-                            children: opRef.key
+                            children: eventRef.key
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs13("div", {
+                      /* @__PURE__ */ jsxs9("div", {
                         children: [
-                          /* @__PURE__ */ jsx19("dt", {
+                          /* @__PURE__ */ jsx15("dt", {
                             className: "text-muted-foreground",
                             children: "Version"
                           }),
-                          /* @__PURE__ */ jsx19("dd", {
-                            className: "font-medium",
-                            children: opRef.version
-                          })
-                        ]
-                      }),
-                      spec?.meta?.context && /* @__PURE__ */ jsxs13("div", {
-                        children: [
-                          /* @__PURE__ */ jsx19("dt", {
-                            className: "text-muted-foreground",
-                            children: "Context"
-                          }),
-                          /* @__PURE__ */ jsx19("dd", {
+                          /* @__PURE__ */ jsx15("dd", {
                             className: "font-medium",
-                            children: spec.meta.context
+                            children: eventRef.version
                           })
                         ]
                       }),
-                      spec?.meta?.owners && /* @__PURE__ */ jsxs13("div", {
+                      spec?.meta?.owners && /* @__PURE__ */ jsxs9("div", {
                         children: [
-                          /* @__PURE__ */ jsx19("dt", {
+                          /* @__PURE__ */ jsx15("dt", {
                             className: "text-muted-foreground",
                             children: "Owners"
                           }),
-                          /* @__PURE__ */ jsx19("dd", {
+                          /* @__PURE__ */ jsx15("dd", {
                             className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx19(StatusChip6, {
+                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx15(StatusChip7, {
                               label: o,
                               size: "sm",
                               tone: "neutral"
                             }, o))
                           })
                         ]
+                      })
+                    ]
+                  })
+                ]
+              })
+            })
+          }),
+          relatedDocs?.length ? /* @__PURE__ */ jsx15("div", {
+            className: "lg:col-span-3",
+            children: /* @__PURE__ */ jsx15(Card2, {
+              className: "p-6",
+              children: /* @__PURE__ */ jsxs9(VStack6, {
+                gap: "md",
+                children: [
+                  /* @__PURE__ */ jsxs9(HStack8, {
+                    className: "items-center gap-2 border-b pb-2",
+                    children: [
+                      /* @__PURE__ */ jsx15(BookOpen2, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      spec?.meta?.tags && /* @__PURE__ */ jsxs13("div", {
+                      /* @__PURE__ */ jsx15("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Related Documentation"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx15("div", {
+                    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx15(Link3, {
+                      href: doc.route || `/docs/${doc.id}`,
+                      className: "group block",
+                      children: /* @__PURE__ */ jsxs9("div", {
+                        className: "h-full rounded-lg border p-4 transition-colors hover:border-primary",
                         children: [
-                          /* @__PURE__ */ jsx19("dt", {
-                            className: "text-muted-foreground",
-                            children: "Tags"
+                          /* @__PURE__ */ jsx15("h4", {
+                            className: "mb-1 font-semibold group-hover:text-primary",
+                            children: doc.title
                           }),
-                          /* @__PURE__ */ jsx19("dd", {
-                            className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx19(StatusChip6, {
-                              label: `#${t}`,
-                              size: "sm",
-                              tone: "neutral"
-                            }, t))
+                          doc.summary && /* @__PURE__ */ jsx15("p", {
+                            className: "line-clamp-2 text-muted-foreground text-sm",
+                            children: doc.summary
                           })
                         ]
                       })
-                    ]
+                    }, doc.id))
                   })
                 ]
               })
             })
-          })
+          }) : null
         ]
       })
     ]
   });
 }
-// src/presentation/features/templates/FeatureEventDetailTemplate/FeatureEventDetailTemplate.tsx
+// src/presentation/features/templates/FeatureEventsTemplate/FeatureEventsTemplate.tsx
 import {
-  Breadcrumbs as Breadcrumbs8,
-  CodeBlock as CodeBlock2,
-  EmptyState as EmptyState3,
-  PageHeaderResponsive as PageHeaderResponsive9,
-  StatusChip as StatusChip7
+  Breadcrumbs as Breadcrumbs4,
+  PageHeaderResponsive as PageHeaderResponsive5
 } from "@contractspec/lib.design-system";
-import { Card as Card2 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Box as Box3, HStack as HStack8, VStack as VStack11 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn13 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { BookOpen, Code as Code2, Database as Database3, Radio as Radio4 } from "lucide-react";
-import Link2 from "next/link";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { VStack as VStack7 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn9 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 "use client";
-function FeatureEventDetailTemplate({
+function FeatureEventsTemplate({
   feature,
-  eventKey,
-  event,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10(VStack7, {
+    gap: "lg",
+    className: cn9("mx-auto w-full max-w-5xl p-6", className),
+    children: [
+      /* @__PURE__ */ jsx16(PageHeaderResponsive5, {
+        title: "Events",
+        subtitle: `Events defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx16(Breadcrumbs4, {
+          items: [
+            { label: "Features", href: "/features" },
+            {
+              label: feature.meta.title || feature.meta.key,
+              href: `/features/${feature.meta.key}`
+            },
+            { label: "Events" }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx16(FeatureEventsList, {
+        feature
+      })
+    ]
+  });
+}
+// src/presentation/features/templates/FeatureFormDetailTemplate/FeatureFormDetailTemplate.tsx
+import {
+  Breadcrumbs as Breadcrumbs5,
+  CodeBlock as CodeBlock3,
+  EmptyState as EmptyState4,
+  PageHeaderResponsive as PageHeaderResponsive6,
+  StatusChip as StatusChip8
+} from "@contractspec/lib.design-system";
+import { Card as Card3 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Box as Box4, HStack as HStack9, VStack as VStack8 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn10 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { BookOpen as BookOpen3, Code as Code3, Database as Database4, PenTool } from "lucide-react";
+import Link4 from "next/link";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+"use client";
+function FeatureFormDetailTemplate({
+  feature,
+  formKey,
+  form,
   spec,
   className
 }) {
-  const eventRef = event ?? feature.events?.find((ev) => ev.key === eventKey);
-  const relatedDocs = useRelatedDocs(eventRef?.key || "", spec?.meta?.tags);
-  if (!eventRef) {
-    return /* @__PURE__ */ jsxs14(VStack11, {
+  const formRef = form ?? feature.forms?.find((f) => f.key === formKey);
+  const relatedDocs = useRelatedDocs(formRef?.key || "", spec?.meta?.tags);
+  if (!formRef) {
+    return /* @__PURE__ */ jsxs11(VStack8, {
       gap: "lg",
-      className: cn13("mx-auto w-full max-w-5xl p-6", className),
+      className: cn10("mx-auto w-full max-w-5xl p-6", className),
       children: [
-        /* @__PURE__ */ jsx20(PageHeaderResponsive9, {
-          title: "Event Not Found",
-          subtitle: `Event ${eventKey} not found in feature ${feature.meta.key}`,
-          breadcrumb: /* @__PURE__ */ jsx20(Breadcrumbs8, {
+        /* @__PURE__ */ jsx17(PageHeaderResponsive6, {
+          title: "Form Not Found",
+          subtitle: `Form ${formKey} not found in feature ${feature.meta.key}`,
+          breadcrumb: /* @__PURE__ */ jsx17(Breadcrumbs5, {
             items: [
               { label: "Features", href: "/features" },
               {
                 label: feature.meta.title || feature.meta.key,
                 href: `/features/${feature.meta.key}`
               },
-              {
-                label: "Events",
-                href: `/features/${feature.meta.key}/events`
-              }
+              { label: "Forms" }
             ]
           })
         }),
-        /* @__PURE__ */ jsx20(EmptyState3, {
-          title: "Event not found",
-          description: `The event '${eventKey}' could not be found in this feature.`,
-          icon: /* @__PURE__ */ jsx20(Radio4, {
-            className: "text-muted-foreground h-12 w-12"
+        /* @__PURE__ */ jsx17(EmptyState4, {
+          title: "Form not found",
+          description: `The form '${formKey}' could not be found in this feature.`,
+          icon: /* @__PURE__ */ jsx17(PenTool, {
+            className: "h-12 w-12 text-muted-foreground"
           })
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs14(VStack11, {
+  return /* @__PURE__ */ jsxs11(VStack8, {
     gap: "lg",
-    className: cn13("mx-auto w-full max-w-5xl p-6", className),
+    className: cn10("mx-auto w-full max-w-5xl p-6", className),
     children: [
-      /* @__PURE__ */ jsx20(PageHeaderResponsive9, {
-        title: eventRef.key,
-        subtitle: `Event defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx20(Breadcrumbs8, {
+      /* @__PURE__ */ jsx17(PageHeaderResponsive6, {
+        title: formRef.key,
+        subtitle: `Form defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx17(Breadcrumbs5, {
           items: [
             { label: "Features", href: "/features" },
             {
               label: feature.meta.title || feature.meta.key,
               href: `/features/${feature.meta.key}`
             },
-            { label: "Events", href: `/features/${feature.meta.key}#events` },
-            { label: eventRef.key }
+            { label: "Forms", href: `/features/${feature.meta.key}#forms` },
+            { label: formRef.key }
           ]
         })
       }),
-      /* @__PURE__ */ jsxs14(HStack8, {
+      /* @__PURE__ */ jsxs11(HStack9, {
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx20(StatusChip7, {
+          /* @__PURE__ */ jsx17(StatusChip8, {
             tone: "neutral",
-            label: eventRef.key,
+            label: formRef.key,
             size: "sm",
-            icon: /* @__PURE__ */ jsx20(Radio4, {
+            icon: /* @__PURE__ */ jsx17(PenTool, {
               className: "h-3 w-3"
             })
           }),
-          /* @__PURE__ */ jsx20(StatusChip7, {
+          /* @__PURE__ */ jsx17(StatusChip8, {
             tone: "neutral",
-            label: `v${eventRef.version}`,
+            label: `v${formRef.version}`,
             size: "sm"
           }),
-          spec?.meta?.stability ? /* @__PURE__ */ jsx20(StatusChip7, {
+          spec?.meta?.stability ? /* @__PURE__ */ jsx17(StatusChip8, {
             tone: spec.meta.stability === "stable" ? "success" : "warning",
             label: spec.meta.stability,
             size: "sm"
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs11("div", {
         className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
         children: [
-          /* @__PURE__ */ jsx20("div", {
+          /* @__PURE__ */ jsx17("div", {
             className: "space-y-6 lg:col-span-2",
-            children: /* @__PURE__ */ jsx20(Card2, {
+            children: /* @__PURE__ */ jsx17(Card3, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs14(VStack11, {
+              children: /* @__PURE__ */ jsxs11(VStack8, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs14(HStack8, {
+                  /* @__PURE__ */ jsxs11(HStack9, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx20(Code2, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx17(Code3, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx20("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Payload Definition"
+                      /* @__PURE__ */ jsx17("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Form Definition"
                       })
                     ]
                   }),
-                  spec ? /* @__PURE__ */ jsxs14(VStack11, {
+                  spec ? /* @__PURE__ */ jsxs11(VStack8, {
                     gap: "lg",
                     children: [
-                      spec.meta.description && /* @__PURE__ */ jsx20("p", {
+                      spec.meta.description && /* @__PURE__ */ jsx17("p", {
                         className: "text-muted-foreground",
                         children: spec.meta.description
                       }),
-                      /* @__PURE__ */ jsxs14(Box3, {
+                      /* @__PURE__ */ jsxs11(Box4, {
                         className: "flex-col gap-2",
                         children: [
-                          /* @__PURE__ */ jsx20("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Payload Schema"
+                          /* @__PURE__ */ jsx17("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Fields"
                           }),
-                          /* @__PURE__ */ jsx20(CodeBlock2, {
-                            code: JSON.stringify(spec.payload, null, 2),
+                          /* @__PURE__ */ jsx17(CodeBlock3, {
+                            code: JSON.stringify(spec.fields, null, 2),
+                            language: "json"
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs11(Box4, {
+                        className: "flex-col gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx17("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Actions"
+                          }),
+                          /* @__PURE__ */ jsx17(CodeBlock3, {
+                            code: JSON.stringify(spec.actions, null, 2),
                             language: "json"
                           })
                         ]
                       })
                     ]
-                  }) : /* @__PURE__ */ jsxs14(VStack11, {
+                  }) : /* @__PURE__ */ jsxs11(VStack8, {
                     gap: "md",
                     children: [
-                      /* @__PURE__ */ jsx20("p", {
+                      /* @__PURE__ */ jsx17("p", {
                         className: "text-muted-foreground",
-                        children: "Full payload details are not available for this event reference."
+                        children: "Full form definition details are not available for this form reference."
                       }),
-                      /* @__PURE__ */ jsx20(CodeBlock2, {
-                        code: JSON.stringify(eventRef, null, 2),
+                      /* @__PURE__ */ jsx17(CodeBlock3, {
+                        code: JSON.stringify(formRef, null, 2),
                         language: "json"
                       })
                     ]
@@ -2035,67 +2205,83 @@ function FeatureEventDetailTemplate({
               })
             })
           }),
-          /* @__PURE__ */ jsx20("div", {
+          /* @__PURE__ */ jsx17("div", {
             className: "space-y-6",
-            children: /* @__PURE__ */ jsx20(Card2, {
+            children: /* @__PURE__ */ jsx17(Card3, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs14(VStack11, {
+              children: /* @__PURE__ */ jsxs11(VStack8, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs14(HStack8, {
+                  /* @__PURE__ */ jsxs11(HStack9, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx20(Database3, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx17(Database4, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx20("h3", {
-                        className: "text-lg font-semibold",
+                      /* @__PURE__ */ jsx17("h3", {
+                        className: "font-semibold text-lg",
                         children: "Metadata"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsxs14("dl", {
+                  /* @__PURE__ */ jsxs11("dl", {
                     className: "grid grid-cols-1 gap-4 text-sm",
                     children: [
-                      /* @__PURE__ */ jsxs14("div", {
+                      /* @__PURE__ */ jsxs11("div", {
                         children: [
-                          /* @__PURE__ */ jsx20("dt", {
+                          /* @__PURE__ */ jsx17("dt", {
                             className: "text-muted-foreground",
                             children: "Key"
                           }),
-                          /* @__PURE__ */ jsx20("dd", {
+                          /* @__PURE__ */ jsx17("dd", {
                             className: "truncate font-medium",
-                            children: eventRef.key
+                            children: formRef.key
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs14("div", {
+                      /* @__PURE__ */ jsxs11("div", {
                         children: [
-                          /* @__PURE__ */ jsx20("dt", {
+                          /* @__PURE__ */ jsx17("dt", {
                             className: "text-muted-foreground",
                             children: "Version"
                           }),
-                          /* @__PURE__ */ jsx20("dd", {
+                          /* @__PURE__ */ jsx17("dd", {
                             className: "font-medium",
-                            children: eventRef.version
+                            children: formRef.version
                           })
                         ]
                       }),
-                      spec?.meta?.owners && /* @__PURE__ */ jsxs14("div", {
+                      spec?.meta?.owners && /* @__PURE__ */ jsxs11("div", {
                         children: [
-                          /* @__PURE__ */ jsx20("dt", {
+                          /* @__PURE__ */ jsx17("dt", {
                             className: "text-muted-foreground",
                             children: "Owners"
                           }),
-                          /* @__PURE__ */ jsx20("dd", {
+                          /* @__PURE__ */ jsx17("dd", {
                             className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx20(StatusChip7, {
+                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx17(StatusChip8, {
                               label: o,
                               size: "sm",
                               tone: "neutral"
                             }, o))
                           })
                         ]
+                      }),
+                      spec?.meta?.tags && /* @__PURE__ */ jsxs11("div", {
+                        children: [
+                          /* @__PURE__ */ jsx17("dt", {
+                            className: "text-muted-foreground",
+                            children: "Tags"
+                          }),
+                          /* @__PURE__ */ jsx17("dd", {
+                            className: "flex flex-wrap gap-1 font-medium",
+                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx17(StatusChip8, {
+                              label: `#${t}`,
+                              size: "sm",
+                              tone: "neutral"
+                            }, t))
+                          })
+                        ]
                       })
                     ]
                   })
@@ -2103,39 +2289,39 @@ function FeatureEventDetailTemplate({
               })
             })
           }),
-          relatedDocs?.length ? /* @__PURE__ */ jsx20("div", {
+          relatedDocs?.length ? /* @__PURE__ */ jsx17("div", {
             className: "lg:col-span-3",
-            children: /* @__PURE__ */ jsx20(Card2, {
+            children: /* @__PURE__ */ jsx17(Card3, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs14(VStack11, {
+              children: /* @__PURE__ */ jsxs11(VStack8, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs14(HStack8, {
+                  /* @__PURE__ */ jsxs11(HStack9, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx20(BookOpen, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx17(BookOpen3, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx20("h3", {
-                        className: "text-lg font-semibold",
+                      /* @__PURE__ */ jsx17("h3", {
+                        className: "font-semibold text-lg",
                         children: "Related Documentation"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsx20("div", {
+                  /* @__PURE__ */ jsx17("div", {
                     className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx20(Link2, {
+                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx17(Link4, {
                       href: doc.route || `/docs/${doc.id}`,
                       className: "group block",
-                      children: /* @__PURE__ */ jsxs14("div", {
-                        className: "hover:border-primary h-full rounded-lg border p-4 transition-colors",
+                      children: /* @__PURE__ */ jsxs11("div", {
+                        className: "h-full rounded-lg border p-4 transition-colors hover:border-primary",
                         children: [
-                          /* @__PURE__ */ jsx20("h4", {
-                            className: "group-hover:text-primary mb-1 font-semibold",
+                          /* @__PURE__ */ jsx17("h4", {
+                            className: "mb-1 font-semibold group-hover:text-primary",
                             children: doc.title
                           }),
-                          doc.summary && /* @__PURE__ */ jsx20("p", {
-                            className: "text-muted-foreground line-clamp-2 text-sm",
+                          doc.summary && /* @__PURE__ */ jsx17("p", {
+                            className: "line-clamp-2 text-muted-foreground text-sm",
                             children: doc.summary
                           })
                         ]
@@ -2151,70 +2337,103 @@ function FeatureEventDetailTemplate({
     ]
   });
 }
-// src/presentation/features/templates/FeaturePresentationDetailTemplate/FeaturePresentationDetailTemplate.tsx
+// src/presentation/features/templates/FeatureFormsTemplate/FeatureFormsTemplate.tsx
 import {
-  Breadcrumbs as Breadcrumbs9,
-  CodeBlock as CodeBlock3,
-  EmptyState as EmptyState4,
-  PageHeaderResponsive as PageHeaderResponsive10,
-  StatusChip as StatusChip8
+  Breadcrumbs as Breadcrumbs6,
+  PageHeaderResponsive as PageHeaderResponsive7
+} from "@contractspec/lib.design-system";
+import { VStack as VStack9 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn11 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+"use client";
+function FeatureFormsTemplate({
+  feature,
+  className
+}) {
+  return /* @__PURE__ */ jsxs12(VStack9, {
+    gap: "lg",
+    className: cn11("mx-auto w-full max-w-5xl p-6", className),
+    children: [
+      /* @__PURE__ */ jsx18(PageHeaderResponsive7, {
+        title: "Forms",
+        subtitle: `Forms defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx18(Breadcrumbs6, {
+          items: [
+            { label: "Features", href: "/features" },
+            {
+              label: feature.meta.title || feature.meta.key,
+              href: `/features/${feature.meta.key}`
+            },
+            { label: "Forms" }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx18(FeatureFormsList, {
+        feature
+      })
+    ]
+  });
+}
+// src/presentation/features/templates/FeatureOperationDetailTemplate/FeatureOperationDetailTemplate.tsx
+import {
+  Breadcrumbs as Breadcrumbs7,
+  CodeBlock as CodeBlock4,
+  EmptyState as EmptyState5,
+  PageHeaderResponsive as PageHeaderResponsive8,
+  StatusChip as StatusChip9
 } from "@contractspec/lib.design-system";
-import { Card as Card3 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Box as Box4, HStack as HStack9, VStack as VStack12 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { cn as cn14 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { BookOpen as BookOpen2, Code as Code3, Database as Database4, Layout as Layout5 } from "lucide-react";
-import Link3 from "next/link";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Card as Card4 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Box as Box5, HStack as HStack10, VStack as VStack10 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn12 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Code as Code4, Database as Database5, Zap as Zap4 } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 "use client";
-function FeaturePresentationDetailTemplate({
+function FeatureOperationDetailTemplate({
   feature,
-  presentationKey,
-  presentation,
+  operationKey,
+  operation,
   spec,
   className
 }) {
-  const presRef = presentation ?? feature.presentations?.find((p) => p.key === presentationKey);
-  const relatedDocs = useRelatedDocs(presRef?.key || "", spec?.meta?.tags);
-  if (!presRef) {
-    return /* @__PURE__ */ jsxs15(VStack12, {
+  const opRef = operation ?? feature.operations?.find((op) => op.key === operationKey);
+  const _relatedDocs = useRelatedDocs(opRef?.key || "", spec?.meta?.tags);
+  if (!opRef) {
+    return /* @__PURE__ */ jsxs13(VStack10, {
       gap: "lg",
-      className: cn14("mx-auto w-full max-w-5xl p-6", className),
+      className: cn12("mx-auto w-full max-w-5xl p-6", className),
       children: [
-        /* @__PURE__ */ jsx21(PageHeaderResponsive10, {
-          title: "Presentation Not Found",
-          subtitle: `Presentation ${presentationKey} not found in feature ${feature.meta.key}`,
-          breadcrumb: /* @__PURE__ */ jsx21(Breadcrumbs9, {
+        /* @__PURE__ */ jsx19(PageHeaderResponsive8, {
+          title: "Operation Not Found",
+          subtitle: `Operation ${operationKey} not found in feature ${feature.meta.key}`,
+          breadcrumb: /* @__PURE__ */ jsx19(Breadcrumbs7, {
             items: [
               { label: "Features", href: "/features" },
               {
                 label: feature.meta.title || feature.meta.key,
                 href: `/features/${feature.meta.key}`
               },
-              {
-                label: "Presentations",
-                href: `/features/${feature.meta.key}/presentation`
-              }
+              { label: "Operations" }
             ]
           })
         }),
-        /* @__PURE__ */ jsx21(EmptyState4, {
-          title: "Presentation not found",
-          description: `The presentation '${presentationKey}' could not be found in this feature.`,
-          icon: /* @__PURE__ */ jsx21(Layout5, {
-            className: "text-muted-foreground h-12 w-12"
+        /* @__PURE__ */ jsx19(EmptyState5, {
+          title: "Operation not found",
+          description: `The operation '${operationKey}' could not be found in this feature.`,
+          icon: /* @__PURE__ */ jsx19(Zap4, {
+            className: "h-12 w-12 text-muted-foreground"
           })
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs15(VStack12, {
+  return /* @__PURE__ */ jsxs13(VStack10, {
     gap: "lg",
-    className: cn14("mx-auto w-full max-w-5xl p-6", className),
+    className: cn12("mx-auto w-full max-w-5xl p-6", className),
     children: [
-      /* @__PURE__ */ jsx21(PageHeaderResponsive10, {
-        title: presRef.key,
-        subtitle: `Presentation defined in ${feature.meta.title ?? feature.meta.key}`,
-        breadcrumb: /* @__PURE__ */ jsx21(Breadcrumbs9, {
+      /* @__PURE__ */ jsx19(PageHeaderResponsive8, {
+        title: opRef.key,
+        subtitle: `Operation defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx19(Breadcrumbs7, {
           items: [
             { label: "Features", href: "/features" },
             {
@@ -2222,88 +2441,103 @@ function FeaturePresentationDetailTemplate({
               href: `/features/${feature.meta.key}`
             },
             {
-              label: "Presentations",
-              href: `/features/${feature.meta.key}#presentations`
+              label: "Operations",
+              href: `/features/${feature.meta.key}/operations`
             },
-            { label: presRef.key }
+            { label: opRef.key }
           ]
         })
       }),
-      /* @__PURE__ */ jsxs15(HStack9, {
+      /* @__PURE__ */ jsxs13(HStack10, {
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx21(StatusChip8, {
+          /* @__PURE__ */ jsx19(StatusChip9, {
             tone: "neutral",
-            label: presRef.key,
+            label: opRef.key,
             size: "sm",
-            icon: /* @__PURE__ */ jsx21(Layout5, {
+            icon: /* @__PURE__ */ jsx19(Zap4, {
               className: "h-3 w-3"
             })
           }),
-          /* @__PURE__ */ jsx21(StatusChip8, {
+          /* @__PURE__ */ jsx19(StatusChip9, {
             tone: "neutral",
-            label: `v${presRef.version}`,
+            label: `v${opRef.version}`,
             size: "sm"
           }),
-          spec?.meta?.stability ? /* @__PURE__ */ jsx21(StatusChip8, {
+          spec?.meta?.stability ? /* @__PURE__ */ jsx19(StatusChip9, {
             tone: spec.meta.stability === "stable" ? "success" : "warning",
             label: spec.meta.stability,
             size: "sm"
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsxs15("div", {
+      /* @__PURE__ */ jsxs13("div", {
         className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
         children: [
-          /* @__PURE__ */ jsx21("div", {
+          /* @__PURE__ */ jsx19("div", {
             className: "space-y-6 lg:col-span-2",
-            children: /* @__PURE__ */ jsx21(Card3, {
+            children: /* @__PURE__ */ jsx19(Card4, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs15(VStack12, {
+              children: /* @__PURE__ */ jsxs13(VStack10, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs15(HStack9, {
+                  /* @__PURE__ */ jsxs13(HStack10, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx21(Code3, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx19(Code4, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx21("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Component Definition"
+                      /* @__PURE__ */ jsx19("h3", {
+                        className: "font-semibold text-lg",
+                        children: "Schema Definition"
                       })
                     ]
                   }),
-                  spec ? /* @__PURE__ */ jsxs15(VStack12, {
+                  spec ? /* @__PURE__ */ jsxs13(VStack10, {
                     gap: "lg",
                     children: [
-                      spec.meta.description && /* @__PURE__ */ jsx21("p", {
+                      spec.meta.description && /* @__PURE__ */ jsx19("p", {
                         className: "text-muted-foreground",
                         children: spec.meta.description
                       }),
-                      /* @__PURE__ */ jsxs15(Box4, {
+                      /* @__PURE__ */ jsxs13(Box5, {
                         className: "flex-col gap-2",
                         children: [
-                          /* @__PURE__ */ jsx21("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Spec Details"
+                          /* @__PURE__ */ jsx19("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Input Schema"
                           }),
-                          /* @__PURE__ */ jsx21(CodeBlock3, {
-                            code: JSON.stringify(spec, null, 2),
+                          /* @__PURE__ */ jsx19(CodeBlock4, {
+                            className: "w-full",
+                            code: JSON.stringify(spec.io.input, null, 2),
+                            language: "json"
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs13(Box5, {
+                        className: "flex-col gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx19("span", {
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Output Schema"
+                          }),
+                          /* @__PURE__ */ jsx19(CodeBlock4, {
+                            className: "w-full",
+                            code: JSON.stringify(spec.io.output, null, 2),
                             language: "json"
                           })
                         ]
                       })
                     ]
-                  }) : /* @__PURE__ */ jsxs15(VStack12, {
+                  }) : /* @__PURE__ */ jsxs13(VStack10, {
                     gap: "md",
                     children: [
-                      /* @__PURE__ */ jsx21("p", {
+                      /* @__PURE__ */ jsx19("p", {
                         className: "text-muted-foreground",
-                        children: "Full component details are not available for this presentation reference."
+                        children: "Full schema details are not available for this operation reference."
                       }),
-                      /* @__PURE__ */ jsx21(CodeBlock3, {
-                        code: JSON.stringify(presRef, null, 2),
+                      /* @__PURE__ */ jsx19(CodeBlock4, {
+                        code: JSON.stringify(opRef, null, 2),
                         language: "json"
                       })
                     ]
@@ -2312,154 +2546,209 @@ function FeaturePresentationDetailTemplate({
               })
             })
           }),
-          /* @__PURE__ */ jsx21("div", {
+          /* @__PURE__ */ jsx19("div", {
             className: "space-y-6",
-            children: /* @__PURE__ */ jsx21(Card3, {
+            children: /* @__PURE__ */ jsx19(Card4, {
               className: "p-6",
-              children: /* @__PURE__ */ jsxs15(VStack12, {
+              children: /* @__PURE__ */ jsxs13(VStack10, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs15(HStack9, {
+                  /* @__PURE__ */ jsxs13(HStack10, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx21(Database4, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx19(Database5, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
-                      /* @__PURE__ */ jsx21("h3", {
-                        className: "text-lg font-semibold",
+                      /* @__PURE__ */ jsx19("h3", {
+                        className: "font-semibold text-lg",
                         children: "Metadata"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsxs15("dl", {
+                  /* @__PURE__ */ jsxs13("dl", {
                     className: "grid grid-cols-1 gap-4 text-sm",
                     children: [
-                      /* @__PURE__ */ jsxs15("div", {
+                      /* @__PURE__ */ jsxs13("div", {
                         children: [
-                          /* @__PURE__ */ jsx21("dt", {
+                          /* @__PURE__ */ jsx19("dt", {
                             className: "text-muted-foreground",
                             children: "Key"
                           }),
-                          /* @__PURE__ */ jsx21("dd", {
+                          /* @__PURE__ */ jsx19("dd", {
                             className: "truncate font-medium",
-                            children: presRef.key
+                            children: opRef.key
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs15("div", {
+                      /* @__PURE__ */ jsxs13("div", {
                         children: [
-                          /* @__PURE__ */ jsx21("dt", {
+                          /* @__PURE__ */ jsx19("dt", {
                             className: "text-muted-foreground",
                             children: "Version"
                           }),
-                          /* @__PURE__ */ jsx21("dd", {
+                          /* @__PURE__ */ jsx19("dd", {
                             className: "font-medium",
-                            children: presRef.version
+                            children: opRef.version
+                          })
+                        ]
+                      }),
+                      spec?.meta?.context && /* @__PURE__ */ jsxs13("div", {
+                        children: [
+                          /* @__PURE__ */ jsx19("dt", {
+                            className: "text-muted-foreground",
+                            children: "Context"
+                          }),
+                          /* @__PURE__ */ jsx19("dd", {
+                            className: "font-medium",
+                            children: spec.meta.context
                           })
                         ]
                       }),
-                      spec?.meta?.owners && /* @__PURE__ */ jsxs15("div", {
+                      spec?.meta?.owners && /* @__PURE__ */ jsxs13("div", {
                         children: [
-                          /* @__PURE__ */ jsx21("dt", {
+                          /* @__PURE__ */ jsx19("dt", {
                             className: "text-muted-foreground",
                             children: "Owners"
                           }),
-                          /* @__PURE__ */ jsx21("dd", {
+                          /* @__PURE__ */ jsx19("dd", {
                             className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx21(StatusChip8, {
+                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx19(StatusChip9, {
                               label: o,
                               size: "sm",
                               tone: "neutral"
                             }, o))
                           })
                         ]
-                      })
-                    ]
-                  })
-                ]
-              })
-            })
-          }),
-          relatedDocs?.length ? /* @__PURE__ */ jsx21("div", {
-            className: "lg:col-span-3",
-            children: /* @__PURE__ */ jsx21(Card3, {
-              className: "p-6",
-              children: /* @__PURE__ */ jsxs15(VStack12, {
-                gap: "md",
-                children: [
-                  /* @__PURE__ */ jsxs15(HStack9, {
-                    className: "items-center gap-2 border-b pb-2",
-                    children: [
-                      /* @__PURE__ */ jsx21(BookOpen2, {
-                        className: "text-muted-foreground h-5 w-5"
                       }),
-                      /* @__PURE__ */ jsx21("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Related Documentation"
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx21("div", {
-                    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx21(Link3, {
-                      href: doc.route || `/docs/${doc.id}`,
-                      className: "group block",
-                      children: /* @__PURE__ */ jsxs15("div", {
-                        className: "hover:border-primary h-full rounded-lg border p-4 transition-colors",
+                      spec?.meta?.tags && /* @__PURE__ */ jsxs13("div", {
                         children: [
-                          /* @__PURE__ */ jsx21("h4", {
-                            className: "group-hover:text-primary mb-1 font-semibold",
-                            children: doc.title
+                          /* @__PURE__ */ jsx19("dt", {
+                            className: "text-muted-foreground",
+                            children: "Tags"
                           }),
-                          doc.summary && /* @__PURE__ */ jsx21("p", {
-                            className: "text-muted-foreground line-clamp-2 text-sm",
-                            children: doc.summary
+                          /* @__PURE__ */ jsx19("dd", {
+                            className: "flex flex-wrap gap-1 font-medium",
+                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx19(StatusChip9, {
+                              label: `#${t}`,
+                              size: "sm",
+                              tone: "neutral"
+                            }, t))
                           })
                         ]
                       })
-                    }, doc.id))
+                    ]
                   })
                 ]
               })
             })
-          }) : null
+          })
         ]
       })
     ]
   });
 }
-// src/presentation/features/templates/FeatureDataViewDetailTemplate/FeatureDataViewDetailTemplate.tsx
+// src/presentation/features/templates/FeatureOperationsTemplate/FeatureOperationsTemplate.tsx
+import {
+  Breadcrumbs as Breadcrumbs8,
+  PageHeaderResponsive as PageHeaderResponsive9
+} from "@contractspec/lib.design-system";
+import { VStack as VStack11 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn13 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+"use client";
+function FeatureOperationsTemplate({
+  feature,
+  className
+}) {
+  return /* @__PURE__ */ jsxs14(VStack11, {
+    gap: "lg",
+    className: cn13("mx-auto w-full max-w-5xl p-6", className),
+    children: [
+      /* @__PURE__ */ jsx20(PageHeaderResponsive9, {
+        title: "Operations",
+        subtitle: `Operations defined in ${feature.meta.title ?? feature.meta.key}`,
+        breadcrumb: /* @__PURE__ */ jsx20(Breadcrumbs8, {
+          items: [
+            { label: "Features", href: "/features" },
+            {
+              label: feature.meta.title || feature.meta.key,
+              href: `/features/${feature.meta.key}`
+            },
+            { label: "Operations" }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx20(FeatureOperationsList, {
+        feature
+      })
+    ]
+  });
+}
+// src/presentation/features/templates/FeatureOverviewTemplate/FeatureOverviewTemplate.tsx
+import {
+  Breadcrumbs as Breadcrumbs9,
+  PageHeaderResponsive as PageHeaderResponsive10
+} from "@contractspec/lib.design-system";
+import { VStack as VStack12 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn as cn14 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+"use client";
+function FeatureOverviewTemplate({
+  feature,
+  className
+}) {
+  return /* @__PURE__ */ jsxs15(VStack12, {
+    gap: "lg",
+    className: cn14("mx-auto w-full max-w-5xl p-6", className),
+    children: [
+      /* @__PURE__ */ jsx21(PageHeaderResponsive10, {
+        title: feature.meta.title || feature.meta.key,
+        subtitle: feature.meta.description || "Feature overview",
+        breadcrumb: /* @__PURE__ */ jsx21(Breadcrumbs9, {
+          items: [
+            { label: "Features", href: "/features" },
+            { label: feature.meta.title || feature.meta.key }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx21(FeatureDetail, {
+        feature
+      })
+    ]
+  });
+}
+// src/presentation/features/templates/FeaturePresentationDetailTemplate/FeaturePresentationDetailTemplate.tsx
 import {
   Breadcrumbs as Breadcrumbs10,
-  CodeBlock as CodeBlock4,
-  EmptyState as EmptyState5,
+  CodeBlock as CodeBlock5,
+  EmptyState as EmptyState6,
   PageHeaderResponsive as PageHeaderResponsive11,
-  StatusChip as StatusChip9
+  StatusChip as StatusChip10
 } from "@contractspec/lib.design-system";
-import { Card as Card4 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Box as Box5, HStack as HStack10, VStack as VStack13 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Card as Card5 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Box as Box6, HStack as HStack11, VStack as VStack13 } from "@contractspec/lib.ui-kit-web/ui/stack";
 import { cn as cn15 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { BookOpen as BookOpen3, Code as Code4, Database as Database5, Table as Table2 } from "lucide-react";
-import Link4 from "next/link";
+import { BookOpen as BookOpen4, Code as Code5, Database as Database6, Layout as Layout5 } from "lucide-react";
+import Link5 from "next/link";
 import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 "use client";
-function FeatureDataViewDetailTemplate({
+function FeaturePresentationDetailTemplate({
   feature,
-  viewKey,
-  view,
+  presentationKey,
+  presentation,
   spec,
   className
 }) {
-  const viewRef = view ?? feature.dataViews?.find((v) => v.key === viewKey);
-  const relatedDocs = useRelatedDocs(viewRef?.key || "", spec?.meta?.tags);
-  if (!viewRef) {
+  const presRef = presentation ?? feature.presentations?.find((p) => p.key === presentationKey);
+  const relatedDocs = useRelatedDocs(presRef?.key || "", spec?.meta?.tags);
+  if (!presRef) {
     return /* @__PURE__ */ jsxs16(VStack13, {
       gap: "lg",
       className: cn15("mx-auto w-full max-w-5xl p-6", className),
       children: [
         /* @__PURE__ */ jsx22(PageHeaderResponsive11, {
-          title: "Data View Not Found",
-          subtitle: `Data View ${viewKey} not found in feature ${feature.meta.key}`,
+          title: "Presentation Not Found",
+          subtitle: `Presentation ${presentationKey} not found in feature ${feature.meta.key}`,
           breadcrumb: /* @__PURE__ */ jsx22(Breadcrumbs10, {
             items: [
               { label: "Features", href: "/features" },
@@ -2467,15 +2756,18 @@ function FeatureDataViewDetailTemplate({
                 label: feature.meta.title || feature.meta.key,
                 href: `/features/${feature.meta.key}`
               },
-              { label: "Data Views" }
+              {
+                label: "Presentations",
+                href: `/features/${feature.meta.key}/presentation`
+              }
             ]
           })
         }),
-        /* @__PURE__ */ jsx22(EmptyState5, {
-          title: "Data View not found",
-          description: `The data view '${viewKey}' could not be found in this feature.`,
-          icon: /* @__PURE__ */ jsx22(Table2, {
-            className: "text-muted-foreground h-12 w-12"
+        /* @__PURE__ */ jsx22(EmptyState6, {
+          title: "Presentation not found",
+          description: `The presentation '${presentationKey}' could not be found in this feature.`,
+          icon: /* @__PURE__ */ jsx22(Layout5, {
+            className: "h-12 w-12 text-muted-foreground"
           })
         })
       ]
@@ -2486,8 +2778,8 @@ function FeatureDataViewDetailTemplate({
     className: cn15("mx-auto w-full max-w-5xl p-6", className),
     children: [
       /* @__PURE__ */ jsx22(PageHeaderResponsive11, {
-        title: viewRef.key,
-        subtitle: `Data View defined in ${feature.meta.title ?? feature.meta.key}`,
+        title: presRef.key,
+        subtitle: `Presentation defined in ${feature.meta.title ?? feature.meta.key}`,
         breadcrumb: /* @__PURE__ */ jsx22(Breadcrumbs10, {
           items: [
             { label: "Features", href: "/features" },
@@ -2496,30 +2788,30 @@ function FeatureDataViewDetailTemplate({
               href: `/features/${feature.meta.key}`
             },
             {
-              label: "Data Views",
-              href: `/features/${feature.meta.key}#dataviews`
+              label: "Presentations",
+              href: `/features/${feature.meta.key}#presentations`
             },
-            { label: viewRef.key }
+            { label: presRef.key }
           ]
         })
       }),
-      /* @__PURE__ */ jsxs16(HStack10, {
+      /* @__PURE__ */ jsxs16(HStack11, {
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx22(StatusChip9, {
+          /* @__PURE__ */ jsx22(StatusChip10, {
             tone: "neutral",
-            label: viewRef.key,
+            label: presRef.key,
             size: "sm",
-            icon: /* @__PURE__ */ jsx22(Table2, {
+            icon: /* @__PURE__ */ jsx22(Layout5, {
               className: "h-3 w-3"
             })
           }),
-          /* @__PURE__ */ jsx22(StatusChip9, {
+          /* @__PURE__ */ jsx22(StatusChip10, {
             tone: "neutral",
-            label: `v${viewRef.version}`,
+            label: `v${presRef.version}`,
             size: "sm"
           }),
-          spec?.meta?.stability ? /* @__PURE__ */ jsx22(StatusChip9, {
+          spec?.meta?.stability ? /* @__PURE__ */ jsx22(StatusChip10, {
             tone: spec.meta.stability === "stable" ? "success" : "warning",
             label: spec.meta.stability,
             size: "sm"
@@ -2531,20 +2823,20 @@ function FeatureDataViewDetailTemplate({
         children: [
           /* @__PURE__ */ jsx22("div", {
             className: "space-y-6 lg:col-span-2",
-            children: /* @__PURE__ */ jsx22(Card4, {
+            children: /* @__PURE__ */ jsx22(Card5, {
               className: "p-6",
               children: /* @__PURE__ */ jsxs16(VStack13, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs16(HStack10, {
+                  /* @__PURE__ */ jsxs16(HStack11, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx22(Code4, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx22(Code5, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
                       /* @__PURE__ */ jsx22("h3", {
-                        className: "text-lg font-semibold",
-                        children: "View Definition"
+                        className: "font-semibold text-lg",
+                        children: "Component Definition"
                       })
                     ]
                   }),
@@ -2555,28 +2847,15 @@ function FeatureDataViewDetailTemplate({
                         className: "text-muted-foreground",
                         children: spec.meta.description
                       }),
-                      /* @__PURE__ */ jsxs16(Box5, {
-                        className: "flex-col gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx22("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Source Query"
-                          }),
-                          /* @__PURE__ */ jsx22(CodeBlock4, {
-                            code: JSON.stringify(spec.source, null, 2),
-                            language: "json"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs16(Box5, {
+                      /* @__PURE__ */ jsxs16(Box6, {
                         className: "flex-col gap-2",
                         children: [
                           /* @__PURE__ */ jsx22("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "View Configuration"
+                            className: "font-medium text-muted-foreground text-sm uppercase tracking-wider",
+                            children: "Spec Details"
                           }),
-                          /* @__PURE__ */ jsx22(CodeBlock4, {
-                            code: JSON.stringify(spec.view, null, 2),
+                          /* @__PURE__ */ jsx22(CodeBlock5, {
+                            code: JSON.stringify(spec, null, 2),
                             language: "json"
                           })
                         ]
@@ -2587,10 +2866,10 @@ function FeatureDataViewDetailTemplate({
                     children: [
                       /* @__PURE__ */ jsx22("p", {
                         className: "text-muted-foreground",
-                        children: "Full definition details are not available for this data view reference."
+                        children: "Full component details are not available for this presentation reference."
                       }),
-                      /* @__PURE__ */ jsx22(CodeBlock4, {
-                        code: JSON.stringify(viewRef, null, 2),
+                      /* @__PURE__ */ jsx22(CodeBlock5, {
+                        code: JSON.stringify(presRef, null, 2),
                         language: "json"
                       })
                     ]
@@ -2601,19 +2880,19 @@ function FeatureDataViewDetailTemplate({
           }),
           /* @__PURE__ */ jsx22("div", {
             className: "space-y-6",
-            children: /* @__PURE__ */ jsx22(Card4, {
+            children: /* @__PURE__ */ jsx22(Card5, {
               className: "p-6",
               children: /* @__PURE__ */ jsxs16(VStack13, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs16(HStack10, {
+                  /* @__PURE__ */ jsxs16(HStack11, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx22(Database5, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx22(Database6, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
                       /* @__PURE__ */ jsx22("h3", {
-                        className: "text-lg font-semibold",
+                        className: "font-semibold text-lg",
                         children: "Metadata"
                       })
                     ]
@@ -2629,7 +2908,7 @@ function FeatureDataViewDetailTemplate({
                           }),
                           /* @__PURE__ */ jsx22("dd", {
                             className: "truncate font-medium",
-                            children: viewRef.key
+                            children: presRef.key
                           })
                         ]
                       }),
@@ -2641,7 +2920,7 @@ function FeatureDataViewDetailTemplate({
                           }),
                           /* @__PURE__ */ jsx22("dd", {
                             className: "font-medium",
-                            children: viewRef.version
+                            children: presRef.version
                           })
                         ]
                       }),
@@ -2653,29 +2932,13 @@ function FeatureDataViewDetailTemplate({
                           }),
                           /* @__PURE__ */ jsx22("dd", {
                             className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx22(StatusChip9, {
+                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx22(StatusChip10, {
                               label: o,
                               size: "sm",
                               tone: "neutral"
                             }, o))
                           })
                         ]
-                      }),
-                      spec?.meta?.tags && /* @__PURE__ */ jsxs16("div", {
-                        children: [
-                          /* @__PURE__ */ jsx22("dt", {
-                            className: "text-muted-foreground",
-                            children: "Tags"
-                          }),
-                          /* @__PURE__ */ jsx22("dd", {
-                            className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx22(StatusChip9, {
-                              label: `#${t}`,
-                              size: "sm",
-                              tone: "neutral"
-                            }, t))
-                          })
-                        ]
                       })
                     ]
                   })
@@ -2685,37 +2948,37 @@ function FeatureDataViewDetailTemplate({
           }),
           relatedDocs?.length ? /* @__PURE__ */ jsx22("div", {
             className: "lg:col-span-3",
-            children: /* @__PURE__ */ jsx22(Card4, {
+            children: /* @__PURE__ */ jsx22(Card5, {
               className: "p-6",
               children: /* @__PURE__ */ jsxs16(VStack13, {
                 gap: "md",
                 children: [
-                  /* @__PURE__ */ jsxs16(HStack10, {
+                  /* @__PURE__ */ jsxs16(HStack11, {
                     className: "items-center gap-2 border-b pb-2",
                     children: [
-                      /* @__PURE__ */ jsx22(BookOpen3, {
-                        className: "text-muted-foreground h-5 w-5"
+                      /* @__PURE__ */ jsx22(BookOpen4, {
+                        className: "h-5 w-5 text-muted-foreground"
                       }),
                       /* @__PURE__ */ jsx22("h3", {
-                        className: "text-lg font-semibold",
+                        className: "font-semibold text-lg",
                         children: "Related Documentation"
                       })
                     ]
                   }),
                   /* @__PURE__ */ jsx22("div", {
                     className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx22(Link4, {
+                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx22(Link5, {
                       href: doc.route || `/docs/${doc.id}`,
                       className: "group block",
                       children: /* @__PURE__ */ jsxs16("div", {
-                        className: "hover:border-primary h-full rounded-lg border p-4 transition-colors",
+                        className: "h-full rounded-lg border p-4 transition-colors hover:border-primary",
                         children: [
                           /* @__PURE__ */ jsx22("h4", {
-                            className: "group-hover:text-primary mb-1 font-semibold",
+                            className: "mb-1 font-semibold group-hover:text-primary",
                             children: doc.title
                           }),
                           doc.summary && /* @__PURE__ */ jsx22("p", {
-                            className: "text-muted-foreground line-clamp-2 text-sm",
+                            className: "line-clamp-2 text-muted-foreground text-sm",
                             children: doc.summary
                           })
                         ]
@@ -2731,66 +2994,26 @@ function FeatureDataViewDetailTemplate({
     ]
   });
 }
-// src/presentation/features/templates/FeatureFormDetailTemplate/FeatureFormDetailTemplate.tsx
+// src/presentation/features/templates/FeaturePresentationsTemplate/FeaturePresentationsTemplate.tsx
 import {
   Breadcrumbs as Breadcrumbs11,
-  CodeBlock as CodeBlock5,
-  EmptyState as EmptyState6,
-  PageHeaderResponsive as PageHeaderResponsive12,
-  StatusChip as StatusChip10
+  PageHeaderResponsive as PageHeaderResponsive12
 } from "@contractspec/lib.design-system";
-import { Card as Card5 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Box as Box6, HStack as HStack11, VStack as VStack14 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { VStack as VStack14 } from "@contractspec/lib.ui-kit-web/ui/stack";
 import { cn as cn16 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { BookOpen as BookOpen4, Code as Code5, Database as Database6, PenTool } from "lucide-react";
-import Link5 from "next/link";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 "use client";
-function FeatureFormDetailTemplate({
+function FeaturePresentationsTemplate({
   feature,
-  formKey,
-  form,
-  spec,
   className
 }) {
-  const formRef = form ?? feature.forms?.find((f) => f.key === formKey);
-  const relatedDocs = useRelatedDocs(formRef?.key || "", spec?.meta?.tags);
-  if (!formRef) {
-    return /* @__PURE__ */ jsxs17(VStack14, {
-      gap: "lg",
-      className: cn16("mx-auto w-full max-w-5xl p-6", className),
-      children: [
-        /* @__PURE__ */ jsx23(PageHeaderResponsive12, {
-          title: "Form Not Found",
-          subtitle: `Form ${formKey} not found in feature ${feature.meta.key}`,
-          breadcrumb: /* @__PURE__ */ jsx23(Breadcrumbs11, {
-            items: [
-              { label: "Features", href: "/features" },
-              {
-                label: feature.meta.title || feature.meta.key,
-                href: `/features/${feature.meta.key}`
-              },
-              { label: "Forms" }
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsx23(EmptyState6, {
-          title: "Form not found",
-          description: `The form '${formKey}' could not be found in this feature.`,
-          icon: /* @__PURE__ */ jsx23(PenTool, {
-            className: "text-muted-foreground h-12 w-12"
-          })
-        })
-      ]
-    });
-  }
   return /* @__PURE__ */ jsxs17(VStack14, {
     gap: "lg",
     className: cn16("mx-auto w-full max-w-5xl p-6", className),
     children: [
       /* @__PURE__ */ jsx23(PageHeaderResponsive12, {
-        title: formRef.key,
-        subtitle: `Form defined in ${feature.meta.title ?? feature.meta.key}`,
+        title: "Presentations",
+        subtitle: `Presentations defined in ${feature.meta.title ?? feature.meta.key}`,
         breadcrumb: /* @__PURE__ */ jsx23(Breadcrumbs11, {
           items: [
             { label: "Features", href: "/features" },
@@ -2798,235 +3021,12 @@ function FeatureFormDetailTemplate({
               label: feature.meta.title || feature.meta.key,
               href: `/features/${feature.meta.key}`
             },
-            { label: "Forms", href: `/features/${feature.meta.key}#forms` },
-            { label: formRef.key }
+            { label: "Presentations" }
           ]
         })
       }),
-      /* @__PURE__ */ jsxs17(HStack11, {
-        gap: "sm",
-        children: [
-          /* @__PURE__ */ jsx23(StatusChip10, {
-            tone: "neutral",
-            label: formRef.key,
-            size: "sm",
-            icon: /* @__PURE__ */ jsx23(PenTool, {
-              className: "h-3 w-3"
-            })
-          }),
-          /* @__PURE__ */ jsx23(StatusChip10, {
-            tone: "neutral",
-            label: `v${formRef.version}`,
-            size: "sm"
-          }),
-          spec?.meta?.stability ? /* @__PURE__ */ jsx23(StatusChip10, {
-            tone: spec.meta.stability === "stable" ? "success" : "warning",
-            label: spec.meta.stability,
-            size: "sm"
-          }) : null
-        ]
-      }),
-      /* @__PURE__ */ jsxs17("div", {
-        className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-        children: [
-          /* @__PURE__ */ jsx23("div", {
-            className: "space-y-6 lg:col-span-2",
-            children: /* @__PURE__ */ jsx23(Card5, {
-              className: "p-6",
-              children: /* @__PURE__ */ jsxs17(VStack14, {
-                gap: "md",
-                children: [
-                  /* @__PURE__ */ jsxs17(HStack11, {
-                    className: "items-center gap-2 border-b pb-2",
-                    children: [
-                      /* @__PURE__ */ jsx23(Code5, {
-                        className: "text-muted-foreground h-5 w-5"
-                      }),
-                      /* @__PURE__ */ jsx23("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Form Definition"
-                      })
-                    ]
-                  }),
-                  spec ? /* @__PURE__ */ jsxs17(VStack14, {
-                    gap: "lg",
-                    children: [
-                      spec.meta.description && /* @__PURE__ */ jsx23("p", {
-                        className: "text-muted-foreground",
-                        children: spec.meta.description
-                      }),
-                      /* @__PURE__ */ jsxs17(Box6, {
-                        className: "flex-col gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx23("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Fields"
-                          }),
-                          /* @__PURE__ */ jsx23(CodeBlock5, {
-                            code: JSON.stringify(spec.fields, null, 2),
-                            language: "json"
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs17(Box6, {
-                        className: "flex-col gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx23("span", {
-                            className: "text-muted-foreground text-sm font-medium tracking-wider uppercase",
-                            children: "Actions"
-                          }),
-                          /* @__PURE__ */ jsx23(CodeBlock5, {
-                            code: JSON.stringify(spec.actions, null, 2),
-                            language: "json"
-                          })
-                        ]
-                      })
-                    ]
-                  }) : /* @__PURE__ */ jsxs17(VStack14, {
-                    gap: "md",
-                    children: [
-                      /* @__PURE__ */ jsx23("p", {
-                        className: "text-muted-foreground",
-                        children: "Full form definition details are not available for this form reference."
-                      }),
-                      /* @__PURE__ */ jsx23(CodeBlock5, {
-                        code: JSON.stringify(formRef, null, 2),
-                        language: "json"
-                      })
-                    ]
-                  })
-                ]
-              })
-            })
-          }),
-          /* @__PURE__ */ jsx23("div", {
-            className: "space-y-6",
-            children: /* @__PURE__ */ jsx23(Card5, {
-              className: "p-6",
-              children: /* @__PURE__ */ jsxs17(VStack14, {
-                gap: "md",
-                children: [
-                  /* @__PURE__ */ jsxs17(HStack11, {
-                    className: "items-center gap-2 border-b pb-2",
-                    children: [
-                      /* @__PURE__ */ jsx23(Database6, {
-                        className: "text-muted-foreground h-5 w-5"
-                      }),
-                      /* @__PURE__ */ jsx23("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Metadata"
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs17("dl", {
-                    className: "grid grid-cols-1 gap-4 text-sm",
-                    children: [
-                      /* @__PURE__ */ jsxs17("div", {
-                        children: [
-                          /* @__PURE__ */ jsx23("dt", {
-                            className: "text-muted-foreground",
-                            children: "Key"
-                          }),
-                          /* @__PURE__ */ jsx23("dd", {
-                            className: "truncate font-medium",
-                            children: formRef.key
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsxs17("div", {
-                        children: [
-                          /* @__PURE__ */ jsx23("dt", {
-                            className: "text-muted-foreground",
-                            children: "Version"
-                          }),
-                          /* @__PURE__ */ jsx23("dd", {
-                            className: "font-medium",
-                            children: formRef.version
-                          })
-                        ]
-                      }),
-                      spec?.meta?.owners && /* @__PURE__ */ jsxs17("div", {
-                        children: [
-                          /* @__PURE__ */ jsx23("dt", {
-                            className: "text-muted-foreground",
-                            children: "Owners"
-                          }),
-                          /* @__PURE__ */ jsx23("dd", {
-                            className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.owners.map((o) => /* @__PURE__ */ jsx23(StatusChip10, {
-                              label: o,
-                              size: "sm",
-                              tone: "neutral"
-                            }, o))
-                          })
-                        ]
-                      }),
-                      spec?.meta?.tags && /* @__PURE__ */ jsxs17("div", {
-                        children: [
-                          /* @__PURE__ */ jsx23("dt", {
-                            className: "text-muted-foreground",
-                            children: "Tags"
-                          }),
-                          /* @__PURE__ */ jsx23("dd", {
-                            className: "flex flex-wrap gap-1 font-medium",
-                            children: spec.meta.tags.map((t) => /* @__PURE__ */ jsx23(StatusChip10, {
-                              label: `#${t}`,
-                              size: "sm",
-                              tone: "neutral"
-                            }, t))
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              })
-            })
-          }),
-          relatedDocs?.length ? /* @__PURE__ */ jsx23("div", {
-            className: "lg:col-span-3",
-            children: /* @__PURE__ */ jsx23(Card5, {
-              className: "p-6",
-              children: /* @__PURE__ */ jsxs17(VStack14, {
-                gap: "md",
-                children: [
-                  /* @__PURE__ */ jsxs17(HStack11, {
-                    className: "items-center gap-2 border-b pb-2",
-                    children: [
-                      /* @__PURE__ */ jsx23(BookOpen4, {
-                        className: "text-muted-foreground h-5 w-5"
-                      }),
-                      /* @__PURE__ */ jsx23("h3", {
-                        className: "text-lg font-semibold",
-                        children: "Related Documentation"
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx23("div", {
-                    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
-                    children: relatedDocs.map((doc) => /* @__PURE__ */ jsx23(Link5, {
-                      href: doc.route || `/docs/${doc.id}`,
-                      className: "group block",
-                      children: /* @__PURE__ */ jsxs17("div", {
-                        className: "hover:border-primary h-full rounded-lg border p-4 transition-colors",
-                        children: [
-                          /* @__PURE__ */ jsx23("h4", {
-                            className: "group-hover:text-primary mb-1 font-semibold",
-                            children: doc.title
-                          }),
-                          doc.summary && /* @__PURE__ */ jsx23("p", {
-                            className: "text-muted-foreground line-clamp-2 text-sm",
-                            children: doc.summary
-                          })
-                        ]
-                      })
-                    }, doc.id))
-                  })
-                ]
-              })
-            })
-          }) : null
-        ]
+      /* @__PURE__ */ jsx23(FeaturePresentationsList, {
+        feature
       })
     ]
   });