spine-framework 0.3.145 → 0.4.1

package/.framework/src/components/ui/item.tsx

@@ -1,3 +1,16 @@
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Defines the UI item component family for list and detail surfaces"]
+// CIL[DOC-RESPONSIBILITY responsibility="Serves as the module-level entry point and owner for the item component family"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="named component exports" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports dependencies, defines style variants and exports the Item component family" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
+// CIL[DOC-AUDIENCE audience="frontend-app-shell"]
+
+
+
+
 
 
 
@@ -12,42 +25,28 @@
 
 
 
-// CIL[BEGIN chunk_id="item_module_header_1783796064" type="module_header" identity="module_header" parent="none"]
-// CIL[DOC-MACRO purpose="Import dependencies for item UI components"]
-// CIL[DOC-RESPONSIBILITY responsibility="Import React, CVA, Radix UI, and local utilities"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="imported modules" errors="none" side_effects="module imports"]
-// CIL[DOC-MICRO logic_summary="Imports all necessary dependencies for item component system" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="developer"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: .framework/src/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
-// CIL[END chunk_id="item_module_header_1783796064"]
-// CIL[BEGIN chunk_id="item_itemgroup_1783796064" type="function" identity="ItemGroup" parent="none"]
-// CIL[DOC-MACRO purpose="Render container for grouping multiple items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create list container for item components"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled list container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates flex container with responsive gap for item grouping" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Defines the UI item component family for list and detail surfaces'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:module_header:module_header"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemGroup:component" type="component" identity="ItemGroup" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Container that wraps a list of item components with role=list and group styling"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders a list group container for item siblings"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a div with role=list, applies cva spacing for size variants, forwards props and className" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -61,21 +60,22 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemgroup_1783796064"]
-// CIL[BEGIN chunk_id="item_itemseparator_1783796064" type="function" identity="ItemSeparator" parent="none"]
-// CIL[DOC-MACRO purpose="Render horizontal separator between items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create styled separator for item lists"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="horizontal separator" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates horizontal separator with margin spacing" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, .framework/src/components/ui/table-primitives.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Container that wraps a list of item components with role=list and group styling'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemGroup:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemSeparator:component" type="component" identity="ItemSeparator" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Horizontal separator for item groups"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders a horizontal separator between item group entries"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="Separator JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Wraps the Separator component and applies my-2 margins" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemSeparator({
   className,
   ...props
@@ -89,21 +89,23 @@ function ItemSeparator({
     />
   )
 }
-// CIL[END chunk_id="item_itemseparator_1783796064"]
-// CIL[BEGIN chunk_id="item_itemvariants_1783796064" type="cva" identity="itemVariants" parent="none"]
-// CIL[DOC-MACRO purpose="Define style variants for item components"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create CVA configuration for item styling"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/functions/_shared/principal.ts\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/components/ui/table-primitives.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="CVA variant configuration" errors="none" side_effects="defines styling variants"]
-// CIL[DOC-MICRO logic_summary="Defines variant and size options for item component styling" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 1. Direct calls: 0. Related files: .framework/src/components/ui/dialog.tsx, .framework/functions/_shared/principal.ts, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/schema-utils.ts, .framework/src/components/ui/table-primitives.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 1. Total affected: 1."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Horizontal separator for item groups'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemSeparator:component"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:itemVariants:constant" type="constant" identity="itemVariants" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="cva style recipe for the main Item wrapper"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provides a class-variance-authority style recipe for the main Item wrapper"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="cva variant object" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines default, outline and muted variants plus default and sm/xs sizes" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 const itemVariants = cva(
   "group/item flex w-full flex-wrap items-center rounded-md border text-xs/relaxed transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
@@ -125,21 +127,23 @@ const itemVariants = cva(
     },
   }
 )
-// CIL[END chunk_id="item_itemvariants_1783796064"]
-// CIL[BEGIN chunk_id="item_item_1783796064" type="function" identity="Item" parent="none"]
-// CIL[DOC-MACRO purpose="Render main item component with variants"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create flexible item container with styling options"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[\".framework/src/components/ui/table-primitives.tsx\",\".framework/src/components/ui/dialog.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled item element" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates main item component with variant support and asChild pattern" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: .framework/src/components/ui/table-primitives.tsx, .framework/src/components/ui/dialog.tsx, custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/RolesPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='cva style recipe for the main Item wrapper'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:itemVariants:constant"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:Item:component" type="component" identity="Item" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Main item wrapper component with size, variant and asChild support"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders the main item wrapper with variant, size and asChild support"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, variant, size, asChild, VariantProps, ...props" outputs="div or Slot.Root JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Selects Slot.Root or div based on asChild, applies itemVariants class and data attributes" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function Item({
   className,
   variant = "default",
@@ -159,21 +163,24 @@ function Item({
     />
   )
 }
-// CIL[END chunk_id="item_item_1783796064"]
-// CIL[BEGIN chunk_id="item_itemmediavariants_1783796064" type="cva" identity="itemMediaVariants" parent="none"]
-// CIL[DOC-MACRO purpose="Define style variants for item media components"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create CVA configuration for media styling"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="CVA variant configuration" errors="none" side_effects="defines styling variants"]
-// CIL[DOC-MICRO logic_summary="Defines variant options for item media components (default, icon, image)" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Main item wrapper component with size, variant and asChild support'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:Item:component"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:itemMediaVariants:constant" type="constant" identity="itemMediaVariants" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="cva style recipe for item media (icon, image)"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provides a cva style recipe for item media (icon, image)"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="cva variant object" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines default, icon and image media variants with size-aware rules" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 const itemMediaVariants = cva(
   "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
@@ -190,21 +197,23 @@ const itemMediaVariants = cva(
     },
   }
 )
