spine-framework 0.3.145 → 0.4.0

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

@@ -1,3 +1,19 @@
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:use_client:constant" type="constant" identity="use_client" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Declare this module as a Next.js client component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Mark the file for client-side React execution"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="use client directive" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="String directive placed at the top of the file to enable client rendering" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
+"use client"
+// CIL[DOC-VECTOR type="context" content="purpose='Declare this module as a Next.js client component'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:use_client:constant"]
 
 
 
@@ -11,42 +27,39 @@
 
 
 
-// CIL[BEGIN chunk_id="field_module_header_1783844098" type="module_header" identity="imports" parent="none"]
-// CIL[DOC-MACRO purpose="Import dependencies for form field components"]
-// CIL[DOC-RESPONSIBILITY responsibility="Import React hooks and UI components"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="React hooks, styling utilities, components" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports useMemo for optimization, cva for variants, and UI components" 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. Direct callers: 0. Direct calls: 0. Related files: custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/src/components/ui/dialog.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="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
-"use client"
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Import dependencies for the field UI component module"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide React, CVA, and local UI utilities to the field subcomponents"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="imported bindings available to the module" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports useMemo, cva, cn, Label, and Separator for use by the field components" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
+// CIL[DOC-AUDIENCE audience="developers"]
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
-// CIL[END chunk_id="field_module_header_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldset_1783844098" type="function" identity="FieldSet" parent="none"]
-// CIL[DOC-MACRO purpose="Fieldset wrapper for form controls"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide semantic fieldset container for form groups"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/portal/pages/ContentPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled fieldset element" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates flex column fieldset with conditional 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. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, custom/apps/portal/pages/ContentPage.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='Import dependencies for the field UI component module'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:module_header:module_header"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldSet:component" type="component" identity="FieldSet" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a fieldset wrapper for grouped form controls"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a flex column layout for field sets with reduced gaps for checkbox and radio groups"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<fieldset>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Spreads props onto a fieldset with data-slot and a responsive flex gap using cn class merging" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
     <fieldset
@@ -59,21 +72,22 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
     />
   )
 }
-// CIL[END chunk_id="field_fieldset_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldlegend_1783844098" type="function" identity="FieldLegend" parent="none"]
-// CIL[DOC-MACRO purpose="Legend component for fieldsets"]
-// CIL[DOC-RESPONSIBILITY responsibility="Render styled legend with variant support"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled legend element" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates legend with conditional styling based on variant type" 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. Direct callers: 0. Direct calls: 0. Related files: .framework/src/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/portal/pages/ContentPage.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="context" content="purpose='Render a fieldset wrapper for grouped form controls'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldSet:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldLegend:component" type="component" identity="FieldLegend" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a styled legend or label variant for field groups"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a field legend with optional label styling"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, variant: 'legend' | 'label', ...props: React.ComponentProps<legend>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a legend with data-variant and conditional text sizing classes" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldLegend({
   className,
   variant = "legend",
@@ -91,21 +105,22 @@ function FieldLegend({
     />
   )
 }
-// CIL[END chunk_id="field_fieldlegend_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldgroup_1783844098" type="function" identity="FieldGroup" parent="none"]
-// CIL[DOC-MACRO purpose="Group container for form fields"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide responsive layout container for field groups"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/db.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled group div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates container query aware flex column with conditional 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. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/schema-utils.ts, .framework/functions/_shared/principal.ts, .framework/functions/_shared/db.ts, custom/apps/cortex/pages/operations/OperationsDashboard.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='Render a styled legend or label variant for field groups'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldLegend:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldGroup:component" type="component" identity="FieldGroup" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a full-width container for grouped fields"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a responsive, container-aware field group wrapper"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<div>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Applies data-slot and container query classes for vertical spacing between nested field groups" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -118,21 +133,23 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="field_fieldgroup_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldvariants_1783844098" type="const" identity="fieldVariants" parent="none"]
-// CIL[DOC-MACRO purpose="Style variants for field layout"]
-// CIL[DOC-RESPONSIBILITY responsibility="Define orientation variants for field components"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="CSS class names" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="CVA configuration for vertical, horizontal, and responsive layouts" 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. 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='Render a full-width container for grouped fields'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldGroup:component"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:fieldVariants:constant" type="constant" identity="fieldVariants" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Define CVA style variants for field layout orientation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Supply flex-orientation classes for vertical, horizontal, and responsive field layouts"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="orientation: 'vertical' | 'horizontal' | 'responsive'" outputs="merged className string" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Uses class-variance-authority to combine base, orientation, and default variant classes" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 const fieldVariants = cva(
   "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
@@ -150,21 +167,23 @@ const fieldVariants = cva(
     },
   }
 )
-// CIL[END chunk_id="field_fieldvariants_1783844098"]
-// CIL[BEGIN chunk_id="field_field_1783844098" type="function" identity="Field" parent="none"]
-// CIL[DOC-MACRO purpose="Main field container component"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide layout container for form field elements"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled field div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates group role container with orientation-based 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. 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='Define CVA style variants for field layout orientation'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:fieldVariants:constant"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:Field:component" type="component" identity="Field" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render the root field container with orientation variants"]
+// CIL[DOC-RESPONSIBILITY responsibility="Compose the field wrapper and apply the selected field variant"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, orientation: 'vertical' | 'horizontal' | 'responsive', ...props: React.ComponentProps<div>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a div with role group, data-slot, and applies fieldVariants output with className" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function Field({
   className,
   orientation = "vertical",
@@ -180,21 +199,23 @@ function Field({
     />
   )
 }
-// CIL[END chunk_id="field_field_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldcontent_1783844098" type="function" identity="FieldContent" parent="none"]
-// CIL[DOC-MACRO purpose="Content container for field elements"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide layout container for field input content"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled content div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates flex column container with tight spacing for inputs" 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. 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='Render the root field container with orientation variants'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:Field:component"]
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldContent:component" type="component" identity="FieldContent" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render the content area inside a field"]
+// CIL[DOC-RESPONSIBILITY responsibility="Hold the control and description within a field"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<div>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a div with data-slot, flex-1, and a tight vertical gap for field content" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -207,21 +228,22 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="field_fieldcontent_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldlabel_1783844098" type="function" identity="FieldLabel" parent="none"]
-// CIL[DOC-MACRO purpose="Label component for form fields"]
-// CIL[DOC-RESPONSIBILITY responsibility="Render styled label with field-specific styling"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled Label component" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates label with conditional styling and responsive 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. 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='Render the content area inside a field'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldContent:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldLabel:component" type="component" identity="FieldLabel" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a label for a field using the shared Label component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a styled, interactive-aware label wrapper"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<typeof Label>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Wraps the imported Label with data-slot and peer/state-aware background and border classes" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldLabel({
   className,
   ...props
@@ -238,21 +260,22 @@ function FieldLabel({
     />
   )
 }
-// CIL[END chunk_id="field_fieldlabel_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldtitle_1783844098" type="function" identity="FieldTitle" parent="none"]
-// CIL[DOC-MACRO purpose="Title component for field headers"]
-// CIL[DOC-RESPONSIBILITY responsibility="Display styled title text for form sections"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled title div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates small, medium-weight title with disabled state 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. 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='Render a label for a field using the shared Label component'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldLabel:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldTitle:component" type="component" identity="FieldTitle" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a small field title inside a label"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a concise title for field labels"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<div>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a div with data-slot and small medium text styling" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -265,21 +288,22 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-// CIL[END chunk_id="field_fieldtitle_1783844098"]
-// CIL[BEGIN chunk_id="field_fielddescription_1783844098" type="function" identity="FieldDescription" parent="none"]
-// CIL[DOC-MACRO purpose="Description text for form fields"]
-// CIL[DOC-RESPONSIBILITY responsibility="Display styled description text with link support"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled description p" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates muted text with conditional spacing 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. 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='Render a small field title inside a label'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldTitle:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldDescription:component" type="component" identity="FieldDescription" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render descriptive helper text for a field"]
+// CIL[DOC-RESPONSIBILITY responsibility="Show muted helper or hint text with link styling"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, ...props: React.ComponentProps<p>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a p with data-slot, muted color, and underline styles for nested links" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
@@ -294,21 +318,22 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     />
   )
 }