-// CIL[END chunk_id="item_itemmediavariants_1783796064"]
-// CIL[BEGIN chunk_id="item_itemmedia_1783796064" type="function" identity="ItemMedia" parent="none"]
-// CIL[DOC-MACRO purpose="Render media container for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create container for item media (icons, images)"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled media container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates media container with variant support for icons and images" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='cva style recipe for item media (icon, image)'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:itemMediaVariants:constant"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemMedia:component" type="component" identity="ItemMedia" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Renders media (icon, image) inside an item"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders media (icon, image) inside an item"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, variant, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a div with item-media slot and itemMediaVariants classes" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemMedia({
   className,
   variant = "default",
@@ -219,21 +228,23 @@ function ItemMedia({
     />
   )
 }
-// CIL[END chunk_id="item_itemmedia_1783796064"]
-// CIL[BEGIN chunk_id="item_itemcontent_1783796064" type="function" identity="ItemContent" parent="none"]
-// CIL[DOC-MACRO purpose="Render content container for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create flexible content area for item text and elements"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled content container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates flex container for item content with responsive sizing" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Renders media (icon, image) inside an item'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemMedia:component"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemContent:component" type="component" identity="ItemContent" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Flexible content column for item main text"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders the flexible content column for item main text"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a flex column with item-content slot, supports adjacent sibling layout" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -246,21 +257,22 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemcontent_1783796064"]
-// CIL[BEGIN chunk_id="item_itemtitle_1783796064" type="function" identity="ItemTitle" parent="none"]
-// CIL[DOC-MACRO purpose="Render title text for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create styled title component for item headers"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled title element" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates title element with truncation and underline styling" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Flexible content column for item main text'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemContent:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemTitle:component" type="component" identity="ItemTitle" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Title line for an item"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders a clamped single-line title inside an item"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a clamped single-line title with underline offset styling" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -273,21 +285,22 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemtitle_1783796064"]
-// CIL[BEGIN chunk_id="item_itemdescription_1783796064" type="function" identity="ItemDescription" parent="none"]
-// CIL[DOC-MACRO purpose="Render description text for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create styled description component for item content"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled description element" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates description element with truncation and link styling" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Title line for an item'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemTitle:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemDescription:component" type="component" identity="ItemDescription" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Secondary description text for an item"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders secondary description text for an item"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="p JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a clamped two-line muted paragraph with link hover styles" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
@@ -300,21 +313,22 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemdescription_1783796064"]
-// CIL[BEGIN chunk_id="item_itemactions_1783796064" type="function" identity="ItemActions" parent="none"]
-// CIL[DOC-MACRO purpose="Render actions container for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create container for item action buttons and controls"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled actions container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates flex container for item actions with gap spacing" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Secondary description text for an item'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemDescription:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemActions:component" type="component" identity="ItemActions" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Action buttons or controls attached to an item"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders action buttons or controls attached to an item"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a flex row with item-actions slot and gap-2 spacing" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -324,21 +338,22 @@ function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemactions_1783796064"]
-// CIL[BEGIN chunk_id="item_itemheader_1783796064" type="function" identity="ItemHeader" parent="none"]
-// CIL[DOC-MACRO purpose="Render header container for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create header area for item top content"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled header container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates full-width header container with justify-between layout" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Action buttons or controls attached to an item'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemActions:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemHeader:component" type="component" identity="ItemHeader" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Header row that spans the full item width"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders a header row that spans the full item width"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a basis-full row with item-header slot and justify-between" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -351,21 +366,22 @@ function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemheader_1783796064"]
-// CIL[BEGIN chunk_id="item_itemfooter_1783796064" type="function" identity="ItemFooter" parent="none"]
-// CIL[DOC-MACRO purpose="Render footer container for items"]
-// CIL[DOC-RESPONSIBILITY responsibility="Create footer area for item bottom content"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled footer container" errors="none" side_effects="renders DOM element"]
-// CIL[DOC-MICRO logic_summary="Creates full-width footer container with justify-between layout" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Header row that spans the full item width'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemHeader:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:ItemFooter:component" type="component" identity="ItemFooter" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Footer row that spans the full item width"]
+// CIL[DOC-RESPONSIBILITY responsibility="Renders a footer row that spans the full item width"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className, ...props" outputs="div JSX" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a basis-full row with item-footer slot and justify-between" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -378,21 +394,21 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="item_itemfooter_1783796064"]
-// CIL[BEGIN chunk_id="item_exports_1783796064" type="exports" identity="exports" parent="none"]
-// CIL[DOC-MACRO purpose="Export item components for public use"]
-// CIL[DOC-RESPONSIBILITY responsibility="Export all item-related components"]
-// CIL[DOC-CONTEXT module="item" layer="ui_components" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="exported components" errors="none" side_effects="module exports"]
-// CIL[DOC-MICRO logic_summary="Exports comprehensive item component system for consumption" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: ui_components. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Footer row that spans the full item width'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:ItemFooter:component"]
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/item.tsx:exports:variable" type="variable" identity="exports" parent="~/.framework/src/components/ui/item.tsx"]
+// CIL[DOC-MACRO purpose="Named exports for the item component family"]
+// CIL[DOC-RESPONSIBILITY responsibility="Exposes all public item subcomponents and style recipes"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/item" layer="ui" related_files=".framework/src/components/ui/item.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="named exports" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Exports all public item subcomponents and style recipes" notable_decisions="none"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 export {
   Item,
   ItemMedia,
@@ -405,4 +421,10 @@ export {
   ItemHeader,
   ItemFooter,
 }
-// CIL[END chunk_id="item_exports_1783796064"]
+// CIL[DOC-VECTOR type="context" content="purpose='Named exports for the item component family'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/separator.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/components/ui/item.tsx:exports:variable"]