-// CIL[END chunk_id="field_fielddescription_1783844098"]
-// CIL[BEGIN chunk_id="field_fieldseparator_1783844098" type="function" identity="FieldSeparator" parent="none"]
-// CIL[DOC-MACRO purpose="Visual separator between field sections"]
-// CIL[DOC-RESPONSIBILITY responsibility="Render styled separator with optional content"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="styled separator div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Creates horizontal line with centered content overlay" 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. 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='Render descriptive helper text for a field'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldDescription:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldSeparator:component" type="component" identity="FieldSeparator" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render a visual separator with optional centered content"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a horizontal separator with an optional label"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, children: React.ReactNode, ...props: React.ComponentProps<div>" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a relative div with the Separator primitive and centered text when children are present" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldSeparator({
   children,
   className,
@@ -338,21 +363,22 @@ function FieldSeparator({
     </div>
   )
 }
-// CIL[END chunk_id="field_fieldseparator_1783844098"]
-// CIL[BEGIN chunk_id="field_fielderror_1783844098" type="function" identity="FieldError" parent="none"]
-// CIL[DOC-MACRO purpose="Error display component for form validation"]
-// CIL[DOC-RESPONSIBILITY responsibility="Render validation errors with deduplication"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="error display div" errors="none" side_effects="renders DOM"]
-// CIL[DOC-MICRO logic_summary="Processes error array with deduplication and conditional rendering" 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. 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='Render a visual separator with optional centered content'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldSeparator:component"]
+
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:FieldError:component" type="component" identity="FieldError" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Render validation errors for a field"]
+// CIL[DOC-RESPONSIBILITY responsibility="Format and display field-level errors or children"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="className: string, children: React.ReactNode, errors: Array<{message?: string} | undefined>, ...props: React.ComponentProps<div>" outputs="JSX.Element | null" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Deduplicates error messages with useMemo and renders a single message or bullet list" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 function FieldError({
   className,
   children,
@@ -403,21 +429,21 @@ function FieldError({
     </div>
   )
 }
-// CIL[END chunk_id="field_fielderror_1783844098"]
-// CIL[BEGIN chunk_id="field_exports_1783844098" type="exports" identity="exports" parent="none"]
-// CIL[DOC-MACRO purpose="Export field components"]
-// CIL[DOC-RESPONSIBILITY responsibility="Make all field components available for import"]
-// CIL[DOC-CONTEXT module="field" layer="ui" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="component exports" errors="none" side_effects="module exports"]
-// CIL[DOC-MICRO logic_summary="Exports all field form components for external usage" 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. 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='Render validation errors for a field'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:FieldError:component"]
+// CIL[BEGIN stable_id="~/.framework/src/components/ui/field.tsx:exports:variable" type="variable" identity="exports" parent="~/.framework/src/components/ui/field.tsx"]
+// CIL[DOC-MACRO purpose="Public exports of the field UI primitives"]
+// CIL[DOC-RESPONSIBILITY responsibility="Re-export all field component symbols for module consumers"]
+// CIL[DOC-CONTEXT module=".framework/src/components/ui/field.tsx" layer="ui" related_files=".framework/src/components/ui/field.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/separator.tsx,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="none" outputs="named field component exports" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Named export block exposing Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stable]
 export {
   Field,
   FieldLabel,
@@ -430,4 +456,10 @@ export {
   FieldContent,
   FieldTitle,
 }
-// CIL[END chunk_id="field_exports_1783844098"]
+// CIL[DOC-VECTOR type="context" content="purpose='Public exports of the field UI primitives'; No verified external callers; imports: .framework/src/lib/utils.ts,.framework/src/components/ui/label.tsx,.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/field.tsx:exports:variable"]