{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auto-form-core",
  "title": "Protoform AutoForm core",
  "description": "Engine-neutral shadcn-compatible AutoForm renderer shared by native form-library adapters.",
  "dependencies": [
    "@base-ui/react",
    "@buf/googleapis_googleapis.bufbuild_es",
    "@bufbuild/cel",
    "@bufbuild/protobuf",
    "@bufbuild/protovalidate",
    "@connectrpc/connect",
    "@standard-schema/spec",
    "@tanstack/react-router",
    "class-variance-authority",
    "clsx",
    "cmdk",
    "date-fns",
    "lucide-react",
    "motion",
    "prismjs",
    "react-day-picker",
    "react-simple-code-editor",
    "sonner",
    "tailwind-merge",
    "zod"
  ],
  "registryDependencies": [
    "@protoform/protoform-core",
    "@protoform/protobuf-provider"
  ],
  "files": [
    {
      "path": "registry/base-nova/protoform/components/alert/index.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport { InfoIcon } from 'lucide-react';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst alertVariants = cva(\n  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n  {\n    variants: {\n      variant: {\n        info: 'bg-card text-card-foreground',\n        destructive:\n          '!border-destructive/20 bg-destructive/10 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>href]:text-current [&>svg]:text-current',\n        warning:\n          '!border-blue-200 bg-blue-50 text-blue-800 *:data-[slot=alert-description]:text-blue-800 [&>href]:text-current [&>svg]:text-current',\n        success:\n          '!border-green-200 dark:!border-green-800/40 bg-green-50 text-green-800 *:data-[slot=alert-description]:text-green-800 dark:bg-green-950/30 dark:text-green-300 dark:*:data-[slot=alert-description]:text-green-300 [&>href]:text-current [&>svg]:text-current',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & SharedProps & { icon?: React.ReactNode }\n>(({ className, variant, testId, icon = <InfoIcon />, children, ...props }, ref) => (\n  <div\n    className={cn(alertVariants({ variant }), className)}\n    data-slot=\"alert\"\n    data-testid={testId}\n    ref={ref}\n    role=\"alert\"\n    {...props}\n  >\n    {icon}\n    {children}\n  </div>\n));\n\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & SharedProps>(\n  ({ className, testId, ...props }, ref) => (\n    <div\n      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}\n      data-slot=\"alert-title\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & SharedProps>(\n  ({ className, testId, ...props }, ref) => (\n    <div\n      className={cn(\n        'col-start-2 grid min-w-0 w-full justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed [&_pre]:w-full',\n        className\n      )}\n      data-slot=\"alert-description\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertDescription, AlertTitle };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/configuration.ts",
      "content": "import type { ParsedField } from './core-types';\nimport type { DataProviderRegistry } from './data-providers';\nimport { AutoFormFieldComponentRegistry, defaultRegistry } from './fields';\nimport { readDataProviderId } from './fields/shared';\nimport { getFieldUiConfig, resolveRenderFieldType } from './helpers';\nimport { buildFieldMatchContext, type FieldTypeRegistry } from './registry';\nimport {\n  mergeFieldOverrides,\n  protoConversionOptionsFromFieldConfig,\n  resolveSchema,\n} from './schema';\nimport type { AutoFormSchemaInput, FieldConfigMap } from './types';\n\nexport type AutoFormConfigurationDiagnosticCode =\n  | 'invalid-configuration-path'\n  | 'missing-data-provider'\n  | 'missing-renderer'\n  | 'unsupported-configuration';\n\nexport interface AutoFormConfigurationDiagnostic {\n  code: AutoFormConfigurationDiagnosticCode;\n  message: string;\n  path: string;\n  severity: 'error';\n}\n\nexport interface InspectAutoFormConfigurationInput<\n  T extends Record<string, unknown> = Record<string, unknown>,\n  TCustomFieldType extends string = never,\n> {\n  schema: AutoFormSchemaInput<T>;\n  fieldConfig?: FieldConfigMap<TCustomFieldType>;\n  fieldRegistry?: FieldTypeRegistry<string>;\n  dataProviders?: DataProviderRegistry;\n}\n\nconst STRUCTURAL_FIELD_TYPES = new Set(['array', 'map', 'object', 'oneof']);\n\nfunction collectFields(\n  fields: ParsedField[],\n  path: readonly string[] = []\n): Array<{ field: ParsedField; path: string }> {\n  return fields.flatMap((field) => {\n    const fieldPath = [...path, field.key];\n    return [\n      { field, path: fieldPath.join('.') },\n      ...collectFields(field.schema ?? [], fieldPath),\n    ];\n  });\n}\n\nfunction resolvedRenderer(\n  field: ParsedField,\n  registry: FieldTypeRegistry<string>\n): string {\n  const configured = getFieldUiConfig(field).control;\n  if (configured) {\n    return configured;\n  }\n  return (\n    registry.resolve(field, buildFieldMatchContext(field))?.name ??\n    resolveRenderFieldType(field)\n  );\n}\n\nfunction hasRenderer(\n  field: ParsedField,\n  renderer: string,\n  registry: FieldTypeRegistry<string>\n): boolean {\n  if (STRUCTURAL_FIELD_TYPES.has(field.type) && renderer === field.type) {\n    return true;\n  }\n  if (\n    renderer !== 'fallback' &&\n    Object.hasOwn(AutoFormFieldComponentRegistry, renderer)\n  ) {\n    return true;\n  }\n  return registry.list().some((definition) => definition.name === renderer);\n}\n\nfunction fieldDiagnostics(\n  field: ParsedField,\n  path: string,\n  registry: FieldTypeRegistry<string>,\n  dataProviders: DataProviderRegistry | undefined\n): AutoFormConfigurationDiagnostic[] {\n  const diagnostics: AutoFormConfigurationDiagnostic[] = [];\n  const renderer = resolvedRenderer(field, registry);\n  if (!hasRenderer(field, renderer, registry)) {\n    diagnostics.push({\n      code: 'missing-renderer',\n      message: `Renderer \"${renderer}\" is not registered.`,\n      path,\n      severity: 'error',\n    });\n  }\n\n  const dataProviderId = readDataProviderId(field);\n  if (dataProviderId !== undefined) {\n    if (!dataProviders?.[dataProviderId]) {\n      diagnostics.push({\n        code: 'missing-data-provider',\n        message: `Data provider \"${dataProviderId}\" is not registered.`,\n        path,\n        severity: 'error',\n      });\n    }\n    if (field.type !== 'string' && field.type !== 'number') {\n      diagnostics.push({\n        code: 'unsupported-configuration',\n        message: 'Data providers are supported only on scalar string or number fields.',\n        path,\n        severity: 'error',\n      });\n    }\n  }\n\n  if (\n    field.fieldConfig?.emptyRepeatedStringPolicy &&\n    !(field.type === 'array' && field.schema?.[0]?.type === 'string')\n  ) {\n    diagnostics.push({\n      code: 'unsupported-configuration',\n      message:\n        'emptyRepeatedStringPolicy is supported only on repeated string fields.',\n      path,\n      severity: 'error',\n    });\n  }\n\n  return diagnostics;\n}\n\nexport function inspectAutoFormConfiguration<\n  T extends Record<string, unknown> = Record<string, unknown>,\n  TCustomFieldType extends string = never,\n>({\n  schema,\n  fieldConfig,\n  fieldRegistry,\n  dataProviders,\n}: InspectAutoFormConfigurationInput<\n  T,\n  TCustomFieldType\n>): AutoFormConfigurationDiagnostic[] {\n  const resolvedSchema = resolveSchema(\n    schema,\n    protoConversionOptionsFromFieldConfig(fieldConfig)\n  );\n  const fields = mergeFieldOverrides(resolvedSchema.parsedSchema.fields, fieldConfig);\n  const flattenedFields = collectFields(fields);\n  const validPaths = new Set(flattenedFields.map((entry) => entry.path));\n  const activeRegistry = fieldRegistry ?? defaultRegistry;\n  const diagnostics: AutoFormConfigurationDiagnostic[] = [];\n\n  for (const path of Object.keys(fieldConfig ?? {})) {\n    if (!validPaths.has(path)) {\n      diagnostics.push({\n        code: 'invalid-configuration-path',\n        message: `Field configuration path \"${path}\" does not exist in the schema.`,\n        path,\n        severity: 'error',\n      });\n    }\n  }\n\n  for (const { field, path } of flattenedFields) {\n    diagnostics.push(\n      ...fieldDiagnostics(field, path, activeRegistry, dataProviders)\n    );\n  }\n\n  return diagnostics.sort(\n    (left, right) =>\n      left.path.localeCompare(right.path) || left.code.localeCompare(right.code)\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/context.tsx",
      "content": "import React from 'react';\n\nimport type { AutoFormFieldComponents, AutoFormUIComponents, ParsedField } from './core-types';\nimport type { DataProviderRegistry } from './data-providers';\nimport { getPathInObject } from './field-utils';\nimport type { FieldTypeRegistry } from './registry';\nimport type { AutoFormUiRule } from './types';\nimport type { DeprecatedFieldPolicy } from './types';\n\nexport type AutoFormContextValue = {\n  uiComponents: AutoFormUIComponents;\n  formComponents: AutoFormFieldComponents;\n  formValues: Record<string, unknown>;\n  evaluateRules: (rules: AutoFormUiRule[] | undefined, fieldValue?: unknown) => boolean;\n  getFieldUiConfig: (field: ParsedField) => Record<string, unknown>;\n  testIdPrefix: string;\n  fieldRegistry?: FieldTypeRegistry<string>;\n  dataProviders?: DataProviderRegistry;\n  deprecatedFields: DeprecatedFieldPolicy;\n};\n\nexport const AutoFormContext = React.createContext<AutoFormContextValue | null>(null);\n\nexport function useAutoForm(): AutoFormContextValue {\n  const context = React.useContext(AutoFormContext);\n  if (!context) {\n    throw new Error('useAutoForm must be used inside an AutoForm component.');\n  }\n  return context;\n}\n\nexport function useAutoFormField(path: string[]) {\n  const { formValues, evaluateRules, getFieldUiConfig: getUiConfig, testIdPrefix } = useAutoForm();\n  const fieldValue = getPathInObject(formValues, path);\n\n  return {\n    fieldValue,\n    evaluateRules,\n    getFieldUiConfig: getUiConfig,\n    testIdPrefix,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Legacy aliases – kept during migration, will be removed once all consumers\n// switch to useAutoForm().\n// ---------------------------------------------------------------------------\n\nexport type InternalAutoFormRenderContextValue = Pick<AutoFormContextValue, 'uiComponents' | 'formComponents'>;\nexport type InternalAutoFormRuntimeContextValue = Pick<\n  AutoFormContextValue,\n  | 'deprecatedFields'\n  | 'formValues'\n  | 'evaluateRules'\n  | 'fieldRegistry'\n  | 'getFieldUiConfig'\n  | 'testIdPrefix'\n>;\n\nexport const AutoFormRenderContext = AutoFormContext;\nexport const AutoFormRuntimeContext = AutoFormContext;\n\nexport function useAutoFormRenderContext(): InternalAutoFormRenderContextValue {\n  return useAutoForm();\n}\n\nexport function useAutoFormRuntimeContext(): InternalAutoFormRuntimeContextValue {\n  return useAutoForm();\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/core-types.ts",
      "content": "import type React from 'react';\nimport type { ReactNode } from 'react';\n\n// Re-export schema contract types from shared lib so existing consumers\n// can continue importing from './core-types' without changes.\nexport type {\n  FieldConfig,\n  FieldWrapperProps,\n  ParsedField,\n  ParsedSchema,\n  Renderable,\n  SchemaProvider,\n  SchemaValidation,\n  SchemaValidationContext,\n  SchemaValidationError,\n  UiRenderable,\n} from '../../lib/form-types';\n\nimport type { FieldWrapperProps, ParsedField, UiRenderable } from '../../lib/form-types';\nexport { getFieldHints } from '../../lib/form-types';\n\n// ---------------------------------------------------------------------------\n// UI component contracts — AutoForm-specific wrapper and field props.\n// ---------------------------------------------------------------------------\n\nexport type ObjectWrapperProps = {\n  label: UiRenderable;\n  children: ReactNode;\n  field: ParsedField;\n  hasError?: boolean;\n};\n\nexport type ArrayWrapperProps = {\n  label: UiRenderable;\n  children: ReactNode;\n  field: ParsedField;\n  onAddItem: () => void;\n};\n\nexport type ArrayElementWrapperProps = {\n  children: ReactNode;\n  onRemove: () => void;\n  index: number;\n};\n\nexport type AutoFormUIComponents = {\n  Form: React.ComponentType<React.ComponentProps<'form'>>;\n  FieldWrapper: React.ComponentType<FieldWrapperProps>;\n  ErrorMessage: React.ComponentType<{ error: string }>;\n  SubmitButton: React.ComponentType<{ children: ReactNode; disabled?: boolean; testId?: string }>;\n  ObjectWrapper: React.ComponentType<ObjectWrapperProps>;\n  ArrayWrapper: React.ComponentType<ArrayWrapperProps>;\n  ArrayElementWrapper: React.ComponentType<ArrayElementWrapperProps>;\n};\n\nexport type AutoFormFieldProps = {\n  label: UiRenderable;\n  field: ParsedField;\n  value: any;\n  error?: string;\n  id: string;\n  path: string[];\n  inputProps: Record<string, any>;\n};\n\nexport type AutoFormFieldComponents<TFieldType extends string = string> = {\n  fallback: React.ComponentType<AutoFormFieldProps>;\n} & Partial<Record<TFieldType, React.ComponentType<AutoFormFieldProps>>>;\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/data-providers.ts",
      "content": "/**\n * Data-provider registry for AutoForm dropdowns.\n *\n * AutoForm is RPC-agnostic: the registry only knows about option lists.\n * Each provider is a React hook that returns `{ options, isLoading?, error? }`.\n * Whether the options are a static array or backed by an RPC is a concern\n * of the hosting app's wiring layer, not AutoForm.\n *\n * The registry is keyed by a string id that mirrors a proto `DataProviderId`\n * enum. The hosting app registers one implementation per id; a CI test\n * enumerates the proto descriptors and asserts completeness.\n */\n\nimport type React from 'react';\n\nexport interface DataProviderOption {\n  /** Optional helper line shown beneath the label. */\n  description?: string;\n  /** Optional group heading so related options cluster visually. */\n  group?: string;\n  /**\n   * Optional glyph rendered before the label. Most useful when a dropdown\n   * combines options from multiple sources and a visual mark helps users\n   * distinguish them. Lists from one source should usually omit a repeated\n   * icon because it adds noise without new information.\n   */\n  icon?: React.ReactNode;\n  /** Display label shown in the dropdown. */\n  label: string;\n  /** Wire value stored in form state. */\n  value: string;\n}\n\nexport interface DataProviderResult {\n  /** Non-null when the provider failed to load. */\n  error?: unknown;\n  /** True while an async source is loading. Static providers may omit this. */\n  isLoading?: boolean;\n  options: DataProviderOption[];\n}\n\n/**\n * A data provider is a React hook. Implementations may call `useQuery`,\n * return a memoised constant array, or anything in between — AutoForm\n * never inspects the internals.\n */\nexport type DataProvider = () => DataProviderResult;\n\nexport type DataProviderRegistry = Record<string, DataProvider>;\n\n/**\n * Resolve a data provider by id. Returns `undefined` when the id is not\n * registered; the caller is responsible for rendering a graceful fallback\n * (and, in dev, logging a warning).\n */\nexport function resolveDataProvider(\n  registry: DataProviderRegistry | undefined,\n  id: string | undefined\n): DataProvider | undefined {\n  if (!(registry && id)) {\n    return;\n  }\n  return registry[id];\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/field-utils.ts",
      "content": "import type { ParsedField } from '../../lib/form-types';\n\n// Common protocol / tech acronyms the default title-casing would\n// otherwise emit as mixed-case (\"Api Key\", \"Tls\", \"Aws Region\", etc.).\n// The replacement is the canonical form the industry uses — gRPC is\n// intentionally lower-case `g`, everything else is fully upper.\n// Matched as whole words (case-insensitive) after the initial\n// camelCase/snake_case split in `beautifyLabel`.\nconst ACRONYMS: Record<string, string> = {\n  api: 'API',\n  aws: 'AWS',\n  dsn: 'DSN',\n  gcp: 'GCP',\n  grpc: 'gRPC',\n  http: 'HTTP',\n  https: 'HTTPS',\n  id: 'ID',\n  json: 'JSON',\n  jwt: 'JWT',\n  mcp: 'MCP',\n  oauth: 'OAuth',\n  sasl: 'SASL',\n  sdk: 'SDK',\n  sns: 'SNS',\n  sql: 'SQL',\n  sqs: 'SQS',\n  ssl: 'SSL',\n  tls: 'TLS',\n  tts: 'TTS',\n  url: 'URL',\n  uri: 'URI',\n  uuid: 'UUID',\n  vpc: 'VPC',\n  yaml: 'YAML',\n};\n\nfunction applyAcronyms(label: string): string {\n  return label.replace(/\\b[A-Za-z]+\\b/g, (word) => ACRONYMS[word.toLowerCase()] ?? word);\n}\n\nfunction beautifyLabel(label: string): string {\n  if (!label) {\n    return '';\n  }\n  let output = label.replace(/([A-Z])/g, ' $1');\n  output = output.charAt(0).toUpperCase() + output.slice(1);\n  if (!Number.isNaN(Number(output))) {\n    return '';\n  }\n  if (output === '*') {\n    return '';\n  }\n  return applyAcronyms(output);\n}\n\nexport function getLabel(field: ParsedField): string {\n  return (field.fieldConfig?.label as string) || (field.description as string) || beautifyLabel(field.key);\n}\n\nexport function sortFieldsByOrder<TFieldType extends string = string>(\n  fields: ParsedField<TFieldType>[] | undefined\n): ParsedField<TFieldType>[] {\n  if (!fields) {\n    return [];\n  }\n  return fields\n    .map((field) => (field.schema ? { ...field, schema: sortFieldsByOrder(field.schema) } : field))\n    .sort((a, b) => (a.fieldConfig?.order ?? 0) - (b.fieldConfig?.order ?? 0));\n}\n\nexport function getPathInObject(obj: Record<string, unknown>, path: string[]): any {\n  let current: unknown = obj;\n  for (const key of path) {\n    if (current === undefined || current === null) {\n      return;\n    }\n    current = (current as Record<string, unknown>)[key];\n  }\n  return current;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/field-wrapper.tsx",
      "content": "'use client';\n\nimport { AlertCircle, ChevronDown, CircleHelp, ExternalLink, PlusIcon, TrashIcon } from 'lucide-react';\nimport React from 'react';\nimport { cn, type SharedProps } from '../../lib/utils';\nimport { Alert, AlertDescription, AlertTitle } from '../alert';\nimport { Button } from '../button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '../field';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\nimport { Heading, Text } from '../typography';\nimport { useAutoFormRuntimeContext } from './context';\nimport type { ArrayElementWrapperProps, ArrayWrapperProps, FieldWrapperProps, ObjectWrapperProps } from './core-types';\nimport { formSpacing } from './form-spacing';\nimport { getFieldDescriptionText, getFieldDocsUrl, getFieldHelpText, getFieldUiConfig } from './helpers';\nimport { FormDepthProvider, headingLevelForDepth, useFormDepth } from './layout-context';\nimport { getAutoFormFieldTestId } from './test-ids';\n\nconst REGEX_ERROR_PATTERN = /regex pattern\\s*`([^`]+)`/;\n\nexport const Form = React.forwardRef<HTMLFormElement, React.ComponentProps<'form'> & SharedProps>(\n  ({ children, testId, ...props }, ref) => (\n    <form className={formSpacing.form} data-testid={testId} ref={ref} {...props}>\n      <FormDepthProvider depth={0}>{children}</FormDepthProvider>\n    </form>\n  )\n);\nForm.displayName = 'Form';\n\nexport const ArrayElementWrapper: React.FC<\n  ArrayElementWrapperProps & {\n    testId?: string;\n    removeButtonTestId?: string;\n  }\n> = ({ children, onRemove, removeButtonTestId, testId }) => (\n  <div\n    className=\"relative rounded-xl border border-border/70 bg-card p-5 text-card-foreground shadow-xs\"\n    data-testid={testId}\n  >\n    <Button\n      aria-label=\"Remove item\"\n      className=\"absolute top-3 right-3\"\n      onClick={onRemove}\n      size=\"icon-sm\"\n      testId={removeButtonTestId}\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      <TrashIcon className=\"h-4 w-4\" />\n    </Button>\n    <div className=\"pr-8\">{children}</div>\n  </div>\n);\n\nexport const ArrayWrapper: React.FC<\n  ArrayWrapperProps & {\n    addButtonTestId?: string;\n    testId?: string;\n  }\n> = ({ label, children, onAddItem, addButtonTestId, testId }) => (\n  <div className={formSpacing.field} data-testid={testId}>\n    {children}\n    <Button onClick={onAddItem} size=\"sm\" testId={addButtonTestId} type=\"button\" variant=\"outline\">\n      <PlusIcon className=\"h-4 w-4\" />\n      {label ? `Add ${label}` : 'Add item'}\n    </Button>\n  </div>\n);\n\nexport const ErrorMessage: React.FC<{ error: string }> = ({ error }) => (\n  <Alert variant=\"destructive\">\n    <AlertCircle className=\"h-4 w-4\" />\n    <AlertTitle>AutoForm error</AlertTitle>\n    <AlertDescription>{error}</AlertDescription>\n  </Alert>\n);\n\nfunction augmentError(\n  error: FieldWrapperProps['error'],\n  field: FieldWrapperProps['field']\n): FieldWrapperProps['error'] {\n  if (!(typeof error === 'string' && REGEX_ERROR_PATTERN.test(error))) {\n    return error;\n  }\n  const uiConfig = getFieldUiConfig(field);\n  if (uiConfig.example) {\n    return `${error}\\nExample: ${uiConfig.example}`;\n  }\n  return error;\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, id, field, error: rawError }) => {\n  const depth = useFormDepth();\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n  const isCompact = Boolean((field.fieldConfig?.customData as Record<string, unknown> | undefined)?.compactRow);\n  const tooltipText = isCompact ? '' : getFieldHelpText(field);\n  const helpText = isCompact ? undefined : getFieldDescriptionText(field);\n  const docsUrl = isCompact ? undefined : getFieldDocsUrl(field);\n  const error = augmentError(rawError, field);\n  const isDisabled = Boolean(field.fieldConfig?.inputProps?.disabled);\n  const hasVisibleLabel = !(typeof label === 'string' && label.trim().length === 0);\n  const fallbackLabel =\n    typeof field.fieldConfig?.label === 'string' && field.fieldConfig.label.trim().length > 0\n      ? field.fieldConfig.label\n      : field.key;\n  const helpLabel = typeof label === 'string' && label.trim().length > 0 ? label : fallbackLabel;\n  const fieldTestId = getAutoFormFieldTestId(testIdPrefix, id);\n  const isSplit = depth === 0 && !isCompact;\n\n  // Match the non-AutoForm usage pattern in managed-create-form.tsx:\n  // `<Field>` with label / control / description / error as *direct*\n  // siblings, so the Field component's native `gap-3` drives the\n  // label → input → description → error rhythm. The previous\n  // `<Field gap-2><FieldContent gap-2>` nesting produced a cramped\n  // 8px label/input gap and misaligned the internal rhythm from every\n  // manually-constructed form in the app — users could spot the\n  // AutoForm at a glance from the tighter stack alone.\n  return (\n    <Field\n      className={\n        isSplit\n          ? 'grid items-start gap-x-8 gap-y-2 sm:grid-cols-[minmax(10rem,0.34fr)_minmax(0,1fr)]'\n          : undefined\n      }\n      data-disabled={isDisabled}\n      data-invalid={Boolean(error)}\n      data-layout={isSplit ? 'split' : 'stacked'}\n      testId={fieldTestId}\n    >\n      {isCompact ? null : (\n        <div className={cn('flex min-w-0 items-center gap-2', isSplit && 'sm:pt-2')}>\n          <FieldLabel className={hasVisibleLabel ? 'items-center gap-2' : 'sr-only'} htmlFor={id}>\n            <Text as=\"span\" variant=\"labelStrongSmall\">\n              {hasVisibleLabel ? label : fallbackLabel}\n            </Text>\n            {field.required ? (\n              <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n                *\n              </Text>\n            ) : null}\n          </FieldLabel>\n          {tooltipText ? (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button\n                  aria-label={`Help for ${helpLabel}`}\n                  className=\"rounded-full text-muted-foreground shadow-none hover:text-foreground\"\n                  data-testid={getAutoFormFieldTestId(testIdPrefix, id, 'help')}\n                  size=\"icon-xs\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                >\n                  <CircleHelp className=\"h-4 w-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"max-w-sm text-pretty text-xs\"\n                role=\"tooltip\"\n                testId={getAutoFormFieldTestId(testIdPrefix, id, 'help-content')}\n              >\n                {tooltipText}\n              </TooltipContent>\n            </Tooltip>\n          ) : null}\n        </div>\n      )}\n      <FieldContent className=\"min-w-0 gap-2\">\n        {children}\n        {error ? (\n          <FieldError testId={getAutoFormFieldTestId(testIdPrefix, id, 'error')}>{error}</FieldError>\n        ) : (helpText || docsUrl) && !isCompact ? (\n          <FieldDescription testId={getAutoFormFieldTestId(testIdPrefix, id, 'description')}>\n            {helpText ? <span>{helpText}</span> : null}\n            {docsUrl ? (\n              <>\n                {helpText ? ' ' : null}\n                <a\n                  className=\"inline-flex items-center gap-1 text-primary underline-offset-2 hover:underline\"\n                  data-testid={getAutoFormFieldTestId(testIdPrefix, id, 'docs-link')}\n                  href={docsUrl}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                >\n                  Learn more\n                  <ExternalLink aria-hidden className=\"h-3 w-3\" />\n                </a>\n              </>\n            ) : null}\n          </FieldDescription>\n        ) : null}\n      </FieldContent>\n    </Field>\n  );\n};\n\nexport const ObjectWrapper: React.FC<ObjectWrapperProps & { testId?: string; hasError?: boolean }> = ({\n  label,\n  children,\n  field,\n  testId,\n  hasError,\n}) => {\n  const depth = useFormDepth();\n  const headingLevel = headingLevelForDepth(depth);\n  const helpText = getFieldDescriptionText(field);\n  const hasVisibleLabel = !(typeof label === 'string' && label.trim().length === 0);\n  const customData = (field.fieldConfig?.customData ?? {}) as Record<string, unknown>;\n  const isCollapsible = Boolean(customData.collapsible);\n  // Divider under a section header. Defaults to true for parity with the\n  // historical ObjectWrapper behavior. Consumers can opt out by setting\n  // `customData.showDivider = false` — same escape hatch as FormSection's\n  // `divider` prop so both entry points agree on when a rule renders.\n  const showDivider = customData.showDivider !== false && hasVisibleLabel;\n  const isSplit = depth === 0 && hasVisibleLabel && !isCollapsible;\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  // Auto-expand when section has validation errors\n  React.useEffect(() => {\n    if (hasError && !isOpen) {\n      setIsOpen(true);\n    }\n  }, [hasError, isOpen]);\n\n  if (isCollapsible && hasVisibleLabel) {\n    return (\n      <Collapsible onOpenChange={setIsOpen} open={isOpen}>\n        <section className={formSpacing.field} data-testid={testId}>\n          <CollapsibleTrigger asChild>\n            <button\n              className={\n                showDivider\n                  ? `flex w-full items-center justify-between text-left ${formSpacing.sectionDivider}`\n                  : 'flex w-full items-center justify-between text-left'\n              }\n              type=\"button\"\n            >\n              <div className={formSpacing.sectionHeader}>\n                <div className=\"flex items-center gap-2\">\n                  <Heading className=\"font-medium\" level={headingLevel}>\n                    {label}\n                  </Heading>\n                  {field.required ? (\n                    <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n                      *\n                    </Text>\n                  ) : null}\n                </div>\n                {helpText ? (\n                  <Text className=\"text-muted-foreground\" variant=\"small\">\n                    {helpText}\n                  </Text>\n                ) : null}\n              </div>\n              <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=open]_&]:rotate-180\" />\n            </button>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <FormDepthProvider depth={depth + 1}>\n              <div className={formSpacing.field}>{children}</div>\n            </FormDepthProvider>\n          </CollapsibleContent>\n        </section>\n      </Collapsible>\n    );\n  }\n\n  return (\n    <section\n      className={\n        isSplit\n          ? 'grid items-start gap-6 sm:grid-cols-[minmax(10rem,0.34fr)_minmax(0,1fr)] sm:gap-x-8'\n          : formSpacing.field\n      }\n      data-layout={isSplit ? 'split' : 'stacked'}\n      data-testid={testId}\n    >\n      {hasVisibleLabel ? (\n        <div\n          className={\n            showDivider\n              ? `${formSpacing.sectionHeader} ${formSpacing.sectionDivider} ${isSplit ? 'sm:border-b-0 sm:pb-0' : ''}`\n              : formSpacing.sectionHeader\n          }\n        >\n          <div className=\"flex items-center gap-2\">\n            <Heading className=\"font-medium\" level={headingLevel}>\n              {label}\n            </Heading>\n            {field.required ? (\n              <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n                *\n              </Text>\n            ) : null}\n          </div>\n          {helpText ? (\n            <Text className=\"text-muted-foreground\" variant=\"small\">\n              {helpText}\n            </Text>\n          ) : null}\n        </div>\n      ) : null}\n      <FormDepthProvider depth={depth + 1}>\n        <div className={cn('min-w-0', formSpacing.field)}>{children}</div>\n      </FormDepthProvider>\n    </section>\n  );\n};\n\nexport const SubmitButton: React.FC<{ children: React.ReactNode; disabled?: boolean; testId?: string }> = ({\n  children,\n  disabled,\n  testId,\n}) => (\n  <Button disabled={disabled} testId={testId} type=\"submit\">\n    {children}\n  </Button>\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/boolean.tsx",
      "content": "'use client';\n\nimport { Checkbox } from '../../checkbox';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../select';\nimport { Switch } from '../../switch';\nimport { Toggle } from '../../toggle';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { CONSENT_FIELD_PATTERN } from '../helpers';\nimport { getProtoFieldCustomData } from '../proto';\nimport type { FieldTypeDefinition } from '../registry';\nimport { getControlLabel, useFieldTestIds } from './shared';\n\n// ---------------------------------------------------------------------------\n// BooleanFieldComponent — tri-state select (true / false / unset)\n// ---------------------------------------------------------------------------\n\nfunction BooleanFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const fieldLabel = getControlLabel(label, field);\n\n  return (\n    <Select\n      items={[\n        { label: 'Not set', value: null },\n        { label: 'True', value: 'true' },\n        { label: 'False', value: 'false' },\n      ]}\n      onValueChange={(value) => {\n        if (value === null) {\n          inputProps.onValueChange(undefined);\n          return;\n        }\n        inputProps.onValueChange(value === 'true');\n      }}\n      value={inputProps.value === undefined ? null : String(Boolean(inputProps.value))}\n    >\n      <SelectTrigger\n        aria-invalid={Boolean(error)}\n        aria-label={fieldLabel}\n        className={error ? 'border-destructive' : ''}\n        disabled={inputProps.disabled}\n        id={id}\n        testId={testIds.control}\n      >\n        <SelectValue placeholder=\"Choose a value\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem testId={testIds.option('not-set')} value={null}>\n          Not set\n        </SelectItem>\n        <SelectItem testId={testIds.option('true')} value=\"true\">\n          True\n        </SelectItem>\n        <SelectItem testId={testIds.option('false')} value=\"false\">\n          False\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// CheckboxFieldComponent\n// ---------------------------------------------------------------------------\n\nfunction CheckboxFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <div className=\"flex min-h-9 items-center\">\n      <Checkbox\n        aria-invalid={Boolean(error)}\n        aria-label={getControlLabel(label, field)}\n        checked={Boolean(inputProps.value)}\n        disabled={inputProps.disabled}\n        id={id}\n        onCheckedChange={(checked) => inputProps.onValueChange(Boolean(checked))}\n        testId={testIds.control}\n      />\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// SwitchFieldComponent\n// ---------------------------------------------------------------------------\n\nfunction SwitchFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <div className=\"flex min-h-9 items-center\">\n      <Switch\n        aria-invalid={Boolean(error)}\n        aria-label={getControlLabel(label, field)}\n        checked={Boolean(inputProps.value)}\n        disabled={inputProps.disabled}\n        id={id}\n        onCheckedChange={(checked) => inputProps.onValueChange(Boolean(checked))}\n        testId={testIds.control}\n      />\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ToggleFieldComponent — not registered by default (available as override)\n// ---------------------------------------------------------------------------\n\nfunction ToggleFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <div className=\"flex min-h-9 items-center gap-3\" data-testid={testIds.control}>\n      <Switch\n        aria-invalid={Boolean(error)}\n        aria-label={getControlLabel(label, field)}\n        checked={Boolean(inputProps.value)}\n        disabled={inputProps.disabled}\n        id={id}\n        onCheckedChange={(checked) => inputProps.onValueChange(Boolean(checked))}\n        testId={testIds.controlPart('switch')}\n      />\n      <Toggle\n        aria-hidden\n        className=\"pointer-events-none rounded-full px-3\"\n        pressed={Boolean(inputProps.value)}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        {inputProps.value ? 'On' : 'Off'}\n      </Toggle>\n    </div>\n  );\n}\n\nexport { BooleanFieldComponent, CheckboxFieldComponent, SwitchFieldComponent, ToggleFieldComponent };\n\nexport const booleanFieldDefinition: FieldTypeDefinition = {\n  name: 'boolean',\n  priority: 15,\n  match: (field) => {\n    if (field.type !== 'boolean') {\n      return false;\n    }\n    const protoData = getProtoFieldCustomData(field);\n    return Boolean(protoData?.supportsUnset) && !field.required;\n  },\n  component: BooleanFieldComponent,\n};\n\nexport const checkboxFieldDefinition: FieldTypeDefinition = {\n  name: 'checkbox',\n  priority: 14,\n  match: (field, context) => field.type === 'boolean' && CONSENT_FIELD_PATTERN.test(context.identity),\n  component: CheckboxFieldComponent,\n};\n\nexport const switchFieldDefinition: FieldTypeDefinition = {\n  name: 'switch',\n  priority: 10,\n  match: (field) => field.type === 'boolean',\n  component: SwitchFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/bytes.tsx",
      "content": "'use client';\n\nimport { Textarea } from '../../textarea';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction BytesFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <Textarea\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive font-mono' : 'font-mono'}\n      disabled={inputProps.disabled}\n      id={id}\n      onBlur={inputProps.onBlur}\n      onChange={(event) => inputProps.onValueChange(event.target.value)}\n      placeholder={getFieldUiConfig(field).placeholder || 'Base64 payload'}\n      resize=\"vertical\"\n      testId={testIds.control}\n      value={(inputProps.value as string | undefined) ?? ''}\n    />\n  );\n}\n\nexport { BytesFieldComponent };\n\nexport const bytesFieldDefinition: FieldTypeDefinition = {\n  name: 'bytes',\n  priority: 10,\n  match: (field) => field.type === 'bytes',\n  component: BytesFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/choicebox.tsx",
      "content": "'use client';\n\nimport {\n  Choicebox,\n  ChoiceboxItem,\n  ChoiceboxItemContent,\n  ChoiceboxItemHeader,\n  ChoiceboxItemIndicator,\n  ChoiceboxItemTitle,\n} from '../../choicebox';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { getControlLabel, getFlatOptions, hasNumericOptions, renderOptionLabel, useFieldTestIds } from './shared';\n\nfunction ChoiceboxFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const numericOptions = hasNumericOptions(field);\n  const value = inputProps.value === undefined || inputProps.value === null ? '' : String(inputProps.value);\n  const options = getFlatOptions(field);\n\n  return (\n    <Choicebox\n      aria-invalid={Boolean(error)}\n      aria-label={getControlLabel(label, field)}\n      onValueChange={(nextValue) => inputProps.onValueChange(numericOptions ? Number(nextValue) : nextValue)}\n      testId={testIds.control}\n      value={value}\n    >\n      {options.map((option) => (\n        <ChoiceboxItem\n          disabled={inputProps.disabled}\n          key={option.value}\n          testId={testIds.option(option.value)}\n          value={option.value}\n        >\n          <ChoiceboxItemHeader>\n            <ChoiceboxItemTitle>{renderOptionLabel(option)}</ChoiceboxItemTitle>\n          </ChoiceboxItemHeader>\n          <ChoiceboxItemContent>\n            <ChoiceboxItemIndicator />\n          </ChoiceboxItemContent>\n        </ChoiceboxItem>\n      ))}\n    </Choicebox>\n  );\n}\n\nexport { ChoiceboxFieldComponent };\n\nexport const choiceboxFieldDefinition: FieldTypeDefinition = {\n  name: 'choicebox',\n  priority: 25,\n  match: (field) => {\n    if (field.type !== 'select') {\n      return false;\n    }\n    return getFieldUiConfig(field).control === 'choicebox';\n  },\n  component: ChoiceboxFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/combobox.tsx",
      "content": "'use client';\n\nimport { Combobox } from '../../combobox';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { getFlatOptions, getGroupedOptions, hasNumericOptions, useFieldTestIds } from './shared';\n\nfunction ComboboxFieldComponent({ field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const numericOptions = hasNumericOptions(field);\n  const optionGroups = getGroupedOptions(field);\n  const options = optionGroups?.length\n    ? optionGroups.flatMap((group) =>\n        group.options.map((option) => ({\n          group: String(group.label ?? ''),\n          groupTestId: testIds.group(String(group.label ?? option.value)),\n          testId: testIds.option(option.value),\n          value: option.value,\n          label: `${group.label ? `${group.label} · ` : ''}${String(option.label ?? option.value)}`,\n        }))\n      )\n    : getFlatOptions(field).map((option) => ({\n        value: option.value,\n        label: String(option.label ?? option.value),\n        testId: testIds.option(option.value),\n      }));\n\n  return (\n    <Combobox\n      disabled={inputProps.disabled}\n      inputTestId={testIds.control}\n      onChange={(value) => inputProps.onValueChange(numericOptions ? Number(value) : value)}\n      options={options}\n      placeholder={getFieldUiConfig(field).placeholder || 'Search options'}\n      value={inputProps.value === undefined || inputProps.value === null ? '' : String(inputProps.value)}\n    />\n  );\n}\n\nexport { ComboboxFieldComponent };\n\nexport const comboboxFieldDefinition: FieldTypeDefinition = {\n  name: 'combobox',\n  priority: 18,\n  match: (field) => {\n    if (field.type !== 'select') {\n      return false;\n    }\n    const optionCount = field.options?.length ?? 0;\n    return optionCount > 8;\n  },\n  component: ComboboxFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/currency.tsx",
      "content": "'use client';\n\nimport { DollarSignIcon } from 'lucide-react';\nimport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../../input-group';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { CURRENCY_FIELD_PATTERN, getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction CurrencyFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <InputGroup testId={testIds.control}>\n      <InputGroupAddon>\n        <InputGroupText>\n          <DollarSignIcon className=\"h-4 w-4\" />\n        </InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-invalid={Boolean(error)}\n        disabled={inputProps.disabled}\n        id={id}\n        inputMode=\"decimal\"\n        onBlur={inputProps.onBlur}\n        onChange={(event) => inputProps.onValueChange(event.target.value)}\n        placeholder={getFieldUiConfig(field).placeholder}\n        testId={testIds.controlPart('input')}\n        value={(inputProps.value as string | number | undefined)?.toString() ?? ''}\n      />\n    </InputGroup>\n  );\n}\n\nexport { CurrencyFieldComponent };\n\nexport const currencyFieldDefinition: FieldTypeDefinition = {\n  name: 'currency',\n  priority: 18,\n  match: (field, context) => field.type === 'string' && CURRENCY_FIELD_PATTERN.test(context.identity),\n  component: CurrencyFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/date.tsx",
      "content": "'use client';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon, Clock3Icon } from 'lucide-react';\nimport { Calendar } from '../../calendar';\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '../../input-group';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../popover';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport {\n  buildTimestampValue,\n  getControlLabel,\n  normalizeDateValue,\n  normalizeTimeValue,\n  parseCalendarDate,\n  resolveControlTestId,\n  useFieldTestIds,\n} from './shared';\n\n// ---------------------------------------------------------------------------\n// DateFieldComponent\n// ---------------------------------------------------------------------------\n\nfunction DateFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const controlTestId = resolveControlTestId(inputProps, testIds.control);\n  const value = normalizeDateValue(inputProps.value);\n  const selectedDate = parseCalendarDate(value);\n\n  return (\n    <Popover>\n      <InputGroup testId={controlTestId}>\n        <InputGroupInput\n          aria-invalid={Boolean(error)}\n          disabled={inputProps.disabled}\n          id={id}\n          onBlur={inputProps.onBlur}\n          onChange={(event) => inputProps.onValueChange(event.target.value)}\n          placeholder={getFieldUiConfig(field).placeholder || 'YYYY-MM-DD'}\n          testId={`${controlTestId}-input`}\n          value={value}\n        />\n        <InputGroupAddon align=\"inline-end\">\n          <PopoverTrigger asChild>\n            <InputGroupButton\n              aria-label={`Open calendar for ${getControlLabel(label, field)}`}\n              disabled={inputProps.disabled}\n              testId={`${controlTestId}-calendar`}\n            >\n              <CalendarIcon className=\"h-4 w-4\" />\n            </InputGroupButton>\n          </PopoverTrigger>\n        </InputGroupAddon>\n      </InputGroup>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          onSelect={(date) => {\n            inputProps.onValueChange(date ? format(date, 'yyyy-MM-dd') : '');\n          }}\n          selected={selectedDate}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TimestampFieldComponent\n// ---------------------------------------------------------------------------\n\nfunction TimestampFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const dateValue = normalizeDateValue(inputProps.value);\n  const timeValue = normalizeTimeValue(inputProps.value);\n\n  return (\n    <div className=\"space-y-2\" data-testid={testIds.control}>\n      <DateFieldComponent\n        error={error}\n        field={field}\n        id={id}\n        inputProps={{\n          ...inputProps,\n          testId: testIds.controlPart('date'),\n          value: dateValue,\n          onValueChange: (nextDate: string) => inputProps.onValueChange(buildTimestampValue(nextDate, timeValue)),\n        }}\n        label={label}\n        path={[]}\n        value={dateValue}\n      />\n      <InputGroup testId={testIds.controlPart('time')}>\n        <InputGroupAddon>\n          <InputGroupText>\n            <Clock3Icon className=\"h-4 w-4\" />\n          </InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput\n          aria-invalid={Boolean(error)}\n          disabled={inputProps.disabled}\n          onBlur={inputProps.onBlur}\n          onChange={(event) => inputProps.onValueChange(buildTimestampValue(dateValue, event.target.value))}\n          placeholder=\"HH:mm\"\n          testId={testIds.controlPart('time-input')}\n          value={timeValue}\n        />\n      </InputGroup>\n    </div>\n  );\n}\n\nexport { DateFieldComponent, TimestampFieldComponent };\n\nexport const dateFieldDefinition: FieldTypeDefinition = {\n  name: 'date',\n  priority: 10,\n  match: (field) => field.type === 'date',\n  component: DateFieldComponent,\n};\n\nexport const timestampFieldDefinition: FieldTypeDefinition = {\n  name: 'timestamp',\n  priority: 10,\n  match: (field) => field.type === 'timestamp',\n  component: TimestampFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/duration.tsx",
      "content": "'use client';\n\nimport { Input } from '../../input';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction DurationFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <Input\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive font-mono' : 'font-mono'}\n      disabled={inputProps.disabled}\n      id={id}\n      onBlur={inputProps.onBlur}\n      onChange={(event) => inputProps.onValueChange(event.target.value)}\n      placeholder={getFieldUiConfig(field).placeholder || '300s'}\n      testId={testIds.control}\n      value={(inputProps.value as string | undefined) ?? ''}\n    />\n  );\n}\n\nexport { DurationFieldComponent };\n\nexport const durationFieldDefinition: FieldTypeDefinition = {\n  name: 'duration',\n  priority: 10,\n  match: (field) => field.type === 'duration',\n  component: DurationFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/email.tsx",
      "content": "'use client';\n\nimport { MailIcon } from 'lucide-react';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { EMAIL_FIELD_PATTERN, getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { StringLikeInput, useFieldTestIds } from './shared';\n\nfunction EmailFieldComponent(props: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(props.id);\n\n  return (\n    <StringLikeInput\n      error={props.error}\n      icon={<MailIcon className=\"h-4 w-4\" />}\n      id={props.id}\n      inputProps={props.inputProps}\n      placeholder={getFieldUiConfig(props.field).placeholder}\n      testId={testIds.control}\n      type=\"email\"\n    />\n  );\n}\n\nexport { EmailFieldComponent };\n\nexport const emailFieldDefinition: FieldTypeDefinition = {\n  name: 'email',\n  priority: 20,\n  match: (field, context) =>\n    field.type === 'string' && (context.inputType === 'email' || EMAIL_FIELD_PATTERN.test(context.identity)),\n  component: EmailFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/fallback.tsx",
      "content": "'use client';\n\nimport { useAutoFormRenderContext } from '../context';\nimport type { AutoFormFieldProps } from '../core-types';\n\nfunction MissingFieldComponent({ field }: AutoFormFieldProps) {\n  const { uiComponents } = useAutoFormRenderContext();\n\n  return (\n    <uiComponents.ErrorMessage error={`[AutoForm Configuration Error] No component found for type \"${field.type}\".`} />\n  );\n}\n\nexport { MissingFieldComponent };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/field-mask.tsx",
      "content": "'use client';\n\nimport { Textarea } from '../../textarea';\nimport { Text } from '../../typography';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { FIELD_MASK_PATH_SPLIT_PATTERN, getFieldUiConfig } from '../helpers';\nimport { getProtoFieldCustomData } from '../proto';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction FieldMaskFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const allowedPaths = getProtoFieldCustomData(field)?.allowedPaths;\n  const textValue = Array.isArray(inputProps.value) ? inputProps.value.join('\\n') : '';\n\n  return (\n    <div className=\"space-y-2\">\n      <Textarea\n        aria-invalid={Boolean(error)}\n        className={error ? 'border-destructive font-mono' : 'font-mono'}\n        disabled={inputProps.disabled}\n        id={id}\n        onBlur={inputProps.onBlur}\n        onChange={(event) => {\n          const paths = event.target.value\n            .split(FIELD_MASK_PATH_SPLIT_PATTERN)\n            .map((entry) => entry.trim())\n            .filter(Boolean);\n          inputProps.onValueChange(paths);\n        }}\n        placeholder={getFieldUiConfig(field).placeholder || 'profile\\nnotifications.email'}\n        resize=\"vertical\"\n        testId={testIds.control}\n        value={textValue}\n      />\n      {allowedPaths?.length ? (\n        <Text className=\"text-muted-foreground\" variant=\"small\">\n          Allowed paths: {allowedPaths.join(', ')}\n        </Text>\n      ) : null}\n    </div>\n  );\n}\n\nexport { FieldMaskFieldComponent };\n\nexport const fieldMaskFieldDefinition: FieldTypeDefinition = {\n  name: 'fieldMask',\n  priority: 10,\n  match: (field) => field.type === 'fieldMask',\n  component: FieldMaskFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/index.ts",
      "content": "import type { AutoFormFieldComponents } from '../core-types';\nimport { FieldTypeRegistry } from '../registry';\nimport type { FieldTypes } from '../types';\nimport {\n  booleanFieldDefinition,\n  checkboxFieldDefinition,\n  switchFieldDefinition,\n  ToggleFieldComponent,\n} from './boolean';\nimport { bytesFieldDefinition } from './bytes';\nimport { choiceboxFieldDefinition } from './choicebox';\nimport { comboboxFieldDefinition } from './combobox';\nimport { currencyFieldDefinition } from './currency';\nimport { dateFieldDefinition, timestampFieldDefinition } from './date';\nimport { durationFieldDefinition } from './duration';\nimport { emailFieldDefinition } from './email';\nimport { MissingFieldComponent } from './fallback';\nimport { fieldMaskFieldDefinition } from './field-mask';\nimport { int64FieldDefinition } from './int64';\nimport { jsonFieldDefinition } from './json';\nimport { keyValueFieldDefinition } from './key-value';\nimport { dataProviderMultiselectFieldDefinition, multiselectFieldDefinition } from './multiselect';\nimport { numberFieldDefinition } from './number';\nimport { passwordFieldDefinition } from './password';\nimport { radioFieldDefinition } from './radio';\nimport { dataProviderSelectFieldDefinition, selectFieldDefinition } from './select';\nimport { sliderFieldDefinition } from './slider';\nimport { stringFieldDefinition } from './string';\nimport { textareaFieldDefinition } from './textarea';\nimport { toggleGroupFieldDefinition } from './toggle-group';\nimport { urlFieldDefinition } from './url';\n\n// ---------------------------------------------------------------------------\n// Default registry with all built-in field types\n// ---------------------------------------------------------------------------\n\nexport const defaultRegistry = new FieldTypeRegistry<FieldTypes>();\n\ndefaultRegistry\n  // Data-provider-annotated fields win over every default matcher — the\n  // annotation is an explicit instruction from proto, overriding the\n  // string/email/etc. fallbacks.\n  .register(dataProviderSelectFieldDefinition)\n  // String-family (higher priority first so they match before the generic string)\n  .register(passwordFieldDefinition)\n  .register(emailFieldDefinition)\n  .register(urlFieldDefinition)\n  .register(currencyFieldDefinition)\n  .register(textareaFieldDefinition)\n  .register(stringFieldDefinition)\n\n  // Number-family\n  .register(sliderFieldDefinition)\n  .register(numberFieldDefinition)\n\n  // Int64\n  .register(int64FieldDefinition)\n\n  // Boolean-family\n  .register(booleanFieldDefinition)\n  .register(checkboxFieldDefinition)\n  .register(switchFieldDefinition)\n\n  // Date-family\n  .register(dateFieldDefinition)\n  .register(timestampFieldDefinition)\n\n  // Select-family\n  .register(choiceboxFieldDefinition)\n  .register(toggleGroupFieldDefinition)\n  .register(comboboxFieldDefinition)\n  .register(radioFieldDefinition)\n  .register(selectFieldDefinition)\n\n  // Array / map\n  .register(dataProviderMultiselectFieldDefinition)\n  .register(multiselectFieldDefinition)\n  .register(keyValueFieldDefinition)\n\n  // Protobuf-specific\n  .register(bytesFieldDefinition)\n  .register(durationFieldDefinition)\n  .register(fieldMaskFieldDefinition)\n  .register(jsonFieldDefinition);\n\n// ---------------------------------------------------------------------------\n// Legacy map-based registry for backwards compatibility during migration\n// ---------------------------------------------------------------------------\n\nexport const AutoFormFieldComponentRegistry = {\n  string: stringFieldDefinition.component,\n  textarea: textareaFieldDefinition.component,\n  password: passwordFieldDefinition.component,\n  email: emailFieldDefinition.component,\n  url: urlFieldDefinition.component,\n  currency: currencyFieldDefinition.component,\n  number: numberFieldDefinition.component,\n  slider: sliderFieldDefinition.component,\n  int64: int64FieldDefinition.component,\n  boolean: booleanFieldDefinition.component,\n  checkbox: checkboxFieldDefinition.component,\n  switch: switchFieldDefinition.component,\n  toggle: ToggleFieldComponent,\n  date: dateFieldDefinition.component,\n  timestamp: timestampFieldDefinition.component,\n  select: selectFieldDefinition.component,\n  // Share the same component with `select` — the routing rule is\n  // different (data-provider annotation vs proto enum), but the\n  // component handles both via its internal provider branch.\n  dataProviderSelect: dataProviderSelectFieldDefinition.component,\n  radio: radioFieldDefinition.component,\n  combobox: comboboxFieldDefinition.component,\n  choicebox: choiceboxFieldDefinition.component,\n  toggleGroup: toggleGroupFieldDefinition.component,\n  multiselect: multiselectFieldDefinition.component,\n  dataProviderMultiSelect: dataProviderMultiselectFieldDefinition.component,\n  bytes: bytesFieldDefinition.component,\n  duration: durationFieldDefinition.component,\n  fieldMask: fieldMaskFieldDefinition.component,\n  json: jsonFieldDefinition.component,\n  'dropzone-json': jsonFieldDefinition.component,\n  keyValue: keyValueFieldDefinition.component,\n  fallback: MissingFieldComponent,\n} satisfies AutoFormFieldComponents<FieldTypes>;\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport { MissingFieldComponent } from './fallback';\n\nexport {\n  booleanFieldDefinition,\n  bytesFieldDefinition,\n  checkboxFieldDefinition,\n  choiceboxFieldDefinition,\n  comboboxFieldDefinition,\n  currencyFieldDefinition,\n  dataProviderMultiselectFieldDefinition,\n  dataProviderSelectFieldDefinition,\n  dateFieldDefinition,\n  durationFieldDefinition,\n  emailFieldDefinition,\n  fieldMaskFieldDefinition,\n  int64FieldDefinition,\n  jsonFieldDefinition,\n  keyValueFieldDefinition,\n  multiselectFieldDefinition,\n  numberFieldDefinition,\n  passwordFieldDefinition,\n  radioFieldDefinition,\n  selectFieldDefinition,\n  sliderFieldDefinition,\n  stringFieldDefinition,\n  switchFieldDefinition,\n  textareaFieldDefinition,\n  timestampFieldDefinition,\n  toggleGroupFieldDefinition,\n  urlFieldDefinition,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/int64.tsx",
      "content": "'use client';\n\nimport { Input } from '../../input';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction Int64FieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <Input\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive font-mono' : 'font-mono'}\n      disabled={inputProps.disabled}\n      id={id}\n      inputMode=\"numeric\"\n      onBlur={inputProps.onBlur}\n      onChange={(event) => inputProps.onValueChange(event.target.value)}\n      placeholder={getFieldUiConfig(field).placeholder}\n      testId={testIds.control}\n      value={(inputProps.value as string | undefined) ?? ''}\n    />\n  );\n}\n\nexport { Int64FieldComponent };\n\nexport const int64FieldDefinition: FieldTypeDefinition = {\n  name: 'int64',\n  priority: 10,\n  match: (field) => field.type === 'int64',\n  component: Int64FieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/json.tsx",
      "content": "'use client';\n\nimport { JSONField } from '../../json-field';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getProtoFieldCustomData, getProtoJsonSchema } from '../proto';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction JsonFieldComponent({ field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <JSONField\n      maxDepth={3}\n      onBlur={inputProps.onBlur}\n      onChange={(value) => inputProps.onValueChange(value)}\n      schema={getProtoJsonSchema(field) as never}\n      showPlaceholder={false}\n      testId={testIds.control}\n      value={\n        ((inputProps.value as unknown) ?? (getProtoFieldCustomData(field)?.jsonKind === 'listValue' ? [] : {})) as never\n      }\n    />\n  );\n}\n\nexport { JsonFieldComponent };\n\nexport const jsonFieldDefinition: FieldTypeDefinition = {\n  name: 'json',\n  priority: 10,\n  match: (field) => field.type === 'json',\n  component: JsonFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/key-value.tsx",
      "content": "'use client';\n\nimport { KeyValueField } from '../../key-value-field';\nimport type { AutoFormFieldProps } from '../core-types';\nimport {\n  denormalizeKeyValueEntries,\n  getFieldUiConfig,\n  normalizeKeyValueEntries,\n  resolveRenderFieldType,\n} from '../helpers';\nimport { getProtoFieldCustomData } from '../proto';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction KeyValueFieldComponent({ field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const valueField =\n    field.type === 'map'\n      ? field.schema?.[1]\n      : field.schema?.[0]?.schema?.find((candidate) => candidate.key === 'value');\n  const valueRenderType = valueField ? resolveRenderFieldType(valueField) : undefined;\n  const protoData = getProtoFieldCustomData(field);\n\n  const valueFieldProps =\n    valueRenderType === 'select' || valueRenderType === 'combobox' || valueRenderType === 'radio'\n      ? {\n          mode: 'combobox' as const,\n          options: (valueField?.options || []).map(([value, optionLabel]) => ({ value, label: optionLabel })),\n          placeholder: getFieldUiConfig(valueField ?? field).placeholder || 'Value',\n        }\n      : {\n          placeholder: getFieldUiConfig(valueField ?? field).placeholder || 'Value',\n        };\n\n  return (\n    <KeyValueField\n      addButtonLabel=\"Add pair\"\n      disabled={inputProps.disabled}\n      keyFieldProps={{ placeholder: 'Key' }}\n      maxItems={protoData?.maxPairs}\n      onChange={(entries) => inputProps.onValueChange(denormalizeKeyValueEntries(entries, field))}\n      showAddButton\n      testId={testIds.control}\n      value={normalizeKeyValueEntries(inputProps.value)}\n      valueFieldProps={valueFieldProps}\n    />\n  );\n}\n\nexport { KeyValueFieldComponent };\n\n/**\n * Helper to check if a field's schema entry is a scalar type suitable for key-value use.\n */\nfunction isKeyValueScalarField(field: { type?: string } | undefined): boolean {\n  if (!field) {\n    return false;\n  }\n  return ['string', 'email', 'url', 'password', 'currency', 'number', 'int64', 'select', 'combobox'].includes(\n    field.type ?? ''\n  );\n}\n\nfunction isSimpleKeyValueLikeObject(\n  field: { type?: string; schema?: Array<{ key: string; type?: string }> } | undefined\n): boolean {\n  if (!(field?.type === 'object' && field.schema?.length === 2)) {\n    return false;\n  }\n\n  const keyField = field.schema.find((candidate) => candidate.key === 'key');\n  const valueField = field.schema.find((candidate) => candidate.key === 'value');\n  return Boolean(keyField && valueField && isKeyValueScalarField(keyField) && isKeyValueScalarField(valueField));\n}\n\nexport const keyValueFieldDefinition: FieldTypeDefinition = {\n  name: 'keyValue',\n  priority: 18,\n  match: (field) => {\n    // Array with key-value-like object items\n    if (field.type === 'array') {\n      const itemField = field.schema?.[0];\n      return isSimpleKeyValueLikeObject(itemField);\n    }\n\n    // Map with scalar key + value\n    if (field.type === 'map') {\n      const keyField = field.schema?.[0];\n      const valueField = field.schema?.[1];\n      return isKeyValueScalarField(keyField) && isKeyValueScalarField(valueField);\n    }\n\n    return false;\n  },\n  component: KeyValueFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/multiselect.tsx",
      "content": "'use client';\n\nimport { SimpleMultiSelect } from '../../multi-select';\nimport { useAutoForm } from '../context';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { resolveDataProvider } from '../data-providers';\nimport { getFieldUiConfig, NUMERIC_OPTION_PATTERN } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { getGroupedOptions, readDataProviderId, renderOptionLabel, useFieldTestIds } from './shared';\n\nfunction MultiSelectFieldComponent({ field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const itemField = field.schema?.[0];\n  const numericOptions = Boolean(itemField?.options?.every(([value]) => NUMERIC_OPTION_PATTERN.test(value)));\n  const optionGroups = itemField ? getGroupedOptions(itemField) : undefined;\n  const options = optionGroups?.length\n    ? optionGroups.map((group) => ({\n        heading: group.label,\n        testId: testIds.group(String(group.label ?? 'group')),\n        children: group.options.map((option) => ({\n          label: renderOptionLabel(option),\n          selectedTestId: testIds.selected(option.value),\n          testId: testIds.option(option.value),\n          value: option.value,\n        })),\n      }))\n    : (itemField?.options || []).map(([value, optionLabel]) => ({\n        label: optionLabel,\n        selectedTestId: testIds.selected(value),\n        testId: testIds.option(value),\n        value,\n      }));\n\n  return (\n    <SimpleMultiSelect\n      disabled={inputProps.disabled}\n      id={id}\n      onValueChange={(values) =>\n        inputProps.onValueChange(numericOptions ? values.map((value) => Number(value)) : values)\n      }\n      options={options}\n      placeholder={getFieldUiConfig(field).placeholder || 'Select one or more options'}\n      testId={testIds.field}\n      value={Array.isArray(inputProps.value) ? inputProps.value.map((value: unknown) => String(value)) : []}\n      width=\"full\"\n    />\n  );\n}\n\nexport { MultiSelectFieldComponent };\n\nexport const multiselectFieldDefinition: FieldTypeDefinition = {\n  name: 'multiselect',\n  priority: 20,\n  match: (field) => {\n    if (field.type !== 'array') {\n      return false;\n    }\n    const itemField = field.schema?.[0];\n    return Boolean(itemField?.type === 'select' && itemField.options?.length);\n  },\n  component: MultiSelectFieldComponent,\n};\n\n// ── Data-provider-backed multi-select ─────────────────────────────────\n// Matches `repeated string` whose item carries a `data_provider`\n// annotation, e.g. OpenAPI `include_methods` / `exclude_methods`. The\n// previous behavior rendered a list of single dropdowns with an \"Add\"\n// button — one row per method. A multi-select collapses that to a single\n// control that holds every picked method as a chip.\n\nfunction DataProviderMultiSelectComponent({ field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const itemField = field.schema?.[0];\n  const providerId = readDataProviderId(itemField);\n  const { dataProviders } = useAutoForm();\n  const provider = resolveDataProvider(dataProviders, providerId);\n  const { options: providerOptions = [], isLoading } = provider ? provider() : { options: [] };\n\n  const options = providerOptions.map((option) => {\n    // `label` is typed as ReactNode on MultiSelectOptionItem, so we can\n    // render icon + text + description inline instead of stringifying.\n    const labelNode = (\n      <span className=\"flex items-center gap-2\">\n        {option.icon ? (\n          <span className=\"flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full\">\n            {option.icon}\n          </span>\n        ) : null}\n        <span>{option.label}</span>\n        {option.description ? <span className=\"text-muted-foreground text-xs\">— {option.description}</span> : null}\n      </span>\n    );\n    return {\n      label: labelNode,\n      selectedTestId: testIds.selected(option.value),\n      testId: testIds.option(option.value),\n      value: option.value,\n    };\n  });\n\n  const currentValue = Array.isArray(inputProps.value) ? inputProps.value.map((value: unknown) => String(value)) : [];\n\n  return (\n    <SimpleMultiSelect\n      disabled={inputProps.disabled || isLoading}\n      id={id}\n      onValueChange={(values) => inputProps.onValueChange(values)}\n      options={options}\n      placeholder={getFieldUiConfig(field).placeholder || (isLoading ? 'Loading…' : 'Select one or more options')}\n      testId={testIds.field}\n      value={currentValue}\n      width=\"full\"\n    />\n  );\n}\n\nexport const dataProviderMultiselectFieldDefinition: FieldTypeDefinition = {\n  name: 'dataProviderMultiSelect',\n  // Higher than the default `multiselect` (20) so an annotated item wins\n  // over the legacy \"array-of-select-enum\" branch even when both match.\n  priority: 120,\n  match: (field) => {\n    if (field.type !== 'array') {\n      return false;\n    }\n    const itemField = field.schema?.[0];\n    if (!itemField || (itemField.type !== 'string' && itemField.type !== 'number')) {\n      return false;\n    }\n    return readDataProviderId(itemField) !== undefined;\n  },\n  component: DataProviderMultiSelectComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/number.tsx",
      "content": "'use client';\n\nimport { Input } from '../../input';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { normalizeNumberValue, resolveNumericStep, useFieldTestIds } from './shared';\n\nfunction NumberFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const stepValue = resolveNumericStep(inputProps, normalizeNumberValue(inputProps.value));\n\n  return (\n    <Input\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive' : ''}\n      disabled={inputProps.disabled}\n      id={id}\n      inputMode=\"decimal\"\n      max={inputProps.max as number | undefined}\n      min={inputProps.min as number | undefined}\n      onBlur={inputProps.onBlur}\n      onChange={(event) => {\n        const nextValue = event.target.value;\n        inputProps.onValueChange(nextValue === '' ? undefined : Number(nextValue));\n      }}\n      placeholder={getFieldUiConfig(field).placeholder}\n      step={stepValue}\n      testId={testIds.control}\n      type=\"number\"\n      value={inputProps.value ?? ''}\n    />\n  );\n}\n\nexport { NumberFieldComponent };\n\nexport const numberFieldDefinition: FieldTypeDefinition = {\n  name: 'number',\n  priority: 10,\n  match: (field) => {\n    if (field.type !== 'number') {\n      return false;\n    }\n    const min = Number(field.fieldConfig?.inputProps?.min);\n    const max = Number(field.fieldConfig?.inputProps?.max);\n    return !(Number.isFinite(min) && Number.isFinite(max));\n  },\n  component: NumberFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/password.tsx",
      "content": "'use client';\n\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig, SECRET_FIELD_PATTERN } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { StringLikeInput, useFieldTestIds } from './shared';\n\nfunction PasswordFieldComponent(props: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(props.id);\n\n  return (\n    <StringLikeInput\n      error={props.error}\n      id={props.id}\n      inputProps={props.inputProps}\n      placeholder={getFieldUiConfig(props.field).placeholder}\n      testId={testIds.control}\n      type=\"password\"\n    />\n  );\n}\n\nexport { PasswordFieldComponent };\n\nexport const passwordFieldDefinition: FieldTypeDefinition = {\n  name: 'password',\n  priority: 20,\n  match: (field, context) =>\n    field.type === 'string' && (SECRET_FIELD_PATTERN.test(context.identity) || context.inputType === 'password'),\n  component: PasswordFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/radio.tsx",
      "content": "'use client';\n\nimport { RadioGroup, RadioGroupItem } from '../../radio-group';\nimport { Text } from '../../typography';\nimport type { AutoFormFieldProps } from '../core-types';\nimport type { FieldTypeDefinition } from '../registry';\nimport {\n  getControlLabel,\n  getFlatOptions,\n  getGroupedOptions,\n  hasNumericOptions,\n  renderOptionLabel,\n  useFieldTestIds,\n} from './shared';\n\nfunction RadioFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const numericOptions = hasNumericOptions(field);\n  const value = inputProps.value === undefined || inputProps.value === null ? '' : String(inputProps.value);\n  const optionGroups = getGroupedOptions(field);\n  const flatOptions = getFlatOptions(field);\n\n  return (\n    <RadioGroup\n      aria-invalid={Boolean(error)}\n      aria-label={getControlLabel(label, field)}\n      onValueChange={(nextValue) => inputProps.onValueChange(numericOptions ? Number(nextValue) : nextValue)}\n      testId={testIds.control}\n      value={value}\n    >\n      {(optionGroups?.length ? optionGroups : [{ label: undefined, options: flatOptions }]).map((group, groupIndex) => (\n        <div\n          className=\"space-y-2\"\n          data-testid={testIds.group(String(group.label ?? groupIndex))}\n          key={`${field.key}-group-${groupIndex}`}\n        >\n          {group.label ? (\n            <Text as=\"div\" className=\"text-muted-foreground\" variant=\"small\">\n              {group.label}\n            </Text>\n          ) : null}\n          <div className=\"grid gap-3 sm:grid-cols-2\">\n            {group.options.map((option) => (\n              <RadioGroupItem\n                data-selected={String(option.value === value)}\n                disabled={inputProps.disabled}\n                id={`${field.key}-${option.value}`}\n                key={option.value}\n                testId={testIds.option(option.value)}\n                value={option.value}\n                variant=\"card\"\n              >\n                {renderOptionLabel(option)}\n              </RadioGroupItem>\n            ))}\n          </div>\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n\nexport { RadioFieldComponent };\n\nexport const radioFieldDefinition: FieldTypeDefinition = {\n  name: 'radio',\n  priority: 15,\n  match: (field) => {\n    if (field.type !== 'select') {\n      return false;\n    }\n    const optionCount = field.options?.length ?? 0;\n    return optionCount > 0 && optionCount <= 3;\n  },\n  component: RadioFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/select.tsx",
      "content": "'use client';\n\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '../../select';\nimport { useAutoForm } from '../context';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { type DataProviderOption, resolveDataProvider } from '../data-providers';\nimport type { FieldTypeDefinition } from '../registry';\nimport {\n  getControlLabel,\n  getFlatOptions,\n  getGroupedOptions,\n  hasNumericOptions,\n  readDataProviderId,\n  renderOptionLabel,\n  useFieldTestIds,\n} from './shared';\n\nfunction SelectFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const { dataProviders } = useAutoForm();\n  const providerId = readDataProviderId(field);\n  const provider = resolveDataProvider(dataProviders, providerId);\n  const numericOptions = hasNumericOptions(field);\n  const currentValue = inputProps.value === undefined || inputProps.value === null ? null : String(inputProps.value);\n  const fieldLabel = getControlLabel(label, field);\n  const optionGroups = getGroupedOptions(field);\n  const flatOptions = getFlatOptions(field);\n\n  if (provider) {\n    return (\n      <SelectFieldFromProvider\n        currentValue={currentValue}\n        error={error}\n        field={field}\n        fieldLabel={fieldLabel}\n        id={id}\n        inputProps={inputProps}\n        provider={provider}\n        testIds={testIds}\n      />\n    );\n  }\n\n  if (providerId) {\n    // Annotated but no implementation registered — loud dev warning, graceful fallback.\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `[AutoForm] Field \"${field.key}\" is annotated with data_provider=\"${providerId}\" ` +\n          'but no provider is registered. Check the AutoForm dataProviders map.'\n      );\n    }\n  }\n\n  return (\n    <Select\n      items={[\n        ...(field.required ? [] : [{ label: 'Not set', value: null }]),\n        ...flatOptions.map((option) => ({\n          label: renderOptionLabel(option),\n          value: option.value,\n        })),\n      ]}\n      onValueChange={(value) => {\n        if (value === null) {\n          inputProps.onValueChange(undefined);\n          return;\n        }\n        inputProps.onValueChange(numericOptions ? Number(value) : value);\n      }}\n      value={currentValue}\n    >\n      <SelectTrigger\n        aria-label={fieldLabel}\n        className={error ? 'border-destructive' : ''}\n        disabled={inputProps.disabled}\n        id={id}\n        testId={testIds.control}\n      >\n        <SelectValue placeholder=\"Select an option\" />\n      </SelectTrigger>\n      <SelectContent>\n        {field.required ? null : (\n          <SelectItem testId={testIds.option('not-set')} value={null}>\n            Not set\n          </SelectItem>\n        )}\n        {optionGroups?.length\n          ? optionGroups.map((group, groupIndex) => (\n              <SelectGroup\n                key={`${field.key}-group-${groupIndex}`}\n                testId={testIds.group(String(group.label ?? groupIndex))}\n              >\n                {group.label ? <SelectLabel>{group.label}</SelectLabel> : null}\n                {group.options.map((option) => (\n                  <SelectItem key={option.value} testId={testIds.option(option.value)} value={option.value}>\n                    {renderOptionLabel(option)}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            ))\n          : flatOptions.map((option) => (\n              <SelectItem key={option.value} testId={testIds.option(option.value)} value={option.value}>\n                {renderOptionLabel(option)}\n              </SelectItem>\n            ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nfunction SelectFieldFromProvider({\n  currentValue,\n  error,\n  field,\n  fieldLabel,\n  id,\n  inputProps,\n  provider,\n  testIds,\n}: {\n  currentValue: string | null;\n  error: AutoFormFieldProps['error'];\n  field: AutoFormFieldProps['field'];\n  fieldLabel: string;\n  id: string;\n  inputProps: AutoFormFieldProps['inputProps'];\n  provider: () => { options: DataProviderOption[]; isLoading?: boolean; error?: unknown };\n  testIds: ReturnType<typeof useFieldTestIds>;\n}) {\n  const { options, isLoading, error: providerError } = provider();\n\n  if (providerError) {\n    // `SelectTrigger` / `SelectValue` are Radix primitives that need a\n    // `Select.Root` context. Wrap them in a disabled `<Select>` so the\n    // failure state still renders as a coherent select-shaped control\n    // rather than throwing a Radix context error.\n    return (\n      <Select disabled value=\"\">\n        <SelectTrigger aria-label={fieldLabel} disabled id={id} testId={testIds.control}>\n          <SelectValue placeholder=\"Failed to load options\" />\n        </SelectTrigger>\n      </Select>\n    );\n  }\n\n  const grouped = options.reduce<Record<string, DataProviderOption[]>>((acc, option) => {\n    const key = option.group ?? '';\n    acc[key] = acc[key] ? [...acc[key], option] : [option];\n    return acc;\n  }, {});\n  const hasGroups = Object.keys(grouped).some((k) => k !== '');\n\n  return (\n    <Select\n      items={[\n        ...(field.required ? [] : [{ label: 'Not set', value: null }]),\n        ...options.map((option) => ({\n          label: <ProviderOptionLabel option={option} />,\n          value: option.value,\n        })),\n      ]}\n      onValueChange={(value) => {\n        if (value === null) {\n          inputProps.onValueChange(undefined);\n          return;\n        }\n        inputProps.onValueChange(value);\n      }}\n      value={currentValue}\n    >\n      <SelectTrigger\n        aria-label={fieldLabel}\n        className={error ? 'border-destructive' : ''}\n        disabled={inputProps.disabled || isLoading}\n        id={id}\n        testId={testIds.control}\n      >\n        <SelectValue placeholder={isLoading ? 'Loading…' : 'Select an option'} />\n      </SelectTrigger>\n      <SelectContent>\n        {field.required ? null : (\n          <SelectItem testId={testIds.option('not-set')} value={null}>\n            Not set\n          </SelectItem>\n        )}\n        {options.length === 0 && !isLoading ? (\n          <SelectItem disabled testId={testIds.option('empty')} value=\"__empty\">\n            No options available\n          </SelectItem>\n        ) : null}\n        {hasGroups\n          ? Object.entries(grouped).map(([groupLabel, groupOptions]) => (\n              <SelectGroup key={groupLabel || 'ungrouped'} testId={testIds.group(groupLabel || 'ungrouped')}>\n                {groupLabel ? <SelectLabel>{groupLabel}</SelectLabel> : null}\n                {groupOptions.map((option) => (\n                  <SelectItem key={option.value} testId={testIds.option(option.value)} value={option.value}>\n                    <ProviderOptionLabel option={option} />\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            ))\n          : options.map((option) => (\n              <SelectItem key={option.value} testId={testIds.option(option.value)} value={option.value}>\n                <ProviderOptionLabel option={option} />\n              </SelectItem>\n            ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nfunction ProviderOptionLabel({ option }: { option: DataProviderOption }) {\n  const labelWithIcon = option.icon ? (\n    <span className=\"flex items-center gap-2\">\n      <span className=\"flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full\">\n        {option.icon}\n      </span>\n      <span>{option.label}</span>\n    </span>\n  ) : (\n    <span>{option.label}</span>\n  );\n\n  if (!option.description) {\n    return labelWithIcon;\n  }\n  return (\n    <span className=\"flex items-center justify-between gap-3\">\n      {labelWithIcon}\n      <span className=\"text-muted-foreground text-xs\">{option.description}</span>\n    </span>\n  );\n}\n\nexport { SelectFieldComponent };\n\nexport const selectFieldDefinition: FieldTypeDefinition = {\n  name: 'select',\n  priority: 12,\n  match: (field) => {\n    if (field.type !== 'select') {\n      return false;\n    }\n    const optionCount = field.options?.length ?? 0;\n    return optionCount > 3 && optionCount <= 8;\n  },\n  component: SelectFieldComponent,\n};\n\n/**\n * Second routing rule for the same `SelectFieldComponent`. Matches any\n * field annotated with `data_provider`, regardless of its underlying\n * proto type — a string field with `data_provider = AWS_REGIONS`\n * becomes a select populated from the hosting app's data-provider\n * registry. High priority so the annotation wins over the default\n * `string` / `password` / `email` matchers.\n *\n * The same component handles both rules; the routing split exists only\n * because static proto-enum selects and annotation-driven selects\n * match under different conditions.\n */\nexport const dataProviderSelectFieldDefinition: FieldTypeDefinition = {\n  name: 'dataProviderSelect',\n  priority: 120,\n  match: (field) => {\n    // Arrays / maps / objects keep their native renderers even when the\n    // parent field is annotated with a data provider. Support for\n    // array-of-strings multi-select from a data provider is a follow-up.\n    if (field.type !== 'string' && field.type !== 'number') {\n      return false;\n    }\n    return readDataProviderId(field) !== undefined;\n  },\n  component: SelectFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/shared.tsx",
      "content": "'use client';\n\nimport { format, isValid, parse } from 'date-fns';\nimport React from 'react';\n\nimport { Input } from '../../input';\nimport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../../input-group';\nimport { useAutoFormRuntimeContext } from '../context';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig, NUMERIC_OPTION_PATTERN } from '../helpers';\nimport { getAutoFormChoiceTestId, getAutoFormFieldTestId } from '../test-ids';\nimport type { AutoFormOptionGroup, AutoFormOptionItem } from '../types';\n\n// ---------------------------------------------------------------------------\n// Label utilities\n// ---------------------------------------------------------------------------\n\nexport function getControlLabel(label: AutoFormFieldProps['label'], field: AutoFormFieldProps['field']): string {\n  return typeof label === 'string' || typeof label === 'number'\n    ? String(label)\n    : String(field.fieldConfig?.label ?? field.key);\n}\n\n// ---------------------------------------------------------------------------\n// Test-id utilities\n// ---------------------------------------------------------------------------\n\nexport function useFieldTestIds(id: string) {\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n\n  return React.useMemo(\n    () => ({\n      control: getAutoFormFieldTestId(testIdPrefix, id, 'control'),\n      controlPart: (part: string) => getAutoFormFieldTestId(testIdPrefix, id, `control-${part}`),\n      field: getAutoFormFieldTestId(testIdPrefix, id),\n      group: (group: string | number) => getAutoFormChoiceTestId(testIdPrefix, id, 'group', group),\n      option: (value: string | number) => getAutoFormChoiceTestId(testIdPrefix, id, 'option', value),\n      selected: (value: string | number) => getAutoFormChoiceTestId(testIdPrefix, id, 'selected', value),\n    }),\n    [id, testIdPrefix]\n  );\n}\n\nexport function resolveControlTestId(inputProps: AutoFormFieldProps['inputProps'], fallback: string): string {\n  return typeof (inputProps as { testId?: unknown }).testId === 'string'\n    ? ((inputProps as { testId: string }).testId ?? fallback)\n    : fallback;\n}\n\n// ---------------------------------------------------------------------------\n// Date utilities\n// ---------------------------------------------------------------------------\n\nexport function normalizeDateValue(value: unknown): string {\n  if (typeof value === 'string') {\n    if (/([+-]\\d{2}:\\d{2}|Z)$/.test(value)) {\n      const parsed = new Date(value);\n      return Number.isNaN(parsed.getTime()) ? '' : format(parsed, 'yyyy-MM-dd');\n    }\n\n    return value.includes('T') ? (value.split('T')[0] ?? '') : value;\n  }\n\n  if (value instanceof Date && isValid(value)) {\n    return format(value, 'yyyy-MM-dd');\n  }\n\n  return '';\n}\n\nexport function normalizeTimeValue(value: unknown): string {\n  if (typeof value === 'string') {\n    if (/([+-]\\d{2}:\\d{2}|Z)$/.test(value)) {\n      const parsed = new Date(value);\n      return Number.isNaN(parsed.getTime()) ? '' : format(parsed, 'HH:mm');\n    }\n\n    return value.includes('T') ? (value.split('T')[1]?.slice(0, 5) ?? '') : '';\n  }\n\n  if (value instanceof Date && isValid(value)) {\n    return format(value, 'HH:mm');\n  }\n\n  return '';\n}\n\nexport function parseCalendarDate(value: string): Date | undefined {\n  if (!value) {\n    return;\n  }\n\n  const parsed = parse(value, 'yyyy-MM-dd', new Date());\n  return isValid(parsed) ? parsed : undefined;\n}\n\nexport function buildTimestampValue(datePart: string, timePart: string): string {\n  if (!datePart) {\n    return '';\n  }\n\n  return `${datePart}T${timePart || '00:00'}`;\n}\n\n// ---------------------------------------------------------------------------\n// Number utilities\n// ---------------------------------------------------------------------------\n\nexport function parseNumericProp(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? value : undefined;\n  }\n\n  if (typeof value === 'string' && value.trim().length > 0) {\n    const parsed = Number(value);\n    return Number.isFinite(parsed) ? parsed : undefined;\n  }\n\n  return;\n}\n\nexport function resolveNumericStep(inputProps: AutoFormFieldProps['inputProps'], fallbackValue?: number): number {\n  const explicitStep = parseNumericProp(inputProps.step);\n  if (explicitStep !== undefined && explicitStep > 0) {\n    return explicitStep;\n  }\n\n  const values = [parseNumericProp(inputProps.min), parseNumericProp(inputProps.max), fallbackValue].filter(\n    (value): value is number => value !== undefined\n  );\n  return values.some((value) => !Number.isInteger(value)) ? 0.01 : 1;\n}\n\nexport function normalizeNumberValue(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? value : undefined;\n  }\n\n  if (typeof value === 'string' && value.trim().length > 0) {\n    const parsed = Number(value);\n    return Number.isFinite(parsed) ? parsed : undefined;\n  }\n\n  return;\n}\n\n// ---------------------------------------------------------------------------\n// Option utilities\n// ---------------------------------------------------------------------------\n\nexport function getGroupedOptions(field: AutoFormFieldProps['field']): AutoFormOptionGroup[] | undefined {\n  return getFieldUiConfig(field).optionGroups;\n}\n\nexport function getFlatOptions(field: AutoFormFieldProps['field']): AutoFormOptionItem[] {\n  const uiConfig = getFieldUiConfig(field);\n  const labelOverrides = uiConfig.optionLabels;\n  const optionGroups = getGroupedOptions(field);\n\n  if (optionGroups?.length) {\n    const options = optionGroups.flatMap((group) => group.options);\n    if (labelOverrides) {\n      return options.map((opt) => ({ ...opt, label: labelOverrides[opt.value] ?? opt.label }));\n    }\n    return options;\n  }\n\n  return (field.options || []).map(([value, label]) => ({\n    value,\n    label: labelOverrides?.[value] ?? label,\n  }));\n}\n\nexport function renderOptionLabel(option: AutoFormOptionItem | { label?: React.ReactNode; value: string }) {\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      {'icon' in option && option.icon ? <span className=\"shrink-0\">{option.icon}</span> : null}\n      <span className=\"truncate\">{option.label ?? option.value}</span>\n    </span>\n  );\n}\n\nexport function hasNumericOptions(field: AutoFormFieldProps['field']): boolean {\n  const options = getFlatOptions(field);\n  return options.length > 0 && options.every((option) => NUMERIC_OPTION_PATTERN.test(option.value));\n}\n\n// ---------------------------------------------------------------------------\n// Shared input component\n// ---------------------------------------------------------------------------\n\nexport function StringLikeInput({\n  error,\n  icon,\n  id,\n  inputProps,\n  placeholder,\n  testId,\n  type = 'text',\n}: {\n  error?: string;\n  icon?: React.ReactNode;\n  id: string;\n  inputProps: AutoFormFieldProps['inputProps'];\n  placeholder?: string;\n  testId: string;\n  type?: React.ComponentProps<typeof Input>['type'];\n}) {\n  if (icon) {\n    return (\n      <InputGroup testId={testId}>\n        <InputGroupAddon>\n          <InputGroupText>{icon}</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput\n          aria-invalid={Boolean(error)}\n          disabled={inputProps.disabled}\n          id={id}\n          name={inputProps.name}\n          onBlur={inputProps.onBlur}\n          onChange={(event) => inputProps.onValueChange(event.target.value)}\n          placeholder={placeholder}\n          ref={inputProps.ref}\n          testId={`${testId}-input`}\n          type={type}\n          value={(inputProps.value as string | undefined) ?? ''}\n        />\n      </InputGroup>\n    );\n  }\n\n  return (\n    <Input\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive' : ''}\n      disabled={inputProps.disabled}\n      id={id}\n      name={inputProps.name}\n      onBlur={inputProps.onBlur}\n      onChange={(event) => inputProps.onValueChange(event.target.value)}\n      placeholder={placeholder}\n      ref={inputProps.ref}\n      testId={testId}\n      type={type}\n      value={(inputProps.value as string | undefined) ?? ''}\n    />\n  );\n}\n\n/**\n * Extract the registered data-provider id from a field's customData.\n * Accepts both the flat `customData.dataProvider` shape and the proto-derived\n * `customData.ui.dataProvider` shape so authors can use either.\n */\nexport function readDataProviderId(field: AutoFormFieldProps['field'] | undefined): string | undefined {\n  const customData = field?.fieldConfig?.customData;\n  if (!(customData && typeof customData === 'object')) {\n    return;\n  }\n  const bag = customData as { dataProvider?: unknown; ui?: { dataProvider?: unknown } };\n  if (typeof bag.dataProvider === 'string') {\n    return bag.dataProvider;\n  }\n  if (bag.ui && typeof bag.ui === 'object' && typeof bag.ui.dataProvider === 'string') {\n    return bag.ui.dataProvider;\n  }\n  return;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/slider.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { Input } from '../../input';\nimport { Slider } from '../../slider';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { normalizeNumberValue, parseNumericProp, resolveNumericStep, useFieldTestIds } from './shared';\n\n/**\n * Slider widget — renders the track alongside a companion numeric\n * input. The track is for quick coarse adjustments; the input\n * handles precise entry (including tiny step sizes beyond a drag's\n * resolution) and keeps the value readable when the track is tiny\n * on narrow columns. Both controls bind to the same form value.\n */\nfunction SliderFieldComponent({ error, field, id, inputProps, label: fieldLabel }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const min = parseNumericProp(inputProps.min) ?? 0;\n  const max = parseNumericProp(inputProps.max) ?? 100;\n  const value = normalizeNumberValue(inputProps.value) ?? min;\n  const step = resolveNumericStep(inputProps, value);\n  const clamped = Math.min(max, Math.max(min, value));\n  const label = typeof fieldLabel === 'string' || typeof fieldLabel === 'number' ? String(fieldLabel) : id;\n\n  // Seed the form state with the slider's minimum on mount when the\n  // field is undefined/null. Without this, the track renders at `min`\n  // (thanks to the `?? min` fallback above) but the companion number\n  // input shows as empty and the form value stays undefined — users\n  // see a \"blank\" input even though the slider is clearly at zero.\n  // Seeding once aligns both controls visually and makes 0 (or the\n  // proto-declared min) an explicit starting value in the payload.\n  const hasSeededRef = React.useRef(false);\n  React.useEffect(() => {\n    if (hasSeededRef.current) {\n      return;\n    }\n    if (inputProps.value === undefined || inputProps.value === null) {\n      hasSeededRef.current = true;\n      inputProps.onValueChange(min, {\n        shouldDirty: false,\n        shouldTouch: false,\n        shouldValidate: false,\n      });\n    }\n  }, [inputProps, min]);\n\n  return (\n    <div className=\"flex items-center gap-4\" data-testid={testIds.control}>\n      <Slider\n        aria-label={`${label} slider`}\n        className=\"flex-1\"\n        disabled={inputProps.disabled}\n        max={max}\n        min={min}\n        onValueChange={(nextValues) => inputProps.onValueChange(nextValues[0] ?? min)}\n        step={step}\n        testId={testIds.controlPart('slider')}\n        value={[clamped]}\n      />\n      <Input\n        aria-invalid={Boolean(error)}\n        className={`w-24 ${error ? 'border-destructive' : ''}`}\n        disabled={inputProps.disabled}\n        id={id}\n        inputMode=\"decimal\"\n        max={max}\n        min={min}\n        onBlur={inputProps.onBlur}\n        onChange={(event) => {\n          const nextValue = event.target.value;\n          inputProps.onValueChange(nextValue === '' ? min : Number(nextValue));\n        }}\n        placeholder={getFieldUiConfig(field).placeholder}\n        step={step}\n        testId={testIds.controlPart('input')}\n        type=\"number\"\n        value={inputProps.value ?? clamped}\n      />\n    </div>\n  );\n}\n\nexport { SliderFieldComponent };\n\nexport const sliderFieldDefinition: FieldTypeDefinition = {\n  name: 'slider',\n  priority: 15,\n  /**\n   * Slider is an opt-in widget — it renders only when the proto field\n   * carries `field_ui.control = CONTROL_TYPE_SLIDER` (surfaced as\n   * `customData.ui.control === 'slider'`). A numeric field with\n   * `min`/`max` alone does NOT auto-promote to slider, because that\n   * collides with the plain number renderer and produces the\n   * \"slider + standalone number input\" double-render seen on\n   * Max In Flight fields before this change. Proto drives the choice.\n   */\n  match: (field) => {\n    if (field.type !== 'number') {\n      return false;\n    }\n    const customData = field.fieldConfig?.customData;\n    if (!(customData && typeof customData === 'object')) {\n      return false;\n    }\n    const bag = customData as { control?: unknown; ui?: { control?: unknown } };\n    if (bag.control === 'slider') {\n      return true;\n    }\n    if (bag.ui && typeof bag.ui === 'object' && bag.ui.control === 'slider') {\n      return true;\n    }\n    return false;\n  },\n  component: SliderFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/string.tsx",
      "content": "'use client';\n\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { StringLikeInput, useFieldTestIds } from './shared';\n\nfunction StringFieldComponent(props: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(props.id);\n\n  return (\n    <StringLikeInput\n      error={props.error}\n      id={props.id}\n      inputProps={props.inputProps}\n      placeholder={getFieldUiConfig(props.field).placeholder}\n      testId={testIds.control}\n    />\n  );\n}\n\nexport { StringFieldComponent };\n\nexport const stringFieldDefinition: FieldTypeDefinition = {\n  name: 'string',\n  priority: 10,\n  match: (field) => field.type === 'string',\n  component: StringFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/textarea.tsx",
      "content": "'use client';\n\nimport { Textarea } from '../../textarea';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig, LONG_TEXT_FIELD_PATTERN } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { useFieldTestIds } from './shared';\n\nfunction TextareaFieldComponent({ error, field, id, inputProps }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n\n  return (\n    <Textarea\n      aria-invalid={Boolean(error)}\n      className={error ? 'border-destructive' : ''}\n      disabled={inputProps.disabled}\n      id={id}\n      onBlur={inputProps.onBlur}\n      onChange={(event) => inputProps.onValueChange(event.target.value)}\n      placeholder={getFieldUiConfig(field).placeholder}\n      resize=\"vertical\"\n      testId={testIds.control}\n      value={(inputProps.value as string | undefined) ?? ''}\n    />\n  );\n}\n\nexport { TextareaFieldComponent };\n\nexport const textareaFieldDefinition: FieldTypeDefinition = {\n  name: 'textarea',\n  priority: 15,\n  match: (field, context) =>\n    field.type === 'string' &&\n    (context.inputType === 'textarea' || context.maxLength > 120 || LONG_TEXT_FIELD_PATTERN.test(context.identity)),\n  component: TextareaFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/toggle-group.tsx",
      "content": "'use client';\n\nimport { ToggleGroup, ToggleGroupItem } from '../../toggle-group';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { getControlLabel, getFlatOptions, hasNumericOptions, renderOptionLabel, useFieldTestIds } from './shared';\n\nfunction ToggleGroupFieldComponent({ error, field, id, inputProps, label }: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(id);\n  const numericOptions = hasNumericOptions(field);\n  const value = inputProps.value === undefined || inputProps.value === null ? '' : String(inputProps.value);\n  const options = getFlatOptions(field);\n\n  return (\n    <ToggleGroup\n      aria-invalid={Boolean(error)}\n      aria-label={getControlLabel(label, field)}\n      onValueChange={(nextValue) => inputProps.onValueChange(numericOptions ? Number(nextValue) : nextValue)}\n      testId={testIds.control}\n      type=\"single\" // Multi-select not supported yet — use multiselect field type instead\n      value={value}\n      variant=\"outline\"\n    >\n      {options.map((option) => (\n        <ToggleGroupItem\n          disabled={inputProps.disabled}\n          key={option.value}\n          testId={testIds.option(option.value)}\n          value={option.value}\n        >\n          {renderOptionLabel(option)}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  );\n}\n\nexport { ToggleGroupFieldComponent };\n\nexport const toggleGroupFieldDefinition: FieldTypeDefinition = {\n  name: 'toggleGroup',\n  priority: 25,\n  match: (field) => {\n    if (field.type !== 'select') {\n      return false;\n    }\n    return getFieldUiConfig(field).control === 'toggleGroup';\n  },\n  component: ToggleGroupFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/fields/url.tsx",
      "content": "'use client';\n\nimport { Link2Icon } from 'lucide-react';\nimport type { AutoFormFieldProps } from '../core-types';\nimport { getFieldUiConfig, URL_FIELD_PATTERN } from '../helpers';\nimport type { FieldTypeDefinition } from '../registry';\nimport { StringLikeInput, useFieldTestIds } from './shared';\n\nfunction UrlFieldComponent(props: AutoFormFieldProps) {\n  const testIds = useFieldTestIds(props.id);\n\n  return (\n    <StringLikeInput\n      error={props.error}\n      icon={<Link2Icon className=\"h-4 w-4\" />}\n      id={props.id}\n      inputProps={props.inputProps}\n      placeholder={getFieldUiConfig(props.field).placeholder || 'https://'}\n      testId={testIds.control}\n      type=\"url\"\n    />\n  );\n}\n\nexport { UrlFieldComponent };\n\nexport const urlFieldDefinition: FieldTypeDefinition = {\n  name: 'url',\n  priority: 20,\n  match: (field, context) =>\n    field.type === 'string' && (context.inputType === 'url' || URL_FIELD_PATTERN.test(context.identity)),\n  component: UrlFieldComponent,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/form-spacing.ts",
      "content": "/**\n * Layout spacing tokens for AutoForm primitives.\n * Single source of truth for every vertical rhythm the form emits.\n * Names kept generic so the module ports cleanly to shadcn upstream.\n */\nexport const formSpacing = {\n  /** Top-level form children: sections, root fields, submit slot. */\n  form: 'space-y-8',\n  /** Sibling fields inside a section or nested field-list. */\n  field: 'space-y-6',\n  /** Inside a single field: label → control → help/error. */\n  labelStack: 'space-y-2',\n  /** Inside a section header: title → description. */\n  sectionHeader: 'space-y-1',\n  /** Divider under a section heading when shown. */\n  sectionDivider: 'pb-4 border-b border-border/60',\n  /** Separator between array items (applied to every item except the first). */\n  arrayItemSeparator: 'pt-4 border-t border-border/60',\n  /** Gap between sibling rows inside an array/map body (before separator). */\n  collectionRow: 'space-y-4',\n  /** Gap between a oneof selector and the field it reveals. */\n  oneofStack: 'space-y-4',\n} as const;\n\nexport type FormSpacingToken = keyof typeof formSpacing;\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/helpers.ts",
      "content": "import { getFieldHints } from '../../lib/core';\n\nimport type { ParsedField, SchemaValidation } from './core-types';\nimport { getLabel, getPathInObject, sortFieldsByOrder } from './field-utils';\nimport type { AutoFormOptionGroup, AutoFormOptionItem, AutoFormUiRule, FieldTypes } from './types';\n\nexport const NUMERIC_OPTION_PATTERN = /^-?\\d+$/;\nexport const FIELD_MASK_PATH_SPLIT_PATTERN = /[\\n,]/;\n\nexport const SECRET_FIELD_PATTERN = /(password|secret|token|api[_-]?key|private[_-]?key|credential)/i;\nexport const CONSENT_FIELD_PATTERN = /(accept|agree|consent|terms|policy|opt[-_ ]?in)/i;\nexport const URL_FIELD_PATTERN = /(url|uri|website|homepage|link)/i;\nexport const EMAIL_FIELD_PATTERN = /(email|e-mail)/i;\nexport const CURRENCY_FIELD_PATTERN = /(amount|price|cost|balance|budget|revenue|salary|subtotal|total)/i;\nexport const LONG_TEXT_FIELD_PATTERN = /(bio|description|details|notes?|summary|message|comment)/i;\n\nexport function isRecord(value: unknown): value is Record<string, unknown> {\n  return Boolean(value && typeof value === 'object' && !Array.isArray(value));\n}\n\nfunction toUiRules(value: unknown): AutoFormUiRule[] | undefined {\n  if (!Array.isArray(value)) {\n    return;\n  }\n\n  const rules: AutoFormUiRule[] = [];\n\n  for (const rule of value) {\n    if (!isRecord(rule) || typeof rule.expression !== 'string') {\n      continue;\n    }\n\n    rules.push({\n      id: typeof rule.id === 'string' ? rule.id : undefined,\n      expression: rule.expression,\n      message: typeof rule.message === 'string' ? rule.message : undefined,\n    });\n  }\n\n  return rules.length > 0 ? rules : undefined;\n}\n\nfunction toOptionItem(value: unknown): AutoFormOptionItem | undefined {\n  if (!isRecord(value) || typeof value.value !== 'string') {\n    return;\n  }\n\n  return {\n    value: value.value,\n    label: typeof value.label === 'string' || typeof value.label === 'number' ? String(value.label) : undefined,\n    icon: value.icon as AutoFormOptionItem['icon'],\n  };\n}\n\nfunction toOptionGroups(value: unknown): AutoFormOptionGroup[] | undefined {\n  if (!Array.isArray(value)) {\n    return;\n  }\n\n  const groups: AutoFormOptionGroup[] = [];\n\n  for (const candidate of value) {\n    if (!(isRecord(candidate) && Array.isArray(candidate.options))) {\n      continue;\n    }\n\n    const options = candidate.options\n      .map(toOptionItem)\n      .filter((option): option is AutoFormOptionItem => Boolean(option));\n    if (options.length === 0) {\n      continue;\n    }\n\n    groups.push({\n      label:\n        typeof candidate.label === 'string' || typeof candidate.label === 'number'\n          ? String(candidate.label)\n          : undefined,\n      options,\n    });\n  }\n\n  return groups.length > 0 ? groups : undefined;\n}\n\n/**\n * Derive the field-type name from the annotation set so the AutoForm\n * resolver picks the right widget even when a proto `control` is also\n * set. Order:\n *   1. `dataProvider` wins — the field is an opinionated dropdown.\n *   2. `dropzone` + `control === 'json'` wins — the field is a JSON\n *      editor with drag-and-drop.\n *   3. Otherwise, `undefined` so the existing control/type path resolves.\n *\n * Reads from all three UI sources (proto, nested customData.ui, direct\n * customData) so either side can trigger the override.\n */\ninterface AnnotatedUi {\n  control?: unknown;\n  dataProvider?: unknown;\n  dropzone?: unknown;\n}\n\n/**\n * `deriveAnnotatedControl` must NOT run for complex field types\n * (array / map / object). If it did, a `repeated string` field\n * annotated with `data_provider` — e.g. `OpenAPI.filter.include_methods`\n * — would short-circuit to `dataProviderSelect` on the array field\n * itself, bypassing `ArrayFieldRenderer`'s Add-button UI entirely.\n * The annotation still flows through to the array's schema[0] item\n * template (same proto descriptor), so each added item picks up\n * `dataProviderSelect` on its own.\n */\nfunction isComplexFieldType(type: unknown): boolean {\n  return type === 'array' || type === 'map' || type === 'object';\n}\n\nfunction deriveAnnotatedControl(\n  fieldType: unknown,\n  protoUi: AnnotatedUi | undefined,\n  nested: AnnotatedUi | undefined,\n  direct: AnnotatedUi | undefined\n): FieldTypes | undefined {\n  if (isComplexFieldType(fieldType)) {\n    return;\n  }\n\n  const dataProvider =\n    (typeof direct?.dataProvider === 'string' && direct.dataProvider) ||\n    (typeof nested?.dataProvider === 'string' && nested.dataProvider) ||\n    (typeof protoUi?.dataProvider === 'string' && protoUi.dataProvider) ||\n    undefined;\n  if (dataProvider) {\n    return 'dataProviderSelect' as FieldTypes;\n  }\n\n  const dropzone = direct?.dropzone === true || nested?.dropzone === true || protoUi?.dropzone === true;\n  const control = direct?.control ?? nested?.control ?? protoUi?.control;\n  if (dropzone && control === 'json') {\n    return 'dropzone-json' as FieldTypes;\n  }\n\n  return;\n}\n\nexport function getFieldUiConfig<TFieldType extends string = string>(field: ParsedField<TFieldType>): {\n  control?: FieldTypes<TFieldType>;\n  placeholder?: string;\n  example?: string;\n  help?: string;\n  description?: string;\n  visibleWhen?: AutoFormUiRule[];\n  disabledWhen?: AutoFormUiRule[];\n  summaryLabel?: string;\n  optionGroups?: AutoFormOptionGroup[];\n  optionLabels?: Record<string, string>;\n} {\n  const protoUi = getFieldHints(field);\n  const customData = isRecord(field.fieldConfig?.customData) ? field.fieldConfig.customData : undefined;\n  const nestedUi = customData && isRecord(customData.ui) ? customData.ui : undefined;\n\n  const direct = customData\n    ? {\n        control: typeof customData.control === 'string' ? (customData.control as FieldTypes<TFieldType>) : undefined,\n        placeholder: typeof customData.placeholder === 'string' ? customData.placeholder : undefined,\n        example: typeof customData.example === 'string' ? customData.example : undefined,\n        help: typeof customData.help === 'string' ? customData.help : undefined,\n        description: typeof customData.description === 'string' ? customData.description : undefined,\n        visibleWhen: toUiRules(customData.visibleWhen),\n        disabledWhen: toUiRules(customData.disabledWhen),\n        summaryLabel: typeof customData.summaryLabel === 'string' ? customData.summaryLabel : undefined,\n        optionGroups: toOptionGroups(customData.optionGroups),\n        optionLabels: isRecord(customData.optionLabels)\n          ? (customData.optionLabels as Record<string, string>)\n          : undefined,\n      }\n    : undefined;\n\n  const nested = nestedUi\n    ? {\n        control: typeof nestedUi.control === 'string' ? (nestedUi.control as FieldTypes<TFieldType>) : undefined,\n        placeholder: typeof nestedUi.placeholder === 'string' ? nestedUi.placeholder : undefined,\n        example: typeof nestedUi.example === 'string' ? nestedUi.example : undefined,\n        help: typeof nestedUi.help === 'string' ? nestedUi.help : undefined,\n        description: typeof nestedUi.description === 'string' ? nestedUi.description : undefined,\n        visibleWhen: toUiRules(nestedUi.visibleWhen),\n        disabledWhen: toUiRules(nestedUi.disabledWhen),\n        summaryLabel: typeof nestedUi.summaryLabel === 'string' ? nestedUi.summaryLabel : undefined,\n        optionGroups: toOptionGroups(nestedUi.optionGroups),\n        optionLabels: isRecord(nestedUi.optionLabels) ? (nestedUi.optionLabels as Record<string, string>) : undefined,\n      }\n    : undefined;\n\n  // Proto-level widget annotations (data_provider, dropzone) override the\n  // plain control. A string field annotated with `data_provider` should\n  // render as `dataProviderSelect` regardless of any `CONTROL_TYPE_TEXT`\n  // default; a JSON field annotated with `dropzone: true` should render\n  // as `dropzone-json` rather than the default JSON editor. Keeping this\n  // override inside `getFieldUiConfig` means the existing `resolveFieldType`\n  // short-circuit (which prefers explicit control over the registry) stays\n  // intact while still selecting the right widget.\n  const annotatedControl = deriveAnnotatedControl(field.type, protoUi, nested, direct);\n\n  return {\n    ...(protoUi ?? {}),\n    ...(nested ?? {}),\n    ...(direct ?? {}),\n    control:\n      (typeof field.fieldConfig?.fieldType === 'string'\n        ? (field.fieldConfig.fieldType as FieldTypes<TFieldType>)\n        : undefined) ||\n      annotatedControl ||\n      direct?.control ||\n      nested?.control ||\n      (protoUi?.control as FieldTypes<TFieldType> | undefined),\n    placeholder:\n      (typeof field.fieldConfig?.inputProps?.placeholder === 'string'\n        ? (field.fieldConfig.inputProps.placeholder as string)\n        : undefined) ||\n      direct?.placeholder ||\n      nested?.placeholder ||\n      protoUi?.placeholder,\n    example: direct?.example || nested?.example || protoUi?.example,\n    help: direct?.help || nested?.help || protoUi?.help,\n    description: direct?.description || nested?.description || protoUi?.description,\n    visibleWhen: direct?.visibleWhen || nested?.visibleWhen || toUiRules(protoUi?.visibleWhen),\n    disabledWhen: direct?.disabledWhen || nested?.disabledWhen || toUiRules(protoUi?.disabledWhen),\n    summaryLabel: direct?.summaryLabel || nested?.summaryLabel || protoUi?.summaryLabel,\n    optionGroups: direct?.optionGroups || nested?.optionGroups,\n    optionLabels: direct?.optionLabels || nested?.optionLabels,\n  };\n}\n\nexport function getRootErrorMessage(rootError: unknown): string | undefined {\n  if (!rootError) {\n    return;\n  }\n\n  if (typeof rootError === 'string') {\n    return rootError;\n  }\n\n  if (typeof rootError === 'object') {\n    const errorRecord = rootError as Record<string, unknown>;\n    if (typeof errorRecord.message === 'string') {\n      return errorRecord.message;\n    }\n\n    return Object.values(errorRecord)\n      .map((value) => getRootErrorMessage(value))\n      .filter((message): message is string => Boolean(message))\n      .join('\\n');\n  }\n\n  return;\n}\n\nexport function getFieldErrorMessage(errors: unknown, path: string[]): string | undefined {\n  const nestedError = getPathInObject(errors as Record<string, unknown>, path);\n  const message = nestedError?.message;\n  return typeof message === 'string' ? message : undefined;\n}\n\nexport function createEmptyFieldValue(field: ParsedField | undefined): unknown {\n  if (!field) {\n    return;\n  }\n\n  const protoData = getFieldHints(field);\n\n  switch (field.type) {\n    case 'string':\n    case 'bytes':\n    case 'duration':\n    case 'int64':\n    case 'timestamp':\n      return '';\n    case 'number':\n      return;\n    case 'boolean':\n      return protoData?.supportsUnset && !field.required ? undefined : false;\n    case 'select':\n      if (field.required && field.options?.length) {\n        const firstOptionValue = field.options[0]?.[0];\n        return firstOptionValue ? Number(firstOptionValue) || firstOptionValue : undefined;\n      }\n      return undefined;\n    case 'fieldMask':\n      return [];\n    case 'json':\n      switch (protoData?.jsonKind) {\n        case 'listValue':\n          return [];\n        case 'any':\n          return { typeUrl: '', valueBase64: '' };\n        default:\n          return {};\n      }\n    case 'array':\n      return [];\n    case 'map':\n      return [];\n    case 'oneof':\n      return { case: undefined, value: undefined };\n    case 'object':\n      return {};\n    case 'date':\n      return '';\n    default:\n      return;\n  }\n}\n\nfunction isKeyValueScalarField(field: ParsedField | undefined): boolean {\n  if (!field) {\n    return false;\n  }\n\n  const renderType = resolveRenderFieldType(field);\n  return ['string', 'email', 'url', 'password', 'currency', 'number', 'int64', 'select', 'combobox'].includes(\n    renderType\n  );\n}\n\nfunction isSimpleKeyValueLikeObject(field: ParsedField | undefined): boolean {\n  if (!(field?.type === 'object' && field.schema?.length === 2)) {\n    return false;\n  }\n\n  const keyField = field.schema.find((candidate) => candidate.key === 'key');\n  const valueField = field.schema.find((candidate) => candidate.key === 'value');\n  return Boolean(keyField && valueField && isKeyValueScalarField(keyField) && isKeyValueScalarField(valueField));\n}\n\nexport function resolveRenderFieldType<TFieldType extends string = string>(\n  field: ParsedField<TFieldType>\n): FieldTypes<TFieldType> {\n  const uiConfig = getFieldUiConfig(field);\n  if (uiConfig.control) {\n    return uiConfig.control;\n  }\n\n  const label = String(field.fieldConfig?.label ?? getLabel(field));\n  const identity = `${field.key} ${label}`.toLowerCase();\n  const inputType = String(field.fieldConfig?.inputProps?.type ?? getFieldHints(field)?.inputType ?? '');\n  const maxLength = Number(field.fieldConfig?.inputProps?.maxLength ?? 0);\n\n  if (field.type === 'boolean') {\n    const protoData = getFieldHints(field);\n    if (protoData?.supportsUnset && !field.required) {\n      return 'boolean';\n    }\n    if (CONSENT_FIELD_PATTERN.test(identity)) {\n      return 'checkbox';\n    }\n    return 'switch';\n  }\n\n  if (field.type === 'select') {\n    const optionCount = field.options?.length ?? 0;\n    if (optionCount > 8) {\n      return 'combobox';\n    }\n    if (optionCount > 0 && optionCount <= 3) {\n      return 'radio';\n    }\n    return 'select';\n  }\n\n  if (field.type === 'string') {\n    if (SECRET_FIELD_PATTERN.test(identity) || inputType === 'password') {\n      return 'password';\n    }\n    if (inputType === 'email' || EMAIL_FIELD_PATTERN.test(identity)) {\n      return 'email';\n    }\n    if (inputType === 'url' || URL_FIELD_PATTERN.test(identity)) {\n      return 'url';\n    }\n    if (CURRENCY_FIELD_PATTERN.test(identity)) {\n      return 'currency';\n    }\n    if (inputType === 'textarea' || maxLength > 120 || LONG_TEXT_FIELD_PATTERN.test(identity)) {\n      return 'textarea';\n    }\n  }\n\n  if (field.type === 'number') {\n    const min = Number(field.fieldConfig?.inputProps?.min);\n    const max = Number(field.fieldConfig?.inputProps?.max);\n\n    // NOTE: `sliderFieldDefinition.match` no longer auto-promotes number\n    // fields with min/max to the slider widget — slider is opt-in via the\n    // proto `control = CONTROL_TYPE_SLIDER` annotation (see\n    // `fields/slider.tsx`). This fallback resolver still returns 'slider'\n    // for bounded numbers because `buildFallbackHelp` below reads it to\n    // suppress a redundant range hint; the actual rendered widget is\n    // decided by the registry + `getFieldUiConfig.control` override, not\n    // this function. If you're trying to \"fix\" a number field that's\n    // rendering as plain when you expected a slider, add the proto\n    // annotation — don't change this branch.\n    if (Number.isFinite(min) && Number.isFinite(max)) {\n      return 'slider';\n    }\n  }\n\n  if (field.type === 'array') {\n    const itemField = field.schema?.[0];\n    if (itemField?.type === 'select' && itemField.options?.length) {\n      return 'multiselect';\n    }\n    if (isSimpleKeyValueLikeObject(itemField)) {\n      return 'keyValue';\n    }\n  }\n\n  if (field.type === 'map') {\n    const keyField = field.schema?.[0];\n    const valueField = field.schema?.[1];\n    if (isKeyValueScalarField(keyField) && isKeyValueScalarField(valueField)) {\n      return 'keyValue';\n    }\n  }\n\n  return field.type as FieldTypes<TFieldType>;\n}\n\nfunction buildRangeHint(field: ParsedField): string | undefined {\n  const min = field.fieldConfig?.inputProps?.min;\n  const max = field.fieldConfig?.inputProps?.max;\n\n  // Number.isFinite() matches resolveRenderFieldType's check — NaN/Infinity\n  // passing as `number` would otherwise produce nonsense like\n  // \"Accepted range: NaN to Infinity\".\n  if (Number.isFinite(min) && Number.isFinite(max)) {\n    return `Accepted range: ${min} to ${max}.`;\n  }\n  if (Number.isFinite(min)) {\n    return `Accepted minimum: ${min}.`;\n  }\n  if (Number.isFinite(max)) {\n    return `Accepted maximum: ${max}.`;\n  }\n\n  return;\n}\n\nfunction buildFallbackHelp(field: ParsedField): string {\n  const renderType = resolveRenderFieldType(field);\n  const hints = [\n    field.fieldConfig?.inputProps?.pattern ? 'Follow the expected format for this value.' : undefined,\n    renderType === 'multiselect' ? 'Choose one or more options.' : undefined,\n    renderType === 'radio' || renderType === 'select' || renderType === 'combobox'\n      ? 'Choose one of the available options.'\n      : undefined,\n    renderType === 'slider' ? undefined : buildRangeHint(field),\n    renderType === 'keyValue' ? 'Add one or more key-value pairs.' : undefined,\n    renderType === 'json' ? 'Provide valid JSON for this field.' : undefined,\n    field.type === 'duration' ? 'Use protobuf duration syntax like 300s.' : undefined,\n    field.type === 'fieldMask' ? 'Enter one field path per line, or separate them with commas.' : undefined,\n  ].filter((hint): hint is string => Boolean(hint));\n\n  return hints[0] ?? '';\n}\n\n/**\n * Tooltip text (shown when hovering the info icon).\n * Pulls from proto `help` annotation. Only shown when it adds information\n * beyond what's already visible in the inline description.\n */\nexport function getFieldHelpText(field: ParsedField): string {\n  const uiConfig = getFieldUiConfig(field);\n  const descriptionText = getFieldDescriptionText(field);\n\n  // Build the tooltip from help + example\n  const parts = [uiConfig.help, uiConfig.example ? `Example: ${uiConfig.example}` : undefined].filter(\n    (value): value is string => Boolean(value)\n  );\n\n  const tooltip = [...new Set(parts)].join(' ');\n\n  // If tooltip would be identical to the inline description, suppress it\n  // so the info icon doesn't appear redundantly.\n  if (tooltip && tooltip === descriptionText) {\n    return '';\n  }\n\n  return tooltip;\n}\n\n/**\n * Upstream docs URL annotated on the field. Surfaces as a \"Learn more\"\n * anchor in the field's description slot — so model catalogs, region\n * lists, and API parameter references always point at the vendor's\n * live list rather than a static snapshot maintained inside this repo.\n */\nexport function getFieldDocsUrl(field: ParsedField): string | undefined {\n  const customData = field.fieldConfig?.customData;\n  if (!(customData && typeof customData === 'object')) {\n    return;\n  }\n  const bag = customData as { docsUrl?: unknown; ui?: { docsUrl?: unknown } };\n  if (typeof bag.docsUrl === 'string' && bag.docsUrl) {\n    return bag.docsUrl;\n  }\n  if (bag.ui && typeof bag.ui === 'object' && typeof bag.ui.docsUrl === 'string' && bag.ui.docsUrl) {\n    return bag.ui.docsUrl;\n  }\n  return;\n}\n\n/**\n * Inline description text (shown directly below the input field).\n * Prefers proto `description` annotation (concise one-liner), falls back to\n * `help`, then to auto-generated fallback hints.\n */\nexport function getFieldDescriptionText(field: ParsedField): string | undefined {\n  const uiConfig = getFieldUiConfig(field);\n\n  // 1. Prefer explicit proto `description` annotation\n  if (uiConfig.description) {\n    return uiConfig.description;\n  }\n\n  // 2. Fall back to fieldConfig.description (set programmatically)\n  const configDescription =\n    typeof field.fieldConfig?.description === 'string' ? field.fieldConfig.description : undefined;\n  if (configDescription) {\n    return configDescription;\n  }\n\n  // 3. Fall back to example. `help` remains exclusive to the tooltip so\n  // the question-mark affordance does not disappear when no description is set.\n  if (uiConfig.example) {\n    return `Example: ${uiConfig.example}`;\n  }\n\n  // 4. Fall back to auto-generated hints\n  const fallback = buildFallbackHelp(field);\n  return fallback.length > 0 ? fallback : undefined;\n}\n\nfunction hasSimpleRequiredCount(field: ParsedField): boolean {\n  const hints = getFieldHints(field);\n  return Boolean((hints?.minItems ?? 0) > 0 || (hints?.minPairs ?? 0) > 0);\n}\n\n/**\n * Default classification: required fields are \"simple\", optional fields are \"advanced\".\n * Can be overridden via explicit `advanced` metadata in field config or the `classifyField` prop.\n */\nexport function defaultClassifyField(field: ParsedField): 'simple' | 'advanced' {\n  const customData = isRecord(field.fieldConfig?.customData) ? field.fieldConfig.customData : undefined;\n  if (customData?.advanced === true) {\n    return 'advanced';\n  }\n  if (customData?.advanced === false) {\n    return 'simple';\n  }\n  return field.required || hasSimpleRequiredCount(field) ? 'simple' : 'advanced';\n}\n\nexport function deriveSimpleFields<TFieldType extends string = string>(\n  fields: ParsedField<TFieldType>[] | undefined,\n  classifyField: (field: ParsedField<TFieldType>) => 'simple' | 'advanced' = defaultClassifyField\n): ParsedField<TFieldType>[] {\n  if (!fields) {\n    return [];\n  }\n\n  return sortFieldsByOrder(\n    fields.flatMap((field) => {\n      const simpleChildren = deriveSimpleFields(field.schema, classifyField);\n      const hasRequiredDescendants = simpleChildren.length > 0;\n      const classification = classifyField(field);\n      const isSimple = classification === 'simple';\n\n      if (field.type === 'object') {\n        if (isSimple && !hasRequiredDescendants && field.schema?.length) {\n          return [{ ...field, schema: field.schema }];\n        }\n        if (isSimple || hasRequiredDescendants) {\n          return [{ ...field, schema: hasRequiredDescendants ? simpleChildren : field.schema }];\n        }\n        return [];\n      }\n\n      if (field.type === 'oneof') {\n        if (isSimple || hasRequiredDescendants) {\n          return [{ ...field, schema: field.schema }];\n        }\n        return [];\n      }\n\n      if (field.type === 'array' || field.type === 'map') {\n        if (isSimple || hasRequiredDescendants) {\n          return [{ ...field, schema: hasRequiredDescendants ? simpleChildren : field.schema }];\n        }\n        return [];\n      }\n\n      return isSimple ? [field] : [];\n    })\n  );\n}\n\nexport function collectLeafFieldPaths(fields: ParsedField[], path: string[] = []): string[] {\n  return fields.flatMap((field) => {\n    const nextPath = [...path, field.key];\n    const renderType = resolveRenderFieldType(field);\n\n    if (renderType === 'object' || renderType === 'array' || renderType === 'map' || renderType === 'oneof') {\n      return field.schema?.length ? collectLeafFieldPaths(field.schema, nextPath) : [nextPath.join('.')];\n    }\n\n    return [nextPath.join('.')];\n  });\n}\n\nexport function filterFieldsByPaths(fields: ParsedField[], paths: string[], currentPath: string[] = []): ParsedField[] {\n  if (paths.length === 0) {\n    return [];\n  }\n\n  return sortFieldsByOrder(\n    fields.flatMap((field) => {\n      const nextPath = [...currentPath, field.key];\n      const fullPath = nextPath.join('.');\n      const matchesDirectly = paths.some((path) => path === fullPath);\n      const hasDescendantMatch = paths.some((path) => path.startsWith(`${fullPath}.`));\n\n      if (!(matchesDirectly || hasDescendantMatch)) {\n        return [];\n      }\n\n      if (!field.schema?.length || matchesDirectly) {\n        return [\n          {\n            ...field,\n            schema: matchesDirectly ? field.schema : filterFieldsByPaths(field.schema ?? [], paths, nextPath),\n          },\n        ];\n      }\n\n      return [{ ...field, schema: filterFieldsByPaths(field.schema, paths, nextPath) }];\n    })\n  );\n}\n\nexport function projectValuesToFields(values: Record<string, unknown>, fields: ParsedField[]): Record<string, unknown> {\n  const projected: Record<string, unknown> = {};\n\n  for (const field of fields) {\n    const value = values[field.key];\n    if (value === undefined) {\n      continue;\n    }\n\n    if (field.type === 'object' && isRecord(value) && field.schema?.length) {\n      projected[field.key] = projectValuesToFields(value, field.schema);\n      continue;\n    }\n\n    projected[field.key] = value;\n  }\n\n  return projected;\n}\n\nexport function isMeaningfulValue(value: unknown): boolean {\n  if (value === undefined || value === null) {\n    return false;\n  }\n  if (typeof value === 'string') {\n    return value.trim().length > 0;\n  }\n  if (Array.isArray(value)) {\n    return value.length > 0;\n  }\n  if (isRecord(value)) {\n    return Object.values(value).some((entry) => isMeaningfulValue(entry));\n  }\n  return true;\n}\n\nexport function stringifySummaryValue(value: unknown): string {\n  if (value === undefined || value === null) {\n    return '—';\n  }\n  if (typeof value === 'boolean') {\n    return value ? 'Yes' : 'No';\n  }\n  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint') {\n    return String(value);\n  }\n  if (Array.isArray(value)) {\n    return `${value.length} item${value.length === 1 ? '' : 's'}`;\n  }\n  if (isRecord(value)) {\n    return `${Object.keys(value).length} field${Object.keys(value).length === 1 ? '' : 's'}`;\n  }\n  return String(value);\n}\n\nexport function flattenSummaryEntries(\n  payload: unknown,\n  prefix = ''\n): Array<{ key: string; value: unknown; isComplex: boolean }> {\n  if (!isRecord(payload)) {\n    return [];\n  }\n\n  return Object.entries(payload).flatMap(([key, value]) => {\n    const nextKey = prefix ? `${prefix}.${key}` : key;\n    if (!isMeaningfulValue(value)) {\n      return [];\n    }\n\n    if (isRecord(value)) {\n      const nested = flattenSummaryEntries(value, nextKey);\n      return nested.length > 0 ? nested : [{ key: nextKey, value, isComplex: true }];\n    }\n\n    if (Array.isArray(value) && value.some((entry) => isRecord(entry) || Array.isArray(entry))) {\n      return [{ key: nextKey, value, isComplex: true }];\n    }\n\n    return [{ key: nextKey, value, isComplex: Array.isArray(value) }];\n  });\n}\n\nexport function isValidationSuccess(\n  validation: SchemaValidation\n): validation is Extract<SchemaValidation, { success: true }> {\n  return validation.success;\n}\n\nexport function normalizeKeyValueEntries(value: unknown): Array<{ key: string; value: string }> {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.map((entry) => {\n    if (!isRecord(entry)) {\n      return { key: '', value: '' };\n    }\n\n    return {\n      key: entry.key === undefined || entry.key === null ? '' : String(entry.key),\n      value: entry.value === undefined || entry.value === null ? '' : String(entry.value),\n    };\n  });\n}\n\nexport function denormalizeKeyValueEntries(\n  entries: Array<{ key: string; value: string }>,\n  field: ParsedField\n): Array<{ key: unknown; value: unknown }> {\n  const valueField =\n    field.type === 'map'\n      ? field.schema?.[1]\n      : field.schema?.[0]?.schema?.find((candidate) => candidate.key === 'value');\n\n  return entries.map((entry) => ({\n    key: entry.key,\n    value: normalizeCollectionScalar(entry.value, valueField),\n  }));\n}\n\nfunction normalizeCollectionScalar(value: string, field: ParsedField | undefined): unknown {\n  if (!field) {\n    return value;\n  }\n\n  const renderType = resolveRenderFieldType(field);\n  if (renderType === 'number') {\n    return value === '' ? undefined : Number(value);\n  }\n  if (renderType === 'int64') {\n    return value;\n  }\n  if (renderType === 'select' && field.options?.every(([optionValue]) => NUMERIC_OPTION_PATTERN.test(optionValue))) {\n    return value === '' ? undefined : Number(value);\n  }\n  return value;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/auto-form-core.tsx",
      "content": "'use client';\n\nimport {\n  createUpdateMask,\n  formValuesToProto,\n  preserveProtoMessageSource,\n} from '../../lib/protobuf-provider';\nimport React from 'react';\n\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/base-nova/protoform/components/alert';\nimport { TooltipProvider } from '@/registry/base-nova/protoform/components/tooltip';\nimport { Heading, Text } from '@/registry/base-nova/protoform/components/typography';\n\nimport type { SchemaValidation } from './core-types';\nimport type { AutoFormEngine } from './engine';\nimport {\n  ArrayElementWrapper,\n  ArrayWrapper,\n  ErrorMessage,\n  FieldWrapper,\n  Form,\n  ObjectWrapper,\n  SubmitButton,\n} from './field-wrapper';\nimport { AutoFormFieldComponentRegistry } from './fields';\nimport { deriveSimpleFields } from './helpers';\nimport { AutoFormModeShell } from './mode-shell';\nimport {\n  getProtoMessageUiConfig,\n  isProtoMessageDescriptor,\n  isProtoProvider,\n  PROTO_FORM_ROOT_ERROR_KEY,\n  resolveProtoSourceMessage,\n} from './proto';\nimport { AutoFormFields } from './renderers';\nimport { AutoFormRuntimeProvider } from './runtime-provider';\nimport {\n  mergeFieldOverrides,\n  normalizeProtoInitialValues,\n  protoConversionOptionsFromFieldConfig,\n  resolveSchema,\n} from './schema';\nimport { AutoFormStepPanel, fieldsForStep, initialStepIndex, validateSteps } from './stepper';\nimport { buildAutoFormTestId, resolveAutoFormTestIdPrefix } from './test-ids';\nimport type {\n  AutoFormMode,\n  AutoFormProps,\n  AutoFormRevalidationMode,\n  AutoFormStepperConfig,\n  AutoFormSubmitContext,\n  AutoFormValidationMode,\n  ResolvedSchema,\n} from './types';\nimport { normalizeModes, resolveInitialMode } from './utils/modes';\n\nconst noopOnSubmit = async () => undefined;\n\nconst ShadcnUIComponents = {\n  Form,\n  FieldWrapper,\n  ErrorMessage,\n  SubmitButton,\n  ObjectWrapper,\n  ArrayWrapper,\n  ArrayElementWrapper,\n};\n\nexport const ShadcnAutoFormFieldComponents = AutoFormFieldComponentRegistry;\n\nexport type AutoFormEngineRender = (props: {\n  children: (engine: AutoFormEngine) => React.ReactNode;\n  defaultValues: Record<string, unknown>;\n  validateSchema: (\n    values: Record<string, unknown>,\n    signal: AbortSignal\n  ) => Promise<SchemaValidation>;\n  values?: Record<string, unknown>;\n}) => React.ReactNode;\n\nexport type AutoFormCoreProps<\n  T extends Record<string, unknown>,\n  TNativeForm,\n  TCustomFieldType extends string = never,\n> = Omit<\n  AutoFormProps<T, TNativeForm, never, never, TCustomFieldType>,\n  'formOptions' | 'resolver'\n> & {\n  renderEngine: AutoFormEngineRender;\n};\n\nfunction renderModeContent({\n  fields,\n  testIdPrefix,\n  withSubmit,\n  children,\n  SubmitButtonComponent,\n  stepper,\n  currentStepIndex,\n  onStepBack,\n  onStepContinue,\n  isAdvancing,\n  isSubmitting,\n}: {\n  fields: ReturnType<typeof mergeFieldOverrides>;\n  testIdPrefix: string;\n  withSubmit: boolean;\n  children: React.ReactNode;\n  SubmitButtonComponent: React.ComponentType<{\n    children: React.ReactNode;\n    disabled?: boolean;\n    testId?: string;\n  }>;\n  stepper?: AutoFormStepperConfig;\n  currentStepIndex: number;\n  onStepBack: () => void;\n  onStepContinue: (fields: ReturnType<typeof mergeFieldOverrides>) => void | Promise<void>;\n  isAdvancing: boolean;\n  isSubmitting: boolean;\n}) {\n  if (stepper) {\n    const step = stepper.steps[currentStepIndex];\n    if (!step) {\n      return null;\n    }\n    const stepFields = fieldsForStep(fields, stepper.steps, step.id);\n    return (\n      <AutoFormStepPanel\n        currentIndex={currentStepIndex}\n        isAdvancing={isAdvancing}\n        onBack={onStepBack}\n        onContinue={() => onStepContinue(stepFields)}\n        orientation={stepper.orientation ?? 'horizontal'}\n        step={step}\n        steps={stepper.steps}\n        submit={\n          withSubmit ? (\n            <SubmitButtonComponent\n              disabled={isSubmitting}\n              testId={buildAutoFormTestId(testIdPrefix, 'submit')}\n            >\n              {isSubmitting ? 'Submitting…' : 'Submit'}\n            </SubmitButtonComponent>\n          ) : null\n        }\n      >\n        <AutoFormFields fields={stepFields}>{children}</AutoFormFields>\n      </AutoFormStepPanel>\n    );\n  }\n\n  return (\n    <>\n      <AutoFormFields fields={fields}>{children}</AutoFormFields>\n      {withSubmit ? (\n        <div\n          className=\"flex items-center justify-end border-border/60 border-t pt-5\"\n          data-slot=\"auto-form-actions\"\n        >\n          <SubmitButtonComponent disabled={isSubmitting} testId={buildAutoFormTestId(testIdPrefix, 'submit')}>\n            {isSubmitting ? 'Submitting…' : 'Submit'}\n          </SubmitButtonComponent>\n        </div>\n      ) : null}\n    </>\n  );\n}\n\ntype AutoFormContentProps<\n  T extends Record<string, unknown>,\n  TNativeForm,\n  TCustomFieldType extends string,\n> = Omit<\n  AutoFormCoreProps<T, TNativeForm, TCustomFieldType>,\n  'defaultValues' | 'renderEngine' | 'schema' | 'values'\n> & {\n  engine: AutoFormEngine;\n  resolvedSchema: ResolvedSchema;\n};\n\nfunction AutoFormContent<\n  T extends Record<string, unknown>,\n  TNativeForm,\n  TCustomFieldType extends string,\n>({\n  engine,\n  resolvedSchema,\n  testId,\n  onSubmit = noopOnSubmit,\n  children,\n  uiComponents,\n  formComponents,\n  withSubmit = false,\n  onFormInit,\n  formProps = {},\n  fieldConfig: fieldConfigOverrides,\n  modes,\n  defaultMode,\n  showSummary = false,\n  renderSummary,\n  fieldRegistry,\n  dataProviders,\n  deprecatedFields = 'show',\n  classifyField,\n  payloadSchema,\n  payloadBuilder,\n  payloadParser,\n  onFieldChange,\n  renderRootHeader,\n  rootHeader = 'auto',\n  stepper,\n  validationMode = 'submit',\n  revalidationMode = 'change',\n}: AutoFormContentProps<T, TNativeForm, TCustomFieldType>) {\n  const testIdPrefix = resolveAutoFormTestIdPrefix(testId);\n  const submitController = React.useRef<AbortController | undefined>(undefined);\n  const validationController = React.useRef<AbortController | undefined>(undefined);\n  const initializedForm = React.useRef<unknown>(undefined);\n  const advancedFields = mergeFieldOverrides(resolvedSchema.parsedSchema.fields, fieldConfigOverrides);\n  const simpleFields = deriveSimpleFields(advancedFields, classifyField);\n  const protoMessageUi = resolvedSchema.protoDesc ? getProtoMessageUiConfig(resolvedSchema.protoDesc) : undefined;\n  const rootHeaderMetadata = {\n    description: protoMessageUi?.description,\n    title: protoMessageUi?.title,\n  };\n  const mergedUiComponents = { ...ShadcnUIComponents, ...uiComponents };\n  const mergedFormComponents = { ...ShadcnAutoFormFieldComponents, ...formComponents };\n  const conversionOptions = protoConversionOptionsFromFieldConfig(fieldConfigOverrides);\n  const availableModes = normalizeModes(modes);\n  const preferredMode = resolveInitialMode(availableModes, defaultMode);\n  const [mode, setMode] = React.useState<AutoFormMode>(preferredMode);\n  const [currentStepIndex, setCurrentStepIndex] = React.useState(() =>\n    stepper ? initialStepIndex(stepper.steps, stepper.defaultStep) : 0\n  );\n  const previousStepIndex = React.useRef(currentStepIndex);\n  const [isAdvancing, setIsAdvancing] = React.useState(false);\n  const previousDefaultMode = React.useRef(defaultMode);\n  const previousLifecycleValues = React.useRef(engine.values);\n  const hasSubmitted = React.useRef(false);\n\n  if (stepper) {\n    validateSteps(stepper.steps);\n  }\n\n  React.useEffect(() => {\n    if (initializedForm.current !== engine.nativeForm) {\n      initializedForm.current = engine.nativeForm;\n      onFormInit?.(engine.nativeForm as TNativeForm);\n    }\n  }, [engine.nativeForm, onFormInit]);\n\n  React.useEffect(function abortAsyncWorkOnUnmount() {\n    return () => {\n      submitController.current?.abort();\n      validationController.current?.abort();\n    };\n  }, []);\n\n  React.useEffect(() => {\n    if (!availableModes.includes(mode)) {\n      setMode(preferredMode);\n      previousDefaultMode.current = defaultMode;\n      return;\n    }\n\n    if (previousDefaultMode.current !== defaultMode) {\n      previousDefaultMode.current = defaultMode;\n      if (defaultMode && availableModes.includes(defaultMode)) {\n        setMode(defaultMode);\n      }\n    }\n  }, [availableModes, defaultMode, mode, preferredMode]);\n\n  async function validateWithProvider(\n    submittedValues: Record<string, unknown>,\n    signal: AbortSignal\n  ): Promise<SchemaValidation> {\n    try {\n      return await Promise.resolve(resolvedSchema.provider.validateSchema(submittedValues, { signal }));\n    } catch (error) {\n      return {\n        success: false,\n        errors: [\n          {\n            path: [],\n            message: error instanceof Error ? error.message : 'Failed to validate form values.',\n          },\n        ],\n      };\n    }\n  }\n\n  function activeValidationMode(): AutoFormValidationMode | AutoFormRevalidationMode {\n    return hasSubmitted.current ? revalidationMode : validationMode;\n  }\n\n  async function runLifecycleValidation(valuesToValidate: Record<string, unknown>) {\n    if (engine.validatesSchema) {\n      return;\n    }\n    const controller = beginValidation();\n    const result = await validateWithProvider(valuesToValidate, controller.signal);\n    if (controller.signal.aborted) {\n      return;\n    }\n    engine.setValidationErrors(result.success ? [] : result.errors);\n  }\n\n  React.useEffect(() => {\n    if (previousLifecycleValues.current === engine.values) {\n      return;\n    }\n    previousLifecycleValues.current = engine.values;\n    if (activeValidationMode() === 'change') {\n      void runLifecycleValidation(engine.values);\n    }\n  }, [engine.values, revalidationMode, validationMode]);\n\n  function routeToFirstStepError() {\n    if (!stepper) {\n      return;\n    }\n    const targetStepIndex = stepper.steps.findIndex((step) =>\n      fieldsForStep(advancedFields, stepper.steps, step.id).some((field) =>\n        engine.getFieldInvalid(field.key)\n      )\n    );\n    if (targetStepIndex < 0) {\n      return;\n    }\n    if (targetStepIndex !== currentStepIndex) {\n      setCurrentStepIndex(targetStepIndex);\n      return;\n    }\n    const firstErrorField = fieldsForStep(\n      advancedFields,\n      stepper.steps,\n      stepper.steps[targetStepIndex]?.id ?? ''\n    ).find((field) => engine.getFieldInvalid(field.key));\n    if (firstErrorField) {\n      engine.focus(firstErrorField.key);\n    }\n  }\n\n  function beginSubmit() {\n    submitController.current?.abort();\n    validationController.current?.abort();\n    const controller = new AbortController();\n    submitController.current = controller;\n    return controller;\n  }\n\n  function beginValidation() {\n    validationController.current?.abort();\n    const controller = new AbortController();\n    validationController.current = controller;\n    return controller;\n  }\n\n  function getSubmitContext(signal: AbortSignal): AutoFormSubmitContext {\n    return {\n      form: engine,\n      signal,\n      updateMask: resolvedSchema.protoDesc\n        ? createUpdateMask(\n            resolvedSchema.protoDesc,\n            engine.dirtyFields,\n            engine.getValues(),\n            engine.defaultValues\n          )\n        : undefined,\n    };\n  }\n\n  async function submitValidatedValues(values: T, controller: AbortController) {\n    try {\n      const context = getSubmitContext(controller.signal);\n      await engine.runNativeSubmit?.();\n      if (controller.signal.aborted) {\n        return;\n      }\n      const validatedProtoMessage = resolvedSchema.protoDesc\n        ? resolveProtoSourceMessage(resolvedSchema.protoDesc, values)\n        : undefined;\n      const submittedValues = resolvedSchema.protoDesc\n        ? validatedProtoMessage\n          ? preserveProtoMessageSource(\n              resolvedSchema.protoDesc,\n              validatedProtoMessage,\n              resolvedSchema.protoSource as never\n            )\n          : formValuesToProto(\n              resolvedSchema.protoDesc,\n              values,\n              resolvedSchema.protoSource as never,\n              conversionOptions\n            )\n        : values;\n      await onSubmit(submittedValues as T, engine.nativeForm as TNativeForm, context);\n      if (!controller.signal.aborted) {\n        routeToFirstStepError();\n      }\n    } catch (error) {\n      if (!controller.signal.aborted) {\n        engine.setRootError(error instanceof Error ? error.message : 'Submission failed.');\n      }\n    }\n  }\n\n  async function handleSubmit(submittedValues: Record<string, unknown>) {\n    hasSubmitted.current = true;\n    const controller = beginSubmit();\n    engine.clearErrors(['root', PROTO_FORM_ROOT_ERROR_KEY]);\n\n    if (engine.validatesSchema) {\n      await submitValidatedValues(submittedValues as T, controller);\n      return;\n    }\n\n    const validationResult = await validateWithProvider(submittedValues, controller.signal);\n    if (controller.signal.aborted) {\n      return;\n    }\n    if (!validationResult.success) {\n      engine.setValidationErrors(validationResult.errors);\n      routeToFirstStepError();\n      return;\n    }\n    await submitValidatedValues(validationResult.data as T, controller);\n  }\n\n  function handleStepBack() {\n    validationController.current?.abort();\n    setIsAdvancing(false);\n    setCurrentStepIndex((index) => Math.max(0, index - 1));\n  }\n\n  async function handleStepContinue(stepFields: ReturnType<typeof mergeFieldOverrides>) {\n    if (!stepper || isAdvancing) {\n      return;\n    }\n    setIsAdvancing(true);\n    const controller = beginValidation();\n    const fieldNames = stepFields.map((field) => field.key);\n    engine.clearErrors([...fieldNames, 'root', PROTO_FORM_ROOT_ERROR_KEY]);\n\n    try {\n      const nativeValid = await engine.trigger(engine.validatesSchema ? undefined : fieldNames);\n      if (controller.signal.aborted) {\n        return;\n      }\n\n      if (engine.validatesSchema) {\n        if (nativeValid) {\n          setCurrentStepIndex((index) => Math.min(stepper.steps.length - 1, index + 1));\n        } else {\n          const firstInvalid = fieldNames.find(engine.getFieldInvalid);\n          if (firstInvalid) {\n            engine.focus(firstInvalid);\n          }\n        }\n        return;\n      }\n\n      const validationResult = await validateWithProvider(engine.getValues(), controller.signal);\n      if (controller.signal.aborted) {\n        return;\n      }\n      const currentFields = new Set(fieldNames);\n      const currentErrors = validationResult.success\n        ? []\n        : validationResult.errors.filter((error) => {\n            const root = error.path[0];\n            return error.path.length === 0 || (typeof root === 'string' && currentFields.has(root));\n          });\n      if (currentErrors.length > 0) {\n        engine.setValidationErrors(currentErrors);\n        const firstFieldError = currentErrors.find((error) => error.path.length > 0);\n        if (firstFieldError) {\n          engine.focus(firstFieldError.path.join('.'));\n        }\n        return;\n      }\n      if (nativeValid) {\n        setCurrentStepIndex((index) => Math.min(stepper.steps.length - 1, index + 1));\n      }\n    } finally {\n      if (validationController.current === controller && !controller.signal.aborted) {\n        setIsAdvancing(false);\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    if (!stepper) {\n      return;\n    }\n    const fieldErrorKeys = Object.keys(engine.errors);\n    if (fieldErrorKeys.length === 0) {\n      return;\n    }\n    const targetStepIndex = stepper.steps.findIndex((step) => {\n      const stepFieldKeys = new Set(\n        fieldsForStep(advancedFields, stepper.steps, step.id).map((field) => field.key)\n      );\n      return fieldErrorKeys.some((key) => stepFieldKeys.has(key));\n    });\n    if (targetStepIndex >= 0 && targetStepIndex !== currentStepIndex) {\n      setCurrentStepIndex(targetStepIndex);\n    }\n  }, [advancedFields, currentStepIndex, engine.errors, stepper]);\n\n  React.useEffect(() => {\n    if (!stepper || previousStepIndex.current === currentStepIndex) {\n      return;\n    }\n    previousStepIndex.current = currentStepIndex;\n    const step = stepper.steps[currentStepIndex];\n    const firstField = step ? fieldsForStep(advancedFields, stepper.steps, step.id)[0] : undefined;\n    if (firstField) {\n      engine.focus(firstField.key);\n    }\n  }, [advancedFields, currentStepIndex, engine, stepper]);\n\n  function renderFormForMode(targetMode: Exclude<AutoFormMode, 'json'>) {\n    return renderModeContent({\n      fields: targetMode === 'simple' ? simpleFields : advancedFields,\n      testIdPrefix,\n      withSubmit,\n      children,\n      SubmitButtonComponent: mergedUiComponents.SubmitButton as React.ComponentType<{\n        children: React.ReactNode;\n        disabled?: boolean;\n        testId?: string;\n      }>,\n      isAdvancing,\n      isSubmitting: engine.isSubmitting,\n      stepper,\n      currentStepIndex,\n      onStepBack: handleStepBack,\n      onStepContinue: handleStepContinue,\n    });\n  }\n\n  const formOnBlurCapture =\n    typeof Reflect.get(formProps, 'onBlurCapture') === 'function'\n      ? (Reflect.get(formProps, 'onBlurCapture') as React.FocusEventHandler<HTMLFormElement>)\n      : undefined;\n\n  return (\n    <TooltipProvider delayDuration={150} skipDelayDuration={0}>\n      <AutoFormRuntimeProvider<TNativeForm>\n        advancedFields={advancedFields}\n        conversionOptions={conversionOptions}\n        dataProviders={dataProviders}\n        deprecatedFields={deprecatedFields}\n        fieldRegistry={fieldRegistry}\n        formComponents={mergedFormComponents}\n        mode={mode}\n        onFieldChange={onFieldChange}\n        payloadBuilder={payloadBuilder}\n        payloadParser={payloadParser}\n        payloadSchema={payloadSchema}\n        renderContent={(bag) => (\n          <mergedUiComponents.Form\n            {...formProps}\n            onBlurCapture={(event) => {\n              formOnBlurCapture?.(event);\n              if (activeValidationMode() === 'blur') {\n                void runLifecycleValidation(engine.getValues());\n              }\n            }}\n            onSubmit={engine.handleSubmit(handleSubmit)}\n            testId={testIdPrefix}\n          >\n            {engine.rootError ? (\n              <Alert variant=\"destructive\">\n                <AlertTitle>Form validation failed</AlertTitle>\n                <AlertDescription className=\"whitespace-pre-wrap\">{engine.rootError}</AlertDescription>\n              </Alert>\n            ) : null}\n\n            {rootHeader === 'hidden' ? null : renderRootHeader ? (\n              renderRootHeader(rootHeaderMetadata)\n            ) : protoMessageUi?.title || protoMessageUi?.description ? (\n              <header\n                className=\"space-y-1 border-border/60 border-b pb-4\"\n                data-testid={`${testIdPrefix}-root-header`}\n              >\n                {protoMessageUi.title ? <Heading level={2}>{protoMessageUi.title}</Heading> : null}\n                {protoMessageUi.description ? (\n                  <Text className=\"text-muted-foreground\" variant=\"small\">\n                    {protoMessageUi.description}\n                  </Text>\n                ) : null}\n              </header>\n            ) : null}\n\n            <AutoFormModeShell\n              bestEffort={bag.payloadState.bestEffort}\n              jsonEditorError={bag.jsonEditorError}\n              jsonText={bag.jsonEditorText}\n              mode={mode}\n              modes={availableModes}\n              onFormatJson={bag.handleFormatJson}\n              onJsonTextChange={bag.handleJsonTextChange}\n              onModeChange={setMode}\n              onResetJson={bag.handleResetJson}\n              payload={bag.payloadState.payload}\n              renderFormMode={renderFormForMode}\n              renderSummary={renderSummary}\n              showSummary={showSummary && (!stepper || currentStepIndex === stepper.steps.length - 1)}\n              summaryContext={bag.summaryContext}\n              testIdPrefix={testIdPrefix}\n            />\n          </mergedUiComponents.Form>\n        )}\n        resolvedSchema={resolvedSchema}\n        simpleFields={simpleFields}\n        testIdPrefix={testIdPrefix}\n        uiComponents={mergedUiComponents}\n      >\n        {null}\n      </AutoFormRuntimeProvider>\n    </TooltipProvider>\n  );\n}\n\nfunction AutoFormCoreInner<\n  T extends Record<string, unknown>,\n  TNativeForm,\n  TCustomFieldType extends string,\n>({\n  schema,\n  defaultValues,\n  values,\n  renderEngine,\n  ...props\n}: AutoFormCoreProps<T, TNativeForm, TCustomFieldType>) {\n  const conversionOptions = protoConversionOptionsFromFieldConfig(props.fieldConfig);\n  const protoDescriptor = isProtoMessageDescriptor(schema)\n    ? schema\n    : isProtoProvider(schema)\n      ? schema.getMessageDescriptor()\n      : undefined;\n  const protoSource = protoDescriptor\n    ? resolveProtoSourceMessage(protoDescriptor, values, defaultValues)\n    : undefined;\n  const resolvedSchema = resolveSchema(schema, conversionOptions, protoSource);\n  const providerDefaults = resolvedSchema.provider.getDefaultValues();\n  const initialDefaultValues =\n    resolvedSchema.isProto && resolvedSchema.protoDesc\n      ? {\n          ...providerDefaults,\n          ...(normalizeProtoInitialValues(resolvedSchema.protoDesc, defaultValues) ?? {}),\n        }\n      : { ...providerDefaults, ...(defaultValues ?? {}) };\n  const controlledValues = values\n    ? resolvedSchema.isProto && resolvedSchema.protoDesc\n      ? normalizeProtoInitialValues(resolvedSchema.protoDesc, values)\n      : values\n    : undefined;\n\n  return renderEngine({\n    defaultValues: initialDefaultValues,\n    validateSchema: async (submittedValues, signal) => {\n      try {\n        return await Promise.resolve(\n          resolvedSchema.provider.validateSchema(submittedValues, { signal })\n        );\n      } catch (error) {\n        return {\n          success: false,\n          errors: [\n            {\n              path: [],\n              message:\n                error instanceof Error\n                  ? error.message\n                  : 'Failed to validate form values.',\n            },\n          ],\n        };\n      }\n    },\n    values: controlledValues,\n    children: (engine) => (\n      <AutoFormContent<T, TNativeForm, TCustomFieldType>\n        {...props}\n        engine={engine}\n        resolvedSchema={resolvedSchema}\n      />\n    ),\n  });\n}\n\ntype AutoFormErrorBoundaryState = { error: Error | null };\n\nclass AutoFormErrorBoundary extends React.Component<{ children: React.ReactNode }, AutoFormErrorBoundaryState> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): AutoFormErrorBoundaryState {\n    return { error };\n  }\n\n  override render() {\n    if (this.state.error) {\n      return (\n        <Alert variant=\"destructive\">\n          <AlertTitle>AutoForm failed to render</AlertTitle>\n          <AlertDescription className=\"whitespace-pre-wrap\">{this.state.error.message}</AlertDescription>\n        </Alert>\n      );\n    }\n    return this.props.children;\n  }\n}\n\nexport function AutoFormCore<\n  T extends Record<string, unknown>,\n  TNativeForm,\n  TCustomFieldType extends string = never,\n>(\n  props: AutoFormCoreProps<T, TNativeForm, TCustomFieldType>\n) {\n  const schemaRef = React.useRef(props.schema);\n  const [schemaKey, setSchemaKey] = React.useState(0);\n  if (schemaRef.current !== props.schema) {\n    schemaRef.current = props.schema;\n    setSchemaKey((key) => key + 1);\n  }\n  return (\n    <AutoFormErrorBoundary key={schemaKey}>\n      <AutoFormCoreInner {...props} />\n    </AutoFormErrorBoundary>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/engine.tsx",
      "content": "'use client';\n\nimport React from 'react';\n\nimport type { SchemaValidationError } from './core-types';\n\nexport type AutoFormFieldController = {\n  errors: string[];\n  name: string;\n  onBlur: () => void;\n  onChange: (\n    value: unknown,\n    options?: { shouldDirty?: boolean; shouldTouch?: boolean; shouldValidate?: boolean }\n  ) => void;\n  ref: (element: HTMLElement | null) => void;\n  value: unknown;\n};\n\nexport type AutoFormArrayController = {\n  append: (value: unknown) => void;\n  items: Array<{ key: string; value: unknown }>;\n  remove: (index: number) => void;\n};\n\nexport type AutoFormEngineHandle = {\n  clearErrors: (paths?: string[]) => void;\n  focus: (path: string) => void;\n  getValues: () => Record<string, unknown>;\n  /** Establish the current values as the new clean baseline. */\n  markClean: () => void;\n  reset: (values: Record<string, unknown>, options?: { keepDefaultValues?: boolean }) => void;\n  setValue: (\n    path: string,\n    value: unknown,\n    options?: { shouldDirty?: boolean; shouldTouch?: boolean; shouldValidate?: boolean }\n  ) => void;\n};\n\nexport type AutoFormEngine = AutoFormEngineHandle & {\n  ArrayController: React.ComponentType<{\n    children: (controller: AutoFormArrayController) => React.ReactNode;\n    name: string;\n  }>;\n  FieldController: React.ComponentType<{\n    children: (controller: AutoFormFieldController) => React.ReactNode;\n    name: string;\n  }>;\n  defaultValues: Record<string, unknown> | undefined;\n  dirtyFields: Record<string, unknown>;\n  errors: Record<string, unknown>;\n  getFieldInvalid: (path: string) => boolean;\n  handleSubmit: (\n    onValid: (values: Record<string, unknown>) => void | Promise<void>\n  ) => React.FormEventHandler<HTMLFormElement>;\n  isSubmitting: boolean;\n  isDirty: boolean;\n  nativeForm: unknown;\n  rootError: string | undefined;\n  runNativeSubmit?: () => void | Promise<void>;\n  setRootError: (message: string) => void;\n  setValidationErrors: (errors: SchemaValidationError[]) => void;\n  trigger: (paths?: string[]) => Promise<boolean>;\n  /** Native validation already returns the schema's transformed output. */\n  validatesSchema: boolean;\n  values: Record<string, unknown>;\n};\n\nconst AutoFormEngineContext = React.createContext<AutoFormEngine | null>(null);\n\nexport function AutoFormEngineProvider({\n  children,\n  engine,\n}: {\n  children: React.ReactNode;\n  engine: AutoFormEngine;\n}) {\n  return <AutoFormEngineContext.Provider value={engine}>{children}</AutoFormEngineContext.Provider>;\n}\n\nexport function useAutoFormEngine(): AutoFormEngine {\n  const engine = React.useContext(AutoFormEngineContext);\n  if (!engine) {\n    throw new Error('AutoForm engine controls must be used inside an AutoForm engine provider.');\n  }\n  return engine;\n}\n\nexport function errorMessage(value: unknown): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n  if (value instanceof Error) {\n    return value.message;\n  }\n  if (value && typeof value === 'object') {\n    const message = Reflect.get(value, 'message');\n    if (typeof message === 'string') {\n      return message;\n    }\n  }\n  return;\n}\n\nexport function errorMessages(values: unknown[]): string[] {\n  return values.map(errorMessage).filter((message): message is string => Boolean(message));\n}\n\nexport function useDirtyStateNotification(\n  isDirty: boolean,\n  onDirtyChange: ((isDirty: boolean) => void) | undefined\n) {\n  const callbackRef = React.useRef(onDirtyChange);\n  const lastNotificationRef = React.useRef<boolean | undefined>(undefined);\n  callbackRef.current = onDirtyChange;\n\n  function notifyDirtyChange(nextIsDirty: boolean) {\n    if (lastNotificationRef.current === nextIsDirty) {\n      return;\n    }\n    lastNotificationRef.current = nextIsDirty;\n    callbackRef.current?.(nextIsDirty);\n  }\n\n  React.useEffect(() => {\n    notifyDirtyChange(isDirty);\n  }, [isDirty]);\n\n  return notifyDirtyChange;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/layout-context.tsx",
      "content": "import React from 'react';\n\nconst FormDepthContext = React.createContext(0);\n\nexport function useFormDepth(): number {\n  return React.useContext(FormDepthContext);\n}\n\nexport function FormDepthProvider({ depth, children }: { depth: number; children: React.ReactNode }) {\n  return <FormDepthContext.Provider value={depth}>{children}</FormDepthContext.Provider>;\n}\n\n/**\n * Map a nesting depth (0 = root section, 1 = first-nested, ...) to an\n * HTML heading level. Root sections render as h2 because h1 is reserved\n * for the page heading. The clamp at 5 matches the `Heading` component's\n * styled variants (h1..h5). Depth is always ≥ 0 because the context\n * initialises at 0 and is only incremented, so no lower-bound guard is\n * needed.\n */\nexport function headingLevelForDepth(depth: number): 2 | 3 | 4 | 5 {\n  const level = 2 + depth;\n  if (level > 5) {\n    return 5;\n  }\n  return level as 2 | 3 | 4 | 5;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/layout.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Button } from '../button';\nimport { FieldLabel } from '../field';\nimport { Heading, Text } from '../typography';\nimport { formSpacing } from './form-spacing';\nimport { FormDepthProvider, headingLevelForDepth, useFormDepth } from './layout-context';\n\nexport interface FormLayoutProps extends Omit<React.ComponentProps<'form'>, 'children'> {\n  children?: React.ReactNode;\n  ref?: React.Ref<HTMLFormElement>;\n  testId?: string;\n}\n\nexport function FormLayout({ children, className, testId, ref, ...formProps }: FormLayoutProps) {\n  return (\n    <form className={cn(formSpacing.form, className)} data-testid={testId} ref={ref} {...formProps}>\n      <FormDepthProvider depth={0}>{children}</FormDepthProvider>\n    </form>\n  );\n}\n\nexport interface FormSectionProps {\n  children?: React.ReactNode;\n  className?: string;\n  description?: React.ReactNode;\n  /** Override divider visibility. Defaults to true when a title is present. */\n  divider?: boolean;\n  required?: boolean;\n  testId?: string;\n  title?: React.ReactNode;\n}\n\nexport function FormSection({ title, description, divider, required, testId, className, children }: FormSectionProps) {\n  const depth = useFormDepth();\n  const hasHeader = Boolean(title) || Boolean(description);\n  const showDivider = hasHeader && (divider ?? Boolean(title));\n  const level = headingLevelForDepth(depth);\n\n  return (\n    <section className={cn(formSpacing.field, className)} data-testid={testId}>\n      {hasHeader ? (\n        <div className={cn(formSpacing.sectionHeader, showDivider && formSpacing.sectionDivider)}>\n          {title ? (\n            <div className=\"flex items-center gap-2\">\n              <Heading className=\"font-medium\" level={level}>\n                {title}\n              </Heading>\n              {required ? (\n                <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n                  *\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          {description ? (\n            <Text className=\"text-muted-foreground\" variant=\"small\">\n              {description}\n            </Text>\n          ) : null}\n        </div>\n      ) : null}\n      <FormDepthProvider depth={depth + 1}>\n        <div className={formSpacing.field}>{children}</div>\n      </FormDepthProvider>\n    </section>\n  );\n}\n\nexport interface FormFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  error?: React.ReactNode;\n  helpText?: React.ReactNode;\n  htmlFor?: string;\n  label?: React.ReactNode;\n  required?: boolean;\n  testId?: string;\n}\n\nexport function FormField({ label, helpText, error, required, htmlFor, testId, className, children }: FormFieldProps) {\n  return (\n    <div className={cn(formSpacing.labelStack, className)} data-testid={testId}>\n      {label ? (\n        <FieldLabel className=\"flex items-center gap-2\" htmlFor={htmlFor}>\n          <Text as=\"span\" variant=\"labelStrongSmall\">\n            {label}\n          </Text>\n          {required ? (\n            <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n              *\n            </Text>\n          ) : null}\n        </FieldLabel>\n      ) : null}\n      {children}\n      {error ? (\n        <Text as=\"span\" className=\"text-destructive\" variant=\"small\">\n          {error}\n        </Text>\n      ) : helpText ? (\n        <Text as=\"span\" className=\"text-muted-foreground\" variant=\"small\">\n          {helpText}\n        </Text>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface FormSubmitProps extends React.ComponentProps<typeof Button> {\n  children?: React.ReactNode;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nexport function FormSubmit({ children = 'Submit', type = 'submit', ref, ...props }: FormSubmitProps) {\n  return (\n    <Button ref={ref} type={type} {...props}>\n      {children}\n    </Button>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/mode-shell.tsx",
      "content": "'use client';\n\nimport { MotionConfig } from 'motion/react';\nimport React from 'react';\nimport { Alert, AlertDescription, AlertTitle } from '../alert';\nimport { Button } from '../button';\nimport { CopyButton } from '../copy-button';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs';\nimport { Textarea } from '../textarea';\nimport { Heading, Text } from '../typography';\nimport { formSpacing } from './form-spacing';\nimport { buildAutoFormTestId } from './test-ids';\nimport type { AutoFormMode, AutoFormSummaryContext } from './types';\nimport { safeStringify } from './utils/serialization';\n\nfunction JsonBlock({ description, jsonText, title }: { title: string; description: string; jsonText: string }) {\n  return (\n    <div className=\"overflow-hidden rounded-2xl border bg-background shadow-xs\">\n      <div className=\"border-b px-5 py-4\">\n        <div className=\"space-y-1\">\n          <Heading level={3}>{title}</Heading>\n          <Text className=\"text-muted-foreground\" variant=\"small\">\n            {description}\n          </Text>\n        </div>\n      </div>\n      <div className=\"space-y-3 px-5 py-4\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <Text className=\"font-medium text-muted-foreground uppercase tracking-[0.12em]\" variant=\"small\">\n            Payload JSON\n          </Text>\n          <CopyButton content={jsonText} size=\"sm\" variant=\"outline\">\n            Copy JSON\n          </CopyButton>\n        </div>\n        <div className=\"max-h-[min(60vh,38rem)] overflow-auto rounded-xl bg-muted/35 p-4\">\n          <pre className=\"overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-5\">{jsonText}</pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction JsonEditorPanel({\n  bestEffort,\n  editorError,\n  jsonText,\n  onFormat,\n  onJsonTextChange,\n  onReset,\n  testIdPrefix,\n}: {\n  bestEffort: boolean;\n  editorError?: string;\n  jsonText: string;\n  onFormat: () => void;\n  onJsonTextChange: (value: string) => void;\n  onReset: () => void;\n  testIdPrefix: string;\n}) {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div className=\"space-y-1\">\n          <Heading level={3}>Payload JSON</Heading>\n          <Text className=\"text-muted-foreground\" variant=\"small\">\n            Edit the payload directly, then switch back to the form whenever you want.\n          </Text>\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <CopyButton content={jsonText} size=\"sm\" variant=\"outline\">\n            Copy JSON\n          </CopyButton>\n          <Button onClick={onFormat} size=\"sm\" type=\"button\" variant=\"outline\">\n            Format JSON\n          </Button>\n          <Button onClick={onReset} size=\"sm\" type=\"button\" variant=\"outline\">\n            Reset\n          </Button>\n        </div>\n      </div>\n      {bestEffort ? (\n        <Alert>\n          <AlertTitle>Best-effort preview</AlertTitle>\n          <AlertDescription>\n            Some values are still invalid, so this payload may not be ready to submit just yet.\n          </AlertDescription>\n        </Alert>\n      ) : null}\n      {editorError ? (\n        <Alert variant=\"destructive\">\n          <AlertTitle>Invalid JSON</AlertTitle>\n          <AlertDescription>{editorError}</AlertDescription>\n        </Alert>\n      ) : null}\n      <Textarea\n        className=\"min-h-[420px] font-mono text-xs leading-5\"\n        onChange={(event) => onJsonTextChange(event.target.value)}\n        resize=\"vertical\"\n        testId={buildAutoFormTestId(testIdPrefix, 'json-editor')}\n        value={jsonText}\n      />\n    </div>\n  );\n}\n\nfunction FormPanel<TNativeForm>({\n  children,\n  context,\n  payload,\n  renderSummary,\n  testIdPrefix,\n}: {\n  children: React.ReactNode;\n  context: AutoFormSummaryContext<TNativeForm>;\n  payload: unknown;\n  renderSummary?: (payload: unknown, context: AutoFormSummaryContext<TNativeForm>) => React.ReactNode;\n  testIdPrefix: string;\n}) {\n  const payloadText = safeStringify(payload);\n\n  return (\n    <div className=\"grid grid-cols-[repeat(auto-fit,minmax(min(100%,24rem),1fr))] gap-6 lg:items-start lg:gap-10\">\n      {/*\n        The form column's top-level rhythm is driven by `formSpacing.form`\n        so every root sibling (fields, sections, Submit) is separated by\n        the same token the `<Form>` primitive applies internally. Keeping\n        the two entry points on the same token means Submit always sits\n        one `form` step below the last section regardless of whether the\n        preceding child is a leaf field or a nested group.\n      */}\n      <div className={`min-w-0 lg:pr-2 ${formSpacing.form}`}>{children}</div>\n      <aside\n        className=\"min-w-0 lg:sticky lg:top-6 lg:self-start\"\n        data-testid={buildAutoFormTestId(testIdPrefix, 'summary')}\n      >\n        {renderSummary ? (\n          renderSummary(payload, context)\n        ) : (\n          <JsonBlock\n            description=\"Payload preview for the request AutoForm is preparing. On wider screens this stays pinned on the right, and it drops below the form when space gets tight.\"\n            jsonText={payloadText}\n            title=\"Summary\"\n          />\n        )}\n      </aside>\n    </div>\n  );\n}\n\nexport function AutoFormModeShell<TNativeForm>({\n  bestEffort,\n  jsonEditorError,\n  jsonText,\n  mode,\n  modes,\n  onFormatJson,\n  onJsonTextChange,\n  onModeChange,\n  onResetJson,\n  payload,\n  renderSummary,\n  summaryContext,\n  renderFormMode,\n  showSummary,\n  testIdPrefix,\n}: {\n  bestEffort: boolean;\n  jsonEditorError?: string;\n  jsonText: string;\n  mode: AutoFormMode;\n  modes: AutoFormMode[];\n  onFormatJson: () => void;\n  onJsonTextChange: (value: string) => void;\n  onModeChange: (mode: AutoFormMode) => void;\n  onResetJson: () => void;\n  payload: unknown;\n  renderSummary?: (payload: unknown, context: AutoFormSummaryContext<TNativeForm>) => React.ReactNode;\n  summaryContext: AutoFormSummaryContext<TNativeForm>;\n  renderFormMode: (mode: Exclude<AutoFormMode, 'json'>) => React.ReactNode;\n  showSummary: boolean;\n  testIdPrefix: string;\n}) {\n  function renderModeBody(targetMode: AutoFormMode) {\n    if (targetMode === 'json') {\n      return (\n        <JsonEditorPanel\n          bestEffort={bestEffort}\n          editorError={jsonEditorError}\n          jsonText={jsonText}\n          onFormat={onFormatJson}\n          onJsonTextChange={onJsonTextChange}\n          onReset={onResetJson}\n          testIdPrefix={testIdPrefix}\n        />\n      );\n    }\n\n    const formContent = renderFormMode(targetMode);\n    if (!showSummary) {\n      return formContent;\n    }\n\n    return (\n      <FormPanel\n        context={{ ...summaryContext, mode: targetMode }}\n        payload={payload}\n        renderSummary={renderSummary}\n        testIdPrefix={testIdPrefix}\n      >\n        {formContent}\n      </FormPanel>\n    );\n  }\n\n  if (modes.length <= 1) {\n    return <>{renderModeBody(mode)}</>;\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"always\">\n      <Tabs\n        onValueChange={(value) => {\n          if (value !== null) {\n            onModeChange(value as AutoFormMode);\n          }\n        }}\n        testId={buildAutoFormTestId(testIdPrefix, 'tabs')}\n        value={mode}\n      >\n        <TabsList className=\"w-full justify-start\" variant=\"underline\">\n          {modes.map((tabMode) => (\n            <TabsTrigger\n              key={tabMode}\n              testId={buildAutoFormTestId(testIdPrefix, `tab-${tabMode}`)}\n              value={tabMode}\n              variant=\"underline\"\n            >\n              {tabMode === 'json' ? 'JSON' : tabMode === 'simple' ? 'Simple' : 'Advanced'}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n        {modes.map((tabMode) => (\n          <TabsContent key={tabMode} testId={buildAutoFormTestId(testIdPrefix, `panel-${tabMode}`)} value={tabMode}>\n            {renderModeBody(tabMode)}\n          </TabsContent>\n        ))}\n      </Tabs>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/proto/conversion.ts",
      "content": "import { isMessage, type DescMessage, type MessageShape } from '@bufbuild/protobuf';\nimport { getFieldHints } from '../../../lib/core';\n\nimport type { ParsedField } from '../../../lib/form-types';\nimport {\n  type ProtoMapFormEntry,\n  protoFormValuesToPayload,\n  protoPayloadToFormValues,\n  protoToFormValues,\n} from '../../../lib/protobuf-provider';\n\nexport { protoFormValuesToPayload, protoPayloadToFormValues, protoToFormValues };\n\nexport function getProtoJsonSchema(field: ParsedField): Record<string, unknown> {\n  const hints = getFieldHints(field);\n\n  switch (hints?.jsonKind) {\n    case 'listValue':\n      return { type: 'array' };\n    case 'any':\n      return {\n        type: 'object',\n        properties: {\n          typeUrl: { type: 'string', title: 'Type URL' },\n          valueBase64: { type: 'string', title: 'Base64 Payload' },\n        },\n      };\n    default:\n      return { type: 'object' };\n  }\n}\n\nexport function isProtoMapEntries(value: unknown): value is ProtoMapFormEntry[] {\n  return Array.isArray(value);\n}\n\nfunction isProtoMessageShape(value: unknown): boolean {\n  return Boolean(value && typeof value === 'object' && '$typeName' in (value as Record<string, unknown>));\n}\n\nexport function resolveProtoSourceMessage<Desc extends DescMessage>(\n  desc: Desc,\n  ...candidates: unknown[]\n): MessageShape<Desc> | undefined {\n  return candidates.find((candidate): candidate is MessageShape<Desc> => isMessage(candidate, desc));\n}\n\nexport function normalizeProtoInitialValues(\n  desc: DescMessage,\n  values?: Partial<Record<string, unknown>>\n): Record<string, unknown> | undefined {\n  if (!values) {\n    return;\n  }\n\n  if (isProtoMessageShape(values)) {\n    return protoToFormValues(desc, values as never);\n  }\n\n  return values as Record<string, unknown>;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/proto/index.ts",
      "content": "// Proto bridge — re-exports from protobuf-provider and local conversion utilities.\n// All proto-related imports within auto-form go through this single entry point.\n\nexport type { ProtoFieldRenderType, ProtoUiRule } from '../../../lib/protobuf-provider';\nexport {\n  getProtoFieldCustomData,\n  getProtoMessageUiConfig,\n  isProtoMessageDescriptor,\n  isProtoProvider,\n  PROTO_FORM_ROOT_ERROR_KEY,\n  ProtoProvider,\n} from '../../../lib/protobuf-provider';\nexport {\n  getProtoJsonSchema,\n  isProtoMapEntries,\n  normalizeProtoInitialValues,\n  protoFormValuesToPayload,\n  protoPayloadToFormValues,\n  protoToFormValues,\n  resolveProtoSourceMessage,\n} from './conversion';\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/proto/schema.ts",
      "content": "export {\n  getProtoMessageUiConfig,\n  isProtoMessageDescriptor,\n  isProtoProvider,\n  ProtoProvider,\n} from '../../../lib/protobuf-provider';\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/registry.ts",
      "content": "import type React from 'react';\n\nimport type { AutoFormFieldProps, ParsedField } from './core-types';\nimport { getLabel } from './field-utils';\nimport { getProtoFieldCustomData } from './proto';\n\nexport type FieldTypeDefinition<TName extends string = string> = {\n  name: TName;\n  match: (field: ParsedField, context: FieldMatchContext) => boolean;\n  priority: number;\n  component: React.ComponentType<AutoFormFieldProps>;\n};\n\nexport type FieldMatchContext = {\n  identity: string; // `${field.key} ${label}`.toLowerCase()\n  inputType: string;\n  maxLength: number;\n};\n\nexport class FieldTypeRegistry<TName extends string = never> {\n  private definitions: FieldTypeDefinition[] = [];\n\n  register<const TRegisteredName extends string>(\n    definition: FieldTypeDefinition<TRegisteredName>\n  ): FieldTypeRegistry<TName | TRegisteredName> {\n    this.definitions.push(definition);\n    this.definitions.sort((a, b) => b.priority - a.priority);\n    return this as FieldTypeRegistry<TName | TRegisteredName>;\n  }\n\n  resolve(field: ParsedField, context: FieldMatchContext): FieldTypeDefinition<TName> | undefined {\n    return this.definitions.find((def) => def.match(field, context)) as\n      | FieldTypeDefinition<TName>\n      | undefined;\n  }\n\n  list(): readonly FieldTypeDefinition<TName>[] {\n    return this.definitions as unknown as readonly FieldTypeDefinition<TName>[];\n  }\n\n  clone(): FieldTypeRegistry<TName> {\n    const registry = new FieldTypeRegistry<TName>();\n    for (const def of this.definitions) {\n      registry.register(def);\n    }\n    return registry;\n  }\n}\n\nexport function buildFieldMatchContext(field: ParsedField): FieldMatchContext {\n  const label = String(field.fieldConfig?.label ?? getLabel(field));\n  const identity = `${field.key} ${label}`.toLowerCase();\n  const inputType = String(field.fieldConfig?.inputProps?.type ?? getProtoFieldCustomData(field)?.inputType ?? '');\n  const maxLength = Number(field.fieldConfig?.inputProps?.maxLength ?? 0);\n  return { identity, inputType, maxLength };\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/array.tsx",
      "content": "'use client';\n\nimport { TrashIcon } from 'lucide-react';\nimport React from 'react';\nimport { Button } from '../../button';\nimport { useAutoFormRenderContext, useAutoFormRuntimeContext } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { type AutoFormArrayController, useAutoFormEngine } from '../engine';\nimport { formSpacing } from '../form-spacing';\nimport { createEmptyFieldValue, getFieldErrorMessage } from '../helpers';\nimport { FormDepthProvider, useFormDepth } from '../layout-context';\nimport { getAutoFormCollectionRemoveTestId, getAutoFormCollectionRowTestId, getAutoFormFieldTestId } from '../test-ids';\nimport { AutoFormFieldRenderer } from './index';\nimport { cloneFieldForCompactRow, getRenderedLabel, isComplexCollectionField, useFieldPresentation } from './shared';\n\nconst COMPACT_ROW_GRID = 'grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3';\n\nfunction RequiredArraySeeder({\n  controller,\n  disabled,\n  field,\n  itemField,\n}: {\n  controller: AutoFormArrayController;\n  disabled: boolean;\n  field: ParsedField;\n  itemField: ParsedField | undefined;\n}) {\n  const hasSeededRef = React.useRef(false);\n  React.useEffect(() => {\n    if (hasSeededRef.current || disabled || !field.required || controller.items.length > 0 || !itemField) {\n      return;\n    }\n    hasSeededRef.current = true;\n    controller.append(createEmptyFieldValue(itemField));\n  }, [controller, disabled, field.required, itemField]);\n  return null;\n}\n\nfunction getCollectionItemLabel(collectionLabel: string, index: number): string {\n  const singularLabel = collectionLabel.endsWith('ies')\n    ? `${collectionLabel.slice(0, -3)}y`\n    : collectionLabel.endsWith('s')\n      ? collectionLabel.slice(0, -1)\n      : collectionLabel;\n\n  return `${singularLabel} ${index + 1}`;\n}\n\nexport function ArrayFieldRenderer({\n  field,\n  path,\n  inheritedDisabled = false,\n}: {\n  field: ParsedField;\n  path: string[];\n  inheritedDisabled?: boolean;\n}) {\n  const { uiComponents } = useAutoFormRenderContext();\n  const { ArrayController, errors } = useAutoFormEngine();\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n  const fullPath = path.join('.');\n  const itemField = field.schema?.[0];\n  const error = getFieldErrorMessage(errors, path);\n  const label = getRenderedLabel(field);\n  const { isDisabled, isVisible, renderField } = useFieldPresentation(field, path, inheritedDisabled);\n  const FieldWrapperComponent = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;\n  const ArrayWrapperComponent = uiComponents.ArrayWrapper as React.ComponentType<\n    React.ComponentProps<typeof uiComponents.ArrayWrapper> & {\n      addButtonTestId?: string;\n      testId?: string;\n    }\n  >;\n  const ArrayElementWrapperComponent = uiComponents.ArrayElementWrapper as React.ComponentType<\n    React.ComponentProps<typeof uiComponents.ArrayElementWrapper> & {\n      removeButtonTestId?: string;\n      testId?: string;\n    }\n  >;\n  const compactItemField = itemField ? cloneFieldForCompactRow(itemField) : undefined;\n  const useCompactRows = itemField ? !isComplexCollectionField(itemField) : false;\n  const depth = useFormDepth();\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <FieldWrapperComponent error={error} field={renderField} id={fullPath} label={label}>\n      <ArrayController name={fullPath}>\n        {(controller) => (\n          <>\n            <RequiredArraySeeder\n              controller={controller}\n              disabled={isDisabled}\n              field={field}\n              itemField={itemField}\n            />\n            <ArrayWrapperComponent\n              addButtonTestId={getAutoFormFieldTestId(testIdPrefix, fullPath, 'add')}\n              field={renderField}\n              label={String(label)}\n              onAddItem={() => {\n                if (!isDisabled) {\n                  controller.append(createEmptyFieldValue(itemField));\n                }\n              }}\n              testId={getAutoFormFieldTestId(testIdPrefix, fullPath, 'items')}\n            >\n              {controller.items.map((item, index) => {\n                const rowTestId = getAutoFormCollectionRowTestId(testIdPrefix, fullPath, index);\n                const removeButtonTestId = getAutoFormCollectionRemoveTestId(testIdPrefix, fullPath, index);\n                const removeItem = () => {\n                  if (!isDisabled) {\n                    controller.remove(index);\n                  }\n                };\n\n                if (compactItemField && useCompactRows) {\n                  return (\n                    <div\n                      className={\n                        index > 0 ? `${COMPACT_ROW_GRID} ${formSpacing.arrayItemSeparator}` : COMPACT_ROW_GRID\n                      }\n                      data-testid={rowTestId}\n                      key={item.key}\n                    >\n                      <AutoFormFieldRenderer\n                        field={compactItemField}\n                        inheritedDisabled={isDisabled}\n                        path={[...path, String(index)]}\n                      />\n                      <Button\n                        aria-label=\"Remove item\"\n                        disabled={isDisabled}\n                        onClick={removeItem}\n                        size=\"icon-sm\"\n                        testId={removeButtonTestId}\n                        type=\"button\"\n                        variant=\"ghost\"\n                      >\n                        <TrashIcon className=\"h-4 w-4\" />\n                      </Button>\n                    </div>\n                  );\n                }\n\n                const renderedItemField = itemField\n                  ? {\n                      ...itemField,\n                      fieldConfig: {\n                        ...(itemField.fieldConfig ?? {}),\n                        label: getCollectionItemLabel(label, index),\n                      },\n                    }\n                  : undefined;\n\n                return (\n                  <ArrayElementWrapperComponent\n                    index={index}\n                    key={item.key}\n                    onRemove={removeItem}\n                    removeButtonTestId={removeButtonTestId}\n                    testId={rowTestId}\n                  >\n                    {renderedItemField ? (\n                      <FormDepthProvider depth={depth + 1}>\n                        <AutoFormFieldRenderer\n                          field={renderedItemField}\n                          inheritedDisabled={isDisabled}\n                          path={[...path, String(index)]}\n                        />\n                      </FormDepthProvider>\n                    ) : null}\n                  </ArrayElementWrapperComponent>\n                );\n              })}\n            </ArrayWrapperComponent>\n          </>\n        )}\n      </ArrayController>\n    </FieldWrapperComponent>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/controlled.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { useAutoFormRenderContext, useAutoFormRuntimeContext } from '../context';\nimport type { AutoFormFieldProps, ParsedField } from '../core-types';\nimport { useAutoFormEngine } from '../engine';\nimport { getAutoFormFieldTestId } from '../test-ids';\nimport { getRenderedLabel, useFieldPresentation } from './shared';\n\nexport function ControlledFieldRenderer({\n  field,\n  path,\n  renderType,\n  inheritedDisabled = false,\n}: {\n  field: ParsedField;\n  path: string[];\n  renderType?: string;\n  inheritedDisabled?: boolean;\n}) {\n  const { formComponents, uiComponents } = useAutoFormRenderContext();\n  const { FieldController } = useAutoFormEngine();\n  const fullPath = path.join('.');\n  const label = getRenderedLabel(field);\n  const {\n    isVisible,\n    renderField,\n    renderType: inferredRenderType,\n  } = useFieldPresentation(field, path, inheritedDisabled);\n  const { fieldRegistry, testIdPrefix } = useAutoFormRuntimeContext();\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const resolvedRenderType = renderType ?? inferredRenderType;\n  const FieldWrapperComponent = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;\n  const registeredComponent =\n    formComponents[resolvedRenderType] ??\n    fieldRegistry?.list().find((definition) => definition.name === resolvedRenderType)?.component;\n  const FieldComponent = (registeredComponent ?? formComponents.fallback) as React.ComponentType<AutoFormFieldProps>;\n  const componentField = registeredComponent\n    ? renderField\n    : {\n        ...renderField,\n        type: resolvedRenderType,\n      };\n\n  return (\n    <FieldController name={fullPath}>\n      {(controller) => {\n        const error = controller.errors.join('\\n') || undefined;\n        return (\n          <FieldWrapperComponent error={error} field={renderField} id={fullPath} label={label}>\n            <FieldComponent\n              error={error}\n              field={componentField}\n              id={fullPath}\n              inputProps={{\n                ...renderField.fieldConfig?.inputProps,\n                name: controller.name,\n                onBlur: controller.onBlur,\n                onValueChange: controller.onChange,\n                ref: controller.ref,\n                required: renderField.required,\n                testId: getAutoFormFieldTestId(testIdPrefix, path, 'control'),\n                value: controller.value,\n              }}\n              label={label}\n              path={path}\n              value={controller.value}\n            />\n          </FieldWrapperComponent>\n        );\n      }}\n    </FieldController>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/index.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { useAutoForm } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { defaultRegistry } from '../fields';\nimport { getFieldUiConfig, resolveRenderFieldType } from '../helpers';\nimport { buildFieldMatchContext, type FieldTypeRegistry } from '../registry';\nimport type { AutoFormSlotProps } from '../slot';\nimport { ArrayFieldRenderer } from './array';\nimport { ControlledFieldRenderer } from './controlled';\nimport { MapFieldRenderer } from './map';\nimport { ObjectFieldRenderer } from './object';\nimport { OneofFieldRenderer } from './oneof';\nimport { isFieldHidden } from './shared';\n\nfunction resolveFieldType(field: ParsedField, registry: FieldTypeRegistry<string>): string {\n  const explicitControl = getFieldUiConfig(field).control;\n  if (explicitControl) {\n    return explicitControl;\n  }\n\n  const matchContext = buildFieldMatchContext(field);\n  const resolved = registry.resolve(field, matchContext);\n  return resolved?.name ?? resolveRenderFieldType(field);\n}\n\nexport function AutoFormFieldRenderer({\n  field,\n  path,\n  inheritedDisabled = false,\n  registry,\n}: {\n  field: ParsedField;\n  path: string[];\n  inheritedDisabled?: boolean;\n  registry?: FieldTypeRegistry<string>;\n}) {\n  const activeRegistry = registry ?? defaultRegistry;\n  const renderType = resolveFieldType(field, activeRegistry);\n\n  if ((field.type === 'array' || field.type === 'map' || field.type === 'object') && renderType !== field.type) {\n    return (\n      <ControlledFieldRenderer\n        field={field}\n        inheritedDisabled={inheritedDisabled}\n        path={path}\n        renderType={renderType}\n      />\n    );\n  }\n\n  switch (field.type) {\n    case 'object':\n      return <ObjectFieldRenderer field={field} inheritedDisabled={inheritedDisabled} path={path} />;\n    case 'array':\n      return <ArrayFieldRenderer field={field} inheritedDisabled={inheritedDisabled} path={path} />;\n    case 'map':\n      return <MapFieldRenderer field={field} inheritedDisabled={inheritedDisabled} path={path} />;\n    case 'oneof':\n      return <OneofFieldRenderer field={field} inheritedDisabled={inheritedDisabled} path={path} />;\n    default:\n      return (\n        <ControlledFieldRenderer\n          field={field}\n          inheritedDisabled={inheritedDisabled}\n          path={path}\n          renderType={renderType}\n        />\n      );\n  }\n}\n\ntype SlotEntry = {\n  before?: string;\n  after?: string;\n  content: React.ReactNode;\n};\n\nfunction extractSlots(children: React.ReactNode): { slots: SlotEntry[]; other: React.ReactNode[] } {\n  const slots: SlotEntry[] = [];\n  const other: React.ReactNode[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && (child.type as { displayName?: string }).displayName === 'AutoFormSlot') {\n      const props = child.props as AutoFormSlotProps;\n      slots.push({\n        before: props.before,\n        after: props.after,\n        content: props.children,\n      });\n    } else if (child !== null && child !== undefined) {\n      other.push(child);\n    }\n  });\n\n  return { slots, other };\n}\n\nexport function AutoFormFields({ fields, children }: { fields: ParsedField[]; children?: React.ReactNode }) {\n  const { deprecatedFields, fieldRegistry } = useAutoForm();\n  const { slots, other } = React.useMemo(() => extractSlots(children), [children]);\n\n  // Build slot maps for O(1) lookup\n  const beforeSlots = React.useMemo(() => {\n    const map = new Map<string, React.ReactNode[]>();\n    for (const slot of slots) {\n      if (slot.before) {\n        const existing = map.get(slot.before) ?? [];\n        existing.push(slot.content);\n        map.set(slot.before, existing);\n      }\n    }\n    return map;\n  }, [slots]);\n\n  const afterSlots = React.useMemo(() => {\n    const map = new Map<string, React.ReactNode[]>();\n    for (const slot of slots) {\n      if (slot.after) {\n        const existing = map.get(slot.after) ?? [];\n        existing.push(slot.content);\n        map.set(slot.after, existing);\n      }\n    }\n    return map;\n  }, [slots]);\n\n  // Slots without before/after render at the top\n  const topSlots = slots.filter((s) => !(s.before || s.after)).map((s) => s.content);\n\n  return (\n    <div className=\"divide-y divide-border/60\" data-slot=\"auto-form-fields\">\n      {topSlots.map((content, i) => (\n        <div className=\"py-7 first:pt-0 last:pb-0\" key={`slot-top-${i}`}>\n          {content}\n        </div>\n      ))}\n      {other.length > 0\n        ? other.map((content, i) => (\n            <div className=\"py-7 first:pt-0 last:pb-0\" key={`other-${i}`}>\n              {content}\n            </div>\n          ))\n        : null}\n      {fields.filter((field) => !isFieldHidden(field, deprecatedFields)).map((field) => (\n        <div className=\"py-7 first:pt-0 last:pb-0\" data-slot=\"auto-form-field-row\" key={field.key}>\n          {beforeSlots.get(field.key)?.map((content, i) => (\n            <React.Fragment key={`before-${field.key}-${i}`}>{content}</React.Fragment>\n          ))}\n          <AutoFormFieldRenderer field={field} path={[field.key]} registry={fieldRegistry} />\n          {afterSlots.get(field.key)?.map((content, i) => (\n            <React.Fragment key={`after-${field.key}-${i}`}>{content}</React.Fragment>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/map.tsx",
      "content": "'use client';\n\nimport { TrashIcon } from 'lucide-react';\nimport React from 'react';\nimport { Button } from '../../button';\nimport { useAutoFormRenderContext, useAutoFormRuntimeContext } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { useAutoFormEngine } from '../engine';\nimport { formSpacing } from '../form-spacing';\nimport { createEmptyFieldValue, getFieldErrorMessage } from '../helpers';\nimport { getAutoFormCollectionRemoveTestId, getAutoFormCollectionRowTestId, getAutoFormFieldTestId } from '../test-ids';\nimport { AutoFormFieldRenderer } from './index';\nimport { cloneFieldForCompactRow, getRenderedLabel, isComplexCollectionField, useFieldPresentation } from './shared';\n\nconst COMPACT_PAIR_GRID = 'grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-3';\nconst KEY_REMOVE_GRID = 'grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3';\n\nexport function MapFieldRenderer({\n  field,\n  path,\n  inheritedDisabled = false,\n}: {\n  field: ParsedField;\n  path: string[];\n  inheritedDisabled?: boolean;\n}) {\n  const { uiComponents } = useAutoFormRenderContext();\n  const { ArrayController, errors } = useAutoFormEngine();\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n  const fullPath = path.join('.');\n  const keyField = field.schema?.[0];\n  const valueField = field.schema?.[1];\n  const error = getFieldErrorMessage(errors, path);\n  const label = getRenderedLabel(field);\n  const { isDisabled, isVisible, renderField } = useFieldPresentation(field, path, inheritedDisabled);\n  const FieldWrapperComponent = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;\n  const ArrayWrapperComponent = uiComponents.ArrayWrapper as React.ComponentType<\n    React.ComponentProps<typeof uiComponents.ArrayWrapper> & {\n      addButtonTestId?: string;\n      testId?: string;\n    }\n  >;\n  const compactKeyField = keyField ? cloneFieldForCompactRow(keyField) : undefined;\n  const compactValueField = valueField ? cloneFieldForCompactRow(valueField) : undefined;\n  const valueIsComplex = isComplexCollectionField(valueField);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <FieldWrapperComponent error={error} field={renderField} id={fullPath} label={label}>\n      <ArrayController name={fullPath}>\n        {(controller) => (\n          <ArrayWrapperComponent\n            addButtonTestId={getAutoFormFieldTestId(testIdPrefix, fullPath, 'add')}\n            field={renderField}\n            label={String(label)}\n            onAddItem={() => {\n              if (!isDisabled) {\n                controller.append({ key: '', value: createEmptyFieldValue(valueField) });\n              }\n            }}\n            testId={getAutoFormFieldTestId(testIdPrefix, fullPath, 'items')}\n          >\n            {controller.items.map((item, index) => {\n              const rowTestId = getAutoFormCollectionRowTestId(testIdPrefix, fullPath, index);\n              const removeButtonTestId = getAutoFormCollectionRemoveTestId(testIdPrefix, fullPath, index);\n              const removeEntry = () => {\n                if (!isDisabled) {\n                  controller.remove(index);\n                }\n              };\n\n              if (compactKeyField && compactValueField && !valueIsComplex) {\n                return (\n                  <div\n                    className={index > 0 ? `${COMPACT_PAIR_GRID} ${formSpacing.arrayItemSeparator}` : COMPACT_PAIR_GRID}\n                    data-testid={rowTestId}\n                    key={item.key}\n                  >\n                    <AutoFormFieldRenderer\n                      field={compactKeyField}\n                      inheritedDisabled={isDisabled}\n                      path={[...path, String(index), 'key']}\n                    />\n                    <AutoFormFieldRenderer\n                      field={compactValueField}\n                      inheritedDisabled={isDisabled}\n                      path={[...path, String(index), 'value']}\n                    />\n                    <Button\n                      aria-label=\"Remove item\"\n                      disabled={isDisabled}\n                      onClick={removeEntry}\n                      size=\"icon-sm\"\n                      testId={removeButtonTestId}\n                      type=\"button\"\n                      variant=\"ghost\"\n                    >\n                      <TrashIcon className=\"h-4 w-4\" />\n                    </Button>\n                  </div>\n                );\n              }\n\n              return (\n                <div\n                  className={\n                    index > 0\n                      ? `${formSpacing.collectionRow} ${formSpacing.arrayItemSeparator}`\n                      : formSpacing.collectionRow\n                  }\n                  data-testid={rowTestId}\n                  key={item.key}\n                >\n                  <div className={KEY_REMOVE_GRID}>\n                    {compactKeyField ? (\n                      <AutoFormFieldRenderer\n                        field={compactKeyField}\n                        inheritedDisabled={isDisabled}\n                        path={[...path, String(index), 'key']}\n                      />\n                    ) : null}\n                    <Button\n                      aria-label=\"Remove item\"\n                      disabled={isDisabled}\n                      onClick={removeEntry}\n                      size=\"icon-sm\"\n                      testId={removeButtonTestId}\n                      type=\"button\"\n                      variant=\"ghost\"\n                    >\n                      <TrashIcon className=\"h-4 w-4\" />\n                    </Button>\n                  </div>\n                  {valueField ? (\n                    <AutoFormFieldRenderer\n                      field={compactValueField ?? valueField}\n                      inheritedDisabled={isDisabled}\n                      path={[...path, String(index), 'value']}\n                    />\n                  ) : null}\n                </div>\n              );\n            })}\n          </ArrayWrapperComponent>\n        )}\n      </ArrayController>\n    </FieldWrapperComponent>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/object.tsx",
      "content": "'use client';\n\nimport { Text } from '../../typography';\nimport { useAutoFormRenderContext, useAutoFormRuntimeContext } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { useAutoFormEngine } from '../engine';\nimport { getPathInObject } from '../field-utils';\nimport { getFieldErrorMessage } from '../helpers';\nimport { getAutoFormFieldTestId } from '../test-ids';\nimport { AutoFormFieldRenderer } from './index';\nimport { getRenderedLabel, useFieldPresentation } from './shared';\n\nexport function ObjectFieldRenderer({\n  field,\n  path,\n  inheritedDisabled = false,\n}: {\n  field: ParsedField;\n  path: string[];\n  inheritedDisabled?: boolean;\n}) {\n  const { uiComponents } = useAutoFormRenderContext();\n  const { errors } = useAutoFormEngine();\n  const fullPath = path.join('.');\n  const error = getFieldErrorMessage(errors, path);\n  const label = getRenderedLabel(field);\n  const { isVisible, renderField } = useFieldPresentation(field, path, inheritedDisabled);\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n\n  // Check for errors on the object itself or any descendant field.\n  // This ensures collapsible sections auto-expand when a child has an error.\n  const errorAtPath = getPathInObject(errors as Record<string, unknown>, path);\n  const hasDescendantError = errorAtPath !== undefined && errorAtPath !== null && typeof errorAtPath === 'object';\n  const hasError = Boolean(error) || hasDescendantError;\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const ObjectWrapperComponent = uiComponents.ObjectWrapper;\n\n  // Render the error inline as a sibling of the section only when present.\n  // The previous version reserved a `min-h-5` slot unconditionally, which\n  // added ~20px of whitespace under every nested object and drifted the\n  // rhythm away from manually-composed Field-based forms. A naked\n  // `<section>` + optional error line lets the parent's `formSpacing.form`\n  // token drive the gap between siblings without any extra padding.\n  return (\n    <>\n      <ObjectWrapperComponent field={renderField} hasError={hasError} label={label}>\n        {(renderField.schema ?? []).map((subField) => (\n          <AutoFormFieldRenderer\n            field={subField}\n            inheritedDisabled={Boolean(renderField.fieldConfig?.inputProps?.disabled)}\n            key={`${path.join('.')}.${subField.key}`}\n            path={[...path, subField.key]}\n          />\n        ))}\n      </ObjectWrapperComponent>\n      {error ? (\n        <Text\n          className=\"whitespace-pre-wrap text-destructive\"\n          data-testid={getAutoFormFieldTestId(testIdPrefix, fullPath, 'error')}\n          variant=\"small\"\n        >\n          {error}\n        </Text>\n      ) : null}\n    </>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/oneof.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../select';\nimport { useAutoFormRenderContext, useAutoFormRuntimeContext } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { useAutoFormEngine } from '../engine';\nimport { getPathInObject } from '../field-utils';\nimport { getLabel } from '../field-utils';\nimport { formSpacing } from '../form-spacing';\nimport { createEmptyFieldValue, getFieldErrorMessage, getFieldUiConfig } from '../helpers';\nimport { FormDepthProvider, useFormDepth } from '../layout-context';\nimport { getAutoFormFieldTestId } from '../test-ids';\nimport { AutoFormFieldRenderer } from './index';\nimport { getRenderedLabel, isDeprecatedField, isFieldHidden, useFieldPresentation } from './shared';\n\nexport function OneofFieldRenderer({\n  field,\n  path,\n  inheritedDisabled = false,\n}: {\n  field: ParsedField;\n  path: string[];\n  inheritedDisabled?: boolean;\n}) {\n  const { uiComponents } = useAutoFormRenderContext();\n  const { deprecatedFields, evaluateRules } = useAutoFormRuntimeContext();\n  const form = useAutoFormEngine();\n  const fullPath = path.join('.');\n  const oneofValue = (getPathInObject(form.values, path) as { case?: string; value?: unknown } | undefined) ?? {\n    case: undefined,\n    value: undefined,\n  };\n  const error = getFieldErrorMessage(form.errors, path);\n  const label = getRenderedLabel(field);\n  const { isDisabled, isVisible, renderField } = useFieldPresentation(field, path, inheritedDisabled);\n  const FieldWrapperComponent = field.fieldConfig?.fieldWrapper || uiComponents.FieldWrapper;\n  const { testIdPrefix } = useAutoFormRuntimeContext();\n  const controlTestId = getAutoFormFieldTestId(testIdPrefix, fullPath, 'control');\n  const depth = useFormDepth();\n\n  const ruleVisibleFields = (field.schema ?? []).filter((candidate) => {\n    const candidateUi = getFieldUiConfig(candidate);\n    const candidateValue = candidate.key === oneofValue.case ? oneofValue.value : undefined;\n    return evaluateRules(candidateUi.visibleWhen, candidateValue);\n  });\n  const availableFields = ruleVisibleFields.filter(\n    (candidate) => !isFieldHidden(candidate, deprecatedFields)\n  );\n\n  const selectedField = availableFields.find((candidate) => candidate.key === oneofValue.case);\n  const selectedSchemaField = (field.schema ?? []).find(\n    (candidate) => candidate.key === oneofValue.case\n  );\n  const selectedDeprecatedDisabled =\n    deprecatedFields === 'disable' &&\n    selectedSchemaField !== undefined &&\n    isDeprecatedField(selectedSchemaField);\n  const oneofDisabled = isDisabled || selectedDeprecatedDisabled;\n  const selectedValueLabel = selectedField\n    ? getLabel(selectedField)\n    : oneofValue.case\n      ? 'Unavailable selection'\n      : field.required\n        ? undefined\n        : 'Not set';\n\n  React.useEffect(() => {\n    if (!oneofValue.case) {\n      return;\n    }\n\n    const stillVisibleByRule = ruleVisibleFields.some(\n      (candidate) => candidate.key === oneofValue.case\n    );\n    if (!stillVisibleByRule) {\n      form.setValue(\n        fullPath,\n        { case: undefined, value: undefined },\n        { shouldDirty: true, shouldTouch: true, shouldValidate: true }\n      );\n    }\n  }, [form, fullPath, oneofValue.case, ruleVisibleFields]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <FieldWrapperComponent error={error} field={renderField} id={fullPath} label={label}>\n      <div className={formSpacing.oneofStack}>\n        <Select\n          items={[\n            ...(field.required ? [] : [{ label: 'Not set', value: null }]),\n            ...availableFields.map((candidate) => ({\n              label: getLabel(candidate),\n              value: candidate.key,\n            })),\n          ]}\n          onValueChange={(value) => {\n            if (oneofDisabled) {\n              return;\n            }\n            if (value === null) {\n              form.setValue(\n                fullPath,\n                { case: undefined, value: undefined },\n                { shouldDirty: true, shouldValidate: true }\n              );\n              return;\n            }\n            const nextField = availableFields.find((candidate) => candidate.key === value);\n            form.clearErrors([`${fullPath}.value`]);\n            form.setValue(\n              fullPath,\n              {\n                case: value,\n                value: oneofValue.case === value ? oneofValue.value : createEmptyFieldValue(nextField),\n              },\n              { shouldDirty: true, shouldTouch: true, shouldValidate: true }\n            );\n          }}\n          value={oneofValue.case ?? null}\n        >\n          <SelectTrigger aria-label={String(label)} disabled={oneofDisabled} id={fullPath} testId={controlTestId}>\n            <SelectValue placeholder=\"Choose a field\">{selectedValueLabel}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {field.required ? null : (\n              <SelectItem\n                testId={getAutoFormFieldTestId(testIdPrefix, fullPath, 'option-not-set')}\n                value={null}\n              >\n                Not set\n              </SelectItem>\n            )}\n            {availableFields.map((candidate) => (\n              <SelectItem\n                disabled={deprecatedFields === 'disable' && isDeprecatedField(candidate)}\n                key={candidate.key}\n                testId={getAutoFormFieldTestId(testIdPrefix, fullPath, `option-${candidate.key}`)}\n                value={candidate.key}\n              >\n                {getLabel(candidate)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {selectedField ? (\n          selectedField.type === 'object' && (!selectedField.schema || selectedField.schema.length === 0) ? (\n            <div className=\"rounded-lg border border-dashed bg-muted/30 px-4 py-3\">\n              <p className=\"text-muted-foreground text-sm\">\n                {getLabel(selectedField)} selected. No additional configuration needed.\n              </p>\n            </div>\n          ) : (\n            // Oneof values render conceptually one level deeper than the\n            // selector itself. Bumping depth here keeps headings consulted\n            // by ObjectWrapper consistent with siblings reached via\n            // plain nested-object paths.\n            <FormDepthProvider depth={depth + 1}>\n              <AutoFormFieldRenderer field={selectedField} inheritedDisabled={oneofDisabled} path={[...path, 'value']} />\n            </FormDepthProvider>\n          )\n        ) : null}\n      </div>\n    </FieldWrapperComponent>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/renderers/shared.ts",
      "content": "import React from 'react';\n\nimport { useAutoFormRuntimeContext } from '../context';\nimport type { ParsedField } from '../core-types';\nimport { getFieldHints } from '../core-types';\nimport { getLabel, getPathInObject } from '../field-utils';\nimport { getFieldUiConfig, resolveRenderFieldType } from '../helpers';\nimport type { DeprecatedFieldPolicy } from '../types';\n\nexport function isDeprecatedField(field: ParsedField): boolean {\n  return getFieldHints(field)?.deprecated === true;\n}\n\nexport function isFieldHidden(field: ParsedField, policy: DeprecatedFieldPolicy): boolean {\n  const customData = (field.fieldConfig?.customData ?? {}) as Record<string, unknown>;\n  return Boolean(customData.hidden) || (policy === 'hide' && isDeprecatedField(field));\n}\n\nexport function cloneFieldWithDisabled(field: ParsedField, disabled: boolean): ParsedField {\n  if (!disabled) {\n    return field;\n  }\n\n  return {\n    ...field,\n    fieldConfig: {\n      ...(field.fieldConfig ?? {}),\n      inputProps: {\n        ...(field.fieldConfig?.inputProps ?? {}),\n        disabled: true,\n      },\n    },\n  };\n}\n\nexport function useFieldPresentation(field: ParsedField, path: string[], inheritedDisabled = false) {\n  const { deprecatedFields, formValues, evaluateRules } = useAutoFormRuntimeContext();\n  const fieldValue = getPathInObject(formValues, path);\n  const uiConfig = getFieldUiConfig(field);\n  const customData = (field.fieldConfig?.customData ?? {}) as Record<string, unknown>;\n  const isHidden = isFieldHidden(field, deprecatedFields);\n  const isImmutable = Boolean(customData.immutable);\n  const isVisible = !isHidden && evaluateRules(uiConfig.visibleWhen, fieldValue);\n  const isDisabledByRule = uiConfig.disabledWhen?.length ? evaluateRules(uiConfig.disabledWhen, fieldValue) : false;\n  const isDisabled =\n    inheritedDisabled ||\n    isDisabledByRule ||\n    isImmutable ||\n    (deprecatedFields === 'disable' && isDeprecatedField(field));\n  const renderField = React.useMemo(() => cloneFieldWithDisabled(field, isDisabled), [field, isDisabled]);\n\n  return {\n    fieldValue,\n    isDisabled,\n    isVisible,\n    renderField,\n    renderType: resolveRenderFieldType(field),\n  };\n}\n\nexport function cloneFieldForCompactRow(field: ParsedField): ParsedField {\n  const label = String(getLabel(field));\n\n  const existingCustomData = (field.fieldConfig?.customData ?? {}) as Record<string, unknown>;\n  const existingUi = (existingCustomData.ui ?? {}) as Record<string, unknown>;\n\n  return {\n    ...field,\n    fieldConfig: {\n      ...(field.fieldConfig ?? {}),\n      label: '',\n      description: '',\n      customData: {\n        ...existingCustomData,\n        compactRow: true,\n        ui: {\n          ...existingUi,\n          help: '',\n          example: '',\n        },\n      },\n      inputProps: {\n        ...(field.fieldConfig?.inputProps ?? {}),\n        placeholder:\n          (field.fieldConfig?.inputProps?.placeholder as string | undefined) ||\n          (field.type === 'select' || field.type === 'boolean' ? undefined : label),\n      },\n    },\n  };\n}\n\nexport function getRenderedLabel(field: ParsedField): string {\n  if (typeof field.fieldConfig?.label === 'string') {\n    return field.fieldConfig.label;\n  }\n\n  return String(getLabel(field));\n}\n\nexport function isComplexCollectionField(field: ParsedField | undefined): boolean {\n  if (!field) {\n    return false;\n  }\n\n  const renderType = resolveRenderFieldType(field);\n  return ['object', 'array', 'map', 'oneof', 'json'].includes(renderType);\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/runtime-provider.tsx",
      "content": "'use client';\n\nimport type { DescMessage } from '@bufbuild/protobuf';\nimport React from 'react';\nimport type { ProtoConversionOptions } from '../../lib/protobuf-provider';\n\nimport { AutoFormContext, type AutoFormContextValue } from './context';\nimport type {\n  AutoFormFieldComponents,\n  AutoFormUIComponents,\n  ParsedField,\n  ParsedSchema,\n  SchemaProvider,\n} from './core-types';\nimport type { DataProviderRegistry } from './data-providers';\nimport { type AutoFormEngine, useAutoFormEngine } from './engine';\nimport { getFieldUiConfig, isRecord, isValidationSuccess } from './helpers';\nimport { protoFormValuesToPayload, protoPayloadToFormValues } from './proto';\nimport type { FieldTypeRegistry } from './registry';\nimport type {\n  AutoFormMode,\n  AutoFormPayloadBuilderContext,\n  AutoFormSummaryContext,\n  AutoFormUiRule,\n  DeprecatedFieldPolicy,\n} from './types';\nimport { evaluateUiRules } from './ui-rules';\nimport { isPromiseLike, safeStringify } from './utils/serialization';\n\ntype PayloadBag<TNativeForm> = {\n  payloadState: { bestEffort: boolean; payload: unknown };\n  jsonEditorText: string;\n  jsonEditorError: string | undefined;\n  payloadText: string;\n  summaryContext: AutoFormSummaryContext<TNativeForm>;\n  handleJsonTextChange: (value: string) => void;\n  handleResetJson: () => void;\n  handleFormatJson: () => void;\n};\n\ntype AutoFormRuntimeProviderProps<TNativeForm> = {\n  children: React.ReactNode;\n  uiComponents: AutoFormUIComponents;\n  formComponents: AutoFormFieldComponents;\n  testIdPrefix: string;\n  fieldRegistry?: FieldTypeRegistry<string>;\n  conversionOptions?: ProtoConversionOptions;\n  dataProviders?: DataProviderRegistry;\n  deprecatedFields: DeprecatedFieldPolicy;\n  resolvedSchema: {\n    provider: SchemaProvider<Record<string, unknown>>;\n    parsedSchema: ParsedSchema;\n    isProto: boolean;\n    protoDesc?: DescMessage;\n    resolver?: unknown;\n  };\n  mode: AutoFormMode;\n  simpleFields: ParsedField[];\n  advancedFields: ParsedField[];\n  payloadBuilder?: (\n    values: Record<string, unknown>,\n    context: AutoFormPayloadBuilderContext<TNativeForm>\n  ) => unknown;\n  payloadParser?: (\n    payload: unknown,\n    context: AutoFormPayloadBuilderContext<TNativeForm>\n  ) => Record<string, unknown> | undefined | Promise<Record<string, unknown> | undefined>;\n  payloadSchema?: {\n    safeParse: (data: unknown) => { success: boolean; error?: { issues: Array<{ path: unknown[]; message: string }> } };\n  };\n  renderContent: (bag: PayloadBag<TNativeForm>) => React.ReactNode;\n  onFieldChange?: (\n    fieldPath: string,\n    value: unknown,\n    form: TNativeForm\n  ) => void | Promise<void>;\n};\n\n// ---------------------------------------------------------------------------\n// AutoFormPayloadController — leaf component that owns payload/JSON state.\n// Uses useDeferredValue so expensive payload computation (SchemaProvider\n// validation, proto conversion, payloadBuilder) doesn't block typing on large forms.\n// ---------------------------------------------------------------------------\n\nfunction AutoFormPayloadController<TNativeForm>({\n  watchedValues,\n  methods,\n  resolvedSchema,\n  mode,\n  simpleFields,\n  advancedFields,\n  payloadBuilder,\n  payloadParser,\n  payloadSchema,\n  renderContent,\n  conversionOptions,\n}: {\n  watchedValues: Record<string, unknown>;\n  methods: AutoFormEngine;\n  resolvedSchema: AutoFormRuntimeProviderProps<TNativeForm>['resolvedSchema'];\n  mode: AutoFormMode;\n  simpleFields: ParsedField[];\n  advancedFields: ParsedField[];\n  payloadBuilder: AutoFormRuntimeProviderProps<TNativeForm>['payloadBuilder'];\n  payloadParser: AutoFormRuntimeProviderProps<TNativeForm>['payloadParser'];\n  payloadSchema: AutoFormRuntimeProviderProps<TNativeForm>['payloadSchema'];\n  conversionOptions: AutoFormRuntimeProviderProps<TNativeForm>['conversionOptions'];\n  renderContent: AutoFormRuntimeProviderProps<TNativeForm>['renderContent'];\n}) {\n  const deferredValues = React.useDeferredValue(watchedValues);\n  const payloadValidationController = React.useMemo(\n    () => new AbortController(),\n    [deferredValues, resolvedSchema.provider]\n  );\n\n  React.useEffect(\n    function abortPayloadValidation() {\n      return () => payloadValidationController.abort();\n    },\n    [payloadValidationController]\n  );\n\n  const payloadContextBase = React.useMemo(\n    () => ({\n      form: methods.nativeForm as TNativeForm,\n      autoForm: methods,\n      schema: resolvedSchema.parsedSchema,\n      isProto: resolvedSchema.isProto,\n      protoDesc: resolvedSchema.protoDesc,\n      mode,\n      simpleFields,\n      advancedFields,\n    }),\n    [\n      advancedFields,\n      methods,\n      mode,\n      resolvedSchema.isProto,\n      resolvedSchema.parsedSchema,\n      resolvedSchema.protoDesc,\n      simpleFields,\n    ]\n  );\n\n  const payloadState = React.useMemo(() => {\n    let validationSuccess = false;\n    let validatedData: unknown;\n    let bestEffort = false;\n\n    try {\n      const validationResult = resolvedSchema.provider.validateSchema(deferredValues as never, {\n        signal: payloadValidationController.signal,\n      });\n      if (isPromiseLike(validationResult)) {\n        // Payload preview is best-effort; the engine's awaited validation path\n        // owns user-visible errors. Observe rejection here to avoid leaking it.\n        void Promise.resolve(validationResult).catch(() => undefined);\n        bestEffort = true;\n      } else if (isValidationSuccess(validationResult)) {\n        validationSuccess = true;\n        validatedData = validationResult.data;\n      } else {\n        bestEffort = true;\n      }\n    } catch {\n      bestEffort = true;\n    }\n\n    let payload: unknown;\n\n    if (payloadBuilder) {\n      try {\n        payload = payloadBuilder(\n          deferredValues,\n          payloadContextBase as AutoFormPayloadBuilderContext<TNativeForm>\n        );\n      } catch (error) {\n        console.warn('[AutoForm] payloadBuilder threw:', error);\n        bestEffort = true;\n      }\n    }\n\n    if (payload === undefined) {\n      if (resolvedSchema.isProto && resolvedSchema.protoDesc) {\n        payload = protoFormValuesToPayload(\n          resolvedSchema.protoDesc,\n          deferredValues,\n          conversionOptions\n        );\n        bestEffort ||= !validationSuccess;\n      } else if (validationSuccess) {\n        payload = validatedData;\n      } else {\n        payload = deferredValues;\n        bestEffort = true;\n      }\n    }\n\n    if (payloadSchema && payload !== undefined) {\n      const validation = payloadSchema.safeParse(payload);\n      if (!validation.success && validation.error) {\n        console.warn(\n          '[AutoForm] payloadSchema validation failed:',\n          validation.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`).join(', ')\n        );\n      }\n    }\n\n    return { bestEffort, payload };\n  }, [\n    deferredValues,\n    conversionOptions,\n    payloadBuilder,\n    payloadContextBase,\n    payloadSchema,\n    payloadValidationController.signal,\n    resolvedSchema.isProto,\n    resolvedSchema.protoDesc,\n    resolvedSchema.provider,\n  ]);\n\n  const payloadText = React.useMemo(() => safeStringify(payloadState.payload), [payloadState.payload]);\n  const [jsonEditorText, setJsonEditorText] = React.useState(payloadText);\n  const [jsonEditorError, setJsonEditorError] = React.useState<string>();\n\n  React.useEffect(() => {\n    if (!jsonEditorError) {\n      setJsonEditorText(payloadText);\n    }\n  }, [jsonEditorError, payloadText]);\n\n  const applySeqRef = React.useRef(0);\n\n  const applyPayloadToForm = React.useCallback(\n    async (incoming: unknown) => {\n      const seq = ++applySeqRef.current;\n      try {\n        let nextValues: Record<string, unknown> | undefined;\n\n        if (payloadParser) {\n          const parsed = payloadParser(\n            incoming,\n            payloadContextBase as AutoFormPayloadBuilderContext<TNativeForm>\n          );\n          nextValues = isPromiseLike(parsed) ? await parsed : parsed;\n        } else if (resolvedSchema.isProto && resolvedSchema.protoDesc) {\n          nextValues = protoPayloadToFormValues(resolvedSchema.protoDesc, incoming);\n        } else if (isRecord(incoming)) {\n          nextValues = incoming;\n        }\n\n        if (applySeqRef.current !== seq) {\n          return;\n        }\n\n        if (!nextValues) {\n          setJsonEditorError('AutoForm could not map this JSON payload back into the form.');\n          return;\n        }\n\n        methods.reset(nextValues, { keepDefaultValues: true });\n        setJsonEditorError(undefined);\n      } catch (error) {\n        if (applySeqRef.current !== seq) {\n          return;\n        }\n        setJsonEditorError(error instanceof Error ? error.message : 'AutoForm could not apply this payload.');\n      }\n    },\n    [methods, payloadContextBase, payloadParser, resolvedSchema.isProto, resolvedSchema.protoDesc]\n  );\n\n  const handleJsonTextChange = React.useCallback(\n    (value: string) => {\n      setJsonEditorText(value);\n      try {\n        const parsed = JSON.parse(value);\n        setJsonEditorError(undefined);\n        void applyPayloadToForm(parsed);\n      } catch (error) {\n        setJsonEditorError(error instanceof Error ? error.message : 'Invalid JSON');\n      }\n    },\n    [applyPayloadToForm]\n  );\n\n  const handleResetJson = React.useCallback(() => {\n    setJsonEditorError(undefined);\n    setJsonEditorText(payloadText);\n  }, [payloadText]);\n\n  const handleFormatJson = React.useCallback(() => {\n    try {\n      const parsed = JSON.parse(jsonEditorText);\n      const formatted = JSON.stringify(parsed, null, 2);\n      setJsonEditorText(formatted);\n      setJsonEditorError(undefined);\n      void applyPayloadToForm(parsed);\n    } catch (error) {\n      setJsonEditorError(error instanceof Error ? error.message : 'Invalid JSON');\n    }\n  }, [applyPayloadToForm, jsonEditorText]);\n\n  const summaryContext = React.useMemo<AutoFormSummaryContext<TNativeForm>>(\n    () => ({\n      ...(payloadContextBase as AutoFormPayloadBuilderContext<TNativeForm>),\n      payload: payloadState.payload,\n      bestEffort: payloadState.bestEffort,\n    }),\n    [payloadContextBase, payloadState.bestEffort, payloadState.payload]\n  );\n\n  return (\n    <>\n      {renderContent({\n        payloadState,\n        jsonEditorText,\n        jsonEditorError,\n        payloadText,\n        summaryContext,\n        handleJsonTextChange,\n        handleResetJson,\n        handleFormatJson,\n      })}\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AutoFormRuntimeProvider — provides the AutoFormContext with live form values.\n// Payload computation is delegated to the AutoFormPayloadController child.\n// ---------------------------------------------------------------------------\n\nexport function AutoFormRuntimeProvider<TNativeForm>({\n  children: _children,\n  uiComponents,\n  formComponents,\n  testIdPrefix,\n  fieldRegistry,\n  conversionOptions,\n  dataProviders,\n  deprecatedFields,\n  resolvedSchema,\n  mode,\n  simpleFields,\n  advancedFields,\n  payloadBuilder,\n  payloadParser,\n  payloadSchema,\n  renderContent,\n  onFieldChange,\n}: AutoFormRuntimeProviderProps<TNativeForm>) {\n  const methods = useAutoFormEngine();\n  const watchedValues = methods.values;\n\n  const prevValuesRef = React.useRef<Record<string, unknown>>(watchedValues);\n\n  React.useEffect(() => {\n    // Note: only fires for root-level field keys. Nested changes (e.g. address.city)\n    // fire as onFieldChange(\"address\", ...) when the parent object reference changes.\n    if (!onFieldChange) return;\n    const prev = prevValuesRef.current;\n    for (const key of Object.keys(watchedValues)) {\n      if (watchedValues[key] !== prev[key]) {\n        void onFieldChange(key, watchedValues[key], methods.nativeForm as TNativeForm);\n      }\n    }\n    prevValuesRef.current = { ...watchedValues };\n  }, [watchedValues, onFieldChange, methods]);\n\n  const contextValue = React.useMemo<AutoFormContextValue>(\n    () => ({\n      uiComponents,\n      formComponents,\n      formValues: watchedValues,\n      evaluateRules: (rules: AutoFormUiRule[] | undefined, fieldValue?: unknown) =>\n        evaluateUiRules(rules, { form: watchedValues, thisValue: fieldValue }),\n      getFieldUiConfig,\n      testIdPrefix,\n      fieldRegistry,\n      dataProviders,\n      deprecatedFields,\n    }),\n    [dataProviders, deprecatedFields, fieldRegistry, formComponents, uiComponents, testIdPrefix, watchedValues]\n  );\n\n  return (\n    <AutoFormContext.Provider value={contextValue}>\n      <AutoFormPayloadController<TNativeForm>\n        advancedFields={advancedFields}\n        conversionOptions={conversionOptions}\n        methods={methods}\n        mode={mode}\n        payloadBuilder={payloadBuilder}\n        payloadParser={payloadParser}\n        payloadSchema={payloadSchema}\n        renderContent={renderContent}\n        resolvedSchema={resolvedSchema}\n        simpleFields={simpleFields}\n        watchedValues={watchedValues}\n      />\n    </AutoFormContext.Provider>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/schema.ts",
      "content": "import type { ParsedField, SchemaProvider } from './core-types';\nimport type { Message } from '@bufbuild/protobuf';\nimport type { ProtoConversionOptions } from '../../lib/protobuf-provider';\nimport { sortFieldsByOrder } from './field-utils';\nimport { isProtoMessageDescriptor, isProtoProvider, ProtoProvider } from './proto';\nimport type {\n  AutoFormSchemaInput,\n  FieldConfigMap,\n  FieldTypes,\n  RenderFieldConfig,\n  ResolvedSchema,\n} from './types';\n\nfunction isSchemaProvider(value: unknown): value is SchemaProvider<Record<string, unknown>> {\n  return Boolean(\n    value &&\n      typeof value === 'object' &&\n      'parseSchema' in value &&\n      typeof (value as SchemaProvider<Record<string, unknown>>).parseSchema === 'function' &&\n      'validateSchema' in value &&\n      typeof (value as SchemaProvider<Record<string, unknown>>).validateSchema === 'function' &&\n      'getDefaultValues' in value &&\n      typeof (value as SchemaProvider<Record<string, unknown>>).getDefaultValues === 'function'\n  );\n}\n\nexport { normalizeProtoInitialValues } from './proto';\n\nexport function resolveSchema<T extends Record<string, unknown>>(\n  schemaInput: AutoFormSchemaInput<T>,\n  conversionOptions: ProtoConversionOptions = {},\n  protoSource?: Message\n): ResolvedSchema {\n  if (isSchemaProvider(schemaInput)) {\n    const provider = schemaInput as SchemaProvider<Record<string, unknown>>;\n    const parsedSchema = provider.parseSchema();\n\n    if (isProtoProvider(provider)) {\n      const protoDesc = provider.getMessageDescriptor();\n      return {\n        provider,\n        parsedSchema,\n        isProto: true,\n        protoDesc,\n        protoSource,\n      };\n    }\n\n    return {\n      provider,\n      parsedSchema,\n      isProto: false,\n    };\n  }\n\n  if (isProtoMessageDescriptor(schemaInput)) {\n    const provider = new ProtoProvider(schemaInput, conversionOptions);\n    return {\n      provider,\n      parsedSchema: provider.parseSchema(),\n      isProto: true,\n      protoDesc: schemaInput,\n      protoSource,\n    };\n  }\n\n  throw new Error('Unsupported AutoForm schema input. Pass a SchemaProvider or a Buf message descriptor.');\n}\n\nexport function protoConversionOptionsFromFieldConfig<TCustom extends string>(\n  fieldConfig: FieldConfigMap<TCustom> | undefined\n): ProtoConversionOptions {\n  const emptyRepeatedStringPolicies = Object.fromEntries(\n    Object.entries(fieldConfig ?? {}).flatMap(([path, config]) =>\n      config.emptyRepeatedStringPolicy\n        ? [[path, config.emptyRepeatedStringPolicy] as const]\n        : []\n    )\n  );\n  return Object.keys(emptyRepeatedStringPolicies).length > 0\n    ? { emptyRepeatedStringPolicies }\n    : {};\n}\n\nexport function mergeFieldOverrides<TCustom extends string = never>(\n  fields: ParsedField[] | undefined,\n  overrides: FieldConfigMap<TCustom> | undefined,\n  path: string[] = []\n): ParsedField<FieldTypes<TCustom>>[] {\n  if (!fields) {\n    return [];\n  }\n\n  return sortFieldsByOrder(\n    fields.map((field) => {\n      const fieldPath = [...path, field.key].join('.');\n      const override = overrides?.[fieldPath];\n      const existingConfig = field.fieldConfig as RenderFieldConfig<TCustom> | undefined;\n      const mergedFieldConfig: RenderFieldConfig<TCustom> | undefined = override\n        ? ({\n            ...(existingConfig ?? {}),\n            ...override,\n            inputProps: {\n              ...(existingConfig?.inputProps ?? {}),\n              ...(override.inputProps ?? {}),\n            },\n            customData: {\n              ...(existingConfig?.customData ?? {}),\n              ...(override.customData ?? {}),\n            },\n          } as RenderFieldConfig<TCustom>)\n        : existingConfig;\n\n      const nextSchema = field.schema?.length\n        ? mergeFieldOverrides(field.schema, overrides, [...path, field.key])\n        : field.schema;\n\n      return {\n        ...field,\n        fieldConfig: mergedFieldConfig,\n        schema: nextSchema,\n      } as ParsedField<FieldTypes<TCustom>>;\n    })\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/slot.tsx",
      "content": "'use client';\n\nimport type React from 'react';\n\ntype AutoFormSlotProps = {\n  /** Render this slot before the field with this key */\n  before?: string;\n  /** Render this slot after the field with this key */\n  after?: string;\n  children: React.ReactNode;\n};\n\nfunction AutoFormSlot({ children }: AutoFormSlotProps) {\n  // AutoFormSlot is a marker component — its props are read by AutoFormFields\n  // to determine placement. It never renders itself directly.\n  return <>{children}</>;\n}\n\n// Sentinel to identify AutoFormSlot elements in children\nAutoFormSlot.displayName = 'AutoFormSlot';\n\nexport { AutoFormSlot, type AutoFormSlotProps };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/stepper.tsx",
      "content": "'use client';\n\nimport { Check } from 'lucide-react';\nimport React from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { Heading, Text } from '@/registry/base-nova/protoform/components/typography';\n\nimport type { ParsedField } from './core-types';\nimport { FormDepthProvider, useFormDepth } from './layout-context';\nimport type { AutoFormStep, AutoFormStepperOrientation } from './types';\n\nfunction fieldStep(field: ParsedField, firstStepId: string, stepIds: Set<string>): string {\n  const configuredStep = field.hints?.step;\n  return configuredStep && stepIds.has(configuredStep) ? configuredStep : firstStepId;\n}\n\nexport function fieldsForStep(fields: ParsedField[], steps: AutoFormStep[], stepId: string): ParsedField[] {\n  const firstStepId = steps[0]?.id;\n  if (!firstStepId) {\n    return fields;\n  }\n  const stepIds = new Set(steps.map((step) => step.id));\n  return fields.filter((field) => fieldStep(field, firstStepId, stepIds) === stepId);\n}\n\nexport function initialStepIndex(steps: AutoFormStep[], defaultStep: string | undefined): number {\n  const index = defaultStep ? steps.findIndex((step) => step.id === defaultStep) : 0;\n  return index >= 0 ? index : 0;\n}\n\nexport function validateSteps(steps: AutoFormStep[]): void {\n  if (steps.length < 2) {\n    throw new Error('AutoForm stepper requires at least two steps.');\n  }\n  const ids = new Set<string>();\n  for (const step of steps) {\n    if (!step.id.trim()) {\n      throw new Error('AutoForm step ids must not be empty.');\n    }\n    if (ids.has(step.id)) {\n      throw new Error(`AutoForm step ids must be unique. Duplicate: ${step.id}`);\n    }\n    ids.add(step.id);\n  }\n}\n\nfunction StepMarker({\n  index,\n  isComplete,\n  isCurrent,\n}: {\n  index: number;\n  isComplete: boolean;\n  isCurrent: boolean;\n}) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={\n        isCurrent || isComplete\n          ? 'flex size-7 shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-primary-foreground text-xs'\n          : 'flex size-7 shrink-0 items-center justify-center rounded-full border border-border bg-background font-semibold text-muted-foreground text-xs'\n      }\n      data-slot=\"step-marker\"\n    >\n      {isComplete ? <Check className=\"size-4\" /> : index + 1}\n    </span>\n  );\n}\n\nexport function AutoFormStepIndicator({\n  steps,\n  currentIndex,\n  orientation,\n}: {\n  steps: AutoFormStep[];\n  currentIndex: number;\n  orientation: AutoFormStepperOrientation;\n}) {\n  return (\n    <nav aria-label=\"Form progress\" className=\"@container space-y-3\" data-orientation={orientation}>\n      <Text aria-live=\"polite\" className=\"text-muted-foreground\" variant=\"small\">\n        Step {currentIndex + 1} of {steps.length}\n      </Text>\n      <ol\n        className={\n          orientation === 'vertical'\n            ? 'flex flex-col'\n            : 'grid gap-0'\n        }\n        data-layout={orientation === 'horizontal' ? 'adaptive-horizontal' : undefined}\n        style={orientation === 'horizontal' ? { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` } : undefined}\n      >\n        {steps.map((step, index) => {\n          const isCurrent = index === currentIndex;\n          const isComplete = index < currentIndex;\n\n          if (orientation === 'vertical') {\n            return (\n              <li\n                aria-current={isCurrent ? 'step' : undefined}\n                className=\"flex min-w-0 gap-3\"\n                data-state={isCurrent ? 'current' : isComplete ? 'complete' : 'upcoming'}\n                key={step.id}\n              >\n                <span className=\"sr-only\">\n                  {step.title}, {isCurrent ? 'current step' : isComplete ? 'completed' : 'upcoming step'}\n                </span>\n                <span aria-hidden=\"true\" className=\"flex flex-col items-center\">\n                  <StepMarker index={index} isComplete={isComplete} isCurrent={isCurrent} />\n                  {index < steps.length - 1 ? (\n                    <span\n                      className={isComplete ? 'min-h-5 w-px flex-1 bg-primary' : 'min-h-5 w-px flex-1 bg-border'}\n                      data-orientation=\"vertical\"\n                      data-testid=\"step-connector\"\n                    />\n                  ) : null}\n                </span>\n                <span\n                  aria-hidden=\"true\"\n                  className={\n                    isCurrent\n                      ? 'min-w-0 pb-5 pt-1 font-semibold text-sm'\n                      : 'min-w-0 pb-5 pt-1 text-muted-foreground text-sm'\n                  }\n                  data-slot=\"step-label\"\n                >\n                  {step.title}\n                </span>\n              </li>\n            );\n          }\n\n          return (\n            <li\n              aria-current={isCurrent ? 'step' : undefined}\n              className=\"flex min-w-0 items-start\"\n              data-state={isCurrent ? 'current' : isComplete ? 'complete' : 'upcoming'}\n              key={step.id}\n            >\n              <span className=\"sr-only\">\n                {step.title}, {isCurrent ? 'current step' : isComplete ? 'completed' : 'upcoming step'}\n              </span>\n              <span className=\"flex min-w-0 shrink-0 flex-col items-center gap-1.5 @min-[30rem]:w-16 @min-[64rem]:w-auto @min-[64rem]:flex-row @min-[64rem]:gap-2\">\n                <StepMarker index={index} isComplete={isComplete} isCurrent={isCurrent} />\n                <span\n                  aria-hidden=\"true\"\n                  className={\n                    isCurrent\n                      ? 'hidden w-full truncate text-center font-semibold text-xs @min-[30rem]:block @min-[64rem]:w-auto @min-[64rem]:max-w-32 @min-[64rem]:text-left @min-[64rem]:text-sm'\n                      : 'hidden w-full truncate text-center text-muted-foreground text-xs @min-[30rem]:block @min-[64rem]:w-auto @min-[64rem]:max-w-32 @min-[64rem]:text-left @min-[64rem]:text-sm'\n                  }\n                  data-slot=\"step-label\"\n                >\n                  {step.title}\n                </span>\n              </span>\n              {index < steps.length - 1 ? (\n                <span\n                  aria-hidden=\"true\"\n                  className={isComplete ? 'mt-3.5 h-px min-w-0 flex-1 bg-primary' : 'mt-3.5 h-px min-w-0 flex-1 bg-border'}\n                  data-orientation=\"horizontal\"\n                  data-testid=\"step-connector\"\n                />\n              ) : null}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nexport function AutoFormStepPanel({\n  children,\n  currentIndex,\n  onBack,\n  onContinue,\n  isAdvancing,\n  orientation,\n  step,\n  steps,\n  submit,\n}: {\n  children: React.ReactNode;\n  currentIndex: number;\n  onBack: () => void;\n  onContinue: () => void | Promise<void>;\n  isAdvancing: boolean;\n  orientation: AutoFormStepperOrientation;\n  step: AutoFormStep;\n  steps: AutoFormStep[];\n  submit: React.ReactNode;\n}) {\n  const isLastStep = currentIndex === steps.length - 1;\n  const depth = useFormDepth();\n\n  return (\n    <div className=\"space-y-6\">\n      <div\n        className={\n          orientation === 'vertical'\n            ? 'grid items-start gap-6 md:grid-cols-[minmax(10rem,0.26fr)_minmax(0,1fr)] md:gap-8'\n            : 'space-y-6'\n        }\n        data-layout={`stepper-${orientation}`}\n      >\n        <AutoFormStepIndicator currentIndex={currentIndex} orientation={orientation} steps={steps} />\n        <section\n          aria-labelledby={`autoform-step-${step.id}`}\n          className=\"grid items-start gap-6 border-border/60 border-y py-7 sm:grid-cols-[minmax(10rem,0.34fr)_minmax(0,1fr)] sm:gap-x-8\"\n          data-layout=\"split\"\n        >\n          <header className=\"space-y-1\">\n            <Heading id={`autoform-step-${step.id}`} level={3}>\n              {step.title}\n            </Heading>\n            {step.description ? (\n              <Text className=\"text-muted-foreground\" variant=\"small\">\n                {step.description}\n              </Text>\n            ) : null}\n          </header>\n          <FormDepthProvider depth={depth + 1}>\n            <div className=\"min-w-0\">{children}</div>\n          </FormDepthProvider>\n        </section>\n      </div>\n      <div\n        className=\"sticky bottom-0 z-10 -mx-2 flex flex-wrap items-center justify-between gap-3 border-border/60 border-t bg-background/95 px-2 py-4 backdrop-blur supports-[backdrop-filter]:bg-background/85\"\n        data-slot=\"auto-form-actions\"\n      >\n        {currentIndex > 0 ? (\n          <Button onClick={onBack} type=\"button\" variant=\"outline\">\n            Back\n          </Button>\n        ) : (\n          <span />\n        )}\n        {isLastStep ? (\n          submit\n        ) : (\n          <Button disabled={isAdvancing} onClick={onContinue} type=\"button\">\n            {isAdvancing ? 'Checking…' : 'Continue'}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/test-ids.ts",
      "content": "const DEFAULT_AUTOFORM_TEST_ID_PREFIX = 'autoform';\n\nfunction normalizeSegment(value: string | number | null | undefined): string {\n  if (value === undefined || value === null) {\n    return '';\n  }\n\n  return String(value)\n    .trim()\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .toLowerCase()\n    .replace(/[\\s._[\\]]+/g, '-')\n    .replace(/[^a-z0-9-]+/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '');\n}\n\nexport function resolveAutoFormTestIdPrefix(testId?: string): string {\n  return normalizeSegment(testId) || DEFAULT_AUTOFORM_TEST_ID_PREFIX;\n}\n\nexport function buildAutoFormTestId(prefix: string, ...segments: Array<string | number | null | undefined>): string {\n  const normalizedSegments = segments.map(normalizeSegment).filter(Boolean);\n  return [resolveAutoFormTestIdPrefix(prefix), ...normalizedSegments].join('-');\n}\n\nexport function getAutoFormFieldTestId(prefix: string, path: string | string[], slot?: string | number): string {\n  const normalizedPath = Array.isArray(path) ? path.join('.') : path;\n  return buildAutoFormTestId(prefix, 'field', normalizedPath, slot);\n}\n\nexport function getAutoFormCollectionRowTestId(prefix: string, path: string | string[], index: number): string {\n  return getAutoFormFieldTestId(prefix, path, `row-${index}`);\n}\n\nexport function getAutoFormCollectionRemoveTestId(prefix: string, path: string | string[], index: number): string {\n  return getAutoFormFieldTestId(prefix, path, `remove-${index}`);\n}\n\nexport function getAutoFormChoiceTestId(\n  prefix: string,\n  path: string | string[],\n  kind: 'option' | 'group' | 'selected',\n  value: string | number\n): string {\n  return getAutoFormFieldTestId(prefix, path, `${kind}-${value}`);\n}\n\nexport { DEFAULT_AUTOFORM_TEST_ID_PREFIX };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/types.ts",
      "content": "import type { DescMessage, Message } from '@bufbuild/protobuf';\nimport type { FieldMask } from '@bufbuild/protobuf/wkt';\nimport type { ReactNode } from 'react';\n\nimport type {\n  AutoFormFieldComponents,\n  AutoFormUIComponents,\n  FieldConfig,\n  ParsedField,\n  ParsedSchema,\n  SchemaProvider,\n} from './core-types';\nimport type { AutoFormEngineHandle } from './engine';\nimport type { ProtoFieldRenderType, ProtoUiRule } from './proto';\nimport type { FieldTypeRegistry } from './registry';\n\nexport type AutoFormMode = 'simple' | 'advanced' | 'json';\nexport type AutoFormValidationMode = 'submit' | 'blur' | 'change';\nexport type AutoFormRevalidationMode = Exclude<AutoFormValidationMode, 'submit'>;\nexport type AutoFormStepperOrientation = 'horizontal' | 'vertical';\nexport type AutoFormRootHeaderMode = 'auto' | 'hidden';\nexport type DeprecatedFieldPolicy = 'show' | 'disable' | 'hide';\n\nexport type AutoFormRootHeaderMetadata = {\n  description?: string;\n  title?: string;\n};\n\nexport type AutoFormStep = {\n  description?: ReactNode;\n  id: string;\n  title: string;\n};\n\nexport type AutoFormStepperConfig = {\n  defaultStep?: string;\n  orientation?: AutoFormStepperOrientation;\n  steps: AutoFormStep[];\n};\n\nexport type AutoFormOptionItem = {\n  value: string;\n  label?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport type AutoFormOptionGroup = {\n  label?: ReactNode;\n  options: AutoFormOptionItem[];\n};\n\nexport type BuiltInFieldType = ProtoFieldRenderType | 'dataProviderMultiSelect' | 'date' | 'slider';\nexport type FieldTypes<TCustom extends string = never> = BuiltInFieldType | TCustom;\n\nexport type RenderFieldConfig<TCustom extends string = never> = FieldConfig<\n  FieldTypes<TCustom>,\n  Record<string, unknown>\n>;\nexport type FieldConfigMap<TCustom extends string = never> = Record<\n  string,\n  RenderFieldConfig<TCustom>\n>;\nexport type AutoFormSchemaInput<T extends Record<string, unknown>> = SchemaProvider<T> | DescMessage;\n\nexport type AutoFormUiRule = ProtoUiRule;\n\nexport type ResolvedSchema = {\n  provider: SchemaProvider<Record<string, unknown>>;\n  parsedSchema: ParsedSchema;\n  isProto: boolean;\n  protoDesc?: DescMessage;\n  protoSource?: Message;\n};\n\nexport type AutoFormPayloadBuilderContext<TNativeForm = unknown> = {\n  form: TNativeForm;\n  autoForm: AutoFormEngineHandle;\n  schema: ParsedSchema;\n  isProto: boolean;\n  protoDesc?: DescMessage;\n  mode: AutoFormMode;\n  simpleFields: ParsedField[];\n  advancedFields: ParsedField[];\n};\n\nexport type AutoFormSummaryContext<TNativeForm = unknown> =\n  AutoFormPayloadBuilderContext<TNativeForm> & {\n    payload: unknown;\n    bestEffort: boolean;\n  };\n\nexport type AutoFormSubmitContext = {\n  /** Aborted when a newer submit supersedes this attempt or the form unmounts. */\n  signal: AbortSignal;\n  /** Engine-neutral operations for callbacks shared across form engines. */\n  form: AutoFormEngineHandle;\n  /** Dirty, writable protobuf paths since the form was initialized or reset. */\n  updateMask?: FieldMask;\n};\n\nexport type AutoFormProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n  TNativeForm = unknown,\n  TFormOptions = unknown,\n  TResolver = unknown,\n  TCustomFieldType extends string = never,\n> = {\n  schema: AutoFormSchemaInput<T>;\n  /**\n   * Called when a root-level field value changes. Note: nested changes (e.g.\n   * address.city) fire as onFieldChange('address', {...}) when the parent\n   * object reference changes — the callback receives the root-level key, not\n   * the dotted sub-path.\n   */\n  onFieldChange?: (\n    fieldPath: string,\n    value: unknown,\n    form: TNativeForm\n  ) => void | Promise<void>;\n  testId?: string;\n  onSubmit?: (\n    values: T,\n    form: TNativeForm,\n    context: AutoFormSubmitContext\n  ) => void | Promise<void>;\n  defaultValues?: Partial<T> | Partial<Record<string, unknown>>;\n  values?: Partial<T> | Partial<Record<string, unknown>>;\n  children?: React.ReactNode;\n  uiComponents?: Partial<AutoFormUIComponents>;\n  formComponents?: Partial<AutoFormFieldComponents<FieldTypes<TCustomFieldType>>>;\n  withSubmit?: boolean;\n  onFormInit?: (form: TNativeForm) => void;\n  /** Reports distinct engine-neutral dirty-state transitions, including the initial clean state. */\n  onDirtyChange?: (isDirty: boolean) => void;\n  /** Controls whether schema-provided root metadata is shown. */\n  rootHeader?: AutoFormRootHeaderMode;\n  /** Replaces the default root header while preserving resolved schema metadata. */\n  renderRootHeader?: (metadata: AutoFormRootHeaderMetadata) => ReactNode;\n  /** Presentation policy for fields marked deprecated by the schema. */\n  deprecatedFields?: DeprecatedFieldPolicy;\n  formProps?: React.ComponentProps<'form'> | Record<string, unknown>;\n  fieldConfig?: FieldConfigMap<TCustomFieldType>;\n  formOptions?: TFormOptions;\n  resolver?: TResolver;\n  modes?: AutoFormMode[];\n  defaultMode?: AutoFormMode;\n  /** Shared validation lifecycle across supported AutoForm engines. */\n  validationMode?: AutoFormValidationMode;\n  /** Lifecycle used after the first submit attempt. */\n  revalidationMode?: AutoFormRevalidationMode;\n  /** Opt-in linear flow. Field membership comes from schema-agnostic `hints.step` metadata. */\n  stepper?: AutoFormStepperConfig;\n  showSummary?: boolean;\n  renderSummary?: (payload: unknown, context: AutoFormSummaryContext<TNativeForm>) => React.ReactNode;\n  fieldRegistry?: FieldTypeRegistry<FieldTypes<TCustomFieldType>>;\n  /**\n   * Named data-source implementations consumed by dropdown-style controls\n   * annotated with `field_ui.data_provider`. The keys mirror the proto\n   * `DataProviderId` enum (snake-cased or exact string). Values are React\n   * hooks returning `{ options, isLoading?, error? }` — AutoForm never\n   * inspects internals, so providers can be static arrays or RPC-backed.\n   *\n   * A CI test (see `__tests__/data-providers.test.ts`) enumerates proto\n   * descriptors and asserts every referenced id is registered here.\n   */\n  dataProviders?: import('./data-providers').DataProviderRegistry;\n  classifyField?: (\n    field: ParsedField<FieldTypes<TCustomFieldType>>\n  ) => 'simple' | 'advanced';\n  payloadSchema?: {\n    safeParse: (data: unknown) => { success: boolean; error?: { issues: Array<{ path: unknown[]; message: string }> } };\n  };\n  payloadBuilder?: (\n    values: Record<string, unknown>,\n    context: AutoFormPayloadBuilderContext<TNativeForm>\n  ) => unknown;\n  payloadParser?: (\n    payload: unknown,\n    context: AutoFormPayloadBuilderContext<TNativeForm>\n  ) => Record<string, unknown> | undefined | Promise<Record<string, unknown> | undefined>;\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/cel-runtime.ts",
      "content": "import {\n  CelScalar,\n  type CelError,\n  celEnv,\n  celError,\n  celFunc,\n  isCelError,\n  parse,\n  plan,\n} from '@bufbuild/cel';\n\ntype CelExpr = NonNullable<ReturnType<typeof parse>['expr']>;\n\nconst CONDITIONAL_FUNCTION = '_?_:_';\nconst INDEX_FUNCTION = '_[_]';\nconst COST_FUNCTION = 'protoform.consume_cost';\nconst UNKNOWN_ERROR_PREFIX = 'protoform unknown attribute: ';\n\nexport const DEFAULT_CEL_MAX_COST = 10_000;\n\nexport interface CompileCelExpressionOptions {\n  maxCost?: number;\n  unknownAttributes?: readonly string[];\n}\n\nexport type CelEvaluation =\n  | { cost: number; kind: 'value'; value: unknown }\n  | { attributes: readonly string[]; cost: number; kind: 'unknown' }\n  | { cost: number; error: CelError; kind: 'error' }\n  | { cost: number; kind: 'cost-exceeded'; limit: number };\n\nexport type CompiledCelExpression = (\n  bindings?: Record<string, unknown>\n) => CelEvaluation;\n\ninterface EvaluationBudget {\n  cost: number;\n  limit: number;\n}\n\nclass CelCostLimitError extends Error {\n  constructor(\n    readonly cost: number,\n    readonly limit: number\n  ) {\n    super(`CEL evaluation cost ${cost} exceeds limit ${limit}.`);\n    this.name = 'CelCostLimitError';\n  }\n}\n\nfunction childExpressions(expr: CelExpr): CelExpr[] {\n  switch (expr.exprKind.case) {\n    case 'callExpr':\n      return expr.exprKind.value.target\n        ? [expr.exprKind.value.target, ...expr.exprKind.value.args]\n        : expr.exprKind.value.args;\n    case 'comprehensionExpr': {\n      const comprehension = expr.exprKind.value;\n      return [\n        comprehension.iterRange,\n        comprehension.accuInit,\n        comprehension.loopCondition,\n        comprehension.loopStep,\n        comprehension.result,\n      ].filter((child): child is CelExpr => child !== undefined);\n    }\n    case 'listExpr':\n      return expr.exprKind.value.elements;\n    case 'selectExpr':\n      return expr.exprKind.value.operand ? [expr.exprKind.value.operand] : [];\n    case 'structExpr':\n      return expr.exprKind.value.entries.flatMap((entry) => {\n        const children: CelExpr[] = [];\n        if (entry.keyKind.case === 'mapKey') {\n          children.push(entry.keyKind.value);\n        }\n        if (entry.value) {\n          children.push(entry.value);\n        }\n        return children;\n      });\n    case 'constExpr':\n    case 'identExpr':\n    case undefined:\n      return [];\n    default: {\n      const exhaustive: never = expr.exprKind;\n      return exhaustive;\n    }\n  }\n}\n\nfunction maximumExpressionId(expr: CelExpr): bigint {\n  return childExpressions(expr).reduce(\n    (maximum, child) => {\n      const childMaximum = maximumExpressionId(child);\n      return childMaximum > maximum ? childMaximum : maximum;\n    },\n    expr.id\n  );\n}\n\nfunction constantPathSegment(expr: CelExpr): string | undefined {\n  if (expr.exprKind.case !== 'constExpr') {\n    return undefined;\n  }\n\n  const constant = expr.exprKind.value.constantKind;\n  switch (constant.case) {\n    case 'stringValue':\n      return /^[A-Za-z_][A-Za-z0-9_]*$/.test(constant.value)\n        ? `.${constant.value}`\n        : `[${JSON.stringify(constant.value)}]`;\n    case 'int64Value':\n      return `[${constant.value}]`;\n    case 'uint64Value':\n      return `[${constant.value}]`;\n    case 'boolValue':\n    case 'bytesValue':\n    case 'doubleValue':\n    case 'durationValue':\n    case 'nullValue':\n    case 'timestampValue':\n    case undefined:\n      return undefined;\n    default: {\n      const exhaustive: never = constant;\n      return exhaustive;\n    }\n  }\n}\n\nfunction attributePath(expr: CelExpr): string | undefined {\n  switch (expr.exprKind.case) {\n    case 'identExpr':\n      return expr.exprKind.value.name;\n    case 'selectExpr': {\n      const operand = expr.exprKind.value.operand;\n      const parent = operand ? attributePath(operand) : undefined;\n      return parent ? `${parent}.${expr.exprKind.value.field}` : undefined;\n    }\n    case 'callExpr': {\n      const call = expr.exprKind.value;\n      if (call.function !== INDEX_FUNCTION || call.args.length !== 2) {\n        return undefined;\n      }\n      const parent = call.args[0] ? attributePath(call.args[0]) : undefined;\n      const segment = call.args[1]\n        ? constantPathSegment(call.args[1])\n        : undefined;\n      return parent && segment ? `${parent}${segment}` : undefined;\n    }\n    case 'comprehensionExpr':\n    case 'constExpr':\n    case 'listExpr':\n    case 'structExpr':\n    case undefined:\n      return undefined;\n    default: {\n      const exhaustive: never = expr.exprKind;\n      return exhaustive;\n    }\n  }\n}\n\nfunction replaceWithIdentifier(expr: CelExpr, name: string): void {\n  expr.exprKind = {\n    case: 'identExpr',\n    value: {\n      $typeName: 'cel.expr.Expr.Ident',\n      name,\n    },\n  };\n}\n\nfunction replaceUnknownAttributes(\n  expr: CelExpr,\n  unknownAttributes: ReadonlySet<string>,\n  unknownBindings: Map<string, string>\n): void {\n  const path = attributePath(expr);\n  if (path && unknownAttributes.has(path)) {\n    let name = [...unknownBindings].find(([, value]) => value === path)?.[0];\n    if (!name) {\n      name = `_protoform_unknown_${unknownBindings.size}`;\n      unknownBindings.set(name, path);\n    }\n    replaceWithIdentifier(expr, name);\n    return;\n  }\n\n  for (const child of childExpressions(expr)) {\n    replaceUnknownAttributes(child, unknownAttributes, unknownBindings);\n  }\n}\n\nfunction createCostCall(template: CelExpr, id: bigint): CelExpr {\n  const expr = structuredClone(template);\n  expr.id = id;\n  expr.exprKind = {\n    case: 'callExpr',\n    value: {\n      $typeName: 'cel.expr.Expr.Call',\n      args: [],\n      function: COST_FUNCTION,\n    },\n  };\n  return expr;\n}\n\nfunction createBooleanConstant(\n  template: CelExpr,\n  id: bigint,\n  value: boolean\n): CelExpr {\n  const expr = structuredClone(template);\n  expr.id = id;\n  expr.exprKind = {\n    case: 'constExpr',\n    value: {\n      $typeName: 'cel.expr.Constant',\n      constantKind: { case: 'boolValue', value },\n    },\n  };\n  return expr;\n}\n\nfunction instrumentCost(\n  expr: CelExpr,\n  nextExpressionId: () => bigint\n): void {\n  for (const child of childExpressions(expr)) {\n    instrumentCost(child, nextExpressionId);\n  }\n\n  const original = structuredClone(expr);\n  expr.id = nextExpressionId();\n  expr.exprKind = {\n    case: 'callExpr',\n    value: {\n      $typeName: 'cel.expr.Expr.Call',\n      args: [\n        createCostCall(original, nextExpressionId()),\n        original,\n        createBooleanConstant(original, nextExpressionId(), false),\n      ],\n      function: CONDITIONAL_FUNCTION,\n    },\n  };\n}\n\nfunction collectUnknownAttributes(\n  value: unknown,\n  attributes: Set<string>,\n  visited: Set<object>\n): void {\n  if (Array.isArray(value)) {\n    for (const item of value) {\n      collectUnknownAttributes(item, attributes, visited);\n    }\n    return;\n  }\n  if (!isCelError(value) || visited.has(value)) {\n    return;\n  }\n\n  visited.add(value);\n  if (value.message.startsWith(UNKNOWN_ERROR_PREFIX)) {\n    attributes.add(value.message.slice(UNKNOWN_ERROR_PREFIX.length));\n  }\n  collectUnknownAttributes(value.cause, attributes, visited);\n}\n\nfunction findCostLimitError(\n  value: unknown,\n  visited = new Set<object>()\n): CelCostLimitError | undefined {\n  if (value instanceof CelCostLimitError) {\n    return value;\n  }\n  if (Array.isArray(value)) {\n    for (const item of value) {\n      const found = findCostLimitError(item, visited);\n      if (found) {\n        return found;\n      }\n    }\n    return undefined;\n  }\n  if (!isCelError(value) || visited.has(value)) {\n    return undefined;\n  }\n\n  visited.add(value);\n  return findCostLimitError(value.cause, visited);\n}\n\nfunction validateMaxCost(value: number): number {\n  if (!(Number.isSafeInteger(value) && value > 0)) {\n    throw new RangeError('CEL maxCost must be a positive safe integer.');\n  }\n  return value;\n}\n\n/** Compile a reusable CEL evaluator with partial unknowns and a per-run step budget. */\nexport function compileCelExpression(\n  expression: string,\n  options: CompileCelExpressionOptions = {}\n): CompiledCelExpression {\n  const maxCost = validateMaxCost(options.maxCost ?? DEFAULT_CEL_MAX_COST);\n  const parsed = parse(expression);\n  if (!parsed.expr) {\n    throw new Error('CEL parser returned an empty expression.');\n  }\n\n  const expr = structuredClone(parsed.expr);\n  const unknownBindings = new Map<string, string>();\n  replaceUnknownAttributes(\n    expr,\n    new Set(options.unknownAttributes ?? []),\n    unknownBindings\n  );\n\n  let expressionId = maximumExpressionId(expr) + 1n;\n  const nextExpressionId = () => {\n    const next = expressionId;\n    expressionId += 1n;\n    return next;\n  };\n  instrumentCost(expr, nextExpressionId);\n\n  let activeBudget: EvaluationBudget | undefined;\n  const consumeCost = celFunc(\n    COST_FUNCTION,\n    [],\n    CelScalar.BOOL,\n    (): boolean => {\n      if (!activeBudget) {\n        throw new Error('CEL cost meter used outside an evaluation.');\n      }\n      activeBudget.cost += 1;\n      if (activeBudget.cost > activeBudget.limit) {\n        throw new CelCostLimitError(activeBudget.cost, activeBudget.limit);\n      }\n      return true;\n    }\n  );\n  const evaluate = plan(celEnv({ funcs: [consumeCost] }), expr);\n\n  return (bindings = {}) => {\n    const budget: EvaluationBudget = { cost: 0, limit: maxCost };\n    activeBudget = budget;\n    try {\n      const activation: Record<string, unknown> = { ...bindings };\n      for (const [name, path] of unknownBindings) {\n        activation[name] = celError(`${UNKNOWN_ERROR_PREFIX}${path}`);\n      }\n\n      const result = evaluate(activation as never);\n      if (!isCelError(result)) {\n        return { cost: budget.cost, kind: 'value', value: result };\n      }\n\n      const costError = findCostLimitError(result);\n      if (costError) {\n        return {\n          cost: costError.cost,\n          kind: 'cost-exceeded',\n          limit: costError.limit,\n        };\n      }\n\n      const attributes = new Set<string>();\n      collectUnknownAttributes(result, attributes, new Set());\n      if (attributes.size > 0) {\n        return {\n          attributes: [...attributes].sort(),\n          cost: budget.cost,\n          kind: 'unknown',\n        };\n      }\n\n      return { cost: budget.cost, error: result, kind: 'error' };\n    } catch (error) {\n      return { cost: budget.cost, error: celError(error), kind: 'error' };\n    } finally {\n      activeBudget = undefined;\n    }\n  };\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/ui-rules.ts",
      "content": "import { compileCelExpression } from './cel-runtime';\nimport type { AutoFormUiRule } from './types';\n\nconst CEL_CACHE_MAX_SIZE = 256;\nconst compiledRuleCache = new Map<\n  string,\n  ReturnType<typeof compileCelExpression>\n>();\n\nfunction getCompiledRule(expression: string) {\n  const cached = compiledRuleCache.get(expression);\n  if (cached) {\n    return cached;\n  }\n\n  if (compiledRuleCache.size >= CEL_CACHE_MAX_SIZE) {\n    const firstKey = compiledRuleCache.keys().next().value;\n    if (firstKey !== undefined) {\n      compiledRuleCache.delete(firstKey);\n    }\n  }\n\n  const compiled = compileCelExpression(expression);\n  compiledRuleCache.set(expression, compiled);\n  return compiled;\n}\n\nexport function evaluateUiRules(\n  rules: AutoFormUiRule[] | undefined,\n  context: {\n    form: Record<string, unknown>;\n    thisValue: unknown;\n  }\n): boolean {\n  if (!rules?.length) {\n    return true;\n  }\n\n  return rules.every((rule) => {\n    try {\n      const result = getCompiledRule(rule.expression)({\n        form: context.form,\n        this: context.thisValue,\n      });\n      return result.kind === 'value' && result.value === true;\n    } catch {\n      return false;\n    }\n  });\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/utils/modes.ts",
      "content": "import type { AutoFormMode } from '../types';\n\nexport function normalizeModes(modes: AutoFormMode[] | undefined): AutoFormMode[] {\n  const resolved = (modes?.length ? modes : ['advanced']).filter(\n    (mode): mode is AutoFormMode => mode === 'simple' || mode === 'advanced' || mode === 'json'\n  );\n  return resolved.length ? Array.from(new Set(resolved)) : ['advanced'];\n}\n\nexport function resolveInitialMode(availableModes: AutoFormMode[], defaultMode?: AutoFormMode): AutoFormMode {\n  if (defaultMode && availableModes.includes(defaultMode)) {\n    return defaultMode;\n  }\n\n  if (availableModes.includes('advanced')) {\n    return 'advanced';\n  }\n\n  return availableModes[0] ?? 'advanced';\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/utils/serialization.ts",
      "content": "export function isPromiseLike<T>(value: T | Promise<T>): value is Promise<T> {\n  return Boolean(value && typeof value === 'object' && 'then' in (value as Record<string, unknown>));\n}\n\nexport function safeStringify(value: unknown): string {\n  try {\n    return JSON.stringify(\n      value,\n      (_key, currentValue) => {\n        if (typeof currentValue === 'bigint') {\n          return currentValue.toString();\n        }\n        if (currentValue instanceof Date) {\n          return currentValue.toISOString();\n        }\n        return currentValue;\n      },\n      2\n    );\n  } catch {\n    return '/* serialization error */';\n  }\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/badge/index.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { Slot } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex max-w-full shrink-0 items-center justify-center overflow-hidden truncate text-ellipsis whitespace-nowrap rounded-md border font-medium transition-[color,box-shadow] selection:bg-selected selection:text-selected-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        // === NEUTRAL (Grey - semantic tokens) ===\n        neutral:\n          'border-transparent bg-background-inverse-subtle text-inverse [a&]:hover:bg-background-inverse-subtle-hover',\n        'neutral-inverted': 'border-transparent bg-surface-subtle [a&]:hover:bg-background-subtle-hover',\n        'neutral-outline': '!border-outline-inverse border [a&]:hover:bg-background-subtle-hover',\n\n        // === SIMPLE (Light grey - semantic tokens) ===\n        simple: 'text-secondary [a&]:hover:bg-background-subtle-hover',\n        'simple-inverted': 'text-secondary [a&]:hover:bg-background-subtle-hover',\n        'simple-outline': '!border-outline-inverse border text-secondary [a&]:hover:bg-background-subtle-hover',\n\n        // === INFO (Blue - semantic tokens) ===\n        info: 'border-transparent bg-surface-informative text-inverse [a&]:hover:bg-surface-informative-hover',\n        'info-inverted':\n          'border-transparent bg-background-informative-subtle text-info [a&]:hover:bg-background-informative-subtle-hover',\n        'info-outline':\n          'border-outline-informative bg-transparent text-info [a&]:hover:bg-background-informative-subtle',\n\n        // === ACCENT (Brand Red - uses theme brand tokens) ===\n        accent: 'border-transparent bg-brand text-inverse [a&]:hover:bg-surface-brand-hover',\n        'accent-inverted': 'border-transparent bg-background-brand-subtle text-brand [a&]:hover:bg-brand-alpha-default',\n        'accent-outline': 'border-outline-brand bg-transparent text-brand [a&]:hover:bg-brand-alpha-subtle',\n\n        // === SUCCESS (Green - semantic tokens) ===\n        success: 'border-transparent bg-surface-success text-inverse [a&]:hover:bg-surface-success-hover',\n        'success-inverted':\n          'border-transparent bg-background-success-subtle text-success [a&]:hover:bg-background-success-subtle-hover',\n        'success-outline': 'border-outline-success bg-transparent text-success [a&]:hover:bg-background-success-subtle',\n\n        // === WARNING (Yellow/Orange - semantic tokens) ===\n        warning: 'border-transparent bg-surface-warning text-inverse [a&]:hover:bg-surface-warning-hover',\n        'warning-inverted': 'border-transparent bg-background-warning-subtle text-warning [a&]:hover:bg-warning-subtle',\n        'warning-outline': 'border-outline-warning bg-transparent text-warning [a&]:hover:bg-background-warning-subtle',\n\n        // === DISABLED (Muted - semantic tokens) ===\n        disabled: 'cursor-not-allowed border-transparent bg-background-disabled text-disabled',\n        'disabled-inverted': 'cursor-not-allowed border-transparent bg-surface-subtle text-disabled',\n        'disabled-outline': 'cursor-not-allowed border-border-strong bg-transparent text-disabled',\n\n        // === DESTRUCTIVE/ERROR (Red - semantic tokens) ===\n        destructive:\n          'border-transparent bg-surface-error text-inverse focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-surface-error-hover',\n        'destructive-inverted':\n          'border-transparent bg-background-error-subtle text-destructive [a&]:hover:bg-destructive-subtle',\n        'destructive-outline':\n          'border-outline-error bg-transparent text-destructive [a&]:hover:bg-background-error-subtle',\n\n        // === SECONDARY (Dark Blue) ===\n        secondary: 'border-transparent bg-secondary text-inverse [a&]:hover:bg-secondary/90',\n        'secondary-inverted': 'border-transparent bg-secondary/10 text-secondary [a&]:hover:bg-secondary/20',\n        'secondary-outline': 'border-secondary text-secondary [a&]:hover:bg-secondary/10',\n\n        // === PRIMARY (Indigo) ===\n        primary: 'border-transparent bg-primary text-inverse [a&]:hover:bg-primary/90',\n        'primary-inverted': 'border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20',\n        'primary-outline': 'border-primary text-primary [a&]:hover:bg-primary/10',\n\n        // === OUTLINE (generic) ===\n        outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n      },\n      size: {\n        // Small: 20px height (from Figma)\n        sm: 'h-5 gap-1 px-1.5 py-0 text-[11px] has-[>svg]:px-1 [&_svg]:size-3',\n        // Medium: 24px height (from Figma)\n        md: 'h-6 gap-1 px-2 py-0 text-xs has-[>svg]:px-1.5 [&_svg]:size-3.5',\n        // Large: 32px height (from Figma)\n        lg: 'h-8 gap-1.5 px-3 py-0 text-sm has-[>svg]:px-2 [&_svg]:size-4',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'md',\n    },\n  }\n);\n\nexport type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];\nexport type BadgeSize = VariantProps<typeof badgeVariants>['size'];\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  testId,\n  icon,\n  children,\n  size,\n  ref,\n  ...props\n}: React.ComponentProps<'span'> &\n  SharedProps & {\n    asChild?: boolean;\n    icon?: React.ReactNode;\n    variant?: BadgeVariant;\n    size?: BadgeSize;\n  }) {\n  const Comp = asChild ? Slot : 'span';\n\n  // When asChild is used with Slot, we can only pass ONE child element\n  // to satisfy React.Children.only(). In asChild mode, users must include\n  // icons inside children instead of using the icon prop.\n  const renderContent = () => {\n    if (asChild) {\n      return children;\n    }\n\n    // Normal badge mode - can have icon + children\n    if (icon && children) {\n      return (\n        <>\n          {icon}\n          <span className=\"truncate\">{children}</span>\n        </>\n      );\n    }\n\n    if (icon) {\n      return icon;\n    }\n\n    if (children) {\n      return <span className=\"truncate\">{children}</span>;\n    }\n\n    return null;\n  };\n\n  return (\n    <Comp\n      className={cn(badgeVariants({ variant, size }), className)}\n      data-slot=\"badge\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    >\n      {renderContent()}\n    </Comp>\n  );\n}\n\nexport { Badge, badgeVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/button/index.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React, { type ElementType } from 'react';\n\nimport { useGroup } from '@/registry/base-nova/protoform/components/group';\nimport { Spinner } from '@/registry/base-nova/protoform/components/spinner';\nimport { Slot } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst buttonVariants = cva(\n  [\n    'group/button inline-flex shrink-0 items-center justify-center',\n    'whitespace-nowrap rounded-lg border border-transparent bg-clip-padding text-sm font-medium',\n    'transition-all outline-none select-none',\n    'cursor-pointer',\n    'disabled:pointer-events-none disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n    'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n    'dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n    'selection:bg-selected selection:text-selected-foreground',\n    'active:not-aria-[haspopup]:translate-y-px',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-4',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary text-primary-foreground shadow-xs',\n          'hover:bg-primary/90',\n          'active:bg-primary/80',\n          undefined,\n        ],\n        secondary: [\n          'bg-surface-primary text-inverse shadow-xs',\n          'hover:bg-surface-primary-hover',\n          'active:bg-surface-primary-pressed',\n          'disabled:bg-background-disabled disabled:text-disabled',\n        ],\n        accent: [\n          'bg-brand text-inverse shadow-xs',\n          'hover:bg-surface-brand-hover',\n          'active:bg-surface-brand-pressed',\n          'disabled:bg-background-disabled disabled:text-disabled',\n        ],\n        destructive: [\n          'bg-destructive text-inverse shadow-xs',\n          'hover:bg-surface-error-hover',\n          'active:bg-surface-error-pressed',\n          'focus-visible:ring-destructive',\n          'disabled:bg-background-disabled disabled:text-disabled',\n        ],\n        inverse: [\n          'bg-surface-inverse text-secondary shadow-xs',\n          'hover:bg-surface-inverse-hover',\n          'active:bg-surface-inverse-pressed',\n          'disabled:bg-surface-inverse-disabled disabled:text-disabled',\n        ],\n        outline: [\n          'border border-input bg-background text-foreground shadow-xs',\n          'hover:bg-muted hover:text-foreground',\n          'active:bg-muted/80',\n        ],\n        'secondary-outline': [\n          '!border-outline-inverse border text-secondary shadow-xs',\n          'hover:border-outline-hover hover:bg-secondary-alpha-subtle',\n          'active:border-outline-pressed active:bg-secondary-alpha-default',\n          'disabled:border-outline-inverse-disabled disabled:text-disabled',\n        ],\n        'accent-outline': [\n          '!border-brand border bg-transparent text-brand shadow-xs',\n          'hover:border-outline-brand-hover hover:bg-brand-alpha-subtle',\n          'active:border-outline-brand-pressed active:bg-brand-alpha-default',\n          'disabled:border-border disabled:text-disabled',\n        ],\n        'destructive-outline': [\n          '!border-destructive border bg-transparent text-destructive shadow-xs',\n          'hover:border-outline-error-hover hover:bg-destructive-alpha-subtle',\n          'active:border-outline-error-pressed active:bg-destructive-alpha-default',\n          'focus-visible:ring-destructive',\n          'disabled:border-border disabled:text-disabled',\n        ],\n        'inverse-outline': [\n          '!border-inverse-primary border bg-transparent text-inverse-primary shadow-xs',\n          'hover:border-transparent hover:bg-light-alpha-strong',\n          'active:border-transparent active:bg-light-alpha-stronger',\n          'disabled:border-inverse-disabled disabled:text-inverse-disabled',\n        ],\n        ghost: [\n          'bg-transparent text-foreground',\n          'hover:bg-muted hover:text-foreground',\n          'active:bg-muted/80',\n        ],\n        'secondary-ghost': [\n          'bg-transparent text-secondary',\n          'hover:bg-surface-secondary-subtle',\n          'active:bg-surface-secondary-subtle-hover',\n          'disabled:text-disabled',\n        ],\n        'accent-ghost': [\n          'bg-transparent text-brand',\n          'hover:bg-surface-brand-subtle hover:text-brand',\n          'active:bg-surface-brand-subtle-hover',\n          'disabled:text-disabled',\n        ],\n        'destructive-ghost': [\n          'bg-transparent text-destructive',\n          'hover:bg-background-error-subtle hover:text-destructive',\n          'active:bg-destructive-subtle',\n          'focus-visible:ring-destructive',\n          'disabled:text-disabled',\n        ],\n        'inverse-ghost': [\n          'bg-transparent text-inverse-primary',\n          'hover:bg-light-alpha-strong',\n          'active:bg-light-alpha-stronger',\n          'disabled:text-inverse-disabled',\n        ],\n        // Link variant\n        link: [\n          'text-primary underline-offset-4',\n          'hover:text-primary/80 hover:underline',\n          'active:text-primary/60',\n          'disabled:text-disabled disabled:no-underline',\n        ],\n        // Dashed border variant\n        dashed: [\n          '!border-primary border-2 border-dashed bg-transparent text-primary',\n          'hover:border-primary/80 hover:bg-primary/5',\n          'active:bg-primary/10',\n          'disabled:border-border disabled:text-disabled',\n        ],\n      },\n      size: {\n        xs: 'h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg]:size-3',\n        sm: 'h-7 gap-1 px-2.5 text-[0.8rem] has-[>svg]:px-2 [&_svg]:size-3.5',\n        md: 'h-8 gap-1.5 px-2.5 has-[>svg]:px-2 [&_svg]:size-4',\n        lg: 'h-9 gap-1.5 px-2.5 has-[>svg]:px-2 [&_svg]:size-4',\n        icon: 'size-8 [&_svg]:size-4',\n        'icon-xs': 'size-6 [&_svg]:size-3',\n        'icon-sm': 'size-7 [&_svg]:size-3.5',\n        'icon-lg': 'size-9 [&_svg]:size-4',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n  ButtonVariants & {\n    asChild?: boolean;\n    as?: ElementType;\n    to?: string;\n    icon?: React.ReactNode;\n    /**\n     * Renders a centered spinner overlay while keeping the button at its\n     * natural width. Also disables interaction and sets aria-busy.\n     */\n    isLoading?: boolean;\n    // Support anchor element props when as=\"a\"\n    href?: string;\n    target?: string;\n    rel?: string;\n  } & SharedProps;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      testId,\n      as,\n      to,\n      icon,\n      isLoading = false,\n      disabled,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = as ?? (asChild ? Slot : 'button');\n    const { attached, position } = useGroup();\n\n    let positionClasses = 'rounded-lg';\n    if (attached && position === 'first') {\n      positionClasses = 'rounded-r-none rounded-l-lg border-r-0';\n    } else if (attached && position === 'last') {\n      positionClasses = 'rounded-r-lg rounded-l-none border-l-0';\n    } else if (attached && position === 'middle') {\n      positionClasses = 'rounded-none border-r-0 border-l-0';\n    }\n\n    const isDisabled = disabled || isLoading;\n\n    // When asChild is used with Slot, we can only pass ONE child element\n    // to satisfy React.Children.only(). In asChild mode, users must include\n    // icons inside children instead of using the icon prop.\n    const renderContent = () => {\n      if (asChild) {\n        return children;\n      }\n\n      // Normal button mode - can have children + icon prop\n      const content = icon ? (\n        <>\n          {children}\n          {icon}\n        </>\n      ) : (\n        children\n      );\n\n      if (isLoading) {\n        return (\n          <>\n            <span className=\"invisible inline-flex items-center justify-center [gap:inherit]\">{content}</span>\n            <span aria-hidden=\"true\" className=\"absolute inset-0 flex items-center justify-center\">\n              <Spinner />\n            </span>\n          </>\n        );\n      }\n\n      return content;\n    };\n\n    return (\n      <Comp\n        aria-busy={isLoading || undefined}\n        className={cn(\n          buttonVariants({ variant, size, className }),\n          positionClasses,\n          icon && 'gap-2',\n          isLoading && 'relative',\n          className\n        )}\n        data-loading={isLoading || undefined}\n        data-slot=\"button\"\n        data-testid={testId}\n        disabled={isDisabled}\n        ref={ref}\n        to={to}\n        {...props}\n      >\n        {renderContent()}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/calendar/index.tsx",
      "content": "'use client';\n\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React from 'react';\nimport { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport { Button, buttonVariants } from '@/registry/base-nova/protoform/components/button';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nfunction CalendarRoot({\n  className,\n  rootRef,\n  ...props\n}: React.ComponentProps<'div'> & { rootRef?: React.Ref<HTMLDivElement> }) {\n  return <div className={cn(className)} data-slot=\"calendar\" ref={rootRef} {...props} />;\n}\n\nfunction CalendarChevron({\n  className,\n  orientation,\n  ...props\n}: {\n  className?: string;\n  orientation?: 'left' | 'right' | 'down' | 'up';\n}) {\n  if (orientation === 'left') {\n    return <ChevronLeftIcon className={cn('size-4', className)} {...props} />;\n  }\n\n  if (orientation === 'right') {\n    return <ChevronRightIcon className={cn('size-4', className)} {...props} />;\n  }\n\n  return <ChevronDownIcon className={cn('size-4', className)} {...props} />;\n}\n\nfunction CalendarWeekNumber({ children, ...props }: React.ComponentProps<'td'>) {\n  return (\n    <td {...props}>\n      <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n    </td>\n  );\n}\n\nconst CalendarRootWithTestId = React.memo(\n  ({ testId, ...props }: React.ComponentProps<typeof CalendarRoot> & { testId?: string }) => (\n    <CalendarRoot {...props} data-testid={testId} />\n  )\n);\n\nCalendarRootWithTestId.displayName = 'CalendarRootWithTestId';\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  formatters,\n  components,\n  testId,\n  ...props\n}: React.ComponentProps<typeof DayPicker> &\n  SharedProps & {\n    buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n  }) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const rootComponent = React.useMemo(\n    () =>\n      ({ ref, ...rootProps }: React.ComponentProps<typeof CalendarRoot> & { ref?: React.Ref<HTMLDivElement> }) => (\n        <CalendarRootWithTestId {...rootProps} rootRef={ref} testId={testId} />\n      ),\n    [testId]\n  );\n\n  return (\n    <DayPicker\n      captionLayout={captionLayout}\n      className={cn(\n        'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm',\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          '!border-input relative rounded-md border shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),\n        caption_label: cn(\n          'select-none font-medium',\n          captionLayout === 'label'\n            ? 'text-sm'\n            : 'flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n          defaultClassNames.caption_label\n        ),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn(\n          'flex-1 select-none rounded-md font-normal text-[0.8rem] text-muted-foreground',\n          defaultClassNames.weekday\n        ),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n        week_number: cn('select-none text-[0.8rem] text-muted-foreground', defaultClassNames.week_number),\n        day: cn(\n          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',\n          defaultClassNames.day\n        ),\n        range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),\n        today: cn(\n          'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',\n          defaultClassNames.today\n        ),\n        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: rootComponent,\n        Chevron: CalendarChevron,\n        DayButton: CalendarDayButton,\n        WeekNumber: CalendarWeekNumber,\n        ...components,\n      }}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),\n        ...formatters,\n      }}\n      showOutsideDays={showOutsideDays}\n      {...props}\n    />\n  );\n}\n\nfunction CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) {\n      ref.current?.focus();\n    }\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      className={cn(\n        'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-start=true]:rounded-l-md data-[range-end=true]:bg-selected data-[range-middle=true]:bg-accent data-[range-start=true]:bg-selected data-[selected-single=true]:bg-selected data-[range-end=true]:text-selected-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-selected-foreground data-[selected-single=true]:text-selected-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-selected group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-selected/50 dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70',\n        defaultClassNames.day,\n        className\n      )}\n      data-day={day.date.toLocaleDateString()}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-range-start={modifiers.range_start}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      ref={ref}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/card/index.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport { type MotionProps, motion } from 'motion/react';\nimport React from 'react';\n\nimport { Heading, Text } from '@/registry/base-nova/protoform/components/typography';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst cardVariants = cva(\n  'flex min-w-0 flex-col rounded-lg border border-border border-solid bg-card text-card-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm gap-2 px-6 py-4',\n        md: 'max-w-md gap-4 px-8 py-6',\n        lg: 'max-w-lg gap-4 px-10 py-8',\n        xl: 'max-w-xl gap-6 px-12 py-10',\n        full: 'w-full gap-4 px-8 py-6',\n      },\n      variant: {\n        standard: '',\n        elevated: 'shadow-elevated',\n        outlined: 'border-1',\n        ghost: 'border-0 bg-transparent shadow-none dark:bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'elevated',\n    },\n  }\n);\n\nexport type CardVariant = VariantProps<typeof cardVariants>['variant'];\nexport type CardSize = VariantProps<typeof cardVariants>['size'];\n\ntype BaseCardProps = SharedProps & {\n  size?: CardSize;\n  variant?: CardVariant;\n  className?: string;\n};\n\ntype StaticCardProps = BaseCardProps & Omit<React.ComponentProps<'div'>, keyof BaseCardProps> & { animated?: false };\ntype AnimatedCardProps = BaseCardProps & Omit<MotionProps, keyof BaseCardProps> & { animated: true };\n\nexport type CardProps = StaticCardProps | AnimatedCardProps;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, size, variant, testId, animated = false, ...props }, ref) => {\n    const cardClassName = cn(cardVariants({ size, variant }), className);\n\n    if (animated) {\n      return (\n        <motion.div\n          className={cardClassName}\n          data-slot=\"card\"\n          data-testid={testId}\n          ref={ref}\n          {...(props as Omit<AnimatedCardProps, 'animated' | 'className' | 'size' | 'variant' | 'testId'>)}\n        />\n      );\n    }\n\n    return (\n      <div\n        className={cardClassName}\n        data-slot=\"card\"\n        data-testid={testId}\n        ref={ref}\n        {...(props as Omit<StaticCardProps, 'animated' | 'className' | 'size' | 'variant' | 'testId'>)}\n      />\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\nconst cardHeaderVariants = cva(\n  '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n  {\n    variants: {\n      spacing: {\n        tight: 'gap-1',\n        normal: 'gap-1.5',\n        loose: 'gap-2',\n      },\n      padding: {\n        none: '',\n        sm: 'px-3',\n        md: 'px-6',\n        lg: 'px-8',\n      },\n    },\n    defaultVariants: {\n      spacing: 'normal',\n      padding: 'none',\n    },\n  }\n);\n\ninterface CardHeaderProps extends React.ComponentProps<'div'>, VariantProps<typeof cardHeaderVariants>, SharedProps {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, spacing, padding, testId, ...props }, ref) => (\n    <div\n      className={cn(cardHeaderVariants({ spacing, padding }), className)}\n      data-slot=\"card-header\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentProps<'div'> & SharedProps & { level?: 1 | 2 | 3 | 4 }\n>(({ className, level = 4, testId, children, ...props }, ref) => {\n  let content: React.ReactNode = null;\n  if (children) {\n    content = typeof children === 'string' ? <Heading level={level}>{children}</Heading> : children;\n  }\n\n  return (\n    <div className={className} data-slot=\"card-title\" data-testid={testId} ref={ref} {...props}>\n      {content}\n    </div>\n  );\n});\n\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & SharedProps>(\n  ({ className, testId, children, ...props }, ref) => {\n    let content: React.ReactNode = null;\n    if (children) {\n      content = typeof children === 'string' ? <Text>{children}</Text> : children;\n    }\n\n    return (\n      <div\n        className={cn('text-muted-foreground text-sm', className)}\n        data-slot=\"card-description\"\n        data-testid={testId}\n        ref={ref}\n        {...props}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nCardDescription.displayName = 'CardDescription';\n\nconst CardAction = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & SharedProps>(\n  ({ className, testId, ...props }, ref) => (\n    <div\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      data-slot=\"card-action\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nCardAction.displayName = 'CardAction';\n\nconst cardContentVariants = cva('', {\n  variants: {\n    padding: {\n      none: '',\n      sm: 'px-3',\n      md: 'px-6',\n      lg: 'px-8',\n    },\n    space: {\n      none: '',\n      sm: 'space-y-2',\n      md: 'space-y-4',\n      lg: 'space-y-6',\n    },\n  },\n  defaultVariants: {\n    padding: 'none',\n    space: 'md',\n  },\n});\n\ninterface CardContentProps extends React.ComponentProps<'div'>, VariantProps<typeof cardContentVariants>, SharedProps {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, padding, space, testId, ...props }, ref) => (\n    <div\n      className={cn(cardContentVariants({ padding, space }), className)}\n      data-slot=\"card-content\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nCardContent.displayName = 'CardContent';\n\nconst cardFooterVariants = cva('flex items-center [.border-t]:pt-6', {\n  variants: {\n    direction: {\n      row: 'flex-row',\n      column: 'flex-col',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n    },\n    gap: {\n      none: '',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n    },\n    padding: {\n      none: '',\n      sm: 'px-3',\n      md: 'px-6',\n      lg: 'px-8',\n    },\n  },\n  defaultVariants: {\n    direction: 'row',\n    justify: 'between',\n    gap: 'sm',\n    padding: 'none',\n  },\n});\n\ninterface CardFooterProps extends React.ComponentProps<'div'>, VariantProps<typeof cardFooterVariants>, SharedProps {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, direction, justify, gap, padding, testId, ...props }, ref) => (\n    <div\n      className={cn(cardFooterVariants({ direction, justify, gap, padding }), className)}\n      data-slot=\"card-footer\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// Form-specific layout helpers\nconst cardFormVariants = cva('grid w-full items-center', {\n  variants: {\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n});\n\ninterface CardFormProps extends React.ComponentProps<'div'>, VariantProps<typeof cardFormVariants>, SharedProps {}\n\nconst CardForm = React.forwardRef<HTMLDivElement, CardFormProps>(({ className, gap, testId, ...props }, ref) => (\n  <div className={cn(cardFormVariants({ gap }), className)} data-testid={testId} ref={ref} {...props} />\n));\n\nCardForm.displayName = 'CardForm';\n\nconst cardFieldVariants = cva('flex flex-col', {\n  variants: {\n    spacing: {\n      tight: 'space-y-1',\n      normal: 'space-y-1.5',\n      loose: 'space-y-2',\n    },\n  },\n  defaultVariants: {\n    spacing: 'normal',\n  },\n});\n\ninterface CardFieldProps extends React.ComponentProps<'div'>, VariantProps<typeof cardFieldVariants>, SharedProps {}\n\nconst CardField = React.forwardRef<HTMLDivElement, CardFieldProps>(({ className, spacing, testId, ...props }, ref) => (\n  <div className={cn(cardFieldVariants({ spacing }), className)} data-testid={testId} ref={ref} {...props} />\n));\n\nCardField.displayName = 'CardField';\n\nexport { Card, CardAction, CardContent, CardDescription, CardField, CardFooter, CardForm, CardHeader, CardTitle };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/checkbox/index.tsx",
      "content": "'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type HTMLMotionProps, motion } from 'motion/react';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\n// Path-draw animation driven by CSS:\n// - pathLength={1} normalizes the stroke-dash coordinate space to 0..1\n//   regardless of actual path length.\n// - Hidden: stroke-dashoffset 1 + opacity 0 → path is shifted off-screen.\n// - Visible (data-visible=\"true\"): stroke-dashoffset 0 + opacity 1, with a\n//   100ms delay so the box-fill transition leads the stroke draw-in slightly.\n// - The browser's native CSS transition handles the tween, so it's immune to\n//   React re-render frequency in controlled-mode parents.\nconst pathDrawClassName =\n  '[stroke-dasharray:1] [stroke-dashoffset:1] opacity-0 transition-[stroke-dashoffset,opacity] duration-200 ease-out data-[visible=true]:[stroke-dashoffset:0] data-[visible=true]:opacity-100 data-[visible=true]:delay-[100ms]';\n\nconst checkboxVariants = cva(\n  'peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n  {\n    variants: {\n      variant: {\n        primary:\n          '!border-input data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground',\n        secondary:\n          '!border-input data-[state=checked]:border-secondary data-[state=indeterminate]:border-secondary data-[state=checked]:bg-secondary data-[state=indeterminate]:bg-secondary data-[state=checked]:text-inverse data-[state=indeterminate]:text-inverse',\n        outline:\n          '!border-input data-[state=checked]:border-foreground data-[state=indeterminate]:border-foreground data-[state=checked]:bg-transparent data-[state=indeterminate]:bg-transparent data-[state=checked]:text-foreground data-[state=indeterminate]:text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n);\n\n// Radix API: `checked` accepts `boolean | 'indeterminate'`.\n// Base UI API: `checked: boolean` with a separate `indeterminate?: boolean` prop.\n// Preserve the Radix signature externally and translate internally.\ntype CheckboxProps = Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\n  'checked' | 'defaultChecked' | 'onCheckedChange'\n> &\n  HTMLMotionProps<'button'> &\n  VariantProps<typeof checkboxVariants> &\n  SharedProps & {\n    checked?: boolean | 'indeterminate';\n    defaultChecked?: boolean | 'indeterminate';\n    onCheckedChange?: (checked: boolean | 'indeterminate') => void;\n  };\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  ({ className, onCheckedChange, testId, variant, checked, defaultChecked, indeterminate, ...props }, ref) => {\n    // Track state for animation purposes in uncontrolled mode\n    const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(defaultChecked ?? false);\n\n    // Determine if component is controlled (checked prop is provided)\n    const isControlled = checked !== undefined;\n\n    // Use controlled value if provided, otherwise use internal state for uncontrolled mode\n    const isChecked = isControlled ? checked : internalChecked;\n\n    const handleCheckedChange = React.useCallback(\n      (nextChecked: boolean) => {\n        // Only update internal state in uncontrolled mode\n        if (!isControlled) {\n          setInternalChecked(nextChecked);\n        }\n        // Always call parent callback\n        onCheckedChange?.(nextChecked);\n      },\n      [isControlled, onCheckedChange]\n    );\n\n    // Translate Radix `checked='indeterminate'` to Base UI `indeterminate` + `checked=false`.\n    const isIndeterminate = indeterminate ?? isChecked === 'indeterminate';\n    const baseChecked = isChecked === 'indeterminate' ? false : (isChecked as boolean | undefined);\n    const baseDefaultChecked =\n      (defaultChecked as unknown) === 'indeterminate' ? false : (defaultChecked as boolean | undefined);\n\n    const dataState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';\n    const showCheckmark = isChecked === true && !isIndeterminate;\n\n    const renderRoot = React.useCallback(\n      // biome-ignore lint/suspicious/noExplicitAny: Base UI render merges Root attrs for the consumer element\n      (rootProps: Record<string, any>) => (\n        <motion.button\n          {...rootProps}\n          className={cn(checkboxVariants({ variant, className }))}\n          data-slot=\"checkbox\"\n          data-state={dataState}\n          data-testid={testId}\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <CheckboxPrimitive.Indicator\n            keepMounted\n            // biome-ignore lint/suspicious/noExplicitAny: Base UI render merges Indicator attrs for the consumer element\n            render={(indicatorProps: Record<string, any>) => (\n              <svg\n                {...indicatorProps}\n                className=\"size-3.5\"\n                data-slot=\"checkbox-indicator\"\n                data-state={dataState}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"3.5\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <title>Checkbox</title>\n                <path\n                  className={pathDrawClassName}\n                  d=\"M4.5 12.75l6 6 9-13.5\"\n                  data-visible={showCheckmark}\n                  pathLength={1}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n                <path\n                  className={pathDrawClassName}\n                  d=\"M5 12h14\"\n                  data-visible={isIndeterminate}\n                  pathLength={1}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            )}\n          />\n        </motion.button>\n      ),\n      [className, dataState, isIndeterminate, showCheckmark, testId, variant]\n    );\n\n    return (\n      <CheckboxPrimitive.Root\n        {...(props as React.ComponentProps<typeof CheckboxPrimitive.Root>)}\n        checked={baseChecked}\n        defaultChecked={baseDefaultChecked}\n        indeterminate={isIndeterminate}\n        nativeButton\n        onCheckedChange={handleCheckedChange}\n        ref={ref as React.Ref<HTMLElement>}\n        render={renderRoot}\n      />\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps, checkboxVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/choicebox/index.tsx",
      "content": "import { Radio as RadioGroupPrimitive } from '@base-ui/react/radio';\nimport { Circle } from 'lucide-react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { type ComponentProps, forwardRef, type HTMLAttributes } from 'react';\n\nimport { Card, CardContent, CardDescription, CardHeader, type CardProps, CardTitle } from '@/registry/base-nova/protoform/components/card';\nimport { RadioGroup } from '@/registry/base-nova/protoform/components/radio-group';\nimport { renderWithDataState } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nexport type ChoiceboxProps = ComponentProps<typeof RadioGroup> & SharedProps;\n\nexport const Choicebox = ({ className, testId, ...props }: ChoiceboxProps) => (\n  <RadioGroup className={cn('w-full', className)} data-testid={testId} {...props} />\n);\n\nexport type ChoiceboxItemProps = ComponentProps<typeof RadioGroupPrimitive.Root> &\n  SharedProps &\n  Partial<Pick<CardProps, 'size'>>;\n\nexport const ChoiceboxItem = forwardRef<HTMLButtonElement, ChoiceboxItemProps>(\n  ({ className, children, testId, size, ...props }, ref) => (\n    <RadioGroupPrimitive.Root\n      {...props}\n      className=\"group\"\n      nativeButton\n      ref={ref}\n      render={renderWithDataState('button')}\n    >\n      <Card\n        className={cn(\n          'flex cursor-pointer flex-row items-start justify-between rounded-md border-2 border-solid p-4 text-left shadow-none transition-all',\n          'group-data-[state=checked]:!border-selected',\n          'hover:shadow-elevated',\n          className\n        )}\n        data-testid={testId}\n        size={size}\n      >\n        {children}\n      </Card>\n    </RadioGroupPrimitive.Root>\n  )\n);\n\nChoiceboxItem.displayName = 'ChoiceboxItem';\n\nexport type ChoiceboxItemHeaderProps = ComponentProps<typeof CardHeader>;\n\nexport const ChoiceboxItemHeader = ({ className, ...props }: ComponentProps<typeof CardHeader>) => (\n  <CardHeader className={cn('flex-1 p-0', className)} {...props} />\n);\n\nexport type ChoiceboxItemTitleProps = ComponentProps<typeof CardTitle>;\n\nexport const ChoiceboxItemTitle = ({ className, ...props }: ChoiceboxItemTitleProps) => (\n  <CardTitle className={cn('flex items-center gap-3', className)} {...props} />\n);\n\nexport type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const ChoiceboxItemSubtitle = ({ className, ...props }: ChoiceboxItemSubtitleProps) => (\n  <span className={cn('font-normal text-muted-foreground text-xs', className)} {...props} />\n);\n\nexport type ChoiceboxItemDescriptionProps = ComponentProps<typeof CardDescription>;\n\nexport const ChoiceboxItemDescription = ({ className, ...props }: ChoiceboxItemDescriptionProps) => (\n  <CardDescription className={cn('text-sm', className)} {...props} />\n);\n\nexport type ChoiceboxItemContentProps = ComponentProps<typeof CardContent>;\n\nexport const ChoiceboxItemContent = ({ className, ...props }: ChoiceboxItemContentProps) => (\n  <CardContent\n    className={cn(\n      '!border-input flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border p-0 text-selected shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',\n      'group-data-[state=checked]:!border-selected',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChoiceboxItemIndicatorProps = ComponentProps<typeof RadioGroupPrimitive.Indicator> & {\n  transition?: Transition;\n};\n\nexport const ChoiceboxItemIndicator = ({\n  className,\n  transition = { type: 'spring', stiffness: 200, damping: 16 },\n  ...props\n}: ChoiceboxItemIndicatorProps) => (\n  <RadioGroupPrimitive.Indicator\n    className={cn('flex items-center justify-center data-[unchecked]:hidden', className)}\n    data-slot=\"radio-group-indicator\"\n    {...props}\n  >\n    <AnimatePresence>\n      <motion.div\n        animate={{ opacity: 1, scale: 1 }}\n        data-slot=\"radio-group-indicator-circle\"\n        exit={{ opacity: 0, scale: 0 }}\n        initial={{ opacity: 0, scale: 0 }}\n        key=\"radio-group-indicator-circle\"\n        transition={transition}\n      >\n        <Circle className=\"size-2.5 fill-current text-current\" />\n      </motion.div>\n    </AnimatePresence>\n  </RadioGroupPrimitive.Indicator>\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/collapsible/index.tsx",
      "content": "'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { AnimatePresence, type HTMLMotionProps, motion, type Transition } from 'motion/react';\nimport React from 'react';\n\nimport { asChildToRender, asChildTrigger, narrowOpenChange } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype CollapsibleContextType = {\n  isOpen: boolean;\n};\n\nconst CollapsibleContext = React.createContext<CollapsibleContextType | undefined>(undefined);\n\nconst useCollapsible = (): CollapsibleContextType => {\n  const context = React.useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('useCollapsible must be used within a Collapsible');\n  }\n  return context;\n};\n\ntype CollapsibleProps = Omit<React.ComponentProps<typeof CollapsiblePrimitive.Root>, 'onOpenChange'> &\n  SharedProps & {\n    asChild?: boolean;\n    onOpenChange?: (open: boolean) => void;\n  };\n\nfunction Collapsible({ children, testId, asChild, ...props }: CollapsibleProps) {\n  const [isOpen, setIsOpen] = React.useState(props?.open ?? props?.defaultOpen ?? false);\n\n  React.useEffect(() => {\n    if (props?.open !== undefined) {\n      setIsOpen(props.open);\n    }\n  }, [props?.open]);\n\n  const handleOpenChange = React.useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      props.onOpenChange?.(open);\n    },\n    // biome-ignore lint/correctness/useExhaustiveDependencies: part of the collapsible implementation\n    [props]\n  );\n\n  return (\n    <CollapsibleContext.Provider value={{ isOpen }}>\n      <CollapsiblePrimitive.Root\n        data-slot=\"collapsible\"\n        data-testid={testId}\n        {...props}\n        {...asChildToRender({ asChild, children })}\n        onOpenChange={narrowOpenChange(handleOpenChange)}\n      />\n    </CollapsibleContext.Provider>\n  );\n}\n\ntype CollapsibleTriggerProps = React.ComponentProps<typeof CollapsiblePrimitive.Trigger> & {\n  asChild?: boolean;\n};\n\nfunction CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn('cursor-pointer', className)}\n      data-slot=\"collapsible-trigger\"\n      {...asChildTrigger(props)}\n    />\n  );\n}\n\ntype CollapsibleContentProps = React.ComponentProps<typeof CollapsiblePrimitive.Panel> &\n  HTMLMotionProps<'div'> & {\n    transition?: Transition;\n  };\n\nfunction CollapsibleContent({\n  className,\n  children,\n  transition = { type: 'spring', stiffness: 150, damping: 22 },\n  ...props\n}: CollapsibleContentProps) {\n  const { isOpen } = useCollapsible();\n\n  return (\n    <AnimatePresence>\n      {isOpen ? (\n        <CollapsiblePrimitive.Panel\n          keepMounted\n          render={\n            <motion.div\n              animate={{ opacity: 1, height: 'auto', overflow: 'hidden' }}\n              className={className}\n              data-slot=\"collapsible-content\"\n              exit={{ opacity: 0, height: 0, overflow: 'hidden' }}\n              initial={{ opacity: 0, height: 0, overflow: 'hidden' }}\n              key=\"collapsible-content\"\n              layout\n              transition={transition}\n            >\n              {children}\n            </motion.div>\n          }\n          {...props}\n        />\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  type CollapsibleContextType,\n  type CollapsibleProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n  useCollapsible,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/combobox/combobox-utils.ts",
      "content": "import type { ComboboxOption } from './index';\n\n/** Prefix for the creatable item's cmdk value to distinguish from real options. */\nexport const CREATE_ITEM_PREFIX = '__create__';\n\nexport type GroupedOptions = {\n  readonly heading: string;\n  readonly testId?: string;\n  readonly options: ReadonlyArray<ComboboxOption>;\n};\n\n/** Resolve a controlled value to its display label. */\nexport const resolveLabel = (options: ReadonlyArray<ComboboxOption>, value: string): string => {\n  const opt = options.find((o) => o.value === value);\n  return opt?.label ?? value;\n};\n\n/** Filter options by a case-insensitive query against label and value. */\nexport const filterOptions = (\n  options: ReadonlyArray<ComboboxOption>,\n  query: string,\n  selectedLabel: string\n): ComboboxOption[] => {\n  if (!query) {\n    return [...options];\n  }\n  // If input matches the selected option's label exactly, show all options\n  if (query === selectedLabel && selectedLabel) {\n    return [...options];\n  }\n  const lowerQuery = query.toLowerCase();\n  return options.filter(\n    (option) => option.label.toLowerCase().includes(lowerQuery) || option.value.toLowerCase().includes(lowerQuery)\n  );\n};\n\n/** Group options by their `group` field, preserving insertion order. Returns undefined if no groups exist. */\nexport const groupOptions = (options: ReadonlyArray<ComboboxOption>): GroupedOptions[] | undefined => {\n  if (!options.some((option) => option.group)) {\n    return;\n  }\n\n  const groups = new Map<string, GroupedOptions>();\n  for (const option of options) {\n    const groupKey = option.group || '';\n    const existing = groups.get(groupKey);\n    if (existing) {\n      groups.set(groupKey, { ...existing, options: [...existing.options, option] });\n    } else {\n      groups.set(groupKey, {\n        heading: groupKey,\n        options: [option],\n        testId: option.groupTestId,\n      });\n    }\n  }\n  return Array.from(groups.values());\n};\n\n/** Build the flat list of navigable cmdk values for keyboard navigation. */\nexport const getNavigableValues = (\n  filteredOptions: ReadonlyArray<ComboboxOption>,\n  canCreate: boolean,\n  inputValue: string\n): string[] => {\n  const base = filteredOptions.map((opt) => opt.label);\n  return canCreate ? [...base, `${CREATE_ITEM_PREFIX}${inputValue}`] : base;\n};\n\n/** Compute the next highlight value with circular wrapping. */\nexport const computeNextHighlight = (\n  navigableValues: ReadonlyArray<string>,\n  currentHighlight: string,\n  direction: 1 | -1\n): string => {\n  if (navigableValues.length === 0) {\n    return '';\n  }\n  const currentIndex = navigableValues.findIndex((v) => v.toLowerCase() === currentHighlight.toLowerCase());\n  let nextIndex: number;\n  if (currentIndex === -1) {\n    nextIndex = direction === 1 ? 0 : navigableValues.length - 1;\n  } else {\n    nextIndex = currentIndex + direction;\n    if (nextIndex < 0) {\n      nextIndex = navigableValues.length - 1;\n    }\n    if (nextIndex >= navigableValues.length) {\n      nextIndex = 0;\n    }\n  }\n  return navigableValues[nextIndex] ?? currentHighlight;\n};\n\n/** Find the first matching option for a query string (used for auto-highlight on type). */\nexport const findFirstMatch = (options: ReadonlyArray<ComboboxOption>, query: string): string => {\n  if (!query) {\n    return '';\n  }\n  const lowerQuery = query.toLowerCase();\n  const match = options.find(\n    (opt) => opt.label.toLowerCase().includes(lowerQuery) || opt.value.toLowerCase().includes(lowerQuery)\n  );\n  return match?.label ?? match?.value ?? '';\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/combobox/index.tsx",
      "content": "'use client';\n\nimport { useCommandState } from 'cmdk';\nimport { Check, ChevronsUpDown, Plus, Search, X } from 'lucide-react';\nimport React, { memo, useCallback, useEffect, useId, useMemo, useReducer, useRef } from 'react';\n\nimport { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/base-nova/protoform/components/command';\nimport { Input, InputEnd, InputStart } from '@/registry/base-nova/protoform/components/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/base-nova/protoform/components/popover';\nimport { Spinner } from '@/registry/base-nova/protoform/components/spinner';\nimport { cn, type PortalContentProps, type PortalRootProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nimport {\n  CREATE_ITEM_PREFIX,\n  computeNextHighlight,\n  filterOptions,\n  findFirstMatch,\n  getNavigableValues,\n  groupOptions,\n  resolveLabel,\n} from './combobox-utils';\nimport { comboboxReducer, createInitialState } from './use-combobox-reducer';\n\n/**\n * Sentinel value to prevent cmdk from auto-selecting the first item.\n * cmdk auto-selects when value is falsy, so this truthy value that\n * matches no real option prevents any highlight on open.\n */\nconst NO_HIGHLIGHT = '__no_highlight__';\n\nconst preventDefault = (e: { preventDefault: () => void }) => e.preventDefault();\n\n/**\n * Bridge component rendered inside <Command> to read cmdk's internal\n * selectedItemId via useCommandState (requires Command context).\n * Reports the DOM id of the highlighted item for aria-activedescendant.\n */\nfunction ActiveDescendantBridge({ onIdChange }: { onIdChange: (id: string | undefined) => void }) {\n  const selectedItemId = useCommandState((state) => state.selectedItemId);\n  useEffect(() => {\n    onIdChange(selectedItemId);\n  }, [selectedItemId, onIdChange]);\n  return null;\n}\n\nexport type ComboboxOption = {\n  value: string;\n  label: string;\n  group?: string;\n  groupTestId?: string;\n  testId?: string;\n  /** When true, the option is rendered but cannot be selected. */\n  disabled?: boolean;\n  /** Arbitrary payload passed back to `renderOption` for rich item rendering. */\n  data?: unknown;\n};\n\nexport interface ComboboxProps\n  extends SharedProps,\n    Pick<PortalRootProps, 'defaultOpen'>,\n    Pick<PortalContentProps, 'container'> {\n  /** @deprecated No longer used. The combobox now uses list-based navigation. Will be removed in next major version. */\n  autocomplete?: boolean;\n  className?: string;\n  /** @default true - Show a clear (X) button when a value is selected */\n  clearable?: boolean;\n  /** If true, the combobox will allow the user to create a new option */\n  creatable?: boolean;\n  /** Noun used in the create prompt (e.g. \"option\", \"context\"). @default \"option\" */\n  createLabel?: string;\n  disabled?: boolean;\n  /**\n   * Override the default \"No options found.\" empty state. Ignored when\n   * `loading` is true.\n   */\n  emptyState?: React.ReactNode;\n  inputTestId?: string;\n  /**\n   * When true, an inline spinner is rendered inside the popover and the\n   * default \"No options found.\" empty state is suppressed. Useful while\n   * async options are being fetched.\n   */\n  loading?: boolean;\n  onChange: (value: string) => void;\n  onClose?: () => void;\n  /** Callback function to create a new option */\n  onCreateOption?: (value: string) => void;\n  /**\n   * Called on every keystroke with the current input text. Use to drive an\n   * async/remote search; typically paired with a debounced fetch that\n   * updates `options`.\n   */\n  onInputValueChange?: (value: string) => void;\n  onOpen?: () => void;\n  options: ComboboxOption[];\n  placeholder?: string;\n  preventAutoFocusOnOpen?: boolean;\n  /**\n   * Override the rendering of each option row. Defaults to rendering the\n   * option label. The active check icon is still rendered by the component.\n   */\n  renderOption?: (option: ComboboxOption) => React.ReactNode;\n  /** Content for the start slot of the input. Defaults to a search icon. Pass `null` to hide. */\n  start?: React.ReactNode | null;\n  value?: string;\n}\n\nconst DEFAULT_START = <Search className=\"opacity-50\" size={15} />;\n\nexport const Combobox = memo(\n  ({\n    options,\n    value: controlledValue = '',\n    onChange,\n    placeholder,\n    disabled,\n    creatable,\n    onCreateOption,\n    createLabel = 'option',\n    start = DEFAULT_START,\n    clearable = true,\n    className,\n    onOpen,\n    onClose,\n    container,\n    testId,\n    defaultOpen = false,\n    preventAutoFocusOnOpen = false,\n    inputTestId,\n    onInputValueChange,\n    loading = false,\n    emptyState,\n    renderOption,\n  }: ComboboxProps) => {\n    const [state, dispatch] = useReducer(comboboxReducer, { options, controlledValue, defaultOpen }, (init) =>\n      createInitialState(init.options, init.controlledValue, init.defaultOpen)\n    );\n    const { open, inputValue, highlightedValue, activeDescendantId, userHasTyped } = state;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listId = useId();\n    const hasStart = start !== null && start !== undefined;\n\n    // Derived values (pure computations)\n    const controlledLabel = useMemo(() => resolveLabel(options, controlledValue), [controlledValue, options]);\n    const filteredOptions = useMemo(\n      () => filterOptions(options, inputValue, controlledLabel),\n      [options, inputValue, controlledLabel]\n    );\n    const groupedOptions = useMemo(() => groupOptions(filteredOptions), [filteredOptions]);\n    const canCreate =\n      !!creatable && inputValue.trim().length > 0 && !options.some((option) => option.value === inputValue);\n    const navigableValues = useMemo(\n      () => getNavigableValues(filteredOptions, canCreate, inputValue),\n      [filteredOptions, canCreate, inputValue]\n    );\n    const showClearButton = clearable && controlledValue && !disabled;\n\n    // ── Effects (genuine side effects only) ───────────────────────────\n\n    // Sync inputValue when controlled value changes externally\n    useEffect(() => {\n      dispatch({ type: 'SYNC_CONTROLLED', controlledLabel });\n    }, [controlledLabel]);\n\n    // Focus input when popover opens\n    useEffect(() => {\n      if (!(inputRef.current && open && !preventAutoFocusOnOpen)) {\n        return;\n      }\n      const timer = setTimeout(() => {\n        if (inputRef.current) {\n          inputRef.current.focus();\n          const length = inputRef.current.value.length;\n          inputRef.current.setSelectionRange(length, length);\n        }\n      }, 0);\n      return () => clearTimeout(timer);\n    }, [open, preventAutoFocusOnOpen]);\n\n    // Fire onOpen/onClose callbacks (single-concern: only callbacks)\n    const prevOpenRef = useRef(open);\n    useEffect(() => {\n      if (prevOpenRef.current !== open) {\n        if (open) {\n          onOpen?.();\n        } else {\n          onClose?.();\n        }\n        prevOpenRef.current = open;\n      }\n    }, [open, onOpen, onClose]);\n\n    // ── Handlers ──────────────────────────────────────────────────────\n\n    const handleActiveDescendantChange = useCallback(\n      (id: string | undefined) => dispatch({ type: 'SET_ACTIVE_DESCENDANT', id }),\n      []\n    );\n\n    const handleHighlightChange = useCallback(\n      (value: string) => dispatch({ type: 'NAVIGATE', nextHighlight: value }),\n      []\n    );\n\n    const selectOption = useCallback(\n      (option: ComboboxOption) => {\n        if (option.disabled) {\n          return;\n        }\n        if (controlledValue === option.value) {\n          onChange('');\n          dispatch({ type: 'TOGGLE_OFF' });\n        } else {\n          onChange(option.value);\n          dispatch({ type: 'SELECT', label: option.label });\n        }\n      },\n      [onChange, controlledValue]\n    );\n\n    const handleCreatableSubmit = useCallback(() => {\n      onChange(inputValue);\n      dispatch({ type: 'CREATE_SUBMIT', inputValue });\n      onCreateOption?.(inputValue);\n    }, [inputValue, onChange, onCreateOption]);\n\n    const handleClear = useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onChange('');\n        dispatch({ type: 'CLEAR' });\n        inputRef.current?.focus();\n      },\n      [onChange]\n    );\n\n    const handlePopoverOpenChange = useCallback(\n      (newOpen: boolean) => {\n        if (disabled) {\n          return;\n        }\n        dispatch(newOpen ? { type: 'OPEN' } : { type: 'CLOSE' });\n      },\n      [disabled]\n    );\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        dispatch({ type: 'TYPE', value: newValue, firstMatch: findFirstMatch(options, newValue) });\n        onInputValueChange?.(newValue);\n      },\n      [options, onInputValueChange]\n    );\n\n    const handleInputClick = useCallback(() => {\n      if (!open) {\n        dispatch({ type: 'INPUT_CLICK' });\n      }\n    }, [open]);\n\n    const handleBlur = useCallback(() => {\n      if (inputValue.trim() === '' && controlledValue && userHasTyped) {\n        onChange('');\n        dispatch({ type: 'BLUR_CLEAR' });\n      } else if (inputValue !== controlledLabel) {\n        const matchesOption = options.some((opt) => opt.value === inputValue || opt.label === inputValue);\n        if (!creatable || (!matchesOption && inputValue.trim() === '')) {\n          dispatch({ type: 'BLUR_REVERT', controlledLabel });\n        }\n      }\n    }, [inputValue, controlledValue, controlledLabel, options, creatable, onChange, userHasTyped]);\n\n    // ── Keyboard handlers (decomposed per key) ────────────────────────\n\n    const handleArrowKey = useCallback(\n      (event: React.KeyboardEvent, direction: 1 | -1) => {\n        event.preventDefault();\n        if (!open) {\n          dispatch({ type: 'ARROW_OPEN' });\n          return;\n        }\n        dispatch({\n          type: 'NAVIGATE',\n          nextHighlight: computeNextHighlight(navigableValues, highlightedValue, direction),\n        });\n      },\n      [open, navigableValues, highlightedValue]\n    );\n\n    const handleEnterKey = useCallback(\n      (event: React.KeyboardEvent) => {\n        if (!open) {\n          return; // Let Enter propagate to form when closed\n        }\n        event.preventDefault();\n        event.stopPropagation();\n\n        const isCreateHighlighted = highlightedValue.toLowerCase().startsWith(CREATE_ITEM_PREFIX.toLowerCase());\n\n        if (isCreateHighlighted && canCreate) {\n          handleCreatableSubmit();\n        } else {\n          const option = filteredOptions.find((o) => o.label.toLowerCase() === highlightedValue.toLowerCase());\n          if (option) {\n            selectOption(option);\n          } else if (inputValue.trim() === '' && controlledValue) {\n            onChange('');\n            dispatch({ type: 'ENTER_CLEAR' });\n          } else if (creatable && canCreate) {\n            handleCreatableSubmit();\n          } else {\n            dispatch({ type: 'ENTER_REVERT', controlledLabel });\n          }\n        }\n      },\n      [\n        open,\n        highlightedValue,\n        canCreate,\n        handleCreatableSubmit,\n        filteredOptions,\n        selectOption,\n        inputValue,\n        controlledValue,\n        controlledLabel,\n        onChange,\n        creatable,\n      ]\n    );\n\n    const handleEscapeKey = useCallback(\n      (event: React.KeyboardEvent) => {\n        if (open) {\n          event.preventDefault();\n          dispatch({ type: 'CLOSE' });\n        } else if (controlledValue) {\n          event.preventDefault();\n          event.stopPropagation();\n          onChange('');\n          dispatch({ type: 'ESCAPE_CLEAR' });\n        }\n      },\n      [open, controlledValue, onChange]\n    );\n\n    const handleArrowRightKey = useCallback(\n      (event: React.KeyboardEvent) => {\n        const input = inputRef.current;\n        if (input && input.selectionStart === input.value.length && open && highlightedValue) {\n          const option = filteredOptions.find((o) => o.label.toLowerCase() === highlightedValue.toLowerCase());\n          if (option) {\n            event.preventDefault();\n            selectOption(option);\n          }\n        }\n      },\n      [open, highlightedValue, filteredOptions, selectOption]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLInputElement>) => {\n        switch (event.key) {\n          case 'ArrowDown':\n            return handleArrowKey(event, 1);\n          case 'ArrowUp':\n            return handleArrowKey(event, -1);\n          case 'Enter':\n            return handleEnterKey(event);\n          case 'Escape':\n            return handleEscapeKey(event);\n          case 'ArrowRight':\n            return handleArrowRightKey(event);\n        }\n      },\n      [handleArrowKey, handleEnterKey, handleEscapeKey, handleArrowRightKey]\n    );\n\n    // ── Memoized props ────────────────────────────────────────────────\n\n    const popoverStyle = useMemo(\n      () => ({ width: inputRef.current?.clientWidth }),\n      // Recalculate when open changes (ref width may have changed)\n      // biome-ignore lint/correctness/useExhaustiveDependencies: inputRef.current?.clientWidth is not reactive\n      [open]\n    );\n\n    const preventAutoFocusHandler = useMemo(\n      () => (preventAutoFocusOnOpen ? preventDefault : undefined),\n      [preventAutoFocusOnOpen]\n    );\n\n    // ── Render ────────────────────────────────────────────────────────\n\n    return (\n      <Popover onOpenChange={handlePopoverOpenChange} open={open} testId={testId}>\n        <PopoverTrigger asChild nativeButton={false}>\n          <Input\n            aria-activedescendant={open ? activeDescendantId : undefined}\n            aria-autocomplete=\"list\"\n            aria-controls={listId}\n            aria-expanded={open}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            className=\"relative w-full shadow-none\"\n            containerClassName={className}\n            disabled={disabled}\n            onBlur={handleBlur}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            ref={inputRef}\n            role=\"combobox\"\n            spellCheck={false}\n            testId={inputTestId}\n            type=\"text\"\n            value={inputValue}\n          >\n            {hasStart ? <InputStart>{start}</InputStart> : null}\n            <InputEnd>\n              {showClearButton ? (\n                <button\n                  aria-label=\"Clear selection\"\n                  className=\"pointer-events-auto rounded-sm opacity-50 hover:opacity-100\"\n                  onClick={handleClear}\n                  onMouseDown={preventDefault}\n                  tabIndex={-1}\n                  type=\"button\"\n                >\n                  <X size={15} />\n                </button>\n              ) : null}\n              <ChevronsUpDown className=\"opacity-50\" size={15} />\n            </InputEnd>\n          </Input>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"p-0\"\n          container={container}\n          onMouseDown={preventDefault}\n          onOpenAutoFocus={preventAutoFocusHandler}\n          style={popoverStyle}\n        >\n          <Command\n            loop\n            onValueChange={handleHighlightChange}\n            shouldFilter={false}\n            size=\"full\"\n            value={highlightedValue || NO_HIGHLIGHT}\n            variant=\"minimal\"\n          >\n            <ActiveDescendantBridge onIdChange={handleActiveDescendantChange} />\n            <CommandList id={listId}>\n              {loading ? (\n                <div\n                  aria-busy=\"true\"\n                  className=\"flex items-center gap-2 px-3 py-4 text-muted-foreground text-sm\"\n                  role=\"status\"\n                >\n                  <Spinner className=\"size-4\" />\n                  <span>Loading…</span>\n                </div>\n              ) : (\n                <CommandEmpty>{emptyState ?? 'No options found.'}</CommandEmpty>\n              )}\n              {(groupedOptions ?? [{ heading: '', options: filteredOptions }]).map((group) => (\n                <CommandGroup\n                  heading={group.heading || undefined}\n                  key={group.heading || 'default'}\n                  testId={group.testId}\n                >\n                  {group.options.map((option) => (\n                    <CommandItem\n                      disabled={option.disabled}\n                      key={option.value}\n                      onSelect={() => selectOption(option)}\n                      testId={option.testId}\n                      value={option.label}\n                    >\n                      {renderOption ? renderOption(option) : option.label}\n                      <Check\n                        className={cn('ml-auto', controlledValue === option.value ? 'opacity-100' : 'opacity-0')}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              ))}\n              {canCreate ? (\n                <CommandGroup>\n                  <CommandItem forceMount onSelect={handleCreatableSubmit} value={`${CREATE_ITEM_PREFIX}${inputValue}`}>\n                    <Plus className=\"size-4 shrink-0\" />\n                    <span className=\"truncate\">Create \"{inputValue}\"</span>\n                  </CommandItem>\n                </CommandGroup>\n              ) : null}\n              {creatable && !canCreate ? (\n                <CommandGroup>\n                  <CommandItem disabled forceMount value=\"__create_prompt__\">\n                    <Plus className=\"size-4 shrink-0 opacity-50\" />\n                    <span className=\"truncate text-muted-foreground\">Type to create a new {createLabel}...</span>\n                  </CommandItem>\n                </CommandGroup>\n              ) : null}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/combobox/use-combobox-reducer.ts",
      "content": "import { resolveLabel } from './combobox-utils';\nimport type { ComboboxOption } from './index';\n\n// ── State ─────────────────────────────────────────────────────────────\n// Readonly at every level — the reducer MUST return a new object.\nexport type ComboboxState = Readonly<{\n  open: boolean;\n  inputValue: string;\n  highlightedValue: string;\n  activeDescendantId: string | undefined;\n  userHasTyped: boolean;\n}>;\n\n// ── Actions (discriminated union) ─────────────────────────────────────\n// Each variant carries only the payload it needs. TypeScript narrows\n// the type inside each switch case, so `action.value` is only available\n// on variants that declare it.\nexport type ComboboxAction =\n  // Popover lifecycle\n  | { readonly type: 'OPEN' }\n  | { readonly type: 'CLOSE' }\n  | { readonly type: 'ARROW_OPEN' }\n\n  // User input\n  | { readonly type: 'INPUT_CLICK' }\n  | { readonly type: 'TYPE'; readonly value: string; readonly firstMatch: string }\n\n  // Selection\n  | { readonly type: 'SELECT'; readonly label: string }\n  | { readonly type: 'TOGGLE_OFF' }\n  | { readonly type: 'CLEAR' }\n  | { readonly type: 'CREATE_SUBMIT'; readonly inputValue: string }\n\n  // Keyboard navigation\n  | { readonly type: 'NAVIGATE'; readonly nextHighlight: string }\n\n  // Enter key variants (each has distinct state transition)\n  | { readonly type: 'ENTER_REVERT'; readonly controlledLabel: string }\n  | { readonly type: 'ENTER_CLEAR' }\n\n  // Escape\n  | { readonly type: 'ESCAPE_CLEAR' }\n\n  // Blur\n  | { readonly type: 'BLUR_CLEAR' }\n  | { readonly type: 'BLUR_REVERT'; readonly controlledLabel: string }\n\n  // External sync\n  | { readonly type: 'SYNC_CONTROLLED'; readonly controlledLabel: string }\n\n  // cmdk bridge\n  | { readonly type: 'SET_ACTIVE_DESCENDANT'; readonly id: string | undefined };\n\n// ── Exhaustive check helper ───────────────────────────────────────────\n// If a new action variant is added to the union but not handled in the\n// switch, TypeScript will error: \"Argument of type '...' is not\n// assignable to parameter of type 'never'.\"\nconst assertNever = (action: never): never => {\n  throw new Error(`Unhandled combobox action: ${(action as ComboboxAction).type}`);\n};\n\n// ── Reducer (pure function — no React imports, no side effects) ───────\nexport const comboboxReducer = (state: ComboboxState, action: ComboboxAction): ComboboxState => {\n  switch (action.type) {\n    case 'OPEN':\n      return { ...state, open: true, highlightedValue: '', userHasTyped: false };\n    case 'CLOSE':\n      return { ...state, open: false, highlightedValue: '', activeDescendantId: undefined };\n    case 'ARROW_OPEN':\n      return { ...state, open: true };\n    case 'INPUT_CLICK':\n      return { ...state, open: true, inputValue: '', userHasTyped: false };\n    case 'TYPE':\n      return {\n        ...state,\n        open: true,\n        inputValue: action.value,\n        highlightedValue: action.firstMatch,\n        userHasTyped: true,\n      };\n    case 'SELECT':\n      return { ...state, open: false, inputValue: action.label };\n    case 'TOGGLE_OFF':\n      return { ...state, open: false, inputValue: '' };\n    case 'CLEAR':\n      return { ...state, inputValue: '' };\n    case 'CREATE_SUBMIT':\n      return { ...state, open: false, inputValue: action.inputValue };\n    case 'NAVIGATE':\n      return { ...state, highlightedValue: action.nextHighlight };\n    case 'ENTER_REVERT':\n      return { ...state, open: false, inputValue: action.controlledLabel };\n    case 'ENTER_CLEAR':\n      return { ...state, open: false, inputValue: '' };\n    case 'ESCAPE_CLEAR':\n      return { ...state, inputValue: '' };\n    case 'BLUR_CLEAR':\n      return { ...state, inputValue: '', userHasTyped: false };\n    case 'BLUR_REVERT':\n      return { ...state, inputValue: action.controlledLabel, userHasTyped: false };\n    case 'SYNC_CONTROLLED':\n      if (state.inputValue === action.controlledLabel) return state;\n      return { ...state, inputValue: action.controlledLabel };\n    case 'SET_ACTIVE_DESCENDANT':\n      return { ...state, activeDescendantId: action.id };\n    default:\n      return assertNever(action);\n  }\n};\n\n// ── Initial state factory ─────────────────────────────────────────────\nexport const createInitialState = (\n  options: ReadonlyArray<ComboboxOption>,\n  controlledValue: string,\n  defaultOpen: boolean\n): ComboboxState => ({\n  open: defaultOpen,\n  inputValue: resolveLabel(options, controlledValue),\n  highlightedValue: '',\n  activeDescendantId: undefined,\n  userHasTyped: false,\n});\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/command/index.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { ChevronRight, SearchIcon } from 'lucide-react';\nimport React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/registry/base-nova/protoform/components/dialog';\nimport { Popover, PopoverAnchor, PopoverContent } from '@/registry/base-nova/protoform/components/popover';\nimport { Text } from '@/registry/base-nova/protoform/components/typography';\nimport { cn, type FixedPositionContentProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst commandVariants = cva(\n  'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',\n  {\n    variants: {\n      variant: {\n        elevated: '!border-input border shadow-md',\n        minimal: '',\n        dialog: '',\n      },\n      size: {\n        sm: 'min-w-[300px] max-w-sm',\n        md: 'min-w-[400px] max-w-lg md:min-w-[450px]',\n        lg: 'min-w-[500px] max-w-2xl',\n        full: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'elevated',\n      size: 'md',\n    },\n  }\n);\n\ninterface CommandProps\n  extends React.ComponentProps<typeof CommandPrimitive>,\n    VariantProps<typeof commandVariants>,\n    SharedProps {}\n\nfunction Command({ className, variant, size, testId, ...props }: CommandProps) {\n  return (\n    <CommandPrimitive\n      className={cn(commandVariants({ variant, size }), className)}\n      data-slot=\"command\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  showOverlay = true,\n  container,\n  onOpenAutoFocus,\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, 'children'> &\n  Pick<FixedPositionContentProps, 'showOverlay' | 'container' | 'onOpenAutoFocus'> & {\n    title?: string;\n    description?: string;\n    className?: string;\n    children?: React.ReactNode;\n  }) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn('overflow-hidden p-0', container && 'absolute', className)}\n        container={container}\n        onOpenAutoFocus={onOpenAutoFocus}\n        showOverlay={showOverlay}\n      >\n        <Command\n          className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n          variant=\"dialog\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  testId,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input> & SharedProps) {\n  return (\n    <div className=\"!border-input flex h-9 items-center gap-2 border-b px-3\" data-slot=\"command-input-wrapper\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden selection:bg-selected selection:text-selected-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        data-slot=\"command-input\"\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden', className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" data-slot=\"command-empty\" {...props} />;\n}\n\nfunction CommandGroup({\n  className,\n  testId,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group> & SharedProps) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n        className\n      )}\n      data-slot=\"command-group\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn('-mx-1 h-px bg-divider', className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  testId,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item> & SharedProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"command-item\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, children, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <Text\n      as=\"span\"\n      className={cn('ml-auto text-muted-foreground text-xs tracking-widest', className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n\n// ── Command Submenu ───────────────────────────────────────────────────\n\ntype CommandSubContextType = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n};\n\nconst CommandSubContext = React.createContext<CommandSubContextType | undefined>(undefined);\n\ntype CommandSubProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n};\n\nfunction CommandSub({ open, onOpenChange, children }: CommandSubProps) {\n  return (\n    <CommandSubContext.Provider value={{ open, onOpenChange }}>\n      <Popover onOpenChange={onOpenChange} open={open}>\n        {children}\n      </Popover>\n    </CommandSubContext.Provider>\n  );\n}\n\ninterface CommandSubTriggerProps extends React.ComponentProps<typeof CommandPrimitive.Item> {\n  inset?: boolean;\n}\n\nfunction CommandSubTrigger({ className, children, inset, ...props }: CommandSubTriggerProps) {\n  const ctx = React.useContext(CommandSubContext);\n\n  return (\n    <PopoverAnchor\n      render={\n        <CommandPrimitive.Item\n          className={cn(\n            \"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            inset && 'pl-8',\n            className\n          )}\n          data-slot=\"command-sub-trigger\"\n          onSelect={() => ctx?.onOpenChange(true)}\n          {...props}\n        />\n      }\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n    </PopoverAnchor>\n  );\n}\n\ntype CommandSubContentProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\nfunction CommandSubContent({ className, children }: CommandSubContentProps) {\n  return (\n    <PopoverContent\n      align=\"start\"\n      className={cn('w-fit p-0', className)}\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      side=\"right\"\n      sideOffset={4}\n    >\n      {children}\n    </PopoverContent>\n  );\n}\n\n// Simplified interface for backend developers\ninterface SimpleCommandProps extends SharedProps {\n  className?: string;\n  emptyMessage?: string;\n  groups: Array<{\n    heading?: string;\n    items: Array<{\n      icon?: React.ReactNode;\n      label: string;\n      shortcut?: string;\n      disabled?: boolean;\n      onSelect?: () => void;\n    }>;\n  }>;\n  placeholder?: string;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n}\n\nfunction SimpleCommand({\n  placeholder = 'Type a command or search...',\n  emptyMessage = 'No results found.',\n  groups,\n  size = 'md',\n  className,\n  testId,\n}: SimpleCommandProps) {\n  return (\n    <Command className={className} size={size} testId={testId}>\n      <CommandInput placeholder={placeholder} />\n      <CommandList>\n        <CommandEmpty>{emptyMessage}</CommandEmpty>\n        {groups.map((group, groupIndex) => (\n          <React.Fragment key={group.heading || `group-${groupIndex}`}>\n            {groupIndex > 0 && <CommandSeparator />}\n            <CommandGroup heading={group.heading}>\n              {group.items.map((item) => (\n                <CommandItem disabled={item.disabled} key={item.label} onSelect={item.onSelect}>\n                  {item.icon}\n                  <Text as=\"span\">{item.label}</Text>\n                  {item.shortcut ? <CommandShortcut>{item.shortcut}</CommandShortcut> : null}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </React.Fragment>\n        ))}\n      </CommandList>\n    </Command>\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  CommandSub,\n  CommandSubContent,\n  CommandSubTrigger,\n  commandVariants,\n  SimpleCommand,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/copy-button/index.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';\nimport React from 'react';\n\nimport { cn } from '@/registry/base-nova/protoform/lib/utils';\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary: 'bg-secondary text-inverse shadow-xs hover:bg-secondary/80',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',\n        outline:\n          '!border-outline-primary border text-primary-inverse shadow-xs hover:border-outline-primary-hover hover:bg-primary-alpha-subtle active:border-outline-primary-pressed active:bg-primary-alpha-subtle-default disabled:border-outline-inverse-disabled disabled:text-disabled',\n        secondary: 'bg-primary text-inverse shadow-xs hover:bg-primary/90',\n        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n      },\n      size: {\n        md: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n);\n\ntype CopyButtonProps = Omit<HTMLMotionProps<'button'>, 'onCopy' | 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content?: string;\n    delay?: number;\n    onCopy?: (content: string) => void;\n    isCopied?: boolean;\n    onCopyChange?: (isCopied: boolean) => void;\n    testId?: string;\n    children?: React.ReactNode;\n  };\n\nfunction CopyButton({\n  content,\n  className,\n  size,\n  variant,\n  delay = 3000,\n  onClick,\n  onCopy,\n  isCopied,\n  onCopyChange,\n  testId,\n  children,\n  ...props\n}: CopyButtonProps) {\n  const [localIsCopied, setLocalIsCopied] = React.useState(isCopied ?? false);\n  const Icon = localIsCopied ? CheckIcon : CopyIcon;\n\n  React.useEffect(() => {\n    setLocalIsCopied(isCopied ?? false);\n  }, [isCopied]);\n\n  const handleIsCopied = React.useCallback(\n    (isCopiedState: boolean) => {\n      setLocalIsCopied(isCopiedState);\n      onCopyChange?.(isCopiedState);\n    },\n    [onCopyChange]\n  );\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (isCopied) {\n        return;\n      }\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            handleIsCopied(true);\n            setTimeout(() => handleIsCopied(false), delay);\n            onCopy?.(content);\n          })\n          .catch((error) => {\n            // biome-ignore lint/suspicious/noConsole: needed for copy button implementation\n            console.error('Error copying command', error);\n          });\n      }\n      onClick?.(e);\n    },\n    [isCopied, content, delay, onClick, onCopy, handleIsCopied]\n  );\n\n  return (\n    <motion.button\n      className={cn(buttonVariants({ variant, size }), className)}\n      data-slot=\"copy-button\"\n      data-testid={testId}\n      onClick={handleCopy}\n      type=\"button\"\n      {...props}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          animate={{ scale: 1 }}\n          data-slot=\"copy-button-icon\"\n          exit={{ scale: 0 }}\n          initial={{ scale: 0 }}\n          key={localIsCopied ? 'check' : 'copy'}\n          transition={{ duration: 0.15 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n      {children}\n    </motion.button>\n  );\n}\n\nexport { buttonVariants, CopyButton, type CopyButtonProps };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/dialog/index.tsx",
      "content": "import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport React from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { usePortalContainer } from '@/registry/base-nova/protoform/hooks/use-portal-container';\nimport {\n  asChildTrigger,\n  narrowOpenChange,\n  renderDescription,\n  renderWithDataState,\n  warnDeprecatedProp,\n} from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type FixedPositionContentProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype DialogRootProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, 'onOpenChange'> &\n  SharedProps & {\n    onOpenChange?: (open: boolean) => void;\n  };\n\nfunction Dialog({ testId, onOpenChange, ...props }: DialogRootProps) {\n  return (\n    <DialogPrimitive.Root\n      data-slot=\"dialog\"\n      data-testid={testId}\n      onOpenChange={narrowOpenChange(onOpenChange)}\n      {...props}\n    />\n  );\n}\n\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger> & {\n  asChild?: boolean;\n};\n\nfunction DialogTrigger({ className, ...props }: DialogTriggerProps) {\n  return (\n    <DialogPrimitive.Trigger\n      className={cn('cursor-pointer', className)}\n      data-slot=\"dialog-trigger\"\n      {...asChildTrigger(props)}\n    />\n  );\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close> & {\n  asChild?: boolean;\n};\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...asChildTrigger(props)} />;\n}\n\nfunction DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      // fill-mode-forwards holds the exit keyframe until Base UI unmounts;\n      // without it the backdrop flashes back to its natural opacity for one frame.\n      className={cn(\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 fill-mode-forwards backdrop-blur-xs data-[state=closed]:animate-out data-[state=open]:animate-in',\n        className\n      )}\n      data-slot=\"dialog-overlay\"\n      render={renderWithDataState('div')}\n      {...props}\n    />\n  );\n}\n\nconst dialogContentVariants = cva(\n  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl border bg-background fill-mode-forwards shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in',\n  {\n    variants: {\n      size: {\n        sm: 'sm:max-w-sm',\n        md: 'sm:max-w-lg',\n        lg: 'sm:max-w-2xl',\n        xl: 'sm:max-w-4xl',\n        full: 'sm:max-w-[90vw]',\n      },\n      variant: {\n        standard: '',\n        centered: 'text-center',\n        destructive: 'border-destructive/50',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'standard',\n    },\n  }\n);\n\ninterface DialogContentProps\n  extends React.ComponentProps<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof dialogContentVariants>,\n    SharedProps,\n    Pick<FixedPositionContentProps, 'container' | 'showOverlay' | 'onOpenAutoFocus'> {\n  showCloseButton?: boolean;\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  showOverlay = true,\n  size,\n  variant,\n  testId,\n  container,\n  onOpenAutoFocus,\n  ...props\n}: DialogContentProps) {\n  warnDeprecatedProp(\n    'DialogContent',\n    'onOpenAutoFocus',\n    onOpenAutoFocus,\n    'Use `initialFocus` on Base UI `Dialog.Popup` instead.'\n  );\n  const portalContainer = usePortalContainer();\n  return (\n    <DialogPortal container={container ?? portalContainer}>\n      {showOverlay ? <DialogOverlay /> : null}\n      <DialogPrimitive.Popup\n        className={cn(dialogContentVariants({ size, variant }), className)}\n        data-slot=\"dialog-content\"\n        data-testid={testId}\n        render={renderWithDataState('div')}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            render={\n              <Button\n                aria-label=\"Close\"\n                className=\"absolute top-2 right-2 text-muted-foreground hover:text-foreground\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              >\n                <X />\n              </Button>\n            }\n          />\n        ) : null}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n}\n\nconst dialogHeaderVariants = cva('flex shrink-0 flex-col p-4 [&:has(+[data-slot=dialog-body])]:border-b', {\n  variants: {\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      responsive: 'text-center sm:text-left',\n    },\n    spacing: {\n      tight: 'space-y-1',\n      normal: 'space-y-1.5',\n      loose: 'space-y-2',\n    },\n  },\n  defaultVariants: {\n    align: 'responsive',\n    spacing: 'normal',\n  },\n});\n\ninterface DialogHeaderProps extends React.ComponentProps<'div'>, VariantProps<typeof dialogHeaderVariants> {}\n\nfunction DialogHeader({ className, align, spacing, ...props }: DialogHeaderProps) {\n  return (\n    <div className={cn(dialogHeaderVariants({ align, spacing }), className)} data-slot=\"dialog-header\" {...props} />\n  );\n}\n\nconst dialogFooterVariants = cva('flex shrink-0 p-4 [[data-slot=dialog-body]+&]:border-t', {\n  variants: {\n    direction: {\n      column: 'flex-col',\n      row: 'flex-row items-center',\n      responsive: 'flex-col-reverse sm:flex-row sm:items-center',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end sm:justify-end',\n      between: 'justify-between',\n    },\n    gap: {\n      sm: 'gap-1',\n      md: 'gap-2',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    direction: 'responsive',\n    justify: 'end',\n    gap: 'md',\n  },\n});\n\ninterface DialogFooterProps extends React.ComponentProps<'div'>, VariantProps<typeof dialogFooterVariants> {}\n\nfunction DialogFooter({ className, direction, justify, gap, ...props }: DialogFooterProps) {\n  return (\n    <div\n      className={cn(dialogFooterVariants({ direction, justify, gap }), className)}\n      data-slot=\"dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn('font-semibold text-lg leading-none tracking-tight', className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  children,\n  asChild,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description> & { asChild?: boolean }) {\n  // Render as <div> (not <p>) so block-level children don't trigger validateDOMNesting.\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      render={renderDescription({\n        asChild,\n        children,\n        className: typeof className === 'string' ? className : undefined,\n        dataSlot: 'dialog-description',\n      })}\n      {...props}\n    />\n  );\n}\n\n// min-h-0 lets the body shrink below its natural height so overflow-y-auto scrolls.\nconst dialogBodyVariants = cva('min-h-0 flex-1 overflow-y-auto p-4', {\n  variants: {\n    spacing: {\n      none: '',\n      sm: 'space-y-2',\n      md: 'space-y-4',\n      lg: 'space-y-6',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n  },\n});\n\ninterface DialogBodyProps extends React.ComponentProps<'div'>, VariantProps<typeof dialogBodyVariants> {}\n\nfunction DialogBody({ className, spacing, ...props }: DialogBodyProps) {\n  return <div className={cn(dialogBodyVariants({ spacing }), className)} data-slot=\"dialog-body\" {...props} />;\n}\n\nconst dialogFieldVariants = cva('flex flex-col', {\n  variants: {\n    spacing: {\n      tight: 'space-y-1',\n      normal: 'space-y-1.5',\n      loose: 'space-y-2',\n    },\n  },\n  defaultVariants: {\n    spacing: 'normal',\n  },\n});\n\ninterface DialogFieldProps extends React.ComponentProps<'div'>, VariantProps<typeof dialogFieldVariants> {}\n\nfunction DialogField({ className, spacing, ...props }: DialogFieldProps) {\n  return <div className={cn(dialogFieldVariants({ spacing }), className)} {...props} />;\n}\n\nexport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogField,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/field/index.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { createContext, useContext, useId, useMemo } from 'react';\n\nimport { Label } from '@/registry/base-nova/protoform/components/label';\nimport { Separator } from '@/registry/base-nova/protoform/components/separator';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ninterface FieldContextValue {\n  errorId: string | undefined;\n  invalid: boolean;\n}\n\nconst FieldContext = createContext<FieldContextValue>({ invalid: false, errorId: undefined });\n\n/**\n * Access field-level validation state from child components.\n * Returns `{ invalid, errorId }` — use `invalid` for `aria-invalid` and\n * `errorId` for `aria-describedby` on form controls.\n */\nexport function useFieldContext() {\n  return useContext(FieldContext);\n}\n\nfunction FieldSet({ className, testId, ...props }: React.ComponentProps<'fieldset'> & SharedProps) {\n  return (\n    <fieldset\n      className={cn(\n        'flex flex-col gap-6',\n        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n        className\n      )}\n      data-slot=\"field-set\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, testId, ...props }: React.ComponentProps<'div'> & SharedProps) {\n  return (\n    <div\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',\n        className\n      )}\n      data-slot=\"field-group\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '[&>[data-slot=field-label]]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        '@md/field-group:flex-row flex-col @md/field-group:items-center @md/field-group:[&>*]:w-auto [&>*]:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nfunction Field({\n  className,\n  orientation = 'vertical',\n  testId,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants> & SharedProps) {\n  const dataProps = props as Record<string, unknown>;\n  const invalid = dataProps['data-invalid'] === true || dataProps['data-invalid'] === 'true';\n  const errorId = useId();\n  const ctx = useMemo(() => ({ invalid, errorId: invalid ? errorId : undefined }), [invalid, errorId]);\n\n  return (\n    <FieldContext.Provider value={ctx}>\n      {/* biome-ignore lint/a11y/useSemanticElements: part of field implementation */}\n      <div\n        className={cn(fieldVariants({ orientation }), className)}\n        data-orientation={orientation}\n        data-slot=\"field\"\n        data-testid={testId}\n        role=\"group\"\n        {...props}\n      />\n    </FieldContext.Provider>\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}\n      data-slot=\"field-content\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({\n  className,\n  children,\n  required,\n  ...props\n}: React.ComponentProps<typeof Label> & { required?: boolean }) {\n  return (\n    <Label\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',\n        'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10',\n        className\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    >\n      {children}\n      {required ? (\n        <span aria-hidden=\"true\" className=\"text-destructive\">\n          *\n        </span>\n      ) : null}\n    </Label>\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50',\n        className\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  );\n}\n\n// Rendered as <div> instead of <p> so consumers can nest block-level components\n// (Text, Alert, Input, etc.) without triggering React's validateDOMNesting warnings.\nfunction FieldDescription({ className, testId, ...props }: React.ComponentProps<'div'> & SharedProps) {\n  return (\n    <div\n      className={cn(\n        'font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n        'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      data-slot=\"field-description\"\n      data-testid={testId}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      data-content={!!children}\n      data-slot=\"field-separator\"\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children ? (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  testId,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: Array<{ message?: string } | undefined>;\n} & SharedProps) {\n  const { errorId } = useContext(FieldContext);\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    if (errors?.length === 1) {\n      return errors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {/* biome-ignore lint/suspicious/noArrayIndexKey: error messages are stable and order is maintained */}\n        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn('font-normal text-destructive text-sm', className)}\n      data-slot=\"field-error\"\n      data-testid={testId}\n      id={errorId}\n      role=\"alert\"\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/group/index.tsx",
      "content": "'use client';\nimport React, { createContext, useContext } from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype GroupPosition = 'first' | 'middle' | 'last';\n\ntype GroupContextValue = {\n  position?: GroupPosition;\n  attached: boolean;\n};\n\nconst GroupContext = createContext<GroupContextValue>({\n  position: undefined,\n  attached: false,\n});\n\nconst useGroup = () => useContext(GroupContext);\n\nconst Group = ({\n  children,\n  className,\n  testId,\n  attached = false,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  attached?: boolean;\n} & SharedProps) => {\n  const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));\n  const childCount = childrenArray.length;\n\n  const content = childrenArray.map((child, index) => {\n    const getPosition = (): GroupPosition | undefined => {\n      if (!attached || childCount === 1) {\n        return;\n      }\n      if (index === 0) {\n        return 'first';\n      }\n      if (index === childCount - 1) {\n        return 'last';\n      }\n      return 'middle';\n    };\n\n    const position = getPosition();\n    const element = child as React.ReactElement;\n    const key = element.key || `group-item-${index}`;\n\n    return (\n      <GroupContext.Provider\n        key={key}\n        value={{\n          position,\n          attached,\n        }}\n      >\n        {child}\n      </GroupContext.Provider>\n    );\n  });\n\n  return (\n    <div className={cn('flex w-full items-stretch', !attached && 'items-end gap-1.5', className)} data-testid={testId}>\n      {content}\n    </div>\n  );\n};\n\nexport { Group, type GroupContextValue, type GroupPosition, useGroup };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/input/index.tsx",
      "content": "/** biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: this is a complex component */\n'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Eye, EyeOff, Minus, Plus } from 'lucide-react';\nimport React, { createContext, useEffect, useState } from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { useFieldContext } from '@/registry/base-nova/protoform/components/field';\nimport { useGroup } from '@/registry/base-nova/protoform/components/group';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nexport const inputVariants = cva(\n  'placeholder:!text-muted-foreground !border-input flex w-full min-w-0 border bg-transparent text-base outline-none transition-colors [-moz-appearance:textfield] selection:bg-selection selection:text-selection-foreground file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      size: {\n        sm: 'h-7 px-2 py-1 text-sm file:h-5',\n        md: 'h-8 px-2.5 py-1 file:h-6',\n        lg: 'h-9 px-3 py-1 file:h-7',\n      },\n      variant: {\n        standard: '',\n        password: 'pr-10',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'standard',\n    },\n  }\n);\n\nconst stepControlVariants = cva('flex items-center justify-center', {\n  variants: {\n    size: {\n      sm: 'size-7 [&_svg]:size-3',\n      md: 'size-8 [&_svg]:size-3.5',\n      lg: 'size-9 [&_svg]:size-4',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst inputContainerVariants = cva('', {\n  variants: {\n    layout: {\n      standard: 'relative flex items-center',\n      password: 'relative flex w-full flex-1',\n      number: 'flex items-center gap-2',\n    },\n  },\n  defaultVariants: {\n    layout: 'standard',\n  },\n});\n\nexport interface InputProps\n  extends Omit<React.ComponentProps<'input'>, 'size'>,\n    VariantProps<typeof inputVariants>,\n    SharedProps {\n  children?: React.ReactNode;\n  containerClassName?: string;\n  showStepControls?: boolean;\n}\n\nfunction useInputState(value: InputProps['value'], defaultValue: InputProps['defaultValue']) {\n  const [internalValue, setInternalValue] = useState<string>(value?.toString() || defaultValue?.toString() || '');\n  const [showPassword, setShowPassword] = useState(false);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value.toString());\n    }\n  }, [value]);\n\n  return { value: internalValue, setValue: setInternalValue, showPassword, setShowPassword };\n}\n\nfunction useNumberInputHandlers(\n  value: string,\n  setValue: React.Dispatch<React.SetStateAction<string>>,\n  step: number,\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n) {\n  const createChangeEvent = (newValue: string): React.ChangeEvent<HTMLInputElement> =>\n    ({\n      target: { value: newValue },\n    }) as React.ChangeEvent<HTMLInputElement>;\n\n  const increment = () => {\n    const currentValue = Number.parseFloat(value) || 0;\n    const newValue = (currentValue + step).toString();\n    setValue(newValue);\n    onChange?.(createChangeEvent(newValue));\n  };\n\n  const decrement = () => {\n    const currentValue = Number.parseFloat(value) || 0;\n    const newValue = (currentValue - step).toString();\n    setValue(newValue);\n    onChange?.(createChangeEvent(newValue));\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(e.target.value);\n    onChange?.(e);\n  };\n\n  return { increment, decrement, handleInputChange };\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      showStepControls,\n      size,\n      variant,\n      testId,\n      children,\n      containerClassName,\n      readOnly,\n      defaultValue,\n      ...props\n    },\n    ref\n  ) => {\n    const { value, setValue, showPassword, setShowPassword } = useInputState(props.value, defaultValue);\n    const fieldCtx = useFieldContext();\n    const [startWidth, setStartWidth] = useState<number | undefined>();\n    const [endWidth, setEndWidth] = useState<number | undefined>();\n\n    const isNumberInput = type === 'number';\n    const isPasswordInput = type === 'password';\n    const shouldShowControls = isNumberInput && showStepControls;\n    const step = props.step ? Number(props.step) : 1;\n    const inputVariant = isPasswordInput ? 'password' : variant;\n    const { position: groupPosition, attached: groupAttached } = useGroup();\n    const attached = groupAttached || isPasswordInput;\n\n    const { increment, decrement, handleInputChange } = useNumberInputHandlers(value, setValue, step, props.onChange);\n\n    // Map input size to a button icon size that fits comfortably inside the input\n    // sm (h-8/32px) → icon-xs (24px), md (h-9/36px) → icon-sm (32px), lg (h-10/40px) → icon-sm (32px)\n    const passwordToggleSize = size === 'sm' ? ('icon-xs' as const) : ('icon-sm' as const);\n\n    let positionClasses = 'rounded-lg';\n    if (attached && groupPosition === 'first') {\n      positionClasses = 'rounded-r-none rounded-l-lg border-r-0';\n    } else if (attached && groupPosition === 'last') {\n      positionClasses = 'rounded-r-lg rounded-l-none border-l-0';\n    } else if (attached && groupPosition === 'middle') {\n      positionClasses = 'rounded-none border-r-0 border-l-0';\n    }\n\n    let inputType = type;\n    if (isPasswordInput) {\n      inputType = showPassword ? 'text' : 'password';\n    }\n\n    let layout: 'number' | 'password' | typeof variant = variant;\n    if (shouldShowControls) {\n      layout = 'number';\n    } else if (isPasswordInput) {\n      layout = 'password';\n    }\n\n    const inputElement = (\n      <input\n        {...props}\n        aria-describedby={props['aria-describedby'] ?? fieldCtx.errorId}\n        aria-invalid={props['aria-invalid'] ?? (fieldCtx.invalid || undefined)}\n        className={cn(inputVariants({ size, variant: inputVariant }), positionClasses, className)}\n        data-slot=\"input\"\n        data-testid={testId}\n        onChange={isNumberInput ? handleInputChange : props.onChange}\n        readOnly={readOnly}\n        ref={ref}\n        step={isNumberInput ? step : undefined}\n        style={{\n          paddingLeft: startWidth ? startWidth + 16 : undefined,\n          paddingRight: endWidth ? endWidth + 16 : undefined,\n        }}\n        type={inputType}\n        {...(isNumberInput ? { value } : props.value !== undefined ? { value: props.value } : { defaultValue })}\n      />\n    );\n\n    return (\n      <InputContext.Provider\n        value={{\n          startWidth,\n          setStartWidth,\n          endWidth,\n          setEndWidth,\n        }}\n      >\n        <div\n          className={cn(\n            inputContainerVariants({\n              layout,\n            }),\n            containerClassName\n          )}\n        >\n          {inputElement}\n          {children}\n          {isPasswordInput ? (\n            <InputEnd className=\"pointer-events-auto\">\n              <Button\n                aria-label={showPassword ? 'Hide password' : 'Show password'}\n                disabled={props.disabled || readOnly}\n                onClick={() => setShowPassword(!showPassword)}\n                size={passwordToggleSize}\n                type=\"button\"\n                variant=\"ghost\"\n              >\n                {showPassword ? <EyeOff size={15} /> : <Eye size={15} />}\n              </Button>\n            </InputEnd>\n          ) : null}\n          {shouldShowControls ? (\n            <div className=\"flex flex-row gap-1\">\n              <Button\n                aria-label=\"Increase value\"\n                className={stepControlVariants({ size })}\n                disabled={props.disabled || readOnly}\n                onClick={increment}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                <Plus />\n              </Button>\n              <Button\n                aria-label=\"Decrease value\"\n                className={stepControlVariants({ size })}\n                disabled={props.disabled || readOnly}\n                onClick={decrement}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                <Minus />\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </InputContext.Provider>\n    );\n  }\n);\n\nconst inputEndClassNames = 'absolute inset-y-0 right-2 z-10 flex items-center pointer-events-none';\n\nconst InputContext = createContext<{\n  setStartWidth: (width: number) => void;\n  setEndWidth: (width: number) => void;\n  startWidth: number | undefined;\n  endWidth: number | undefined;\n}>({\n  setStartWidth: () => {\n    // Default no-op function\n  },\n  setEndWidth: () => {\n    // Default no-op function\n  },\n  startWidth: undefined,\n  endWidth: undefined,\n});\n\nconst useInputContext = () => {\n  const context = React.useContext(InputContext);\n  if (!context) {\n    throw new Error('useInputContext must be used within an InputContextProvider');\n  }\n  return context;\n};\n\nconst InputStart = ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {\n  const { setStartWidth } = useInputContext();\n  const startRef = React.useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    setStartWidth(startRef.current?.offsetWidth ?? 0);\n  }, [setStartWidth]);\n\n  return (\n    <span\n      className={cn('pointer-events-none absolute inset-y-0 left-2 z-10 flex items-center', className)}\n      ref={startRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nconst InputEnd = ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {\n  const { setEndWidth } = useInputContext();\n  const endRef = React.useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    setEndWidth(endRef.current?.offsetWidth ?? 0);\n  }, [setEndWidth]);\n\n  return (\n    <span className={cn(inputEndClassNames, className)} ref={endRef} {...props}>\n      {children}\n    </span>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport { Input, InputEnd, InputStart };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/input-group/index.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { Input } from '@/registry/base-nova/protoform/components/input';\nimport { Textarea } from '@/registry/base-nova/protoform/components/textarea';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nfunction InputGroup({ className, testId, ...props }: React.ComponentProps<'div'> & SharedProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [hasBlockAlign, setHasBlockAlign] = React.useState(false);\n\n  React.useEffect(() => {\n    if (ref.current) {\n      const blockAddon = ref.current.querySelector('[data-align=\"block-start\"], [data-align=\"block-end\"]');\n      setHasBlockAlign(!!blockAddon);\n    }\n  }, []);\n\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: part of input group implementation\n    <div\n      className={cn(\n        'group/input-group !border-input relative flex w-full rounded-md border shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30',\n        'h-9 min-w-0 has-[>textarea]:h-auto',\n\n        // Conditional alignment\n        hasBlockAlign ? 'h-auto flex-col items-stretch' : 'items-center',\n\n        // Variants based on alignment.\n        'has-[>[data-align=inline-start]]:[&>input]:pl-2',\n        'has-[>[data-align=inline-end]]:[&>input]:pr-2',\n        'has-[>[data-align=block-start]]:[&>input]:pb-3',\n        'has-[>[data-align=block-end]]:[&>input]:pt-3',\n\n        // Focus state.\n        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',\n\n        // Error state.\n        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',\n\n        className\n      )}\n      data-slot=\"input-group\"\n      data-testid={testId}\n      ref={ref}\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first justify-start pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',\n        'inline-end': 'order-last justify-end pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',\n        'block-start':\n          'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',\n        'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  }\n);\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  testId,\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants> & SharedProps) {\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      testId={testId}\n      type={type}\n      variant={variant}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, testId, ...props }: Omit<React.ComponentProps<'input'>, 'size'> & SharedProps) {\n  return (\n    <div className=\"flex-1\">\n      <Input\n        className={cn(\n          'rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n          className\n        )}\n        data-slot=\"input-group-control\"\n        testId={testId}\n        {...props}\n      />\n    </div>\n  );\n}\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'> & SharedProps>(\n  ({ className, testId, ...props }, ref) => (\n    <Textarea\n      className={cn(\n        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',\n        className\n      )}\n      data-slot=\"input-group-control\"\n      ref={ref}\n      testId={testId}\n      {...props}\n    />\n  )\n);\n\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/json-field/index.tsx",
      "content": "'use client';\n\nimport { Braces, FileEdit, SpellCheck, Trash2 } from 'lucide-react';\nimport Prism from 'prismjs';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport EditorModule from 'react-simple-code-editor';\nimport { toast } from 'sonner';\n\nimport { Badge } from '@/registry/base-nova/protoform/components/badge';\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { Combobox, type ComboboxOption } from '@/registry/base-nova/protoform/components/combobox';\nimport { CopyButton } from '@/registry/base-nova/protoform/components/copy-button';\nimport { Input } from '@/registry/base-nova/protoform/components/input';\nimport { Heading, Text } from '@/registry/base-nova/protoform/components/typography';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nfunction isCommonJsEditorModule(value: unknown): value is { default: typeof EditorModule } {\n  return typeof value === 'object' && value !== null && 'default' in value;\n}\n\nconst Editor = isCommonJsEditorModule(EditorModule) ? EditorModule.default : EditorModule;\n\nconst JSON_PRISM_GRAMMAR: Prism.Grammar = {\n  property: { pattern: /(^|[^\\\\])\"(?:\\\\.|[^\\\\\"\\r\\n])*\"(?=\\s*:)/, lookbehind: true, greedy: true },\n  string: { pattern: /(^|[^\\\\])\"(?:\\\\.|[^\\\\\"\\r\\n])*\"(?!\\s*:)/, lookbehind: true, greedy: true },\n  comment: { pattern: /\\/\\/.*|\\/\\*[\\s\\S]*?(?:\\*\\/|$)/, greedy: true },\n  number: /-?\\b\\d+(?:\\.\\d+)?(?:e[+-]?\\d+)?\\b/i,\n  punctuation: /[{}[\\],]/,\n  operator: /:/,\n  boolean: /\\b(?:false|true)\\b/,\n  null: { pattern: /\\bnull\\b/, alias: 'keyword' },\n};\n\nfunction highlightJson(code: string): string {\n  return Prism.highlight(code, Prism.languages.json ?? JSON_PRISM_GRAMMAR, 'json');\n}\n\n// Regex for matching trailing 's' to create singular names\nconst TRAILING_S_REGEX = /s$/;\n\nfunction jsonEditorLabel(propertyName: string | undefined, path: string[]): string {\n  const name = propertyName ?? path.at(-1) ?? 'value';\n  return `${name.charAt(0).toUpperCase()}${name.slice(1)} JSON`;\n}\n\ntype CustomFieldConfig = {\n  fieldName: string;\n  options: { value: string; label: string }[];\n  placeholder?: string;\n  onCreateOption?: (\n    newValue: string,\n    path: string[],\n    handleFieldChange: (path: string[], value: JSONValue) => void\n  ) => Promise<void>;\n};\n\ntype JSONFieldProps = {\n  schema: JSONSchemaType;\n  value: JSONValue;\n  onChange: (value: JSONValue) => void;\n  onBlur?: () => void;\n  maxDepth?: number;\n  showPlaceholder?: boolean;\n  customFields?: CustomFieldConfig[];\n  className?: string;\n} & Omit<React.ComponentProps<'div'>, 'onChange'> &\n  SharedProps;\n\nconst isTypeSupported = (type: JSONSchemaType['type'], supportedTypes: string[]): boolean => {\n  if (Array.isArray(type)) {\n    return type.every((t) => supportedTypes.includes(t));\n  }\n  return typeof type === 'string' && supportedTypes.includes(type);\n};\n\nconst isSimpleObject = (schema: JSONSchemaType): boolean => {\n  const supportedTypes = ['string', 'number', 'integer', 'boolean', 'null'];\n  if (schema.type && isTypeSupported(schema.type, supportedTypes)) {\n    return true;\n  }\n  if (schema.type === 'object') {\n    // Allow objects with properties (even nested ones) to be considered \"simple\" for form rendering\n    return !!schema.properties && Object.keys(schema.properties).length > 0;\n  }\n  if (schema.type === 'array') {\n    // Allow arrays with defined item schemas to be considered \"simple\"\n    return !!schema.items;\n  }\n  return false;\n};\n\nconst getArrayItemDefault = (schema: JSONSchemaType): JSONValue => {\n  if ('default' in schema && schema.default !== undefined) {\n    return schema.default;\n  }\n\n  switch (schema.type) {\n    case 'string':\n      return '';\n    case 'number':\n    case 'integer':\n      return 0;\n    case 'boolean':\n      return false;\n    case 'array':\n      return [];\n    case 'object':\n      return {};\n    case 'null':\n      return null;\n    default:\n      return null;\n  }\n};\n\nconst generateExampleData = (schema: JSONSchemaType): JSONValue => {\n  if ('default' in schema && schema.default !== undefined) {\n    return schema.default;\n  }\n\n  switch (schema.type) {\n    case 'string':\n      return (schema.examples?.[0] as string) || '';\n    case 'number':\n    case 'integer':\n      return (schema.examples?.[0] as number) || 42;\n    case 'boolean':\n      return true;\n    case 'array':\n      if (schema.items) {\n        return [generateExampleData(schema.items as JSONSchemaType)];\n      }\n      return [];\n    case 'object':\n      if (schema.properties) {\n        const result: Record<string, JSONValue> = {};\n        for (const [key, propSchema] of Object.entries(schema.properties)) {\n          result[key] = generateExampleData(propSchema as JSONSchemaType);\n        }\n        return result;\n      }\n      return {};\n    case 'null':\n      return null;\n    default:\n      return null;\n  }\n};\n\nconst hasEmptyValues = (value: JSONValue, schema: JSONSchemaType): boolean => {\n  if (!value) {\n    return true;\n  }\n\n  if (schema.type === 'object' && typeof value === 'object' && !Array.isArray(value)) {\n    const obj = value as Record<string, JSONValue>;\n    if (Object.keys(obj).length === 0) {\n      return true;\n    }\n\n    // Check if all values are empty/default\n    if (schema.properties) {\n      // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: recursive empty-value checking across all JSON types\n      return Object.entries(schema.properties).every(([key, propSchema]) => {\n        const val = obj[key];\n        const subSchema = propSchema as JSONSchemaType;\n\n        if (val === undefined || val === null) {\n          return true;\n        }\n        if (subSchema.type === 'string' && val === '') {\n          return true;\n        }\n        if ((subSchema.type === 'number' || subSchema.type === 'integer') && val === 0) {\n          return true;\n        }\n        if (subSchema.type === 'boolean' && val === false) {\n          return true;\n        }\n        if (subSchema.type === 'array' && Array.isArray(val) && val.length === 0) {\n          return true;\n        }\n        if (subSchema.type === 'object' && hasEmptyValues(val, subSchema)) {\n          return true;\n        }\n\n        return false;\n      });\n    }\n  }\n\n  if (schema.type === 'array' && Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  return false;\n};\n\nconst JSONField = ({\n  schema,\n  value,\n  onChange,\n  onBlur,\n  maxDepth = 3,\n  showPlaceholder = true,\n  customFields = [],\n  className,\n  testId,\n  ref,\n  ...rest\n}: JSONFieldProps) => {\n  const [isJSONMode, setIsJSONMode] = useState(false);\n  const [jsonError, setJSONError] = useState<string>();\n\n  // Store the raw JSON string to allow immediate feedback during typing\n  // while deferring parsing until the user stops typing\n  const [rawJSONValue, setRawJSONValue] = useState<string>(() => {\n    // Use example data when starting with empty values and showPlaceholder is true\n    let initialValue: JSONValue;\n    if (showPlaceholder && hasEmptyValues(value, schema)) {\n      initialValue = generateExampleData(schema);\n    } else {\n      initialValue = value || (schema.type === 'array' ? [] : {});\n    }\n    return JSON.stringify(initialValue, null, 2);\n  });\n\n  // Use a ref to manage debouncing timeouts to avoid parsing JSON\n  // on every keystroke which would be inefficient and error-prone\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Debounce JSON parsing and parent updates to handle typing gracefully\n  const debouncedUpdateParent = useCallback(\n    (jsonString: string) => {\n      // Clear any existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      // Set a new timeout\n      timeoutRef.current = setTimeout(() => {\n        try {\n          const parsed = JSON.parse(jsonString);\n          onChange(parsed);\n          setJSONError(undefined);\n        } catch {\n          // Don't set error during normal typing\n        }\n      }, 300);\n    },\n    [onChange]\n  );\n\n  // Update rawJSONValue when value prop changes\n  useEffect(() => {\n    // Use example data when the value is empty and showPlaceholder is true\n    let displayValue: JSONValue;\n    if (showPlaceholder && hasEmptyValues(value, schema)) {\n      displayValue = generateExampleData(schema);\n    } else {\n      displayValue = value || (schema.type === 'array' ? [] : {});\n    }\n    setRawJSONValue(JSON.stringify(displayValue, null, 2));\n  }, [value, schema, showPlaceholder]);\n\n  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: handles bidirectional JSON/Form mode switching with validation\n  const handleSwitchToFormMode = () => {\n    if (isJSONMode) {\n      // When switching to Form mode, ensure we have valid JSON\n      try {\n        const parsed = JSON.parse(rawJSONValue);\n        // Update the parent component's state with the parsed value\n        onChange(parsed);\n        // Switch to form mode\n        setIsJSONMode(false);\n      } catch (err) {\n        setJSONError(err instanceof Error ? err.message : 'Invalid JSON');\n      }\n    } else {\n      // When switching to JSON mode, generate example data if showPlaceholder is true and current value is empty\n      let displayValue: JSONValue;\n      if (showPlaceholder && hasEmptyValues(value, schema)) {\n        displayValue = generateExampleData(schema);\n      } else {\n        displayValue = value || (schema.type === 'array' ? [] : {});\n      }\n      setRawJSONValue(JSON.stringify(displayValue, null, 2));\n      setIsJSONMode(true);\n    }\n  };\n\n  const formatJSON = () => {\n    try {\n      const jsonStr = rawJSONValue.trim();\n      if (!jsonStr) {\n        return;\n      }\n      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);\n      setRawJSONValue(formatted);\n      debouncedUpdateParent(formatted);\n      setJSONError(undefined);\n    } catch (err) {\n      setJSONError(err instanceof Error ? err.message : 'Invalid JSON');\n    }\n  };\n\n  // biome-ignore lint/nursery/useMaxParams: Complex form rendering function with many context parameters\n  const renderFormFields = (\n    propSchema: JSONSchemaType,\n    currentValue: JSONValue,\n    path: string[] = [],\n    depth = 0,\n    parentSchema?: JSONSchemaType,\n    propertyName?: string\n  ): // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: renders form controls for all JSON schema types recursively\n  React.ReactNode => {\n    if (depth >= maxDepth && (propSchema.type === 'object' || propSchema.type === 'array')) {\n      // Render as JSON editor when max depth is reached\n      return (\n        <JSONEditor\n          error={jsonError}\n          label={jsonEditorLabel(propertyName, path)}\n          onChange={(newValue) => {\n            try {\n              const parsed = JSON.parse(newValue);\n              handleFieldChange(path, parsed);\n              setJSONError(undefined);\n            } catch (err) {\n              setJSONError(err instanceof Error ? err.message : 'Invalid JSON');\n            }\n          }}\n          value={JSON.stringify(currentValue ?? (propSchema.type === 'array' ? [] : {}), null, 2)}\n        />\n      );\n    }\n\n    // Check if this property is required in the parent schema\n    const isRequired = parentSchema?.required?.includes(propertyName || '') ?? false;\n\n    let fieldType = propSchema.type;\n    if (Array.isArray(fieldType)) {\n      // Of the possible types, find the first non-null type to determine the control to render\n      fieldType = fieldType.find((t) => t !== 'null') ?? fieldType[0];\n    }\n\n    switch (fieldType) {\n      case 'string': {\n        // Check for custom field configuration\n        const customFieldConfig = customFields.find((field) => field.fieldName === propertyName);\n        if (customFieldConfig) {\n          // Auto-select if there's only one option and no current value\n          // Use the default value instead of triggering state updates during render\n          const effectiveValue = (() => {\n            if (customFieldConfig.options.length === 1 && !currentValue) {\n              return customFieldConfig.options[0]?.value ?? '';\n            }\n            return currentValue as string;\n          })();\n\n          return (\n            <Combobox\n              creatable\n              onChange={(val) => {\n                if (val || isRequired) {\n                  handleFieldChange(path, val);\n                } else {\n                  handleFieldChange(path, undefined);\n                }\n              }}\n              onCreateOption={(newValue) => {\n                if (customFieldConfig.onCreateOption) {\n                  customFieldConfig.onCreateOption(newValue, path, handleFieldChange);\n                } else {\n                  const newOption = { value: newValue, label: newValue };\n                  customFieldConfig.options.push(newOption);\n                  handleFieldChange(path, newValue);\n                }\n              }}\n              options={customFieldConfig.options}\n              placeholder={customFieldConfig.placeholder || 'Select an option...'}\n              value={effectiveValue ?? ''}\n            />\n          );\n        }\n\n        if (propSchema.oneOf?.every((option) => typeof option.const === 'string' && typeof option.title === 'string')) {\n          const oneOfOptions: ComboboxOption[] = propSchema.oneOf.map((option) => ({\n            value: option.const as string,\n            label: option.title as string,\n          }));\n\n          return (\n            <Combobox\n              creatable\n              onChange={(val) => {\n                if (val || isRequired) {\n                  handleFieldChange(path, val);\n                } else {\n                  handleFieldChange(path, undefined);\n                }\n              }}\n              onCreateOption={(newValue) => {\n                const newOption = { value: newValue, label: newValue };\n                oneOfOptions.push(newOption);\n                handleFieldChange(path, newValue);\n              }}\n              options={oneOfOptions}\n              placeholder=\"Select an option...\"\n              value={(currentValue as string) ?? ''}\n            />\n          );\n        }\n\n        if (propSchema.enum) {\n          const enumOptions: ComboboxOption[] = propSchema.enum.map((option) => ({\n            value: option,\n            label: option,\n          }));\n\n          return (\n            <Combobox\n              creatable\n              onChange={(val) => {\n                if (val || isRequired) {\n                  handleFieldChange(path, val);\n                } else {\n                  handleFieldChange(path, undefined);\n                }\n              }}\n              onCreateOption={(newValue) => {\n                const newOption = { value: newValue, label: newValue };\n                enumOptions.push(newOption);\n                handleFieldChange(path, newValue);\n              }}\n              options={enumOptions}\n              placeholder=\"Select an option...\"\n              value={(currentValue as string) ?? ''}\n            />\n          );\n        }\n\n        let inputType = 'text';\n        switch (propSchema.format) {\n          case 'email':\n            inputType = 'email';\n            break;\n          case 'uri':\n            inputType = 'url';\n            break;\n          case 'date':\n            inputType = 'date';\n            break;\n          case 'date-time':\n            inputType = 'datetime-local';\n            break;\n          default:\n            inputType = 'text';\n            break;\n        }\n\n        return (\n          <Input\n            maxLength={propSchema.maxLength}\n            minLength={propSchema.minLength}\n            onChange={(e) => {\n              const val = e.target.value;\n              // Always allow setting string values, including empty strings\n              handleFieldChange(path, val);\n            }}\n            pattern={propSchema.pattern}\n            placeholder={propSchema.description}\n            required={isRequired}\n            type={inputType}\n            value={(currentValue as string) ?? ''}\n          />\n        );\n      }\n\n      case 'number':\n        return (\n          <Input\n            max={propSchema.maximum}\n            min={propSchema.minimum}\n            onChange={(e) => {\n              const val = e.target.value;\n              if (val || isRequired) {\n                const num = Number(val);\n                if (!Number.isNaN(num)) {\n                  handleFieldChange(path, num);\n                }\n              } else {\n                handleFieldChange(path, undefined);\n              }\n            }}\n            placeholder={propSchema.description}\n            required={isRequired}\n            type=\"number\"\n            value={(currentValue as number)?.toString() ?? ''}\n          />\n        );\n\n      case 'integer':\n        return (\n          <Input\n            max={propSchema.maximum}\n            min={propSchema.minimum}\n            onChange={(e) => {\n              const val = e.target.value;\n              if (val || isRequired) {\n                const num = Number(val);\n                if (!Number.isNaN(num) && Number.isInteger(num)) {\n                  handleFieldChange(path, num);\n                }\n              } else {\n                handleFieldChange(path, undefined);\n              }\n            }}\n            placeholder={propSchema.description}\n            required={isRequired}\n            step=\"1\"\n            type=\"number\"\n            value={(currentValue as number)?.toString() ?? ''}\n          />\n        );\n\n      case 'boolean':\n        return (\n          <Input\n            checked={(currentValue as boolean) ?? false}\n            className=\"h-4 w-4\"\n            onChange={(e) => handleFieldChange(path, e.target.checked)}\n            required={isRequired}\n            type=\"checkbox\"\n          />\n        );\n      case 'null':\n        return null;\n      case 'object':\n        if (!propSchema.properties) {\n          return (\n            <JSONEditor\n              error={jsonError}\n              label={jsonEditorLabel(propertyName, path)}\n              onChange={(newValue) => {\n                try {\n                  const parsed = JSON.parse(newValue);\n                  handleFieldChange(path, parsed);\n                  setJSONError(undefined);\n                } catch (err) {\n                  setJSONError(err instanceof Error ? err.message : 'Invalid JSON');\n                }\n              }}\n              value={JSON.stringify(currentValue ?? {}, null, 2)}\n            />\n          );\n        }\n\n        return (\n          <div className=\"space-y-2 p-3\">\n            {Object.entries(propSchema.properties).map(([key, subSchema]) => (\n              <div key={key}>\n                <div className=\"mb-1 flex items-center gap-2\">\n                  <Text className=\"text-sm\" variant=\"label\">\n                    {key}\n                    {propSchema.required?.includes(key) && <span className=\"ml-1 text-destructive\">*</span>}\n                  </Text>\n                  <Badge className=\"px-1 py-0 text-xs\" variant=\"outline\">\n                    {(subSchema as JSONSchemaType).type || 'unknown'}\n                  </Badge>\n                </div>\n                {renderFormFields(\n                  subSchema as JSONSchemaType,\n                  (currentValue as Record<string, JSONValue>)?.[key],\n                  [...path, key],\n                  depth + 1,\n                  propSchema,\n                  key\n                )}\n              </div>\n            ))}\n          </div>\n        );\n      case 'array': {\n        let arrayValue = Array.isArray(currentValue) ? currentValue : [];\n        if (!propSchema.items) {\n          return null;\n        }\n\n        // Handle empty arrays without triggering state update during render\n        if (arrayValue.length === 0) {\n          const defaultValue = getArrayItemDefault(propSchema.items as JSONSchemaType);\n          arrayValue = [defaultValue];\n        }\n\n        // If the array items are simple, render as form fields, otherwise use JSON editor\n        if (isSimpleObject(propSchema.items)) {\n          return (\n            <div className=\"space-y-4\">\n              {propSchema.description ? (\n                <Text className=\"text-muted-foreground\" variant=\"small\">\n                  {propSchema.description}\n                </Text>\n              ) : null}\n\n              <div className=\"space-y-4\">\n                {arrayValue.map((item, index) => {\n                  // Create a contextual name for the array item\n                  const itemTypeName =\n                    propSchema.items?.title ||\n                    propSchema.items?.description ||\n                    propertyName?.replace(TRAILING_S_REGEX, '') ||\n                    'Item'; // Remove trailing 's' from property name\n                  const itemDisplayName = itemTypeName.charAt(0).toUpperCase() + itemTypeName.slice(1);\n\n                  return (\n                    // biome-ignore lint/suspicious/noArrayIndexKey: dynamic array items have no stable identifier\n                    <div className=\"rounded-lg border border-border bg-card p-4\" key={index}>\n                      <div className=\"mb-3 flex items-center justify-between\">\n                        <Heading className=\"text-sm\" level={4}>\n                          {itemDisplayName} #{index + 1}\n                        </Heading>\n                        <Button\n                          className={arrayValue.length <= 1 ? 'invisible' : ''}\n                          disabled={arrayValue.length <= 1}\n                          onClick={() => {\n                            const newArray = [...arrayValue];\n                            newArray.splice(index, 1);\n                            handleFieldChange(path, newArray);\n                          }}\n                          size=\"sm\"\n                          type=\"button\"\n                          variant=\"outline\"\n                        >\n                          <Trash2 className=\"h-4 w-4\" />\n                        </Button>\n                      </div>\n                      <div className=\"space-y-3\">\n                        {propSchema.items?.type === 'object' && propSchema.items.properties\n                          ? Object.entries(propSchema.items.properties).map(([key, subSchema]) => (\n                              <div className=\"space-y-1\" key={key}>\n                                <div className=\"flex items-center gap-2\">\n                                  <Text className=\"text-sm\" variant=\"label\">\n                                    {key}\n                                  </Text>\n                                  <Badge className=\"px-1 py-0 text-xs\" variant=\"outline\">\n                                    {(subSchema as JSONSchemaType).type || 'unknown'}\n                                  </Badge>\n                                  {propSchema.items?.required?.includes(key) && (\n                                    <span className=\"ml-1 text-destructive\">*</span>\n                                  )}\n                                </div>\n                                {renderFormFields(\n                                  subSchema as JSONSchemaType,\n                                  (item as Record<string, JSONValue>)?.[key],\n                                  [...path, index.toString(), key],\n                                  depth + 1,\n                                  propSchema.items,\n                                  key\n                                )}\n                              </div>\n                            ))\n                          : renderFormFields(\n                              propSchema.items as JSONSchemaType,\n                              item,\n                              [...path, index.toString()],\n                              depth + 1\n                            )}\n                      </div>\n                    </div>\n                  );\n                })}\n                <Button\n                  className=\"w-full\"\n                  onClick={() => {\n                    const defaultValue = getArrayItemDefault(propSchema.items as JSONSchemaType);\n                    handleFieldChange(path, [...arrayValue, defaultValue]);\n                  }}\n                  size=\"sm\"\n                  type=\"button\"\n                  variant=\"dashed\"\n                >\n                  + Add{' '}\n                  {propSchema.items?.title ||\n                    propSchema.items?.description ||\n                    propertyName?.replace(TRAILING_S_REGEX, '') ||\n                    'Item'}\n                </Button>\n              </div>\n            </div>\n          );\n        }\n\n        // For complex arrays, fall back to JSON editor\n        return (\n          <JSONEditor\n            error={jsonError}\n            label={jsonEditorLabel(propertyName, path)}\n            onChange={(newValue) => {\n              try {\n                const parsed = JSON.parse(newValue);\n                handleFieldChange(path, parsed);\n                setJSONError(undefined);\n              } catch (err) {\n                setJSONError(err instanceof Error ? err.message : 'Invalid JSON');\n              }\n            }}\n            value={JSON.stringify(currentValue ?? [], null, 2)}\n          />\n        );\n      }\n      default:\n        return null;\n    }\n  };\n\n  const handleFieldChange = (path: string[], fieldValue: JSONValue) => {\n    if (path.length === 0) {\n      onChange(fieldValue);\n      return;\n    }\n\n    try {\n      const newValue = updateValueAtPath(value, path, fieldValue);\n      onChange(newValue);\n    } catch {\n      onChange(value);\n    }\n  };\n\n  const shouldUseJSONMode =\n    (schema.type === 'object' && (!schema.properties || Object.keys(schema.properties).length === 0)) ||\n    (schema.type === 'array' && !schema.items);\n\n  useEffect(() => {\n    if (shouldUseJSONMode && !isJSONMode) {\n      setIsJSONMode(true);\n    }\n  }, [shouldUseJSONMode, isJSONMode]);\n\n  // Handle initialization of empty arrays with default values\n  useEffect(() => {\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: recursive schema traversal to initialize nested array defaults\n    const initializeArrayDefaults = (currentSchema: JSONSchemaType, currentValue: JSONValue, path: string[] = []) => {\n      if (currentSchema.type === 'array' && currentSchema.items) {\n        const arrayValue = Array.isArray(currentValue) ? currentValue : [];\n        if (arrayValue.length === 0) {\n          const defaultValue = getArrayItemDefault(currentSchema.items as JSONSchemaType);\n          const newValue = updateValueAtPath(value, path, [defaultValue]);\n          onChange(newValue);\n        }\n      } else if (currentSchema.type === 'object' && currentSchema.properties) {\n        for (const [key, subSchema] of Object.entries(currentSchema.properties)) {\n          const subValue = (currentValue as Record<string, JSONValue>)?.[key];\n          initializeArrayDefaults(subSchema as JSONSchemaType, subValue, [...path, key]);\n        }\n      }\n    };\n\n    // Only initialize if we have a value and are not in JSON mode\n    if (value !== undefined && !isJSONMode) {\n      initializeArrayDefaults(schema, value);\n    }\n  }, [schema, value, onChange, isJSONMode]);\n\n  // Handle auto-selection for custom fields with single options\n  // biome-ignore lint/correctness/useExhaustiveDependencies: part of DynamicJSONForm implementation\n  useEffect(() => {\n    const syncAutoSelections = (currentSchema: JSONSchemaType, currentValue: JSONValue, path: string[] = []) => {\n      if (currentSchema.type === 'object' && currentSchema.properties) {\n        for (const [key, subSchema] of Object.entries(currentSchema.properties)) {\n          const subValue = (currentValue as Record<string, JSONValue>)?.[key];\n          const customFieldConfig = customFields.find((field) => field.fieldName === key);\n\n          if (customFieldConfig && customFieldConfig.options.length === 1 && !subValue) {\n            const autoSelectedValue = customFieldConfig.options[0]?.value ?? '';\n            handleFieldChange([...path, key], autoSelectedValue);\n          }\n\n          syncAutoSelections(subSchema as JSONSchemaType, subValue, [...path, key]);\n        }\n      }\n    };\n\n    if (value !== undefined && !isJSONMode && customFields.length > 0) {\n      syncAutoSelections(schema, value);\n    }\n  }, [schema, value, customFields, isJSONMode]);\n\n  return (\n    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: onBlur needed for react-hook-form field tracking\n    // biome-ignore lint/a11y/noStaticElementInteractions: onBlur needed for react-hook-form field tracking\n    <div className={cn('space-y-4', className)} data-testid={testId} onBlur={onBlur} ref={ref} {...rest}>\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        {isJSONMode ? (\n          <>\n            <CopyButton\n              content={JSON.stringify(value, null, 2)}\n              onCopy={() =>\n                toast.success('JSON copied', {\n                  description: 'The JSON data has been successfully copied to your clipboard.',\n                })\n              }\n              size=\"sm\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Copy JSON\n            </CopyButton>\n            <Button onClick={formatJSON} size=\"sm\" type=\"button\" variant=\"outline\">\n              <SpellCheck className=\"h-4 w-4\" />\n              Format JSON\n            </Button>\n          </>\n        ) : null}\n\n        <Button onClick={handleSwitchToFormMode} size=\"sm\" type=\"button\" variant=\"outline\">\n          {isJSONMode ? (\n            <>\n              <FileEdit className=\"h-4 w-4\" />\n              Switch to Form\n            </>\n          ) : (\n            <>\n              <Braces className=\"h-4 w-4\" />\n              Switch to JSON\n            </>\n          )}\n        </Button>\n      </div>\n\n      {isJSONMode ? (\n        <JSONEditor\n          error={jsonError}\n          label=\"JSON value\"\n          onChange={(newValue) => {\n            // Always update local state\n            setRawJSONValue(newValue);\n\n            // Use the debounced function to attempt parsing and updating parent\n            debouncedUpdateParent(newValue);\n          }}\n          value={rawJSONValue}\n        />\n      ) : (\n        renderFormFields(schema, value)\n      )}\n    </div>\n  );\n};\n\ntype JSONEditorProps = {\n  value: string;\n  onChange: (value: string) => void;\n  error?: string;\n  label: string;\n};\n\nconst JSONEditor = ({ value, onChange, error: externalError, label }: JSONEditorProps) => {\n  const [editorContent, setEditorContent] = useState(value || '');\n  const [internalError, setInternalError] = useState<string | undefined>(undefined);\n  const editorId = React.useId();\n\n  useEffect(() => {\n    setEditorContent(value || '');\n  }, [value]);\n\n  const handleEditorChange = (newContent: string) => {\n    setEditorContent(newContent);\n    setInternalError(undefined);\n    onChange(newContent);\n  };\n\n  const displayError = internalError || externalError;\n\n  return (\n    <div className=\"relative\">\n      <label className=\"sr-only\" htmlFor={editorId}>\n        {label}\n      </label>\n      <div className={cn('rounded-md border', displayError ? 'border-destructive' : 'border-border')}>\n        <Editor\n          className=\"w-full\"\n          highlight={highlightJson}\n          onValueChange={handleEditorChange}\n          padding={10}\n          textareaId={editorId}\n          style={{\n            fontFamily: '\"Fira code\", \"Fira Mono\", monospace',\n            fontSize: 14,\n            backgroundColor: 'transparent',\n            minHeight: '100px',\n          }}\n          value={editorContent}\n        />\n      </div>\n      {displayError ? (\n        <Text className=\"mt-1 text-destructive\" variant=\"small\">\n          {displayError}\n        </Text>\n      ) : null}\n    </div>\n  );\n};\n\ntype JSONValue = string | number | boolean | null | undefined | JSONValue[] | { [key: string]: JSONValue };\n\ntype JSONSchemaConst = {\n  const: JSONValue;\n  title?: string;\n  description?: string;\n};\n\ntype JSONSchemaType = {\n  type?:\n    | 'string'\n    | 'number'\n    | 'integer'\n    | 'boolean'\n    | 'array'\n    | 'object'\n    | 'null'\n    | ('string' | 'number' | 'integer' | 'boolean' | 'array' | 'object' | 'null')[];\n  title?: string;\n  description?: string;\n  required?: string[];\n  default?: JSONValue;\n  examples?: JSONValue[];\n  properties?: Record<string, JSONSchemaType>;\n  items?: JSONSchemaType;\n  minimum?: number;\n  maximum?: number;\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  format?: string;\n  enum?: string[];\n  const?: JSONValue;\n  oneOf?: (JSONSchemaType | JSONSchemaConst)[];\n  anyOf?: (JSONSchemaType | JSONSchemaConst)[];\n};\n\ntype JSONObject = { [key: string]: JSONValue };\n\nfunction updateValueAtPath(obj: JSONValue, path: string[], value: JSONValue): JSONValue {\n  if (path.length === 0) {\n    return value;\n  }\n\n  let mutableObj = obj;\n  if (obj === null || obj === undefined) {\n    mutableObj = Number.isNaN(Number(path[0])) ? {} : [];\n  }\n\n  if (Array.isArray(mutableObj)) {\n    return updateArray(mutableObj, path, value);\n  }\n  if (typeof mutableObj === 'object' && mutableObj !== null) {\n    return updateObject(mutableObj as JSONObject, path, value);\n  }\n  return mutableObj;\n}\n\nfunction updateArray(array: JSONValue[], path: string[], value: JSONValue): JSONValue[] {\n  const [index, ...restPath] = path;\n  const arrayIndex = Number(index);\n\n  if (Number.isNaN(arrayIndex)) {\n    return array;\n  }\n\n  if (arrayIndex < 0) {\n    return array;\n  }\n\n  let newArray: JSONValue[] = [];\n  for (let i = 0; i < array.length; i++) {\n    newArray[i] = i in array ? array[i] : null;\n  }\n\n  if (arrayIndex >= newArray.length) {\n    const extendedArray: JSONValue[] = new Array(arrayIndex).fill(null);\n    // Copy over the existing elements (now guaranteed to be dense)\n    for (let i = 0; i < newArray.length; i++) {\n      extendedArray[i] = newArray[i];\n    }\n    newArray = extendedArray;\n  }\n\n  if (restPath.length === 0) {\n    newArray[arrayIndex] = value;\n  } else {\n    newArray[arrayIndex] = updateValueAtPath(newArray[arrayIndex], restPath, value);\n  }\n  return newArray;\n}\n\nfunction updateObject(obj: JSONObject, path: string[], value: JSONValue): JSONObject {\n  const [key, ...restPath] = path;\n\n  if (typeof key !== 'string') {\n    return obj;\n  }\n\n  const newObj = { ...obj };\n\n  if (restPath.length === 0) {\n    newObj[key] = value;\n  } else {\n    // Ensure key exists\n    if (!(key in newObj)) {\n      newObj[key] = {};\n    }\n    newObj[key] = updateValueAtPath(newObj[key], restPath, value);\n  }\n  return newObj;\n}\n\nexport type { CustomFieldConfig, JSONObject, JSONSchemaConst, JSONSchemaType, JSONValue };\nexport { JSONField };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/key-value-field/index.tsx",
      "content": "'use client';\n\nimport { Plus, X } from 'lucide-react';\nimport { type ReactNode, useMemo, useRef } from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { Combobox, type ComboboxProps } from '@/registry/base-nova/protoform/components/combobox';\nimport { Input, type InputProps } from '@/registry/base-nova/protoform/components/input';\nimport { Label } from '@/registry/base-nova/protoform/components/label';\nimport { findDuplicateIndices, useInputListFocus } from '@/registry/base-nova/protoform/lib/input-utils';\nimport type { SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nexport type KeyValuePair = {\n  key: string;\n  value: string;\n};\n\ntype InputFieldConfig = { mode?: 'input' } & Omit<InputProps, 'value' | 'onChange' | 'disabled' | 'aria-invalid'>;\ntype ComboboxFieldConfig = { mode: 'combobox' } & Omit<ComboboxProps, 'value' | 'onChange' | 'disabled'>;\nexport type KeyValueFieldConfig = InputFieldConfig | ComboboxFieldConfig;\n\nexport type KeyValueFieldError = {\n  key?: string;\n  value?: string;\n};\n\nexport interface KeyValueFieldProps extends SharedProps {\n  addButtonLabel?: string;\n  description?: ReactNode;\n  disabled?: boolean;\n  errors?: Array<KeyValueFieldError | undefined>;\n  keyFieldProps?: KeyValueFieldConfig;\n  label?: ReactNode;\n  maxItems?: number;\n  onChange?: (value: KeyValuePair[]) => void;\n  showAddButton?: boolean;\n  value?: KeyValuePair[];\n  valueFieldProps?: KeyValueFieldConfig;\n}\n\nfunction FieldRenderer({\n  config,\n  value,\n  onChange,\n  disabled,\n  isInvalid,\n  testId,\n}: {\n  config: KeyValueFieldConfig;\n  value: string;\n  onChange: (value: string) => void;\n  disabled?: boolean;\n  isInvalid: boolean;\n  testId?: string;\n}) {\n  if (config.mode === 'combobox') {\n    const { mode: _m, ...comboboxProps } = config;\n    return <Combobox {...comboboxProps} disabled={disabled} onChange={onChange} testId={testId} value={value} />;\n  }\n\n  const { mode: _, ...inputProps } = config;\n  return (\n    <Input\n      {...inputProps}\n      aria-invalid={isInvalid}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      testId={testId}\n      value={value}\n    />\n  );\n}\n\nfunction ErrorRow({ keyError, valueError }: { keyError?: string; valueError?: string }) {\n  if (!(keyError || valueError)) {\n    return null;\n  }\n  return (\n    <>\n      {keyError ? <p className=\"-mt-1 text-destructive text-sm\">{keyError}</p> : <span />}\n      {valueError ? <p className=\"-mt-1 text-destructive text-sm\">{valueError}</p> : <span />}\n      <span />\n    </>\n  );\n}\n\nfunction KeyValueRow({\n  pair,\n  index,\n  isDuplicate,\n  isLast,\n  error,\n  disabled,\n  keyFieldProps,\n  valueFieldProps,\n  testId,\n  addButtonLabel,\n  onKeyChange,\n  onValueChange,\n  onDelete,\n  onAdd,\n}: {\n  pair: KeyValuePair;\n  index: number;\n  isDuplicate: boolean;\n  isLast: boolean;\n  error?: KeyValueFieldError;\n  disabled?: boolean;\n  keyFieldProps: KeyValueFieldConfig;\n  valueFieldProps: KeyValueFieldConfig;\n  testId?: string;\n  addButtonLabel: string;\n  onKeyChange: (index: number, key: string) => void;\n  onValueChange: (index: number, val: string) => void;\n  onDelete: (index: number) => void;\n  onAdd?: () => void;\n}) {\n  const isKeyInvalid = Boolean(error?.key) || Boolean(pair.value && !pair.key) || isDuplicate;\n  const isValueInvalid = Boolean(error?.value) || Boolean(pair.key && !pair.value);\n\n  return (\n    <div className=\"grid grid-cols-[1fr_1fr_auto] items-center gap-2\">\n      <FieldRenderer\n        config={keyFieldProps}\n        disabled={disabled}\n        isInvalid={isKeyInvalid}\n        onChange={(val) => onKeyChange(index, val)}\n        testId={testId ? `${testId}-key-${index}` : undefined}\n        value={pair.key}\n      />\n      <FieldRenderer\n        config={valueFieldProps}\n        disabled={disabled}\n        isInvalid={isValueInvalid}\n        onChange={(val) => onValueChange(index, val)}\n        testId={testId ? `${testId}-value-${index}` : undefined}\n        value={pair.value}\n      />\n      <Button\n        aria-label=\"Delete key-value pair\"\n        data-testid={testId ? `${testId}-delete-${index}` : undefined}\n        disabled={disabled}\n        onClick={() => onDelete(index)}\n        size=\"icon-sm\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        <X size={16} />\n      </Button>\n      <ErrorRow keyError={isDuplicate ? 'Duplicate key' : error?.key} valueError={error?.value} />\n      {onAdd && isLast ? (\n        <Button\n          className=\"col-span-2\"\n          data-slot=\"add-button\"\n          data-testid={testId ? `${testId}-add` : undefined}\n          disabled={disabled}\n          onClick={onAdd}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"outline\"\n        >\n          <Plus size={14} />\n          {addButtonLabel}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function KeyValueField({\n  value = [],\n  onChange,\n  errors,\n  label,\n  description,\n  addButtonLabel = 'Add',\n  keyFieldProps = { placeholder: 'Key' },\n  valueFieldProps = { placeholder: 'Value' },\n  showAddButton = true,\n  disabled,\n  maxItems,\n  testId,\n}: KeyValueFieldProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { onAdd, onRemove } = useInputListFocus(containerRef);\n\n  const duplicateIndices = useMemo(() => findDuplicateIndices(value, (pair) => pair.key), [value]);\n\n  const isAtLimit = maxItems !== undefined && value.length >= maxItems;\n\n  const handleAdd = () => {\n    onChange?.([...value, { key: '', value: '' }]);\n    onAdd();\n  };\n\n  const handleKeyChange = (index: number, key: string) => {\n    const current = value[index];\n    if (!current) {\n      return;\n    }\n    const updated = [...value];\n    updated[index] = { ...current, key };\n    onChange?.(updated);\n  };\n\n  const handleValueChange = (index: number, val: string) => {\n    const current = value[index];\n    if (!current) {\n      return;\n    }\n    const updated = [...value];\n    updated[index] = { ...current, value: val };\n    onChange?.(updated);\n  };\n\n  const handleDelete = (index: number) => {\n    const updated = [...value];\n    updated.splice(index, 1);\n    onChange?.(updated);\n    onRemove(index);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-2\" data-slot=\"key-value-field\" data-testid={testId} ref={containerRef}>\n      {label || description ? (\n        <div className=\"flex flex-col gap-0.5\">\n          {label ? <Label className=\"font-medium\">{label}</Label> : null}\n          {description ? <p className=\"text-muted-foreground text-sm\">{description}</p> : null}\n        </div>\n      ) : null}\n      {value.map((pair, index) => (\n        <KeyValueRow\n          addButtonLabel={addButtonLabel}\n          disabled={disabled}\n          error={errors?.[index]}\n          index={index}\n          isDuplicate={duplicateIndices.has(index)}\n          isLast={index === value.length - 1}\n          key={/* biome-ignore lint/suspicious/noArrayIndexKey: pairs may be duplicated */ index}\n          keyFieldProps={keyFieldProps}\n          onAdd={showAddButton && !isAtLimit ? handleAdd : undefined}\n          onDelete={handleDelete}\n          onKeyChange={handleKeyChange}\n          onValueChange={handleValueChange}\n          pair={pair}\n          testId={testId}\n          valueFieldProps={valueFieldProps}\n        />\n      ))}\n      {value.length === 0 && showAddButton && !isAtLimit ? (\n        <Button\n          data-slot=\"add-button\"\n          data-testid={testId ? `${testId}-add` : undefined}\n          disabled={disabled}\n          onClick={handleAdd}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"outline\"\n        >\n          <Plus size={14} />\n          {addButtonLabel}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/label/index.tsx",
      "content": "import React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<'label'> & SharedProps>(\n  ({ className, testId, ...props }, ref) => (\n    <label\n      className={cn(\n        'select-none font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',\n        className\n      )}\n      data-slot=\"label\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nLabel.displayName = 'Label';\n\nexport { Label };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/multi-select/index.tsx",
      "content": "/** biome-ignore-all lint/a11y/useKeyWithClickEvents: part of multi select implementation */\n/** biome-ignore-all lint/a11y/noStaticElementInteractions: part of multi select implementation */\n'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { Check, ChevronDownIcon } from 'lucide-react';\nimport React from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/base-nova/protoform/components/command';\nimport { TagsValue } from '@/registry/base-nova/protoform/components/tags';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/base-nova/protoform/components/tooltip';\nimport { useControllableState } from '@/registry/base-nova/protoform/hooks/use-controllable-state';\nimport { narrowOpenChange, renderWithDataState } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type PortalContentProps, type PortalRootProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nexport type MultiSelectOptionItem = {\n  value: string;\n  label?: React.ReactNode;\n  selectedTestId?: string;\n  testId?: string;\n};\n\ntype MultiSelectContextValue = {\n  value: string[];\n\n  open: boolean;\n\n  onSelect: (value: string, item: MultiSelectOptionItem) => void;\n\n  onDeselect: (value: string, item: MultiSelectOptionItem) => void;\n\n  onSearch?: (keyword?: string) => void;\n\n  filter?: boolean | ((keyword: string, current: string) => boolean);\n\n  disabled?: boolean;\n\n  maxCount?: number;\n\n  itemCache: Map<string, MultiSelectOptionItem>;\n};\n\nconst MultiSelectContext = React.createContext<MultiSelectContextValue | undefined>(undefined);\n\nfunction useMultiSelect() {\n  const context = React.useContext(MultiSelectContext);\n\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n\n  return context;\n}\n\ntype MultiSelectProps = Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>, 'onOpenChange'> &\n  SharedProps & {\n    value?: string[];\n    onValueChange?: (value: string[], items: MultiSelectOptionItem[]) => void;\n    onSelect?: (value: string, item: MultiSelectOptionItem) => void;\n    onDeselect?: (value: string, item: MultiSelectOptionItem) => void;\n    defaultValue?: string[];\n    onOpenChange?: (open: boolean) => void;\n    onSearch?: (keyword: string | undefined) => void;\n    filter?: boolean | ((keyword: string, current: string) => boolean);\n    disabled?: boolean;\n    maxCount?: number;\n  };\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({\n  value: valueProp,\n  onValueChange: onValueChangeProp,\n  onDeselect: onDeselectProp,\n  onSelect: onSelectProp,\n  defaultValue,\n  open: openProp,\n  onOpenChange,\n  defaultOpen,\n  onSearch,\n  filter,\n  disabled,\n  maxCount,\n  ...popoverProps\n}) => {\n  const itemCache = React.useRef(new Map<string, MultiSelectOptionItem>()).current;\n\n  const handleValueChange = React.useCallback(\n    (state: string[]) => {\n      if (onValueChangeProp) {\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        const items = state.map((v) => itemCache.get(v)!);\n\n        onValueChangeProp(state, items);\n      }\n    },\n    [onValueChangeProp, itemCache]\n  );\n\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue ?? [],\n    onChange: handleValueChange,\n  });\n\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n  });\n\n  const handleSelect = React.useCallback(\n    (selectedValue: string, item: MultiSelectOptionItem) => {\n      setValue((prev: string[]) => {\n        if (prev.includes(selectedValue)) {\n          return prev;\n        }\n\n        onSelectProp?.(selectedValue, item);\n\n        return [...prev, selectedValue];\n      });\n    },\n    [onSelectProp, setValue]\n  );\n\n  const handleDeselect = React.useCallback(\n    (deselectedValue: string, item: MultiSelectOptionItem) => {\n      setValue((prev: string[]) => {\n        if (!prev.includes(deselectedValue)) {\n          return prev;\n        }\n\n        onDeselectProp?.(deselectedValue, item);\n\n        return prev.filter((v: string) => v !== deselectedValue);\n      });\n    },\n    [onDeselectProp, setValue]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      value: value || [],\n      open,\n      onSearch,\n      filter,\n      disabled,\n      maxCount,\n      onSelect: handleSelect,\n      onDeselect: handleDeselect,\n      itemCache,\n    }),\n    [value, open, onSearch, filter, disabled, maxCount, handleSelect, handleDeselect, itemCache]\n  );\n\n  return (\n    <MultiSelectContext.Provider value={contextValue}>\n      <PopoverPrimitive.Root {...popoverProps} onOpenChange={narrowOpenChange(setOpen)} open={open} />\n    </MultiSelectContext.Provider>\n  );\n};\n\nMultiSelect.displayName = 'MultiSelect';\n\ninterface MultiSelectTriggerProps extends React.ComponentPropsWithoutRef<'div'>, SharedProps {}\n\nfunction PreventClick(e: React.MouseEvent | React.TouchEvent) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n\nconst MultiSelectTrigger = React.forwardRef<React.ComponentRef<'button'>, MultiSelectTriggerProps>(\n  ({ className, children, testId, ...props }, forwardedRef) => {\n    const { disabled } = useMultiSelect();\n\n    return (\n      <PopoverPrimitive.Trigger\n        disabled={disabled}\n        nativeButton={false}\n        ref={forwardedRef}\n        render={\n          // biome-ignore lint/a11y/useSemanticElements: PopoverTrigger requires div wrapper for proper functionality\n          <div\n            aria-disabled={disabled}\n            aria-label=\"Multi-select trigger\"\n            data-disabled={disabled}\n            data-testid={testId}\n            {...props}\n            className={cn(\n              \"!border-input flex min-h-9 w-fit items-start justify-between gap-2 rounded-md border bg-transparent px-3 py-1.5 text-base shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',\n              className\n            )}\n            onClick={disabled ? PreventClick : props.onClick}\n            onKeyDown={\n              disabled\n                ? undefined\n                : (e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      props.onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n                    }\n                  }\n            }\n            onTouchStart={disabled ? PreventClick : props.onTouchStart}\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n          >\n            {children}\n            <ChevronDownIcon aria-hidden className=\"size-4 opacity-50\" />\n          </div>\n        }\n      />\n    );\n  }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\ninterface MultiSelectValueProps extends React.ComponentPropsWithoutRef<'div'>, SharedProps {\n  maxDisplay?: number;\n  maxItemLength?: number;\n  options?: MultiSelectOption[];\n  placeholder?: string;\n}\n\nconst MultiSelectValue = React.forwardRef<React.ComponentRef<'div'>, MultiSelectValueProps>(\n  ({ className, placeholder, maxDisplay, maxItemLength, options, testId, ...props }, forwardRef) => {\n    const { value, itemCache, onDeselect } = useMultiSelect();\n\n    const renderRemain = maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0;\n    const renderItems = renderRemain ? value.slice(0, maxDisplay) : value;\n\n    if (!value.length) {\n      return <span className=\"pointer-events-none text-muted-foreground\">{placeholder}</span>;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn('flex flex-1 flex-wrap items-center gap-1 overflow-hidden', className)}\n          {...props}\n          ref={forwardRef}\n        >\n          {renderItems.map((itemValue) => {\n            const item = itemCache.get(itemValue) ?? findMultiSelectOption(options, itemValue);\n\n            const content = item?.label || itemValue;\n\n            // For React nodes, don't truncate - show full content\n            const child =\n              maxItemLength && typeof content === 'string' && content.length > maxItemLength\n                ? `${content.slice(0, maxItemLength)}...`\n                : content;\n\n            // Determine if we should show a tooltip - only for truncated strings\n            const shouldShowTooltip = maxItemLength && typeof content === 'string' && content.length > maxItemLength;\n\n            const el = (\n              <TagsValue\n                key={itemValue}\n                onRemove={() => {\n                  if (!item) {\n                    return;\n                  }\n\n                  onDeselect(itemValue, item);\n                }}\n                testId={item?.selectedTestId ?? (testId ? `${testId}-selected-${itemValue}` : undefined)}\n              >\n                {child}\n              </TagsValue>\n            );\n\n            if (shouldShowTooltip) {\n              return (\n                <Tooltip key={itemValue}>\n                  <TooltipTrigger asChild>\n                    <span className=\"inline-flex\">{el}</span>\n                  </TooltipTrigger>\n                  <TooltipContent align=\"start\" className=\"z-[51]\" side=\"bottom\">\n                    {content}\n                  </TooltipContent>\n                </Tooltip>\n              );\n            }\n\n            return el;\n          })}\n          {renderRemain ? <span className=\"py-.5 text-muted-foreground text-xs leading-4\">+{renderRemain}</span> : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n\nMultiSelectValue.displayName = 'MultiSelectValue';\n\nconst MultiSelectSearch = React.forwardRef<\n  React.ComponentRef<typeof CommandInput>,\n  React.ComponentPropsWithoutRef<typeof CommandInput>\n>((props, ref) => {\n  const { onSearch } = useMultiSelect();\n\n  return <CommandInput ref={ref} {...props} onValueChange={onSearch} />;\n});\n\nMultiSelectSearch.displayName = 'MultiSelectSearch';\n\nconst MultiSelectList = React.forwardRef<\n  React.ComponentRef<typeof CommandList>,\n  React.ComponentPropsWithoutRef<typeof CommandList>\n>(({ className, ...props }, ref) => (\n  <CommandList className={cn('max-h-[unset] px-0 py-1', className)} ref={ref} {...props} />\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\ninterface MultiSelectContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup>, SharedProps {\n  container?: Element;\n  /**\n   * @deprecated Base UI does not expose a Radix-style `onOpenAutoFocus` callback. Accepted for\n   * API parity; the event is ignored.\n   */\n  onOpenAutoFocus?: (event: Event) => void;\n}\n\nconst MultiSelectContent = React.forwardRef<React.ComponentRef<typeof PopoverPrimitive.Popup>, MultiSelectContentProps>(\n  ({ className, children, container, testId, onOpenAutoFocus: _onOpenAutoFocus, ...props }, ref) => {\n    const context = useMultiSelect();\n\n    const fragmentRef = React.useRef<DocumentFragment | null>(null);\n\n    if (!fragmentRef.current && typeof window !== 'undefined') {\n      fragmentRef.current = document.createDocumentFragment();\n    }\n\n    if (!context.open) {\n      return fragmentRef.current ? createPortal(<Command>{children}</Command>, fragmentRef.current) : null;\n    }\n\n    return (\n      <PopoverPrimitive.Portal container={container as HTMLElement | undefined} keepMounted>\n        <PopoverPrimitive.Positioner align=\"start\" className=\"z-50\" collisionPadding={10} sideOffset={4}>\n          <PopoverPrimitive.Popup\n            className={cn(\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[state=closed]:animate-out data-[state=open]:animate-in',\n              className\n            )}\n            data-testid={testId}\n            ref={ref}\n            render={renderWithDataState('div')}\n            {...props}\n          >\n            <Command\n              className={cn('max-h-96 w-full min-w-[var(--anchor-width)] px-1', className)}\n              shouldFilter={!context.onSearch}\n            >\n              {children}\n            </Command>\n          </PopoverPrimitive.Popup>\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  }\n);\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\ntype MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &\n  Partial<MultiSelectOptionItem> &\n  SharedProps & {\n    onSelect?: (value: string, item: MultiSelectOptionItem) => void;\n    onDeselect?: (value: string, item: MultiSelectOptionItem) => void;\n  };\n\nconst MultiSelectItem = React.forwardRef<React.ComponentRef<typeof CommandItem>, MultiSelectItemProps>(\n  (\n    {\n      value,\n      onSelect: onSelectProp,\n      onDeselect: onDeselectProp,\n      children,\n      label,\n      disabled: disabledProp,\n      className,\n      selectedTestId,\n      testId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { value: contextValue, maxCount, onSelect, onDeselect, itemCache } = useMultiSelect();\n\n    const item = React.useMemo(\n      () =>\n        value\n          ? {\n              value,\n              label: label || (typeof children === 'string' ? children : undefined),\n              selectedTestId,\n              testId,\n            }\n          : undefined,\n      [value, label, children, selectedTestId, testId]\n    );\n\n    const selected = Boolean(value && contextValue.includes(value));\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: part of multi-select implementation\n    React.useEffect(() => {\n      if (value) {\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        itemCache.set(value, item!);\n      }\n    }, [selected, value, item, itemCache]);\n\n    const disabled = Boolean(disabledProp || (!selected && maxCount && contextValue.length >= maxCount));\n\n    const handleClick = () => {\n      if (selected) {\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        onDeselectProp?.(value!, item!);\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        onDeselect(value!, item!);\n      } else {\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        itemCache.set(value!, item!);\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        onSelectProp?.(value!, item!);\n        // biome-ignore lint/style/noNonNullAssertion: part of multi-select implementation\n        onSelect(value!, item!);\n      }\n    };\n\n    const labelText = typeof label === 'string' ? label : typeof children === 'string' ? children : undefined;\n    const keywords = labelText && labelText !== value ? [labelText] : undefined;\n\n    return (\n      <CommandItem\n        {...props}\n        className={cn(disabled && 'cursor-not-allowed text-muted-foreground', className)}\n        disabled={disabled}\n        keywords={keywords}\n        onSelect={!disabled && value ? handleClick : undefined}\n        ref={forwardedRef}\n        testId={testId}\n        value={value}\n      >\n        <span className=\"mr-2 truncate\">{children || label || value}</span>\n        {selected ? <Check className=\"ml-auto size-4 shrink-0\" /> : null}\n      </CommandItem>\n    );\n  }\n);\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\nconst MultiSelectGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandGroup>,\n  React.ComponentPropsWithoutRef<typeof CommandGroup> & SharedProps\n>(({ testId, ...props }, forwardRef) => <CommandGroup {...props} ref={forwardRef} testId={testId} />);\n\nMultiSelectGroup.displayName = 'MultiSelectGroup';\n\nconst MultiSelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandSeparator>,\n  React.ComponentPropsWithoutRef<typeof CommandSeparator>\n>((props, forwardRef) => <CommandSeparator {...props} ref={forwardRef} />);\n\nMultiSelectSeparator.displayName = 'MultiSelectSeparator';\n\nconst MultiSelectEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandEmpty>,\n  React.ComponentPropsWithoutRef<typeof CommandEmpty>\n>(({ children = 'No Content', ...props }, forwardRef) => (\n  <CommandEmpty {...props} ref={forwardRef}>\n    {children}\n  </CommandEmpty>\n));\n\nMultiSelectEmpty.displayName = 'MultiSelectEmpty';\n\nexport type MultiSelectOptionSeparator = {\n  type: 'separator';\n};\n\nexport type MultiSelectOptionGroup = {\n  heading?: React.ReactNode;\n  testId?: string;\n  value?: string;\n  children: MultiSelectOption[];\n};\n\nexport type MultiSelectOption =\n  | Pick<MultiSelectItemProps, 'value' | 'label' | 'disabled' | 'onSelect' | 'onDeselect' | 'selectedTestId' | 'testId'>\n  | MultiSelectOptionSeparator\n  | MultiSelectOptionGroup;\n\nfunction findMultiSelectOption(\n  options: MultiSelectOption[] | undefined,\n  value: string\n): MultiSelectOptionItem | undefined {\n  for (const option of options ?? []) {\n    if ('type' in option) {\n      continue;\n    }\n    if ('children' in option) {\n      const item = findMultiSelectOption(option.children, value);\n      if (item) {\n        return item;\n      }\n      continue;\n    }\n    if (option.value === value) {\n      return {\n        label: option.label,\n        selectedTestId: option.selectedTestId,\n        testId: option.testId,\n        value,\n      };\n    }\n  }\n  return;\n}\n\nfunction renderMultiSelectOptions(list: MultiSelectOption[]) {\n  return list.map((option, index) => {\n    if ('type' in option) {\n      if (option.type === 'separator') {\n        // biome-ignore lint/suspicious/noArrayIndexKey: part of multi-select implementation\n        return <MultiSelectSeparator key={index} />;\n      }\n\n      return null;\n    }\n\n    if ('children' in option) {\n      return (\n        <MultiSelectGroup\n          heading={option.heading}\n          key={option.value || index}\n          testId={option.testId}\n          value={option.value}\n        >\n          {renderMultiSelectOptions(option.children)}\n        </MultiSelectGroup>\n      );\n    }\n\n    return (\n      <MultiSelectItem key={option.value} {...option} testId={option.testId}>\n        {option.label}\n      </MultiSelectItem>\n    );\n  });\n}\n\n// Simplified API for backend developers\ntype SimpleMultiSelectProps = PortalRootProps &\n  SharedProps &\n  Pick<PortalContentProps, 'container' | 'onOpenAutoFocus'> & {\n    id?: string;\n    options: MultiSelectOption[] | string[];\n    value?: string[];\n    onValueChange?: (value: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    disabled?: boolean;\n    maxCount?: number;\n    maxDisplay?: number;\n    searchable?: boolean;\n    width?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';\n  };\n\nconst widthClasses = {\n  sm: 'w-48',\n  md: 'w-64',\n  lg: 'w-80',\n  xl: 'w-96',\n  full: 'w-full',\n  auto: 'w-auto',\n};\n\nfunction SimpleMultiSelect({\n  id,\n  options,\n  value,\n  onValueChange,\n  placeholder = 'Select items...',\n  className,\n  disabled,\n  maxCount,\n  maxDisplay,\n  searchable = true,\n  width = 'md',\n  container,\n  onOpenAutoFocus,\n  open,\n  defaultOpen,\n  onOpenChange,\n  testId,\n}: SimpleMultiSelectProps) {\n  // Convert simple string array to option objects\n  const normalizedOptions: MultiSelectOption[] = React.useMemo(\n    () =>\n      options.map((option) => {\n        if (typeof option === 'string') {\n          return { value: option, label: option };\n        }\n        return option;\n      }),\n    [options]\n  );\n\n  return (\n    <MultiSelect\n      defaultOpen={defaultOpen}\n      disabled={disabled}\n      maxCount={maxCount}\n      onOpenChange={onOpenChange}\n      onValueChange={onValueChange}\n      open={open}\n      testId={testId}\n      value={value}\n    >\n      <MultiSelectTrigger\n        className={cn(widthClasses[width], className)}\n        id={id}\n        testId={testId ? `${testId}-control` : undefined}\n      >\n        <MultiSelectValue\n          maxDisplay={maxDisplay}\n          options={normalizedOptions}\n          placeholder={placeholder}\n          testId={testId}\n        />\n      </MultiSelectTrigger>\n      <MultiSelectContent\n        container={container}\n        onOpenAutoFocus={onOpenAutoFocus}\n        testId={testId ? `${testId}-content` : undefined}\n      >\n        {searchable ? (\n          <MultiSelectSearch placeholder=\"Search...\" testId={testId ? `${testId}-search` : undefined} />\n        ) : null}\n        <MultiSelectList>{renderMultiSelectOptions(normalizedOptions)}</MultiSelectList>\n        <MultiSelectEmpty>No items found</MultiSelectEmpty>\n      </MultiSelectContent>\n    </MultiSelect>\n  );\n}\n\nexport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectEmpty,\n  MultiSelectGroup,\n  MultiSelectItem,\n  MultiSelectList,\n  MultiSelectSearch,\n  MultiSelectSeparator,\n  MultiSelectTrigger,\n  MultiSelectValue,\n  renderMultiSelectOptions,\n  SimpleMultiSelect,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/popover/index.tsx",
      "content": "'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { AnimatePresence, type HTMLMotionProps, motion, type Transition } from 'motion/react';\nimport React from 'react';\n\nimport { usePortalContainer } from '@/registry/base-nova/protoform/hooks/use-portal-container';\nimport { asChildTrigger, narrowOpenChange, renderWithDataState, Slot, useMirroredOpen } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type PortalContentProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype PopoverContextType = {\n  isOpen: boolean;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(undefined);\n\nconst usePopover = (): PopoverContextType => {\n  const context = React.useContext(PopoverContext);\n  if (!context) {\n    throw new Error('usePopover must be used within a Popover');\n  }\n  return context;\n};\n\ntype PopoverAnchorContextType = {\n  anchorRef: React.MutableRefObject<Element | null>;\n  setHasAnchor: (hasAnchor: boolean) => void;\n  hasAnchor: boolean;\n};\n\nconst PopoverAnchorContext = React.createContext<PopoverAnchorContextType | undefined>(undefined);\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nconst getInitialPosition = (side: Side) => {\n  switch (side) {\n    case 'top':\n      return { y: 15 };\n    case 'bottom':\n      return { y: -15 };\n    case 'left':\n      return { x: 15 };\n    case 'right':\n      return { x: -15 };\n    default:\n      return {};\n  }\n};\n\ntype PopoverProps = Omit<React.ComponentProps<typeof PopoverPrimitive.Root>, 'onOpenChange' | 'children'> &\n  SharedProps & {\n    onOpenChange?: (open: boolean) => void;\n    children?: React.ReactNode;\n  };\n\nfunction Popover({ children, testId, onOpenChange, ...props }: PopoverProps) {\n  const { isOpen, handleOpenChange } = useMirroredOpen(props?.open, props?.defaultOpen, onOpenChange);\n  const anchorRef = React.useRef<Element | null>(null);\n  const [hasAnchor, setHasAnchor] = React.useState(false);\n\n  const anchorCtx = React.useMemo<PopoverAnchorContextType>(\n    () => ({ anchorRef, setHasAnchor, hasAnchor }),\n    [hasAnchor]\n  );\n\n  return (\n    <PopoverContext.Provider value={{ isOpen }}>\n      <PopoverAnchorContext.Provider value={anchorCtx}>\n        <PopoverPrimitive.Root\n          data-slot=\"popover\"\n          data-testid={testId}\n          {...props}\n          onOpenChange={narrowOpenChange(handleOpenChange)}\n        >\n          {children}\n        </PopoverPrimitive.Root>\n      </PopoverAnchorContext.Provider>\n    </PopoverContext.Provider>\n  );\n}\n\ntype PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger> &\n  SharedProps & {\n    asChild?: boolean;\n  };\n\nfunction PopoverTrigger({ className, testId, ...props }: PopoverTriggerProps) {\n  return (\n    <PopoverPrimitive.Trigger\n      className={cn('cursor-pointer', className)}\n      data-slot=\"popover-trigger\"\n      data-testid={testId}\n      {...asChildTrigger(props)}\n    />\n  );\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  HTMLMotionProps<'div'> &\n  SharedProps &\n  Pick<PortalContentProps, 'container' | 'onOpenAutoFocus'> & {\n    transition?: Transition;\n    side?: Side;\n    align?: Align;\n    sideOffset?: number;\n    alignOffset?: number;\n  };\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  side = 'bottom',\n  sideOffset = 4,\n  alignOffset,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  children,\n  testId,\n  container,\n  onOpenAutoFocus: _onOpenAutoFocus,\n  ...props\n}: PopoverContentProps) {\n  const { isOpen } = usePopover();\n  const initialPosition = getInitialPosition(side);\n  const portalContainer = usePortalContainer();\n  const anchorCtx = React.useContext(PopoverAnchorContext);\n\n  return (\n    <AnimatePresence>\n      {isOpen ? (\n        <PopoverPrimitive.Portal container={container ?? portalContainer} data-slot=\"popover-portal\" keepMounted>\n          <PopoverPrimitive.Positioner\n            align={align}\n            alignOffset={alignOffset}\n            {...(anchorCtx?.hasAnchor && anchorCtx.anchorRef.current ? { anchor: anchorCtx.anchorRef } : {})}\n            className=\"z-50\"\n            side={side}\n            sideOffset={sideOffset}\n          >\n            <PopoverPrimitive.Popup render={renderWithDataState('div')} {...props}>\n              <motion.div\n                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}\n                className={cn(\n                  '!border-input w-72 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none',\n                  className\n                )}\n                data-slot=\"popover-content\"\n                data-testid={testId}\n                exit={{ opacity: 0, scale: 0.5, ...initialPosition }}\n                initial={{ opacity: 0, scale: 0.5, ...initialPosition }}\n                key=\"popover-content\"\n                transition={transition}\n              >\n                {children}\n              </motion.div>\n            </PopoverPrimitive.Popup>\n          </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\ntype PopoverAnchorProps = {\n  asChild?: boolean;\n  children?: React.ReactNode;\n  render?: React.ReactElement;\n};\n\nfunction PopoverAnchor({ asChild, children, render }: PopoverAnchorProps) {\n  const ctx = React.useContext(PopoverAnchorContext);\n\n  const setRef = React.useCallback(\n    (node: Element | null) => {\n      if (ctx) {\n        ctx.anchorRef.current = node;\n        ctx.setHasAnchor(Boolean(node));\n      }\n    },\n    [ctx]\n  );\n\n  const renderedChild =\n    render && children !== undefined ? React.cloneElement(render, undefined, children) : render;\n  const child = renderedChild ?? (asChild && React.isValidElement(children) ? children : undefined);\n\n  if (child) {\n    return (\n      <Slot data-slot=\"popover-anchor\" ref={setRef as React.Ref<HTMLElement>}>\n        {child}\n      </Slot>\n    );\n  }\n\n  return (\n    <div data-slot=\"popover-anchor\" ref={setRef as React.Ref<HTMLDivElement>}>\n      {children}\n    </div>\n  );\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  type PopoverAnchorProps,\n  PopoverContent,\n  type PopoverContentProps,\n  type PopoverContextType,\n  type PopoverProps,\n  PopoverTrigger,\n  type PopoverTriggerProps,\n  usePopover,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/radio-group/index.tsx",
      "content": "import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Circle } from 'lucide-react';\nimport { AnimatePresence, type HTMLMotionProps, motion, type Transition } from 'motion/react';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\n// Radix RadioGroup supported an `orientation` prop; Base UI's RadioGroup does not\n// declare one. Preserve the public API by accepting it and forwarding as\n// `aria-orientation` + data attribute.\ntype RadioGroupOrientation = 'vertical' | 'horizontal';\n\ntype RadioGroupProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive>, 'onValueChange'> &\n  SharedProps & {\n    orientation?: RadioGroupOrientation;\n    onValueChange?: (value: string) => void;\n    transition?: Transition;\n  };\n\nfunction RadioGroup(allProps: RadioGroupProps) {\n  const { className, orientation = 'vertical', testId, onValueChange, ...props } = allProps;\n\n  const handleValueChange = React.useMemo(() => {\n    if (!onValueChange) {\n      return;\n    }\n    return (next: unknown) => onValueChange(next as string);\n  }, [onValueChange]);\n\n  // Radix parity: when consumers explicitly pass `value` (controlled mode) but\n  // their source-of-truth starts as `undefined` (e.g. react-hook-form\n  // `field.value` before the first change), Base UI's `useControlled` warns on\n  // the undefined → string transition. Radix tolerated this silently. Normalize\n  // undefined → '' only when `value` was explicitly passed — uncontrolled mode\n  // via `defaultValue` (without `value`) keeps working unchanged.\n  const hasValueProp = 'value' in allProps;\n  const valueOverride = hasValueProp && allProps.value === undefined ? { value: '' } : undefined;\n\n  return (\n    <RadioGroupPrimitive\n      aria-orientation={orientation}\n      className={cn('grid w-full gap-2', orientation === 'horizontal' && 'grid-cols-2', className)}\n      data-orientation={orientation}\n      data-slot=\"radio-group\"\n      data-testid={testId}\n      onValueChange={handleValueChange}\n      {...props}\n      {...valueOverride}\n    />\n  );\n}\n\ntype RadioGroupIndicatorProps = React.ComponentProps<typeof RadioPrimitive.Indicator> & {\n  transition: Transition;\n};\n\nfunction RadioGroupIndicator({ className, transition, ...props }: RadioGroupIndicatorProps) {\n  return (\n    <RadioPrimitive.Indicator\n      className={cn('flex items-center justify-center data-[unchecked]:hidden', className)}\n      data-slot=\"radio-group-indicator\"\n      keepMounted\n      {...props}\n    >\n      <AnimatePresence>\n        <motion.div\n          animate={{ opacity: 1, scale: 1 }}\n          className=\"flex items-center justify-center\"\n          data-slot=\"radio-group-indicator-circle\"\n          exit={{ opacity: 0, scale: 0 }}\n          initial={{ opacity: 0, scale: 0 }}\n          key=\"radio-group-indicator-circle\"\n          transition={transition}\n        >\n          <Circle className=\"size-2 fill-current stroke-none\" />\n        </motion.div>\n      </AnimatePresence>\n    </RadioPrimitive.Indicator>\n  );\n}\n\ntype RadioGroupItemProps = React.ComponentProps<typeof RadioPrimitive.Root> &\n  HTMLMotionProps<'button'> &\n  SharedProps & {\n    transition?: Transition;\n    variant?: 'card' | 'default';\n  };\n\nfunction RadioGroupItem({\n  children,\n  className,\n  transition = { duration: 0.15 },\n  testId,\n  variant = 'default',\n  ...props\n}: RadioGroupItemProps) {\n  return (\n    <RadioPrimitive.Root\n      {...(props as React.ComponentProps<typeof RadioPrimitive.Root>)}\n      nativeButton\n      // biome-ignore lint/suspicious/noExplicitAny: Base UI render merges Root attrs for the consumer element\n      render={(rootProps: Record<string, any>, state: { checked?: boolean; disabled?: boolean }) => (\n        <motion.button\n          {...rootProps}\n          className={cn(\n            variant === 'card'\n              ? 'flex min-h-12 h-auto w-full items-center justify-between gap-4 rounded-lg border border-border/70 bg-background px-4 py-3 text-left text-foreground ring-offset-background transition-[border-color,box-shadow,background-color] hover:border-foreground/30 hover:shadow-xs data-[checked]:border-foreground data-[checked]:bg-muted/30 data-[checked]:shadow-xs focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'\n              : '!border-input relative flex aspect-square size-4 cursor-pointer items-center justify-center rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n            className\n          )}\n          data-slot=\"radio-group-item\"\n          data-state={state?.checked ? 'checked' : 'unchecked'}\n          data-testid={testId}\n          whileHover={variant === 'default' ? { scale: 1.05 } : undefined}\n          whileTap={variant === 'default' ? { scale: 0.95 } : undefined}\n        >\n          {children}\n          {variant === 'card' ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"!border-input flex aspect-square size-5 shrink-0 items-center justify-center rounded-full border text-selected\"\n              data-state={state?.checked ? 'checked' : 'unchecked'}\n            >\n              <RadioGroupIndicator data-slot=\"radio-group-item-indicator\" transition={transition} />\n            </span>\n          ) : (\n            <RadioGroupIndicator data-slot=\"radio-group-item-indicator\" transition={transition} />\n          )}\n        </motion.button>\n      )}\n    />\n  );\n}\n\nexport {\n  RadioGroup,\n  RadioGroupIndicator,\n  type RadioGroupIndicatorProps,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  type RadioGroupProps,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/select/index.tsx",
      "content": "'use client';\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\nimport React from 'react';\n\nimport { useGroup } from '@/registry/base-nova/protoform/components/group';\nimport { usePortalContainer } from '@/registry/base-nova/protoform/hooks/use-portal-container';\nimport { narrowOpenChange, renderWithDataState } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type PortalContentProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype SelectRootProps = Omit<\n  React.ComponentProps<typeof SelectPrimitive.Root>,\n  'defaultValue' | 'onOpenChange' | 'onValueChange' | 'value'\n> &\n  SharedProps & {\n    defaultValue?: string | null;\n    onOpenChange?: (open: boolean) => void;\n    onValueChange?: (value: string | null) => void;\n    value?: string | null;\n  };\n\n// Base UI types `value` as `unknown` because `Select.Root` is generic; the\n// registry pins it to `string | null`, so validate at the boundary.\nfunction adaptSelectValueChange(\n  handler: ((value: string | null) => void) | undefined\n): ((value: unknown) => void) | undefined {\n  if (!handler) {\n    return;\n  }\n  return (value) => {\n    if (value !== null && typeof value !== 'string') {\n      throw new TypeError('Select values must be strings or null.');\n    }\n    handler(value);\n  };\n}\n\nfunction Select({ testId, onOpenChange, onValueChange, ...props }: SelectRootProps) {\n  return (\n    <SelectPrimitive.Root\n      data-slot=\"select\"\n      data-testid={testId}\n      onOpenChange={narrowOpenChange(onOpenChange)}\n      onValueChange={adaptSelectValueChange(onValueChange)}\n      {...props}\n    />\n  );\n}\n\nSelect.displayName = 'Select';\n\nfunction SelectGroup({ testId, ...props }: React.ComponentProps<typeof SelectPrimitive.Group> & SharedProps) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" data-testid={testId} {...props} />;\n}\n\nSelectGroup.displayName = 'SelectGroup';\n\ntype SelectValueProps = Omit<React.ComponentProps<typeof SelectPrimitive.Value>, 'children'> & {\n  placeholder?: React.ReactNode;\n  children?: React.ReactNode | ((value: unknown) => React.ReactNode);\n};\n\n// Base UI only resolves an item's label after the popup has mounted. Until then\n// it stringifies the raw value, which flashes `1` instead of `Any` for\n// enum-backed selects with a controlled value. Pass a render-prop child or an\n// `items` map on `<Select>` to close the gap — see the `select-enum-label` demo.\nfunction SelectValue({ placeholder, children, ...props }: SelectValueProps) {\n  // Fall back to placeholder when the render-prop returns null/undefined; Base\n  // UI's primitive ignores `placeholder` once `children` is set.\n  if (typeof children === 'function') {\n    const renderValue = children;\n    return (\n      <SelectPrimitive.Value data-slot=\"select-value\" placeholder={placeholder} {...props}>\n        {(value: unknown) => {\n          const result = renderValue(value);\n          if ((result === null || result === undefined) && placeholder !== undefined) {\n            return placeholder;\n          }\n          return result;\n        }}\n      </SelectPrimitive.Value>\n    );\n  }\n  if (children !== undefined) {\n    return (\n      <SelectPrimitive.Value data-slot=\"select-value\" placeholder={placeholder} {...props}>\n        {children as React.ComponentProps<typeof SelectPrimitive.Value>['children']}\n      </SelectPrimitive.Value>\n    );\n  }\n  return <SelectPrimitive.Value data-slot=\"select-value\" placeholder={placeholder} {...props} />;\n}\n\nSelectValue.displayName = 'SelectValue';\n\nconst SelectTrigger = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentProps<typeof SelectPrimitive.Trigger> &\n    SharedProps & {\n      size?: 'sm' | 'default' | 'lg';\n    }\n>(({ className, size = 'default', children, testId, ...props }, ref) => {\n  const { position: groupPosition, attached } = useGroup();\n\n  let positionClasses = 'rounded-lg';\n  if (attached && groupPosition === 'first') {\n    positionClasses = 'rounded-r-none rounded-l-lg border-r-0';\n  } else if (attached && groupPosition === 'last') {\n    positionClasses = 'rounded-r-lg rounded-l-none border-l-0';\n  } else if (attached && groupPosition === 'middle') {\n    positionClasses = 'rounded-none border-r-0 border-l-0';\n  }\n\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"!border-input flex w-full cursor-pointer items-center justify-between gap-1.5 whitespace-nowrap border bg-transparent py-2 pr-2 pl-2.5 text-sm outline-none transition-colors select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-8 data-[size=lg]:h-9 data-[size=sm]:h-7 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        positionClasses,\n        className\n      )}\n      data-size={size}\n      data-slot=\"select-trigger\"\n      data-testid={testId}\n      ref={ref}\n      render={renderWithDataState('button')}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <span>\n            <ChevronDownIcon className=\"size-4 opacity-50\" />\n          </span>\n        }\n      />\n    </SelectPrimitive.Trigger>\n  );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  SharedProps &\n  Pick<PortalContentProps, 'container'> & {\n    /** @deprecated Kept for API parity; Base UI positioning is automatic. */\n    position?: 'item-aligned' | 'popper';\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    align?: 'start' | 'center' | 'end';\n    sideOffset?: number;\n    alignOffset?: number;\n    /** Set `true` to overlay the selected item on the trigger (Base UI's native default). */\n    alignItemWithTrigger?: boolean;\n  };\n\nconst SelectContent = React.forwardRef<React.ComponentRef<typeof SelectPrimitive.Popup>, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      position = 'popper',\n      testId,\n      container,\n      side = 'bottom',\n      align,\n      sideOffset = 4,\n      alignOffset,\n      alignItemWithTrigger = false,\n      ...props\n    },\n    ref\n  ) => {\n    const portalContainer = usePortalContainer();\n    return (\n      <SelectPrimitive.Portal container={container ?? portalContainer}>\n        <SelectPrimitive.Positioner\n          align={align}\n          alignItemWithTrigger={alignItemWithTrigger}\n          alignOffset={alignOffset}\n          className=\"z-50 max-h-[var(--available-height)]\"\n          side={side}\n          sideOffset={sideOffset}\n        >\n          <SelectPrimitive.Popup\n            className={cn(\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=closed]:animate-out data-[state=open]:animate-in',\n              position === 'popper' &&\n                'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',\n              className\n            )}\n            data-slot=\"select-content\"\n            data-testid={testId}\n            ref={ref}\n            render={renderWithDataState('div')}\n            {...props}\n          >\n            <SelectScrollUpButton />\n            <SelectPrimitive.List\n              className={cn(\n                'max-h-(--available-height) w-full overflow-y-auto overflow-x-hidden p-1',\n                position === 'popper' && 'min-w-[var(--anchor-width)] scroll-my-1'\n              )}\n            >\n              {children}\n            </SelectPrimitive.List>\n            <SelectScrollDownButton />\n          </SelectPrimitive.Popup>\n        </SelectPrimitive.Positioner>\n      </SelectPrimitive.Portal>\n    );\n  }\n);\n\nSelectContent.displayName = 'SelectContent';\n\nconst SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentProps<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    className={cn('px-2 py-1.5 text-muted-foreground text-xs', className)}\n    data-slot=\"select-label\"\n    ref={ref}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = 'SelectLabel';\n\nconst SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  React.ComponentProps<typeof SelectPrimitive.Item> & SharedProps\n>(({ className, children, testId, ...props }, ref) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none *:last:flex *:last:items-center *:last:gap-2 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className\n    )}\n    data-slot=\"select-item\"\n    data-testid={testId}\n    ref={ref}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = 'SelectItem';\n\nconst SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  React.ComponentProps<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n    data-slot=\"select-separator\"\n    ref={ref}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = 'SelectSeparator';\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollUpArrow>,\n  React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpArrow\n    className={cn('flex cursor-pointer items-center justify-center py-1', className)}\n    data-slot=\"select-scroll-up-button\"\n    ref={ref}\n    {...props}\n  >\n    <ChevronUpIcon className=\"size-4\" />\n  </SelectPrimitive.ScrollUpArrow>\n));\n\nSelectScrollUpButton.displayName = 'SelectScrollUpButton';\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollDownArrow>,\n  React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownArrow\n    className={cn('flex cursor-pointer items-center justify-center py-1', className)}\n    data-slot=\"select-scroll-down-button\"\n    ref={ref}\n    {...props}\n  >\n    <ChevronDownIcon className=\"size-4\" />\n  </SelectPrimitive.ScrollDownArrow>\n));\n\nSelectScrollDownButton.displayName = 'SelectScrollDownButton';\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/separator/index.tsx",
      "content": "import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst separatorVariants = cva(\n  'shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',\n  {\n    variants: {\n      variant: {\n        default: 'bg-divider-default',\n        subtle: 'bg-divider-subtle',\n        strong: 'bg-divider-strong',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport type SeparatorVariant = VariantProps<typeof separatorVariants>['variant'];\n\ntype SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive> &\n  SharedProps & {\n    variant?: SeparatorVariant;\n    /**\n     * When `true` (the Radix default), the separator is purely decorative and\n     * will not be announced to assistive tech (`role=\"none\"` + `aria-hidden`).\n     * When `false`, the native Base UI `role=\"separator\"` with an orientation\n     * is used. Honored faithfully — this is not a compat no-op.\n     */\n    decorative?: boolean;\n  };\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  variant,\n  testId,\n  ...props\n}: SeparatorProps) {\n  const a11yProps = decorative ? { 'aria-hidden': true, role: 'none' as const } : {};\n  return (\n    <SeparatorPrimitive\n      className={cn(separatorVariants({ variant }), className)}\n      data-orientation={orientation}\n      data-slot=\"separator\"\n      data-testid={testId}\n      orientation={orientation}\n      {...a11yProps}\n      {...props}\n    />\n  );\n}\n\nexport { Separator, separatorVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/slider/index.tsx",
      "content": "'use client';\n\nimport { Slider as SliderPrimitive } from '@base-ui/react/slider';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype SliderProps = Omit<React.ComponentProps<typeof SliderPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> &\n  SharedProps & {\n    value?: number | readonly number[];\n    defaultValue?: number | readonly number[];\n    onValueChange?: (value: number[]) => void;\n  };\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  testId,\n  onValueChange,\n  'aria-label': ariaLabel,\n  ...props\n}: SliderProps) {\n  const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];\n  const handleValueChange = onValueChange\n    ? (nextValue: number | readonly number[]) => {\n        const asArray = Array.isArray(nextValue) ? [...nextValue] : [nextValue as number];\n        onValueChange(asArray);\n      }\n    : undefined;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'relative flex w-full touch-none items-center select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50',\n        className\n      )}\n      data-slot=\"slider\"\n      data-testid={testId}\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      onValueChange={handleValueChange}\n      value={value}\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full grow touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\">\n        <SliderPrimitive.Track\n          className={cn(\n            'relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1'\n          )}\n          data-slot=\"slider-track\"\n        >\n          <SliderPrimitive.Indicator\n            className=\"absolute bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n            data-slot=\"slider-range\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            aria-label={\n              ariaLabel\n                ? values.length === 1\n                  ? ariaLabel\n                  : `${ariaLabel} ${index + 1}`\n                : undefined\n            }\n            className=\"relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n            data-slot=\"slider-thumb\"\n            index={index}\n            // biome-ignore lint/suspicious/noArrayIndexKey: part of slider implementation\n            key={index}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/spinner/index.tsx",
      "content": "import { Loader2Icon } from 'lucide-react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nfunction Spinner({ className, testId, ...props }: React.ComponentProps<'svg'> & SharedProps) {\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn('size-4 animate-spin', className)}\n      data-testid={testId}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/switch/index.tsx",
      "content": "import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport React from 'react';\n\nimport { renderWithDataState } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'onCheckedChange'> &\n  SharedProps & {\n    onCheckedChange?: (checked: boolean) => void;\n    size?: 'default' | 'sm';\n  };\n\nfunction Switch(allProps: SwitchProps) {\n  const { className, size = 'default', testId, onCheckedChange, ...props } = allProps;\n  const handleCheckedChange = onCheckedChange ? (next: boolean) => onCheckedChange(next) : undefined;\n\n  // Radix parity: when consumers explicitly pass `checked` (controlled mode) but\n  // their source-of-truth starts as `undefined` (e.g. react-hook-form\n  // `field.value`), Base UI's `useControlled` warns on the undefined → boolean\n  // transition. Radix tolerated this silently. Normalize undefined → false only\n  // when `checked` was explicitly passed — uncontrolled mode via `defaultChecked`\n  // (without `checked`) keeps working unchanged.\n  const hasCheckedProp = 'checked' in allProps;\n  const checkedOverride = hasCheckedProp && allProps.checked === undefined ? { checked: false } : undefined;\n\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent outline-none transition-all after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-[state=checked]:bg-primary data-[state=unchecked]:bg-input disabled:cursor-not-allowed disabled:opacity-50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className\n      )}\n      data-size={size}\n      data-slot=\"switch\"\n      data-testid={testId}\n      nativeButton\n      onCheckedChange={handleCheckedChange}\n      render={renderWithDataState('button')}\n      {...props}\n      {...checkedOverride}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          'pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'\n        )}\n        data-slot=\"switch-thumb\"\n        render={renderWithDataState('span')}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/tabs/index.tsx",
      "content": "'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  AnimatePresence,\n  type HTMLMotionProps,\n  MotionConfigContext,\n  motion,\n  type Transition,\n  useReducedMotion,\n} from 'motion/react';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype HighlightBounds = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\nfunction boundsEqual(a: HighlightBounds | null, b: HighlightBounds | null): boolean {\n  if (a === b) {\n    return true;\n  }\n  if (!(a && b)) {\n    return false;\n  }\n  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: compat helper must accept any Base UI render prop shape\ntype TabsRenderFn = any;\n\ntype TabsRenderProp = React.ReactElement | TabsRenderFn | undefined;\n\n/**\n * Build the data-state attribute from Base UI's render-prop state so Radix-era\n * CSS selectors (`data-[state=active]:...`) keep working.\n */\nfunction dataStateFromBaseUi(state: { active?: boolean; hidden?: boolean }): Record<string, unknown> {\n  const attrs: Record<string, unknown> = {};\n  if (typeof state?.active === 'boolean') {\n    attrs['data-state'] = state.active ? 'active' : 'inactive';\n  } else if (typeof state?.hidden === 'boolean') {\n    attrs['data-state'] = state.hidden ? 'inactive' : 'active';\n  }\n  return attrs;\n}\n\n/**\n * Render prop factory. When no user-supplied render is provided, render the\n * given element tag with injected `data-state`. When the user supplies a\n * render (JSX element or function), compose it with `data-state` so router\n * links / anchors keep working as Tabs triggers.\n */\nfunction renderTabWithActiveState(Element: 'button' | 'div', userRender?: TabsRenderProp): TabsRenderFn {\n  return ((props: Record<string, unknown>, state: { active?: boolean; hidden?: boolean }) => {\n    const mergedProps = { ...props, ...dataStateFromBaseUi(state) };\n    if (userRender == null) {\n      return React.createElement(Element as string, mergedProps);\n    }\n    if (React.isValidElement(userRender)) {\n      return React.cloneElement(userRender as React.ReactElement, mergedProps);\n    }\n    if (typeof userRender === 'function') {\n      return (userRender as TabsRenderFn)(mergedProps, state);\n    }\n    return React.createElement(Element as string, mergedProps);\n  }) as TabsRenderFn;\n}\n\nconst tabsVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      sm: 'gap-1',\n      md: 'gap-2',\n      lg: 'gap-3',\n      xl: 'gap-4',\n      full: 'w-full gap-2',\n    },\n    variant: {\n      default: '',\n      card: 'rounded-xl border bg-card',\n      contained: 'rounded-lg bg-muted',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype TabsProps = Omit<React.ComponentProps<typeof TabsPrimitive.Root>, 'onValueChange'> &\n  VariantProps<typeof tabsVariants> &\n  SharedProps & {\n    onValueChange?: (value: string) => void;\n  };\n\nfunction Tabs({ className, size, variant, testId, onValueChange, ...props }: TabsProps) {\n  const handleValueChange = React.useCallback(\n    (nextValue: unknown) => {\n      onValueChange?.(nextValue as string);\n    },\n    [onValueChange]\n  );\n\n  return (\n    <TabsPrimitive.Root\n      className={cn(tabsVariants({ size, variant }), className)}\n      data-slot=\"tabs\"\n      data-testid={testId}\n      onValueChange={onValueChange ? handleValueChange : undefined}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva('inline-flex h-10 items-center justify-center text-muted-foreground', {\n  variants: {\n    variant: {\n      default: 'w-fit gap-1 rounded-lg bg-muted p-1',\n      underline: '!border-border relative w-full justify-start rounded-t-xl border-b bg-background py-0 text-current',\n    },\n    layout: {\n      auto: '',\n      equal: 'grid',\n      full: 'w-full',\n    },\n    gap: {\n      none: '',\n      sm: 'gap-1',\n      md: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    layout: 'auto',\n    gap: 'none',\n  },\n});\n\nconst tabsListActiveVariants = cva('rounded-sm bg-background shadow-sm', {\n  variants: {\n    variant: {\n      default: '',\n      underline:\n        \"rounded-none bg-transparent shadow-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-t-full after:bg-selected after:content-['']\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\ntype TabsListProps = React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants> &\n  SharedProps & {\n    activeClassName?: string;\n    transition?: Transition;\n    columns?: number;\n  };\n\nconst TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  (\n    {\n      children,\n      className,\n      activeClassName,\n      variant,\n      layout,\n      gap,\n      columns,\n      testId,\n      transition = {\n        type: 'spring',\n        stiffness: 200,\n        damping: 25,\n      },\n      ...props\n    },\n    ref\n  ) => {\n    const localRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => localRef.current || document.createElement('div'));\n\n    const [bounds, setBounds] = React.useState<HighlightBounds | null>(null);\n    const [orientation, setOrientation] = React.useState<'horizontal' | 'vertical'>('horizontal');\n\n    const syncHighlight = React.useCallback(() => {\n      const list = localRef.current;\n      if (!list) {\n        return;\n      }\n      const activeTab = list.querySelector<HTMLElement>('[data-slot=\"tabs-trigger\"][data-state=\"active\"]');\n      const nextOrientation =\n        (list.getAttribute('data-orientation') as 'horizontal' | 'vertical' | null) ?? 'horizontal';\n      setOrientation((prev) => (prev === nextOrientation ? prev : nextOrientation));\n\n      if (!activeTab) {\n        setBounds((prev) => (prev === null ? prev : null));\n        return;\n      }\n\n      const nextBounds: HighlightBounds = {\n        top: activeTab.offsetTop,\n        left: activeTab.offsetLeft,\n        width: activeTab.offsetWidth,\n        height: activeTab.offsetHeight,\n      };\n      setBounds((prev) => (boundsEqual(prev, nextBounds) ? prev : nextBounds));\n    }, []);\n\n    React.useLayoutEffect(() => {\n      const list = localRef.current;\n      if (!list) {\n        return;\n      }\n\n      // Initial sync (before first paint).\n      syncHighlight();\n\n      let rafId = 0;\n      const scheduleSync = () => {\n        cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(syncHighlight);\n      };\n\n      const mutationObserver = new MutationObserver(scheduleSync);\n      mutationObserver.observe(list, {\n        attributes: true,\n        attributeFilter: ['data-state', 'data-orientation', 'data-value'],\n        childList: true,\n        subtree: true,\n      });\n\n      const resizeObserver = new ResizeObserver(scheduleSync);\n      resizeObserver.observe(list);\n      for (const tab of list.querySelectorAll<HTMLElement>('[data-slot=\"tabs-trigger\"]')) {\n        resizeObserver.observe(tab);\n      }\n\n      return () => {\n        cancelAnimationFrame(rafId);\n        mutationObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }, [syncHighlight]);\n\n    const isHorizontal = orientation !== 'vertical';\n    // Lock the perpendicular axis: when the active tab moves to a different\n    // row (horizontal) or column (vertical), the highlight should snap on that\n    // axis instead of animating in 2D, which looks amateur.\n    const axisLockedTransition: Transition = React.useMemo(() => {\n      const snap = { duration: 0 } as const;\n      return isHorizontal ? { ...transition, top: snap, height: snap } : { ...transition, left: snap, width: snap };\n    }, [transition, isHorizontal]);\n\n    const showHighlight = bounds !== null;\n\n    return (\n      <TabsPrimitive.List\n        className={cn(\n          'relative',\n          tabsListVariants({ variant, layout, gap }),\n          layout === 'equal' && columns && `grid-cols-${columns}`,\n          className\n        )}\n        data-slot=\"tabs-list\"\n        data-testid={testId}\n        ref={localRef}\n        {...props}\n      >\n        <AnimatePresence initial={false}>\n          {showHighlight ? (\n            <motion.div\n              animate={{\n                top: bounds.top,\n                left: bounds.left,\n                width: bounds.width,\n                height: bounds.height,\n                opacity: 1,\n              }}\n              aria-hidden\n              className={cn('pointer-events-none absolute z-0', tabsListActiveVariants({ variant }), activeClassName)}\n              data-slot=\"tabs-list-highlight\"\n              exit={{ opacity: 0, transition: { duration: 0.15 } }}\n              initial={false}\n              transition={axisLockedTransition}\n            />\n          ) : null}\n        </AnimatePresence>\n        {children}\n      </TabsPrimitive.List>\n    );\n  }\n);\n\nTabsList.displayName = 'TabsList';\n\nconst tabsTriggerVariants = cva(\n  'z-[1] inline-flex size-full cursor-pointer items-center justify-center whitespace-nowrap rounded-sm font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'px-3 py-1.5',\n        underline: 'px-4 py-2 text-muted-foreground data-[state=active]:text-selected',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\ntype TabsTriggerProps = Omit<React.ComponentProps<typeof TabsPrimitive.Tab>, 'render'> &\n  SharedProps & {\n    variant?: VariantProps<typeof tabsTriggerVariants>['variant'];\n    /**\n     * Base UI render prop. Pass a JSX element (e.g. a router `<Link />`) or a\n     * function to swap the rendered element while keeping Tab keyboard and\n     * active-state behavior. Defaults to a native `<button>`.\n     */\n    render?: TabsRenderProp;\n  };\n\nfunction TabsTrigger({ className, value, variant, testId, disabled, render, ...props }: TabsTriggerProps) {\n  // If the consumer's render is a non-button intrinsic (e.g. `<a href>` for\n  // link-style tabs), tell Base UI to polyfill button semantics instead of\n  // asserting a native button. Function-form renders and component children\n  // are assumed to render a <button>; consumers can pass nativeButton={false}\n  // explicitly otherwise.\n  const nativeButton =\n    React.isValidElement(render) && typeof render.type === 'string' && render.type !== 'button' ? false : undefined;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      data-slot=\"tabs-trigger\"\n      data-testid={testId}\n      data-value={value}\n      disabled={disabled}\n      nativeButton={nativeButton}\n      render={renderTabWithActiveState('button', render)}\n      value={value}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel> &\n  HTMLMotionProps<'div'> &\n  SharedProps & {\n    transition?: Transition;\n  };\n\nfunction TabsContent({\n  className,\n  children,\n  transition = {\n    duration: 0.5,\n    ease: 'easeInOut',\n  },\n  testId,\n  ...props\n}: TabsContentProps) {\n  const prefersReducedMotion = useReducedMotion();\n  const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;\n  const shouldReduceMotion = reducedMotionConfig === 'always' || prefersReducedMotion;\n\n  return (\n    <TabsPrimitive.Panel\n      render={\n        <motion.div\n          className={cn('flex-1 space-y-6 outline-none', className)}\n          data-slot=\"tabs-content\"\n          data-testid={testId}\n          {...(shouldReduceMotion\n            ? {\n                initial: false,\n                layout: false,\n              }\n            : {\n                animate: { opacity: 1, y: 0, filter: 'blur(0px)' },\n                exit: { opacity: 0, y: 10, filter: 'blur(4px)' },\n                initial: { opacity: 0, y: -10, filter: 'blur(4px)' },\n                layout: true,\n                transition,\n              })}\n        >\n          {children}\n        </motion.div>\n      }\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  className?: string;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  className,\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: TabsContentsProps) {\n  return (\n    <motion.div\n      className={cn('overflow-visible', className)}\n      data-slot=\"tabs-contents\"\n      layout\n      style={{ height: 'auto' }}\n      transition={transition}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nconst tabsContentWrapperVariants = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      card: 'p-6',\n      contained: 'mx-1 -mt-2 mb-1 h-full rounded-sm bg-background p-6',\n    },\n    spacing: {\n      none: '',\n      sm: 'space-y-3',\n      md: 'space-y-4',\n      lg: 'space-y-6',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    spacing: 'md',\n  },\n});\n\ninterface TabsContentWrapperProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof tabsContentWrapperVariants> {}\n\nfunction TabsContentWrapper({ className, variant, spacing, ...props }: TabsContentWrapperProps) {\n  return <div className={cn(tabsContentWrapperVariants({ variant, spacing }), className)} {...props} />;\n}\n\nconst tabsFieldVariants = cva('flex flex-col', {\n  variants: {\n    spacing: {\n      tight: 'space-y-1',\n      normal: 'space-y-1.5',\n      loose: 'space-y-2',\n    },\n  },\n  defaultVariants: {\n    spacing: 'normal',\n  },\n});\n\ninterface TabsFieldProps extends React.ComponentProps<'div'>, VariantProps<typeof tabsFieldVariants> {}\n\nfunction TabsField({ className, spacing, ...props }: TabsFieldProps) {\n  return <div className={cn(tabsFieldVariants({ spacing }), className)} {...props} />;\n}\n\nconst tabsSectionVariants = cva('space-y-4', {\n  variants: {\n    spacing: {\n      none: 'space-y-0',\n      sm: 'space-y-2',\n      md: 'space-y-3',\n      lg: 'space-y-4',\n      xl: 'space-y-6',\n    },\n  },\n  defaultVariants: {\n    spacing: 'lg',\n  },\n});\n\ninterface TabsSectionProps extends React.ComponentProps<'div'>, VariantProps<typeof tabsSectionVariants> {}\n\nfunction TabsSection({ className, spacing, ...props }: TabsSectionProps) {\n  return <div className={cn(tabsSectionVariants({ spacing }), className)} {...props} />;\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  type TabsContentProps,\n  TabsContents,\n  type TabsContentsProps,\n  TabsContentWrapper,\n  TabsField,\n  TabsList,\n  type TabsListProps,\n  type TabsProps,\n  TabsSection,\n  TabsTrigger,\n  type TabsTriggerProps,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/tags/index.tsx",
      "content": "/** biome-ignore-all lint/a11y/useSemanticElements: part of tags component */\n'use client';\n\nimport { XIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type MouseEventHandler,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button } from '@/registry/base-nova/protoform/components/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/base-nova/protoform/components/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/base-nova/protoform/components/popover';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype TagsContextType = {\n  value?: string;\n  setValue?: (value: string) => void;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  width?: number;\n  setWidth?: (width: number) => void;\n};\nconst TagsContext = createContext<TagsContextType>({\n  value: undefined,\n  setValue: undefined,\n  open: false,\n  onOpenChange: () => {\n    // Default no-op function\n  },\n  width: undefined,\n  setWidth: undefined,\n});\n\nconst useTagsContext = () => {\n  const context = useContext(TagsContext);\n  if (!context) {\n    throw new Error('useTagsContext must be used within a TagsProvider');\n  }\n  return context;\n};\n\nexport type TagsProps = {\n  value?: string;\n  setValue?: (value: string) => void;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n  className?: string;\n} & SharedProps;\n\nexport const Tags = ({\n  value,\n  setValue,\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n  children,\n  className,\n  testId,\n}: TagsProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const [width, setWidth] = useState<number>();\n  const ref = useRef<HTMLDivElement>(null);\n  const open = controlledOpen ?? uncontrolledOpen;\n  const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen;\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      const firstEntry = entries[0];\n      if (firstEntry) {\n        setWidth(firstEntry.contentRect.width);\n      }\n    });\n    resizeObserver.observe(ref.current);\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n  return (\n    <TagsContext.Provider value={{ value, setValue, open, onOpenChange, width, setWidth }}>\n      <Popover onOpenChange={onOpenChange} open={open}>\n        <div className={cn('relative w-full', className)} data-testid={testId} ref={ref}>\n          {children}\n        </div>\n      </Popover>\n    </TagsContext.Provider>\n  );\n};\nexport type TagsTriggerProps = ComponentProps<typeof Button> & { testId?: string };\nexport const TagsTrigger = ({ className, children, testId, ...props }: TagsTriggerProps) => (\n  <PopoverTrigger asChild>\n    <Button\n      className={cn(\n        'h-auto w-full justify-between p-2 hover:bg-surface-inverse-hover active:bg-surface-default-hover',\n        className\n      )}\n      data-testid={testId}\n      role=\"combobox\"\n      variant=\"outline\"\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-center gap-1\">\n        {children}\n        <span className=\"px-2 py-px text-muted-foreground\">Select a tag...</span>\n      </div>\n    </Button>\n  </PopoverTrigger>\n);\nexport type TagsValueProps = ComponentProps<'span'> & { testId?: string };\nexport const TagsValue = ({\n  className,\n  children,\n  onRemove,\n  testId,\n  ...props\n}: TagsValueProps & { onRemove?: () => void }) => {\n  const handleRemove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onRemove?.();\n  };\n  return (\n    <span\n      className={cn(\n        'm-0.5 inline-flex min-h-6 cursor-pointer items-center gap-1.5 rounded-md bg-surface-subtle px-2 py-1 font-medium text-sm text-strong transition-colors hover:bg-surface-strong',\n        className\n      )}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"leading-tight\">{children}</span>\n      {onRemove ? (\n        <button\n          aria-label=\"Remove tag\"\n          className=\"size-auto cursor-pointer border-0 bg-transparent p-0 transition-opacity hover:opacity-70\"\n          onClick={handleRemove}\n          type=\"button\"\n        >\n          <XIcon className=\"text-muted-foreground\" size={12} />\n        </button>\n      ) : null}\n    </span>\n  );\n};\n\nexport type TagsContentProps = ComponentProps<typeof PopoverContent>;\nexport const TagsContent = ({ className, children, ...props }: TagsContentProps) => {\n  const { width } = useTagsContext();\n  return (\n    <PopoverContent className={cn('p-0', className)} style={{ width }} {...props}>\n      <Command>{children}</Command>\n    </PopoverContent>\n  );\n};\n\nexport type TagsInputProps = ComponentProps<typeof CommandInput>;\nexport const TagsInput = ({ className, ...props }: TagsInputProps) => (\n  <CommandInput className={cn('h-9', className)} {...props} />\n);\nexport type TagsListProps = ComponentProps<typeof CommandList>;\nexport const TagsList = ({ className, ...props }: TagsListProps) => (\n  <CommandList className={cn('max-h-[200px]', className)} {...props} />\n);\n\nexport type TagsEmptyProps = ComponentProps<typeof CommandEmpty>;\nexport const TagsEmpty = ({ children, className, ...props }: TagsEmptyProps) => (\n  <CommandEmpty {...props}>{children ?? 'No tags found.'}</CommandEmpty>\n);\n\nexport type TagsGroupProps = ComponentProps<typeof CommandGroup>;\nexport const TagsGroup = CommandGroup;\n\nexport type TagsItemProps = ComponentProps<typeof CommandItem>;\nexport const TagsItem = ({ className, ...props }: TagsItemProps) => (\n  <CommandItem className={cn('cursor-pointer items-center justify-between', className)} {...props} />\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/textarea/index.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst textareaVariants = cva(\n  '!border-input flex w-full rounded-lg border bg-transparent text-base outline-none transition-colors selection:bg-selected selection:text-selected-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-12 px-2 py-1.5 text-sm',\n        default: 'min-h-16 px-2.5 py-2',\n        lg: 'min-h-20 px-3 py-2.5',\n      },\n      resize: {\n        none: 'resize-none',\n        vertical: 'resize-y',\n        horizontal: 'resize-x',\n        both: 'resize',\n        auto: 'field-sizing-content',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      resize: 'auto',\n    },\n  }\n);\n\ninterface TextareaProps extends React.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants>, SharedProps {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, size, resize, testId, ...props }, ref) => (\n    <textarea\n      className={cn(textareaVariants({ size, resize }), className)}\n      data-slot=\"textarea\"\n      data-testid={testId}\n      ref={ref}\n      {...props}\n    />\n  )\n);\n\nTextarea.displayName = 'Textarea';\n\nexport { Textarea, textareaVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/toggle/index.tsx",
      "content": "import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\nconst toggleVariants = cva(\n  \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        ghost: 'bg-transparent',\n        outline: '!border-input border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        md: 'h-9 min-w-9 px-2',\n        sm: 'h-8 min-w-8 px-1.5',\n        lg: 'h-10 min-w-10 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'ghost',\n      size: 'md',\n    },\n  }\n);\n\ntype ToggleProps = Omit<React.ComponentProps<typeof TogglePrimitive>, 'onPressedChange'> &\n  VariantProps<typeof toggleVariants> &\n  SharedProps & {\n    onPressedChange?: (pressed: boolean) => void;\n  };\n\n// biome-ignore lint/suspicious/noExplicitAny: Base UI render prop type uses HTMLProps<any>\nfunction renderToggleButton(props: React.HTMLProps<any>, state: { pressed?: boolean; disabled?: boolean }) {\n  const attrs: Record<string, unknown> = {\n    'data-state': state?.pressed ? 'on' : 'off',\n  };\n  if (state?.disabled) {\n    attrs['data-disabled'] = '';\n  }\n  return React.createElement('button', { ...props, ...attrs });\n}\n\nfunction Toggle({ className, variant, size, testId, onPressedChange, ...props }: ToggleProps) {\n  const handlePressedChange = React.useMemo(() => {\n    if (!onPressedChange) {\n      return;\n    }\n    return (pressed: boolean) => onPressedChange(pressed);\n  }, [onPressedChange]);\n\n  return (\n    <TogglePrimitive\n      className={cn(toggleVariants({ variant, size, className }))}\n      data-slot=\"toggle\"\n      data-testid={testId}\n      onPressedChange={handlePressedChange}\n      render={renderToggleButton}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/toggle-group/index.tsx",
      "content": "'use client';\n\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, type HTMLMotionProps, motion, type Transition } from 'motion/react';\nimport React from 'react';\n\nimport type { GroupContextValue, GroupPosition } from '@/registry/base-nova/protoform/components/group';\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\ntype HighlightBounds = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\nconst toggleVariants = cva(\n  \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus:outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-primary-alpha-strong data-[state=on]:text-action-primary dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      type: {\n        single: '',\n        multiple: 'data-[state=on]:bg-primary-alpha-strong',\n      },\n      variant: {\n        default: 'bg-transparent',\n        outline: 'bg-transparent hover:bg-muted hover:text-muted-foreground',\n      },\n      size: {\n        default: 'h-9 min-w-9 px-2',\n        sm: 'h-8 min-w-8 px-1.5',\n        lg: 'h-10 min-w-10 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nfunction getPositionClasses(attached: boolean, position: GroupPosition | undefined, orientation: Orientation): string {\n  if (!(attached && position)) {\n    return 'rounded-md';\n  }\n  if (orientation === 'vertical') {\n    if (position === 'first') {\n      return 'rounded-t-md rounded-b-none';\n    }\n    if (position === 'last') {\n      return 'rounded-b-md rounded-t-none';\n    }\n    return 'rounded-none';\n  }\n  if (position === 'first') {\n    return 'rounded-r-none rounded-l-md';\n  }\n  if (position === 'last') {\n    return 'rounded-r-md rounded-l-none';\n  }\n  return 'rounded-none';\n}\n\ntype RegisterItem = (value: string, el: HTMLButtonElement | null) => void;\n\ntype ToggleGroupContextProps = VariantProps<typeof toggleVariants> &\n  GroupContextValue & {\n    type?: 'single' | 'multiple';\n    orientation: Orientation;\n    registerItem: RegisterItem;\n  };\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextProps | undefined>(undefined);\n\nconst useToggleGroup = (): ToggleGroupContextProps => {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('useToggleGroup must be used within a ToggleGroup');\n  }\n  return context;\n};\n\n// Translates Radix's `type: 'single' | 'multiple'` and string-or-array value\n// shape onto Base UI's `multiple` boolean + array value shape.\ntype ToggleGroupBaseProps = Omit<\n  React.ComponentProps<typeof ToggleGroupPrimitive>,\n  'value' | 'defaultValue' | 'onValueChange' | 'multiple'\n> &\n  Omit<VariantProps<typeof toggleVariants>, 'type'> &\n  SharedProps & {\n    transition?: Transition;\n    activeClassName?: string;\n    attached?: boolean;\n  };\n\ntype ToggleGroupSingleProps = ToggleGroupBaseProps & {\n  type?: 'single';\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\ntype ToggleGroupMultipleProps = ToggleGroupBaseProps & {\n  type: 'multiple';\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\n\ntype ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nfunction toValueArray(v: string | string[] | undefined): string[] | undefined {\n  if (v === undefined) {\n    return;\n  }\n  return Array.isArray(v) ? v : [v];\n}\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  transition = { type: 'spring', bounce: 0, stiffness: 200, damping: 25 },\n  activeClassName,\n  testId,\n  attached = true,\n  type,\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'horizontal',\n  ...props\n}: ToggleGroupProps) {\n  const isMultiple = type === 'multiple';\n  const isHorizontal = orientation !== 'vertical';\n\n  const [internalActive, setInternalActive] = React.useState<string | undefined>(\n    typeof defaultValue === 'string' ? defaultValue : undefined\n  );\n  const activeValue = isMultiple ? undefined : ((value as string | undefined) ?? internalActive);\n\n  const handleValueChange = React.useCallback(\n    (groupValue: unknown[]) => {\n      if (isMultiple) {\n        (onValueChange as ((v: string[]) => void) | undefined)?.(groupValue as string[]);\n        return;\n      }\n      const next = (groupValue[0] as string | undefined) ?? '';\n      setInternalActive(next || undefined);\n      (onValueChange as ((v: string) => void) | undefined)?.(next);\n    },\n    [isMultiple, onValueChange]\n  );\n\n  const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));\n  const childCount = childrenArray.length;\n\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  const itemsRef = React.useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const registerItem = React.useCallback<RegisterItem>((itemValue, el) => {\n    const map = itemsRef.current;\n    if (el) {\n      map.set(itemValue, el);\n    } else {\n      map.delete(itemValue);\n    }\n  }, []);\n\n  const [bounds, setBounds] = React.useState<HighlightBounds | null>(null);\n\n  // childCount is a dep so we re-measure when items are inserted/removed:\n  // reflow can shift the active item without resizing it.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: childCount is intentional\n  React.useLayoutEffect(() => {\n    if (isMultiple || !activeValue) {\n      setBounds(null);\n      return;\n    }\n\n    const measure = () => {\n      const el = itemsRef.current.get(activeValue);\n      if (!el) {\n        setBounds(null);\n        return;\n      }\n      setBounds((prev) => {\n        const next = { top: el.offsetTop, left: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };\n        if (\n          prev &&\n          prev.top === next.top &&\n          prev.left === next.left &&\n          prev.width === next.width &&\n          prev.height === next.height\n        ) {\n          return prev;\n        }\n        return next;\n      });\n    };\n\n    measure();\n\n    const ro = new ResizeObserver(measure);\n    if (groupRef.current) {\n      ro.observe(groupRef.current);\n    }\n    const activeEl = itemsRef.current.get(activeValue);\n    if (activeEl) {\n      ro.observe(activeEl);\n    }\n    return () => ro.disconnect();\n  }, [activeValue, isMultiple, childCount]);\n\n  // Lock the perpendicular axis so layout shifts in surrounding content\n  // don't drag the highlight off-axis.\n  const axisLockedTransition: Transition = React.useMemo(() => {\n    const snap = { duration: 0 } as const;\n    return isHorizontal ? { ...transition, top: snap, height: snap } : { ...transition, left: snap, width: snap };\n  }, [transition, isHorizontal]);\n\n  const getPosition = (index: number): GroupPosition | undefined => {\n    if (!attached || childCount === 1) {\n      return;\n    }\n    if (index === 0) {\n      return 'first';\n    }\n    if (index === childCount - 1) {\n      return 'last';\n    }\n    return 'middle';\n  };\n\n  const activeIndex = activeValue\n    ? childrenArray.findIndex(\n        (child) => React.isValidElement(child) && (child.props as { value?: unknown }).value === activeValue\n      )\n    : -1;\n  const highlightPositionClasses = getPositionClasses(\n    attached,\n    activeIndex >= 0 ? getPosition(activeIndex) : undefined,\n    orientation\n  );\n\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\n        'relative flex items-center justify-center',\n        !isHorizontal && 'flex-col',\n        !isHorizontal && attached && 'items-stretch',\n        variant === 'outline' && '!border-outline-inverse rounded-md border p-0.5',\n        !attached && 'gap-1',\n        className\n      )}\n      data-attached={attached || undefined}\n      data-slot=\"toggle-group\"\n      data-testid={testId}\n      data-variant={variant}\n      defaultValue={toValueArray(defaultValue)}\n      multiple={isMultiple}\n      onValueChange={handleValueChange}\n      orientation={orientation}\n      ref={groupRef}\n      // Restore Radix's \"1 of N\" radio-group semantics for single-select; Base UI's Toggle is a plain button.\n      role={isMultiple ? undefined : 'radiogroup'}\n      value={toValueArray(value)}\n      {...props}\n    >\n      <AnimatePresence initial={false}>\n        {!isMultiple && bounds ? (\n          <motion.div\n            animate={{ top: bounds.top, left: bounds.left, width: bounds.width, height: bounds.height, opacity: 1 }}\n            aria-hidden\n            className={cn('pointer-events-none absolute z-0 bg-accent', highlightPositionClasses, activeClassName)}\n            data-slot=\"toggle-group-highlight\"\n            exit={{ opacity: 0, transition: { duration: 0.15 } }}\n            initial={false}\n            transition={axisLockedTransition}\n          />\n        ) : null}\n      </AnimatePresence>\n      {childrenArray.map((child, index) => {\n        const element = child as React.ReactElement;\n        return (\n          <ToggleGroupContext.Provider\n            key={element.key || `toggle-group-item-${index}`}\n            value={{ variant, size, type, attached, position: getPosition(index), orientation, registerItem }}\n          >\n            {child}\n          </ToggleGroupContext.Provider>\n        );\n      })}\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleGroupItemProps = Omit<React.ComponentProps<typeof TogglePrimitive>, 'onPressedChange'> &\n  Omit<VariantProps<typeof toggleVariants>, 'type'> &\n  SharedProps & {\n    value: string;\n    children?: React.ReactNode;\n    buttonProps?: HTMLMotionProps<'button'>;\n    spanProps?: React.ComponentProps<'span'>;\n  };\n\nconst ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(\n  ({ className, children, variant, size, buttonProps, spanProps, testId, disabled, value, ...props }, ref) => {\n    const {\n      type,\n      variant: contextVariant,\n      size: contextSize,\n      attached,\n      position,\n      orientation,\n      registerItem,\n    } = useToggleGroup();\n\n    const positionClasses = getPositionClasses(Boolean(attached), position, orientation);\n    const isVerticalAttached = orientation === 'vertical' && Boolean(attached);\n    const isSingle = type === 'single';\n\n    // Combined ref: registers the DOM node with the parent group (keyed by\n    // value) so the group can measure highlight bounds, and forwards to the\n    // consumer's ref.\n    const setRef = React.useCallback(\n      (el: HTMLButtonElement | null) => {\n        registerItem(value, el);\n        if (typeof ref === 'function') {\n          ref(el);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el;\n        }\n      },\n      [registerItem, value, ref]\n    );\n\n    return (\n      <TogglePrimitive\n        disabled={disabled}\n        value={value}\n        {...props}\n        // biome-ignore lint/suspicious/noExplicitAny: Base UI render merges Toggle attrs for the consumer element\n        render={(rootProps: Record<string, any>, state: { pressed?: boolean; disabled?: boolean }) => (\n          <motion.button\n            {...rootProps}\n            aria-checked={isSingle ? Boolean(state?.pressed) : undefined}\n            data-slot=\"toggle-group-item\"\n            data-state={state?.pressed ? 'on' : 'off'}\n            data-testid={testId}\n            disabled={disabled ?? state?.disabled}\n            initial={{ scale: 1 }}\n            ref={setRef}\n            role={isSingle ? 'radio' : undefined}\n            whileTap={{ scale: 0.9 }}\n            {...buttonProps}\n            className={cn('relative', isVerticalAttached && 'w-full', buttonProps?.className)}\n          >\n            <span\n              {...spanProps}\n              className={cn(\n                'relative z-[1]',\n                toggleVariants({ variant: variant || contextVariant, size: size || contextSize, type }),\n                positionClasses,\n                isVerticalAttached && 'w-full',\n                className,\n                spanProps?.className\n              )}\n              data-state={state?.pressed ? 'on' : 'off'}\n            >\n              {children}\n            </span>\n          </motion.button>\n        )}\n      />\n    );\n  }\n);\n\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/tooltip/index.tsx",
      "content": "'use client';\n\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport React from 'react';\n\nimport { usePortalContainer } from '@/registry/base-nova/protoform/hooks/use-portal-container';\nimport { asChildToRender, narrowOpenChange, renderWithDataState, useMirroredOpen } from '@/registry/base-nova/protoform/lib/base-ui-compat';\nimport { cn, type PortalContentProps, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\ntype TooltipContextType = {\n  isOpen: boolean;\n};\n\nconst TooltipContext = React.createContext<TooltipContextType | undefined>(undefined);\n\nconst useTooltip = (): TooltipContextType => {\n  const context = React.useContext(TooltipContext);\n  if (!context) {\n    throw new Error('useTooltip must be used within a Tooltip');\n  }\n  return context;\n};\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nconst getInitialPosition = (side: Side) => {\n  switch (side) {\n    case 'top':\n      return { y: 15 };\n    case 'bottom':\n      return { y: -15 };\n    case 'left':\n      return { x: 15 };\n    case 'right':\n      return { x: -15 };\n    default:\n      return {};\n  }\n};\n\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider> & {\n  delayDuration?: number;\n  skipDelayDuration?: number;\n};\n\nfunction TooltipProvider({ delayDuration, skipDelayDuration, ...props }: TooltipProviderProps) {\n  return (\n    <TooltipPrimitive.Provider\n      closeDelay={0}\n      delay={delayDuration ?? 150}\n      timeout={skipDelayDuration ?? 0}\n      {...props}\n    />\n  );\n}\n\ntype TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Root>, 'onOpenChange' | 'children'> &\n  SharedProps & {\n    onOpenChange?: (open: boolean) => void;\n    delayDuration?: number;\n    children?: React.ReactNode;\n  };\n\nfunction Tooltip({ testId, onOpenChange, delayDuration: _delayDuration, ...props }: TooltipProps) {\n  const { isOpen, handleOpenChange } = useMirroredOpen(props?.open, props?.defaultOpen, onOpenChange);\n\n  return (\n    <TooltipContext.Provider value={{ isOpen }}>\n      <TooltipPrimitive.Root\n        data-slot=\"tooltip\"\n        data-testid={testId}\n        {...props}\n        onOpenChange={narrowOpenChange(handleOpenChange)}\n      />\n    </TooltipContext.Provider>\n  );\n}\n\ntype TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger> &\n  SharedProps & {\n    asChild?: boolean;\n  };\n\nfunction TooltipTrigger({ testId, ...props }: TooltipTriggerProps) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" data-testid={testId} {...asChildToRender(props)} />;\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  SharedProps &\n  Pick<PortalContentProps, 'container' | 'onOpenAutoFocus'> & {\n    transition?: Transition;\n    arrow?: boolean;\n    side?: Side;\n    align?: Align;\n    sideOffset?: number;\n    alignOffset?: number;\n  };\n\nfunction TooltipContent({\n  className,\n  side = 'top',\n  align = 'center',\n  sideOffset = 4,\n  alignOffset,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  arrow = true,\n  children,\n  testId,\n  container,\n  onOpenAutoFocus: _onOpenAutoFocus,\n  ...props\n}: TooltipContentProps) {\n  const { isOpen } = useTooltip();\n  const initialPosition = getInitialPosition(side);\n  const portalContainer = usePortalContainer();\n\n  return (\n    <AnimatePresence>\n      {isOpen ? (\n        <TooltipPrimitive.Portal container={container ?? portalContainer} data-slot=\"tooltip-portal\" keepMounted>\n          <TooltipPrimitive.Positioner\n            align={align}\n            alignOffset={alignOffset}\n            className=\"z-50\"\n            side={side}\n            sideOffset={sideOffset}\n          >\n            <TooltipPrimitive.Popup render={renderWithDataState('div')} {...props}>\n              <motion.div\n                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}\n                className={cn(\n                  'relative w-fit origin-(--transform-origin) text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-sm shadow-md',\n                  className\n                )}\n                data-slot=\"tooltip-content\"\n                data-testid={testId}\n                exit={{ opacity: 0, scale: 0, ...initialPosition }}\n                initial={{ opacity: 0, scale: 0, ...initialPosition }}\n                key=\"tooltip-content\"\n                transition={transition}\n              >\n                {children}\n\n                {arrow ? (\n                  <TooltipPrimitive.Arrow\n                    className=\"z-50 size-2.5 rotate-45 rounded-[2px] bg-primary fill-primary data-[side=bottom]:top-0 data-[side=left]:right-0 data-[side=top]:bottom-0 data-[side=right]:left-0 data-[side=left]:translate-x-1/2 data-[side=right]:-translate-x-1/2 data-[side=bottom]:-translate-y-1/2 data-[side=top]:translate-y-1/2\"\n                    data-slot=\"tooltip-content-arrow\"\n                  />\n                ) : null}\n              </motion.div>\n            </TooltipPrimitive.Popup>\n          </TooltipPrimitive.Positioner>\n        </TooltipPrimitive.Portal>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Tooltip,\n  TooltipContent,\n  type TooltipContentProps,\n  type TooltipContextType,\n  type TooltipProps,\n  TooltipProvider,\n  type TooltipProviderProps,\n  TooltipTrigger,\n  type TooltipTriggerProps,\n  useTooltip,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/components/typography/index.tsx",
      "content": "'use client';\n\nimport { Link as TanStackLink } from '@tanstack/react-router';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React, { forwardRef } from 'react';\n\nimport { cn, type SharedProps } from '@/registry/base-nova/protoform/lib/utils';\n\n// Heading variants using cva\n// Based on Figma design system: Inter Display, font-medium (500), 100% line-height, -0.01em tracking\nconst headingVariants = cva('font-display font-medium leading-none tracking-heading', {\n  variants: {\n    level: {\n      1: 'text-2xl',\n      2: 'text-xl',\n      3: 'text-lg',\n      4: 'text-md',\n      5: 'text-sm',\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    level: 1,\n    align: 'left',\n  },\n});\n\nexport const textVariants = cva('font-sans', {\n  variants: {\n    variant: {\n      // Legacy variant names (mapped to Figma equivalents - NOT backward compatible for styles)\n      body: 'font-normal text-sm leading-6 tracking-heading', // → bodyMedium\n      lead: 'font-normal text-lg text-muted-foreground leading-7 tracking-heading', // → bodyLarge + muted\n      large: 'font-normal text-base leading-7 tracking-heading', // → bodyXLarge\n      small: 'font-normal text-xs leading-5 tracking-normal', // → bodyMedium\n      muted: 'font-normal text-muted-foreground text-sm leading-5 tracking-normal', // → bodyMedium + muted\n      label: 'font-semibold text-sm leading-5 tracking-normal', // → labelStrongSmall\n      xLarge: 'font-display font-medium text-lg leading-6 tracking-heading', // → titleXSmall\n\n      // Titles - Inter Display, font-medium (500)\n      titleLarge: 'font-display font-medium text-4xl leading-10 tracking-heading', // 2rem, line-height 2.5rem\n      titleMedium: 'font-display font-medium text-2xl leading-8 tracking-heading', // 1.5rem, line-height 2rem\n      titleMediumSemibold: 'font-display font-semibold text-2xl leading-8 tracking-heading', // 1.5rem, 600, line-height 2rem\n      titleSmall: 'font-display font-medium text-xl leading-7 tracking-heading', // 1.25rem, line-height 1.75rem\n      titleXSmall: 'font-display font-medium text-lg leading-6 tracking-heading', // 1.125rem, line-height 1.5rem\n\n      // Labels - Inter, font-normal (400)\n      labelLarge: 'font-normal text-lg leading-6 tracking-label', // 1.125rem, line-height 1.5rem, -0.0125em\n      labelMedium: 'font-normal text-base leading-6 tracking-tight', // 1rem, line-height 1.5rem, -0.025em\n      labelSmall: 'font-normal text-sm leading-5 tracking-normal', // 0.875rem, line-height 1.25rem\n      labelXSmall: 'font-normal text-xs leading-4 tracking-normal', // 0.75rem, line-height 1rem\n\n      // Label Strong variants - Inter, font-semibold (600)\n      labelStrongLarge: 'font-semibold text-lg leading-6 tracking-heading', // 1.125rem, line-height 1.5rem, -0.01em\n      labelStrongMedium: 'font-semibold text-base leading-6 tracking-heading', // 1rem, line-height 1.5rem, -0.01em\n      labelStrongSmall: 'font-semibold text-sm leading-5 tracking-normal', // 0.875rem, line-height 1.25rem\n      labelStrongXSmall: 'font-semibold text-xs leading-4 tracking-normal', // 0.75rem, line-height 1rem\n\n      // Body - Inter, font-normal (400)\n      bodyXLarge: 'font-normal text-lg leading-7 tracking-heading', // 1.125rem, line-height 1.75rem, -0.01em\n      bodyLarge: 'font-normal text-base leading-6 tracking-heading', // 1rem, line-height 1.5rem, -0.01em\n      bodyMedium: 'font-normal text-sm leading-5 tracking-normal', // 0.875rem, line-height 1.25rem\n      bodySmall: 'font-normal text-xs leading-4 tracking-normal', // 0.75rem, line-height 1rem\n\n      // Body Strong variants - Inter, font-medium (500)\n      bodyStrongXLarge: 'font-medium text-lg leading-7 tracking-heading', // 1.125rem, line-height 1.75rem, -0.01em\n      bodyStrongLarge: 'font-medium text-base leading-6 tracking-heading', // 1rem, line-height 1.5rem, -0.01em\n      bodyStrongMedium: 'font-medium text-sm leading-5 tracking-normal', // 0.875rem, line-height 1.25rem\n      bodyStrongSmall: 'font-medium text-xs leading-4 tracking-normal', // 0.75rem, line-height 1rem\n\n      // Buttons - Inter, font-semibold (600), line-height 100%\n      buttonLarge: 'font-semibold text-lg leading-none tracking-heading', // 1.125rem, -0.01em\n      buttonMedium: 'font-semibold text-base leading-none tracking-normal', // 1rem\n      buttonSmall: 'font-semibold text-sm leading-none tracking-normal', // 0.875rem\n      buttonXSmall: 'font-semibold text-xs leading-none tracking-heading', // 0.75rem, -0.01em\n\n      // Numbers - Inter, font-normal (400), tighter tracking for tabular display\n      numberLarge: 'font-normal text-lg tabular-nums leading-6 tracking-number', // 1.125rem, -0.05em\n      numberMedium: 'font-normal text-base tabular-nums leading-6 tracking-number', // 1rem, -0.05em\n      numberSmall: 'font-normal text-sm tabular-nums leading-5 tracking-number', // 0.875rem, -0.05em\n      numberXSmall: 'font-normal text-xs tabular-nums leading-4 tracking-number-tight', // 0.75rem, -0.025em\n\n      // Number Strong variants - Inter, font-medium (500)\n      numberStrongLarge: 'font-medium text-lg tabular-nums leading-6 tracking-number', // 1.125rem, -0.05em\n      numberStrongMedium: 'font-medium text-base tabular-nums leading-6 tracking-number', // 1rem, -0.05em\n      numberStrongSmall: 'font-medium text-sm tabular-nums leading-5 tracking-number', // 0.875rem, -0.05em\n      numberStrongXSmall: 'font-medium text-xs tabular-nums leading-4 tracking-number-tight', // 0.75rem, -0.025em\n\n      // Captions - Inter, font-normal (400), positive tracking\n      captionMedium: 'font-normal text-xs leading-4 tracking-caption', // 0.75rem, 0.01em\n      captionSmall: 'font-normal text-caption-sm leading-4 tracking-caption', // 0.625rem (10px), 0.01em\n\n      // Caption Strong variants - Inter, font-medium (500)\n      captionStrongMedium: 'font-medium text-xs leading-4 tracking-caption', // 0.75rem, 0.01em\n      captionStrongSmall: 'font-medium text-caption-sm leading-4 tracking-caption-wide', // 0.625rem, 0.05em\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    align: 'left',\n  },\n});\n\n// Main Heading Component\ninterface HeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement>,\n    VariantProps<typeof headingVariants>,\n    SharedProps {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n  children: React.ReactNode;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((componentProps, ref) => {\n  const { align, className, children, testId, as, level: levelProp, ...props } = componentProps;\n  const headingLevel = levelProp ?? 1;\n  const HeadingTag = as ?? (`h${headingLevel}` as keyof React.JSX.IntrinsicElements);\n\n  return React.createElement(\n    HeadingTag,\n    {\n      ref,\n      className: cn(headingVariants({ level: headingLevel, align }), className),\n      'data-testid': testId,\n      ...props,\n    },\n    children\n  );\n});\n\n// Text Component\ninterface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants>, SharedProps {\n  as?: 'p' | 'div' | 'span' | 'small';\n  children: React.ReactNode;\n}\n\n// Defaults to <div> so Text can safely wrap block-level children (lists, inputs, etc.)\n// without emitting React `validateDOMNesting` warnings. Consumers that need paragraph\n// semantics can opt in via `as=\"p\"`.\nexport function Text({ variant, align, as = 'div', className, children, testId, ...props }: TextProps) {\n  const Component = as;\n\n  return (\n    <Component className={cn(textVariants({ variant, align }), className)} data-testid={testId} {...props}>\n      {children}\n    </Component>\n  );\n}\n\n// Blockquote Component\ninterface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Blockquote({ className, children, testId, ...props }: BlockquoteProps) {\n  return (\n    <blockquote className={cn('border-l-2 pl-6 italic', className)} data-testid={testId} {...props}>\n      {children}\n    </blockquote>\n  );\n}\n\n// List Component\ninterface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement>, SharedProps {\n  children: React.ReactNode;\n  ordered?: boolean;\n}\n\nexport function List({ ordered = false, className, children, testId, ...props }: ListProps) {\n  const ListTag = ordered ? 'ol' : 'ul';\n  const listClass = ordered ? 'mt-1 mb-3 ml-6 list-decimal [&>li]:mt-1' : 'mt-1 mb-3 ml-6 list-disc [&>li]:mt-0.5';\n\n  return (\n    <ListTag className={cn(listClass, className)} data-testid={testId} {...props}>\n      {children}\n    </ListTag>\n  );\n}\n\n// List Item Component\ninterface ListItemProps extends React.HTMLAttributes<HTMLLIElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function ListItem({ className, children, testId, ...props }: ListItemProps) {\n  return (\n    <li className={className} data-testid={testId} {...props}>\n      {children}\n    </li>\n  );\n}\n\n// Optional List Item Text component to emulate prose p-in-li behavior\ninterface ListItemTextProps extends React.HTMLAttributes<HTMLParagraphElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function ListItemText({ className, children, testId, ...props }: ListItemTextProps) {\n  return (\n    <p className={cn('my-0 inline', className)} data-testid={testId} {...props}>\n      {children}\n    </p>\n  );\n}\n\n// Inline Code Component\ninterface InlineCodeProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function InlineCode({ className, children, testId, ...props }: InlineCodeProps) {\n  return (\n    <code\n      className={cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold text-sm', className)}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </code>\n  );\n}\n\n// Base props shared by both link types\ntype BaseLinkProps = SharedProps & {\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Discriminated union for link types\n// TanStack Router variant uses explicit props because ComponentProps<typeof TanStackLink>\n// ties params to a specific route literal, which breaks when `to` is a plain string.\ntype LinkProps =\n  | (BaseLinkProps &\n      React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n        as?: never; // Default to anchor - don't allow 'as' when using anchor\n        href: string;\n      })\n  | (BaseLinkProps & {\n      as: typeof TanStackLink;\n      to: string;\n      params?: Record<string, string>;\n      search?: Record<string, unknown>;\n      hash?: string;\n      replace?: boolean;\n      preload?: false | 'intent' | 'render' | 'viewport';\n      [key: string]: unknown;\n    });\n\n// Link styles matching Figma: primary color, dotted underline with offset\nconst linkStyles =\n  'font-medium text-primary decoration-dotted underline underline-offset-[3px] hover:text-primary/80 transition-colors';\n\nexport function Link({ className, children, testId, ...props }: LinkProps) {\n  if ('as' in props && props.as === TanStackLink) {\n    // Render as TanStack Router Link when explicitly specified\n    const { as: _, ...routerProps } = props;\n    return (\n      <TanStackLink className={cn(linkStyles, className)} data-testid={testId} {...routerProps}>\n        {children}\n      </TanStackLink>\n    );\n  }\n  // Render as anchor tag (default)\n\n  return (\n    <a className={cn(linkStyles, className)} data-testid={testId} {...props}>\n      {children}\n    </a>\n  );\n}\n\n// Preformatted Code Block Component\ninterface PreProps extends React.HTMLAttributes<HTMLPreElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Pre({ className, children, testId, ...props }: PreProps) {\n  return (\n    <pre\n      className={cn('my-6 overflow-y-auto rounded-md bg-muted p-4 text-sm', className)}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </pre>\n  );\n}\n\n// Horizontal Rule Component\ninterface HrProps extends React.HTMLAttributes<HTMLHRElement>, SharedProps {}\n\nexport function Hr({ className, testId, ...props }: HrProps) {\n  return <hr className={cn('my-10', className)} data-testid={testId} {...props} />;\n}\n\n// Description List Components\ninterface DlProps extends React.HTMLAttributes<HTMLDListElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Dl({ className, children, testId, ...props }: DlProps) {\n  return (\n    <dl className={cn('my-6', className)} data-testid={testId} {...props}>\n      {children}\n    </dl>\n  );\n}\n\ninterface DtProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Dt({ className, children, testId, ...props }: DtProps) {\n  return (\n    <dt className={cn('font-semibold tracking-tight', className)} data-testid={testId} {...props}>\n      {children}\n    </dt>\n  );\n}\n\ninterface DdProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Dd({ className, children, testId, ...props }: DdProps) {\n  return (\n    <dd className={className} data-testid={testId} {...props}>\n      {children}\n    </dd>\n  );\n}\n\n// Details/Summary Components\ninterface DetailsProps extends React.DetailsHTMLAttributes<HTMLDetailsElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Details({ className, children, testId, ...props }: DetailsProps) {\n  return (\n    <details className={className} data-testid={testId} {...props}>\n      {children}\n    </details>\n  );\n}\n\ninterface SummaryProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Summary({ className, children, testId, ...props }: SummaryProps) {\n  return (\n    <summary className={cn('cursor-pointer font-semibold tracking-tight', className)} data-testid={testId} {...props}>\n      {children}\n    </summary>\n  );\n}\n\n// Marked/Highlight Component\ninterface MarkProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Mark({ className, children, testId, ...props }: MarkProps) {\n  return (\n    <mark className={cn('bg-yellow-200', className)} data-testid={testId} {...props}>\n      {children}\n    </mark>\n  );\n}\n\n// Small text Component\ninterface SmallProps extends React.HTMLAttributes<HTMLElement>, SharedProps {\n  children: React.ReactNode;\n}\n\nexport function Small({ className, children, testId, ...props }: SmallProps) {\n  return (\n    <small className={cn('text-xs leading-none', className)} data-testid={testId} {...props}>\n      {children}\n    </small>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-nova/protoform/hooks/use-controllable-state/index.ts",
      "content": "'use client';\n\nimport React from 'react';\n\nimport { useLayoutEffect } from '@/registry/base-nova/protoform/hooks/use-layout-effect';\n\n// Prevent bundlers from trying to optimize the import\nconst useInsertionEffect = React.useInsertionEffect ?? useLayoutEffect;\n\ntype ChangeHandler<T> = (state: T) => void;\ntype SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>;\n\ntype UseControllableStateParams<T> = {\n  prop?: T | undefined;\n  defaultProp: T;\n  onChange?: ChangeHandler<T>;\n  caller?: string;\n};\n\n/**\n * Taken from Radix UI\n * Controlled/uncontrolled state helper adapted for protoform components.\n */\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange = () => {\n    // Default no-op function\n  },\n  caller,\n}: UseControllableStateParams<T>): [T, SetStateFn<T>] {\n  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({\n    defaultProp,\n    onChange,\n  });\n  const isControlled = prop !== undefined;\n  const value = isControlled ? prop : uncontrolledProp;\n\n  // OK to disable conditionally calling hooks here because they will always run\n  // consistently in the same environment. Bundlers should be able to remove the\n  // code block entirely in production.\n  if (process.env.NODE_ENV !== 'production') {\n    // biome-ignore lint/correctness/useHookAtTopLevel: see comment above\n    const isControlledRef = React.useRef(prop !== undefined);\n    // biome-ignore lint/correctness/useHookAtTopLevel: see comment above\n    React.useEffect(() => {\n      const wasControlled = isControlledRef.current;\n      if (wasControlled !== isControlled) {\n        const from = wasControlled ? 'controlled' : 'uncontrolled';\n        const to = isControlled ? 'controlled' : 'uncontrolled';\n        // biome-ignore lint/suspicious/noConsole: needed for controllable state implementation\n        console.warn(\n          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`\n        );\n      }\n      isControlledRef.current = isControlled;\n    }, [isControlled, caller]);\n  }\n\n  const setValue = React.useCallback<SetStateFn<T>>(\n    (nextValue) => {\n      if (isControlled) {\n        const newValue = isFunction(nextValue) ? nextValue(prop) : nextValue;\n        if (newValue !== prop) {\n          onChangeRef.current?.(newValue as T);\n        }\n      } else {\n        setUncontrolledProp(nextValue);\n      }\n    },\n    [isControlled, prop, setUncontrolledProp, onChangeRef]\n  );\n\n  return [value, setValue];\n}\n\nfunction useUncontrolledState<T>({\n  defaultProp,\n  onChange,\n}: Omit<UseControllableStateParams<T>, 'prop'>): [\n  Value: T,\n  setValue: React.Dispatch<React.SetStateAction<T>>,\n  OnChangeRef: React.RefObject<ChangeHandler<T> | undefined>,\n] {\n  const [value, setValue] = React.useState(defaultProp);\n  const prevValueRef = React.useRef(value);\n\n  const onChangeRef = React.useRef(onChange);\n  useInsertionEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: stable callback semantics require this dependency shape\n  React.useEffect(() => {\n    if (prevValueRef.current !== value) {\n      onChangeRef.current?.(value);\n      prevValueRef.current = value;\n    }\n  }, [value, prevValueRef]);\n\n  return [value, setValue, onChangeRef];\n}\n\nfunction isFunction(value: unknown): value is (...args: unknown[]) => unknown {\n  return typeof value === 'function';\n}\n",
      "type": "registry:hook"
    },
    {
      "path": "registry/base-nova/protoform/hooks/use-layout-effect/index.ts",
      "content": "'use client';\n\nimport React from 'react';\n\n/**\n * Taken from Radix UI\n * On the server, React emits a warning when calling `useLayoutEffect`.\n * This is because neither `useLayoutEffect` nor `useEffect` run on the server.\n * We use this safe version which suppresses the warning by replacing it with a noop on the server.\n *\n * Isomorphic layout effect helper for protoform components.\n * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nconst useLayoutEffect = globalThis?.document\n  ? React.useLayoutEffect\n  : () => {\n      // Server-side no-op\n    };\n\nexport { useLayoutEffect };\n",
      "type": "registry:hook"
    },
    {
      "path": "registry/base-nova/protoform/hooks/use-portal-container/index.ts",
      "content": "import { createContext, useContext } from 'react';\n\nconst PortalContainerContext = createContext<HTMLElement | undefined>(undefined);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\n\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext);\n}\n",
      "type": "registry:hook"
    },
    {
      "path": "registry/base-nova/protoform/lib/base-ui-compat/index.tsx",
      "content": "import React from 'react';\n\n/**\n * Minimal local typings mirroring `@base-ui/react`'s public render-prop contract.\n * Kept self-contained so this file can be copied verbatim into consumer projects\n * without relying on Base UI's internal type paths.\n */\ntype HTMLPropsCompat<T = Element> = React.HTMLAttributes<T> & {\n  ref?: React.Ref<T> | undefined;\n};\n\ntype ComponentRenderFnCompat<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;\n\n/**\n * Minimum structural shape we require from any prop bag passed to\n * `asChildToRender` — only the two fields we actually read. `render` is NOT\n * part of the constraint: it varies across Base UI primitives\n * (`DialogTrigger`, `PopoverTrigger`, `MenubarItem`, …), each with a\n * concrete `ComponentRenderFn<Props, State>` where `State` is primitive-\n * specific. Including a concrete `render` type here would force every caller\n * to widen their props to match ours, then re-narrow downstream — which is\n * exactly the round-trip TypeScript refuses at the spread site.\n *\n * By leaving `render` off the constraint and propagating the caller's `P`\n * through the generic bound, the returned prop bag keeps each primitive's\n * original `render` typing intact. No `any`, no casts at the call sites.\n */\ntype AsChildInput = {\n  asChild?: boolean;\n  children?: React.ReactNode;\n};\n\n/**\n * Translates Radix-style `asChild` prop to Base UI `render` prop.\n *\n * When `asChild={true}` and `children` is a valid element, returns `{ render: children }`.\n * Otherwise returns the input unchanged (minus `asChild`).\n *\n * Keeps the public API identical to Radix so consumers do not need to change code.\n *\n * Note: we pass the element form (not a function-form render) because Base UI's\n * `useRenderElement` calls `mergeProps(baseProps, element.props)` — with the\n * consumer's element props winning. Using the function form would bypass this\n * merge and force us to hand-roll prop precedence (including event handler\n * chaining), which is error-prone.\n */\nexport function asChildToRender<P extends AsChildInput>(props: P): Omit<P, 'asChild'> {\n  const { asChild, children, ...rest } = props;\n  if (asChild && React.isValidElement(children)) {\n    // Drop `children` — Base UI uses `render` to mount the child element instead.\n    // `rest` already omits it from the spread above.\n    return { ...rest, render: children } as unknown as Omit<P, 'asChild'>;\n  }\n  return { ...rest, children } as Omit<P, 'asChild'>;\n}\n\n/**\n * Maps Base UI's primitive state to Radix-compat data-* attributes.\n * Shared across render helpers so every compat path emits identical attrs.\n */\nfunction compatStateAttrs(state: CompatState | undefined): Record<string, string> {\n  const attrs: Record<string, string> = {};\n  if (state && typeof state.open === 'boolean') {\n    attrs['data-state'] = state.open ? 'open' : 'closed';\n  }\n  if (state && state.checked !== undefined) {\n    if (state.checked === 'indeterminate') {\n      attrs['data-state'] = 'indeterminate';\n    } else if (typeof state.checked === 'boolean') {\n      attrs['data-state'] = state.checked ? 'checked' : 'unchecked';\n    }\n  }\n  if (state?.disabled) {\n    attrs['data-disabled'] = '';\n  }\n  return attrs;\n}\n\n/**\n * Variant of `asChildToRender` for triggers of primitives whose default\n * rendered element is a `<button>` (Popover, Dialog, Menu, Menubar, Sheet…).\n *\n * Base UI's `nativeButton` flag defaults to `true`. When a consumer uses\n * `asChild` to supply a non-button DOM element (common pattern:\n * `<InputGroupAddon>`, `<Avatar>`, wrapping `<div>` / `<span>`), Base UI\n * emits a console error and the trigger misbehaves (missing role=button,\n * keyboard handlers). This helper inspects the child:\n *\n * - Native `<button>` → keep defaults (nativeButton stays true).\n * - Other intrinsic element (string type, e.g. `<div>`) → set\n *   `nativeButton={false}` so Base UI polyfills button semantics on it.\n * - Function / forwardRef component (e.g. our `<Button>`) → keep defaults.\n *   We cannot introspect what the component renders; assuming `<button>`\n *   matches the overwhelmingly common case (design-system button wrappers),\n *   avoiding a false positive warning when Base UI sees the rendered\n *   `<button>` and was told `nativeButton=false`. Consumers can always pass\n *   `nativeButton={false}` explicitly if their custom component renders a\n *   non-button element.\n */\nexport function asChildTrigger<P extends AsChildInput>(props: P): Omit<P, 'asChild'> & { nativeButton?: boolean } {\n  const base = asChildToRender(props);\n  if (!props.asChild) {\n    return base;\n  }\n  const child = props.children;\n  if (!React.isValidElement(child)) {\n    return base;\n  }\n  if (rendersNonButton(child)) {\n    return { ...base, nativeButton: false };\n  }\n  return base;\n}\n\n/**\n * Walks nested `asChild` chains to detect when the final rendered DOM element\n * is not a `<button>` — e.g. `<Button asChild><span>…</span></Button>`, which\n * wraps button styling around a `<span>` and therefore breaks the\n * `nativeButton` assumption.\n */\nfunction rendersNonButton(element: React.ReactElement): boolean {\n  if (typeof element.type === 'string') {\n    return element.type !== 'button';\n  }\n  const props = (element.props ?? {}) as { asChild?: boolean; children?: React.ReactNode };\n  if (!props.asChild) {\n    // Function/forwardRef component without asChild: assume it renders a <button>.\n    return false;\n  }\n  const inner = React.Children.count(props.children) === 1 ? React.Children.only(props.children) : null;\n  return React.isValidElement(inner) ? rendersNonButton(inner) : false;\n}\n\n/**\n * State shapes exposed by Base UI primitives that are relevant for data-state compat.\n */\nexport type CompatState = {\n  open?: boolean;\n  checked?: boolean | 'indeterminate';\n  disabled?: boolean;\n};\n\n/**\n * Produces a `render` prop that spreads element props and injects Radix-style\n * `data-state` attributes derived from Base UI component state.\n *\n * Radix exposes `data-state=\"open\"|\"closed\"` / `data-state=\"checked\"|\"unchecked\"`.\n * Base UI exposes `data-open`/`data-closed` / `data-checked`/`data-unchecked`.\n *\n * Consumer CSS commonly targets `data-[state=open]:...` selectors. This helper\n * forwards a compat attribute while keeping Base UI's native attrs intact.\n */\nexport function renderWithDataState<S extends CompatState = CompatState>(\n  Element: keyof React.JSX.IntrinsicElements = 'div'\n): ComponentRenderFnCompat<HTMLPropsCompat, S> {\n  return (props, state) => React.createElement(Element, { ...props, ...compatStateAttrs(state) });\n}\n\n/**\n * Narrows Base UI's `onOpenChange(open, details)` signature to Radix's\n * `onOpenChange(open)` — so wrapper props can accept a single-arg callback\n * and forward it unchanged.\n */\nexport function narrowOpenChange<Details>(\n  handler: ((open: boolean) => void) | undefined\n): ((open: boolean, details: Details) => void) | undefined {\n  if (!handler) {\n    return;\n  }\n  return (open: boolean) => {\n    handler(open);\n  };\n}\n\n/**\n * Narrows any Base UI `(value, details) => void` callback to the single-arg\n * `(value) => void` shape expected by consumer code that was written against\n * Radix. Used for `onValueChange`, `onCheckedChange`, `onPressedChange`, etc.\n */\nexport function narrowCallback<Value, Details>(\n  handler: ((value: Value) => void) | undefined\n): ((value: Value, details: Details) => void) | undefined {\n  if (!handler) {\n    return;\n  }\n  return (value: Value) => {\n    handler(value);\n  };\n}\n\n/**\n * Base UI augments React.MouseEvent handlers with `preventBaseUIHandler`.\n * Wrapper components that want to accept a Radix-style `(event: React.MouseEvent) => void`\n * from consumers but pass it to a Base UI primitive can use this to keep the\n * public API typed without resorting to `any`.\n */\nexport type BaseUIMouseEvent<T = HTMLElement> = React.MouseEvent<T> & {\n  preventBaseUIHandler: () => void;\n  readonly baseUIHandlerPrevented?: boolean | undefined;\n};\n\n/**\n * Controlled/uncontrolled open-state mirror for wrapper components that gate\n * `AnimatePresence` on `isOpen`. Consolidates the `useState` + `useEffect` +\n * `useCallback` pattern that was copy-pasted across Popover, DropdownMenu,\n * HoverCard, Tooltip, Sheet, and ContextMenu.\n *\n * Returns the current mirrored `isOpen` plus a `handleOpenChange` that updates\n * local state and forwards to the consumer's callback.\n */\nexport function useMirroredOpen(\n  controlledOpen: boolean | undefined,\n  defaultOpen: boolean | undefined,\n  onOpenChange: ((open: boolean) => void) | undefined\n): { isOpen: boolean; handleOpenChange: (open: boolean) => void } {\n  const [isOpen, setIsOpen] = React.useState<boolean>(controlledOpen ?? defaultOpen ?? false);\n\n  React.useEffect(() => {\n    if (controlledOpen !== undefined) {\n      setIsOpen(controlledOpen);\n    }\n  }, [controlledOpen]);\n\n  const handleOpenChange = React.useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange]\n  );\n\n  return { isOpen, handleOpenChange };\n}\n\ntype DescriptionRenderProps = {\n  asChild?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  fallbackClassName?: string;\n  dataSlot?: string;\n};\n\n/**\n * Renders a Dialog/AlertDialog/Sheet Description as a `<div>` (instead of Base\n * UI's default `<p>`) so block-level children don't trigger validateDOMNesting.\n * In `asChild` mode, clones `data-slot` onto the user's element so the Radix\n * selector surface (`[data-slot=\"dialog-description\"]`) keeps working.\n */\nexport function renderDescription({\n  asChild,\n  children,\n  className,\n  fallbackClassName = 'text-muted-foreground text-sm',\n  dataSlot,\n}: DescriptionRenderProps): React.ReactElement {\n  if (asChild && React.isValidElement<{ 'data-slot'?: string }>(children)) {\n    if (!dataSlot) {\n      return children;\n    }\n    if (children.props['data-slot']) {\n      return children;\n    }\n    return React.cloneElement(children, { 'data-slot': dataSlot });\n  }\n  const mergedClassName = [fallbackClassName, className].filter(Boolean).join(' ');\n  return <div className={mergedClassName}>{children}</div>;\n}\n\n/**\n * Dev-only warning, deduped by key. Used to surface props that the compat layer\n * accepts for Radix API parity but cannot faithfully reproduce on Base UI\n * (e.g. `onOpenAutoFocus`, `forceMount`, `Accordion.collapsible`). Consumers\n * keep their code compiling; the lie is at least audible during development.\n */\nconst warnedKeys = new Set<string>();\n\nexport function devWarnOnce(key: string, message: string): void {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n  if (warnedKeys.has(key)) {\n    return;\n  }\n  warnedKeys.add(key);\n  // biome-ignore lint/suspicious/noConsole: intentional dev-mode signal\n  console.warn(`[protoform-ui] ${message}`);\n}\n\n/**\n * Clears the internal dedup set used by `devWarnOnce`. The set is module-\n * scoped so it persists across tests in the same process, which means a\n * warning that fires in test A won't re-fire in test B even if the second\n * test genuinely expects it. Call this from `beforeEach` in any test suite\n * that asserts on warning output. Wired into the registry's `vitest.setup.ts`.\n */\nexport function resetDevWarnings(): void {\n  warnedKeys.clear();\n}\n\n/**\n * Fires a dev-only deprecation warning the first time a Radix-compat prop is\n * passed. Pair with a JSDoc `@deprecated` tag on the prop type so both the\n * IDE and the runtime surface the guidance. Message format matches the\n * compat docs: says what the prop was, what to use instead, and when the\n * shim will go away.\n *\n * Usage:\n *   warnDeprecatedProp('DialogContent', 'onOpenAutoFocus', onOpenAutoFocus,\n *     'Use `initialFocus` on Base UI `Popup` instead.');\n */\nexport function warnDeprecatedProp(component: string, prop: string, value: unknown, guidance: string): void {\n  if (value === undefined) {\n    return;\n  }\n  devWarnOnce(\n    `${component}:${prop}`,\n    `<${component}> \\`${prop}\\` is a Radix-compat shim scheduled for removal. ${guidance}`\n  );\n}\n\n/**\n * Radix's `forceMount` on a Content/Panel component maps to Base UI's\n * `keepMounted` on the surrounding Portal. Use at a Content wrapper to\n * accept `forceMount` for source-compat, forward it to `keepMounted`, and\n * emit a dev-mode deprecation pointing consumers at the native prop.\n *\n * Returns the value to pass to the Portal's `keepMounted` prop. Preserves an\n * explicit `keepMounted` if the caller passed one; `forceMount` only ever\n * escalates (never downgrades) the mount mode.\n */\nexport function resolveKeepMounted(\n  component: string,\n  forceMount: boolean | undefined,\n  keepMounted: boolean | undefined\n): boolean | undefined {\n  if (forceMount) {\n    warnDeprecatedProp(\n      component,\n      'forceMount',\n      forceMount,\n      'Use `keepMounted` on the underlying Portal instead (already forwarded by this component).'\n    );\n    return true;\n  }\n  return keepMounted;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slot + Slottable\n *\n * Reimplementation of the Radix `Slot` pattern so consumer projects get a\n * registry:lib copy alongside their components, without an extra npm dep.\n * Behavior: className / style merging, ordered event-handler chaining\n * (child handler first — return value preserved), ref composition, and\n * `Slottable` for asChild composition with siblings. Inspired by\n * shadcn-style Slot composition.\n * -----------------------------------------------------------------------------------------------*/\n\ntype SlotProps = {\n  children?: React.ReactNode;\n} & React.HTMLAttributes<HTMLElement>;\n\ntype SlotElement = React.ReactElement & { ref?: React.Ref<HTMLElement> };\n\ntype EventHandler = (...args: unknown[]) => unknown;\n\nfunction isEventHandlerKey(key: string): boolean {\n  return /^on[A-Z]/.test(key);\n}\n\nfunction readHandler(source: object, key: string): EventHandler | undefined {\n  const value = Reflect.get(source, key);\n  return typeof value === 'function' ? (value as EventHandler) : undefined;\n}\n\nfunction readString(source: object, key: string): string | undefined {\n  const value = Reflect.get(source, key);\n  return typeof value === 'string' ? value : undefined;\n}\n\nfunction readStyle(source: object): React.CSSProperties | undefined {\n  const value = Reflect.get(source, 'style');\n  return value && typeof value === 'object' ? (value as React.CSSProperties) : undefined;\n}\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T> {\n  return (value: T) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue;\n      }\n      if (typeof ref === 'function') {\n        ref(value);\n      } else {\n        (ref as React.MutableRefObject<T>).current = value;\n      }\n    }\n  };\n}\n\nfunction getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {\n  // React 19 exposes ref as a prop; React <=18 exposes it on the element.\n  const refFromProps = Reflect.get(element.props as object, 'ref');\n  if (refFromProps !== undefined) {\n    return refFromProps as React.Ref<unknown>;\n  }\n  return (element as SlotElement).ref;\n}\n\nfunction mergeSlotProps(slotProps: object, childProps: object): Record<string, unknown> {\n  const merged: Record<string, unknown> = { ...slotProps, ...childProps };\n\n  const slotClass = readString(slotProps, 'className');\n  const childClass = readString(childProps, 'className');\n  if (slotClass || childClass) {\n    merged.className = [slotClass, childClass].filter(Boolean).join(' ');\n  }\n\n  const slotStyle = readStyle(slotProps);\n  const childStyle = readStyle(childProps);\n  if (slotStyle || childStyle) {\n    merged.style = { ...(slotStyle ?? {}), ...(childStyle ?? {}) };\n  }\n\n  for (const key of Object.keys(slotProps)) {\n    if (!isEventHandlerKey(key)) {\n      continue;\n    }\n    const slotHandler = readHandler(slotProps, key);\n    const childHandler = readHandler(childProps, key);\n    if (slotHandler && childHandler) {\n      merged[key] = (...args: unknown[]) => {\n        const result = childHandler(...args);\n        slotHandler(...args);\n        return result;\n      };\n    } else if (slotHandler) {\n      merged[key] = slotHandler;\n    }\n  }\n\n  return merged;\n}\n\ntype SlotCloneProps = {\n  children: React.ReactNode;\n} & React.HTMLAttributes<HTMLElement>;\n\nconst SlotClone = React.forwardRef<HTMLElement, SlotCloneProps>(function SlotClone(props, forwardedRef) {\n  const { children, ...slotProps } = props;\n\n  if (!React.isValidElement(children)) {\n    if (React.Children.count(children) > 1) {\n      return React.Children.only(null);\n    }\n    return null;\n  }\n\n  const element = children as SlotElement;\n  const childProps = element.props as object;\n  const merged = mergeSlotProps(slotProps, childProps);\n  const childRef = getElementRef(element) as React.Ref<HTMLElement> | undefined;\n  merged.ref = forwardedRef ? composeRefs(forwardedRef, childRef) : childRef;\n  return React.cloneElement(element, merged);\n});\n\nconst SLOTTABLE_IDENTIFIER = Symbol.for('protoform.slottable');\n\ntype SlottableComponent = React.FC<{ children: React.ReactNode }> & { __slottableId: symbol };\n\nexport const Slottable: SlottableComponent = Object.assign(\n  function Slottable({ children }: { children: React.ReactNode }) {\n    return <>{children}</>;\n  },\n  { __slottableId: SLOTTABLE_IDENTIFIER }\n);\nSlottable.displayName = 'Slottable';\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement<{ children: React.ReactNode }> {\n  if (!React.isValidElement(child)) {\n    return false;\n  }\n  const type = child.type as { __slottableId?: symbol } | string;\n  return typeof type !== 'string' && type.__slottableId === SLOTTABLE_IDENTIFIER;\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>(function Slot(props, forwardedRef) {\n  const { children, ...slotProps } = props;\n  const childrenArray = React.Children.toArray(children);\n  const slottable = childrenArray.find(isSlottable);\n\n  if (slottable) {\n    const target = slottable.props.children;\n    const siblings = childrenArray.map((child) => {\n      if (child !== slottable) {\n        return child;\n      }\n      if (React.Children.count(target) > 1) {\n        return React.Children.only(null);\n      }\n      return React.isValidElement<{ children?: React.ReactNode }>(target) ? target.props.children : null;\n    });\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {React.isValidElement(target) ? React.cloneElement(target, undefined, siblings) : null}\n      </SlotClone>\n    );\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  );\n});\nSlot.displayName = 'Slot';\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/base-nova/protoform/lib/form-types/index.ts",
      "content": "/**\n * Schema-agnostic form contract types.\n *\n * Canonical definitions live in the registry-native core module. This file\n * widens the framework-free field model for the React renderer.\n *\n * `FieldConfig`/`ParsedField` are widened here with the React-only\n * `fieldWrapper` override; the core package stays framework-free, and the\n * extra optional property keeps both directions structurally assignable.\n */\n\nimport type {\n  FieldConfig as CoreFieldConfig,\n  ParsedField as CoreParsedField,\n  ProviderCustomData,\n  Renderable,\n} from '../core';\nimport type { ComponentType, ReactNode } from 'react';\nexport { getFieldHints } from '../core';\n\nexport type {\n  EmptyRepeatedStringPolicy,\n  FieldRenderHints,\n  FormValues,\n  InputProps,\n  OptionGroup,\n  ProviderCustomData,\n  Renderable,\n  SchemaProvider,\n  SchemaValidation,\n  SchemaValidationContext,\n  SchemaValidationError,\n  UiRule,\n} from '../core';\n\n/** Core's schema-layer Renderable widened with ReactNode for the React layer. */\nexport type UiRenderable = Renderable | ReactNode;\n\nexport interface FieldWrapperProps {\n  label: UiRenderable;\n  error?: UiRenderable;\n  children: ReactNode;\n  id: string;\n  field: ParsedField;\n}\n\nexport interface FieldConfig<FieldTypes = string, CustomData extends ProviderCustomData = ProviderCustomData>\n  extends CoreFieldConfig<FieldTypes, CustomData> {\n  /** Per-field React wrapper override; React-layer concern, absent from the core IR. */\n  fieldWrapper?: ComponentType<FieldWrapperProps>;\n}\n\nexport interface ParsedField<FieldTypes = string> extends CoreParsedField<FieldTypes> {\n  fieldConfig?: FieldConfig<FieldTypes>;\n  schema?: ParsedField<FieldTypes>[];\n}\n\nexport interface ParsedSchema<FieldTypes = string> {\n  fields: ParsedField<FieldTypes>[];\n}\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/base-nova/protoform/lib/input-utils/index.ts",
      "content": "import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { z } from 'zod';\n\n// ── Types ──────────────────────────────────────────────────────────────\n\nexport type KeyValuePairsSchemaOptions = {\n  allowedPattern?: RegExp;\n  maxKeyLength?: number;\n  maxValueLength?: number;\n  maxItems?: number;\n};\n\nexport type KeyValueDiffResult = {\n  created: Record<string, string>;\n  updated: Record<string, string>;\n  removed: string[];\n};\n\n// ── Pure Utilities ─────────────────────────────────────────────────────\n\n/**\n * Returns the indices of items whose key (extracted via `getKey`) appears\n * more than once. Empty keys are ignored.\n */\nexport function findDuplicateIndices<T>(items: T[], getKey: (item: T) => string): Set<number> {\n  const seen = new Map<string, number[]>();\n  const duplicates = new Set<number>();\n\n  for (const [index, item] of items.entries()) {\n    const key = getKey(item);\n    if (!key) {\n      continue;\n    }\n\n    const existing = seen.get(key);\n    if (existing) {\n      existing.push(index);\n      for (const i of existing) {\n        duplicates.add(i);\n      }\n    } else {\n      seen.set(key, [index]);\n    }\n  }\n\n  return duplicates;\n}\n\nfunction collectPairIssues(\n  index: number,\n  pair: { key: string; value: string },\n  options: KeyValuePairsSchemaOptions,\n  duplicates: Set<number>\n): { message: string; path: [number, string] }[] {\n  const issues: { message: string; path: [number, string] }[] = [];\n  const { allowedPattern, maxKeyLength, maxValueLength } = options;\n\n  if (pair.value && !pair.key.trim()) {\n    issues.push({ message: 'Key is required when a value is provided', path: [index, 'key'] });\n  }\n\n  if (duplicates.has(index)) {\n    issues.push({ message: `Duplicate key: \"${pair.key}\"`, path: [index, 'key'] });\n  }\n\n  if (maxKeyLength && pair.key.length > maxKeyLength) {\n    issues.push({ message: `Key exceeds maximum length of ${maxKeyLength}`, path: [index, 'key'] });\n  }\n\n  if (maxValueLength && pair.value.length > maxValueLength) {\n    issues.push({ message: `Value exceeds maximum length of ${maxValueLength}`, path: [index, 'value'] });\n  }\n\n  if (allowedPattern && pair.key && !allowedPattern.test(pair.key)) {\n    issues.push({ message: 'Key contains invalid characters', path: [index, 'key'] });\n  }\n\n  if (allowedPattern && pair.value && !allowedPattern.test(pair.value)) {\n    issues.push({ message: 'Value contains invalid characters', path: [index, 'value'] });\n  }\n\n  return issues;\n}\n\n/**\n * Returns a Zod schema that validates an array of key-value pairs.\n * Checks for empty keys, duplicate keys, character patterns, length\n * limits, and item count.\n *\n * Use with React Hook Form + zodResolver for form-level validation.\n * Adds a root-level issue (shown by `FormMessage`) and per-field issues\n * at `[index, field]` paths for row-level error access.\n */\nexport function keyValuePairsSchema(options: KeyValuePairsSchemaOptions = {}) {\n  return z.array(z.object({ key: z.string(), value: z.string() })).superRefine((pairs, ctx) => {\n    const issues: { message: string; path?: [number, string] }[] = [];\n\n    if (options.maxItems !== undefined && pairs.length > options.maxItems) {\n      issues.push({ message: `Maximum of ${options.maxItems} items allowed` });\n    }\n\n    const duplicates = findDuplicateIndices(pairs, (p) => p.key);\n\n    for (const [index, pair] of pairs.entries()) {\n      issues.push(...collectPairIssues(index, pair, options, duplicates));\n    }\n\n    for (const issue of issues) {\n      ctx.addIssue({ code: 'custom', message: issue.message, path: issue.path });\n    }\n  });\n}\n\n/**\n * Compares an initial set of key-value pairs against the current set and\n * returns which entries were created, updated, or removed.\n *\n * When duplicate keys exist, the last occurrence is used for comparison.\n */\nexport function getKeyValueDiff(\n  initial: { key: string; value: string }[],\n  current: { key: string; value: string }[]\n): KeyValueDiffResult {\n  const initialMap = new Map<string, string>();\n  for (const { key, value } of initial) {\n    if (key) {\n      initialMap.set(key, value);\n    }\n  }\n\n  const currentMap = new Map<string, string>();\n  for (const { key, value } of current) {\n    if (key) {\n      currentMap.set(key, value);\n    }\n  }\n\n  const created: Record<string, string> = {};\n  const updated: Record<string, string> = {};\n  const removed: string[] = [];\n\n  for (const [key, value] of currentMap) {\n    if (!initialMap.has(key)) {\n      created[key] = value;\n    } else if (initialMap.get(key) !== value) {\n      updated[key] = value;\n    }\n  }\n\n  for (const key of initialMap.keys()) {\n    if (!currentMap.has(key)) {\n      removed.push(key);\n    }\n  }\n\n  return { created, updated, removed };\n}\n\n// ── Hooks ──────────────────────────────────────────────────────────────\n\n/**\n * Manages focus in a dynamic list of input rows. Call `onAdd` after\n * appending a row to focus the first input in the new row, and\n * `onRemove` after deleting a row to focus the next logical row.\n *\n * Rows must have a `data-row` attribute for the selector to work.\n */\nexport function useInputListFocus(containerRef: RefObject<HTMLElement | null>) {\n  const pendingRef = useRef<'add' | { type: 'remove'; index: number } | null>(null);\n\n  const onAdd = useCallback(() => {\n    pendingRef.current = 'add';\n  }, []);\n\n  const onRemove = useCallback((deletedIndex: number) => {\n    pendingRef.current = { type: 'remove', index: deletedIndex };\n  }, []);\n\n  // Runs after every render to apply any pending focus action.\n  // The ref check is cheap and clears immediately, so subsequent\n  // renders are no-ops.\n  useEffect(() => {\n    const event = pendingRef.current;\n    if (!(event && containerRef.current)) {\n      return;\n    }\n    pendingRef.current = null;\n\n    const rows = containerRef.current.querySelectorAll<HTMLElement>('[data-row]');\n\n    if (event === 'add') {\n      const lastRow = rows.item(rows.length - 1);\n      const input = lastRow?.querySelector<HTMLElement>('input, [role=\"combobox\"]');\n      input?.focus();\n    } else {\n      const targetIndex = Math.min(event.index, rows.length - 1);\n      if (targetIndex >= 0) {\n        const row = rows[targetIndex];\n        const input = row?.querySelector<HTMLElement>('input, [role=\"combobox\"]');\n        input?.focus();\n      } else {\n        // No rows remain — focus the add button if present\n        const addButton = containerRef.current.querySelector<HTMLElement>('[data-slot=\"add-button\"]');\n        addButton?.focus();\n      }\n    }\n  });\n\n  return { onAdd, onRemove };\n}\n\n/**\n * Preserves object references for array items that have not changed\n * between renders, reducing unnecessary child re-renders.\n */\nexport function useMemoizedArray<T>(items: T[], isEqual: (a: T, b: T) => boolean = Object.is): T[] {\n  const prevRef = useRef(items);\n  const prev = prevRef.current;\n\n  if (prev === items) {\n    return prev;\n  }\n\n  let changed = prev.length !== items.length;\n  const result: T[] = [];\n\n  for (const [i, item] of items.entries()) {\n    const previousItem = prev[i];\n    if (i < prev.length && previousItem !== undefined && isEqual(previousItem, item)) {\n      result.push(previousItem);\n    } else {\n      result.push(item);\n      changed = true;\n    }\n  }\n\n  if (!changed) {\n    return prev;\n  }\n\n  prevRef.current = result;\n  return result;\n}\n\n/**\n * Provides soft-delete behaviour with timed auto-confirm. Call\n * `markForRemoval` with a unique identifier and a callback that\n * performs the actual removal — the callback fires after `timeout` ms\n * unless `undoRemoval` is called first.\n */\nexport function useUndoRemoval(timeout = 5000) {\n  const [pending, setPending] = useState<Set<string>>(() => new Set());\n  const timersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n\n  const markForRemoval = useCallback(\n    (id: string, onConfirm: () => void) => {\n      setPending((prev) => new Set([...prev, id]));\n\n      const existing = timersRef.current.get(id);\n      if (existing) {\n        clearTimeout(existing);\n      }\n\n      const timer = setTimeout(() => {\n        timersRef.current.delete(id);\n        setPending((prev) => {\n          const next = new Set(prev);\n          next.delete(id);\n          return next;\n        });\n        onConfirm();\n      }, timeout);\n\n      timersRef.current.set(id, timer);\n    },\n    [timeout]\n  );\n\n  const undoRemoval = useCallback((id: string) => {\n    const timer = timersRef.current.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      timersRef.current.delete(id);\n    }\n    setPending((prev) => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const isPending = useCallback((id: string) => pending.has(id), [pending]);\n\n  useEffect(() => {\n    const timers = timersRef.current;\n    return () => {\n      for (const timer of timers.values()) {\n        clearTimeout(timer);\n      }\n    };\n  }, []);\n\n  return { markForRemoval, undoRemoval, isPending, pending };\n}\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/base-nova/protoform/lib/utils/index.tsx",
      "content": "import { cva } from 'class-variance-authority';\nimport { type ClassValue, clsx } from 'clsx';\nimport React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function wrapStringChild(\n  child: React.ReactNode,\n  Wrapper: React.ComponentType<{\n    children: React.ReactNode;\n    className?: string;\n  }>,\n  className?: string\n): React.ReactNode {\n  if (typeof child === 'string') {\n    return <Wrapper className={className}>{child}</Wrapper>;\n  }\n  return child;\n}\n\nexport type SharedProps = {\n  testId?: string;\n};\n\n// =============================================================================\n// Portal Component Common Types\n// =============================================================================\n// These types provide a single source of truth for portal component props\n// that need to be exposed for visual regression testing.\n\n/**\n * Common props for portal root components that support controlled open state.\n * Components: Dialog, Popover, Sheet, Drawer, etc.\n */\nexport type PortalRootProps = {\n  /** Controlled open state */\n  open?: boolean;\n  /** Uncontrolled default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Extended root props for modal components that need non-modal mode.\n * Components: Dialog, Sheet, Drawer, DropdownMenu\n */\nexport type ModalRootProps = PortalRootProps & {\n  /** When false, prevents body pointer-events:none and focus trapping */\n  modal?: boolean;\n};\n\n/**\n * Common props for portal content components that use FocusScope.\n * These props control auto-focus behavior when content opens/closes.\n */\nexport type FocusScopeContentProps = {\n  /**\n   * @deprecated Radix-compat shim. Base UI primitives do not expose an\n   * `onOpenAutoFocus` hook; the callback is ignored at runtime and will emit\n   * a dev-mode warning. Use `initialFocus` on the underlying Base UI `Popup`\n   * (or equivalent) instead. Scheduled for removal in a future major.\n   */\n  onOpenAutoFocus?: (event: Event) => void;\n  /**\n   * @deprecated Radix-compat shim. Base UI primitives do not expose an\n   * `onCloseAutoFocus` hook; handle close-focus in a `ref` callback or\n   * `onOpenChange` handler instead. Scheduled for removal in a future major.\n   */\n  onCloseAutoFocus?: (event: Event) => void;\n};\n\n/**\n * Common props for portal content components.\n * Combines container prop with focus scope props.\n */\nexport type PortalContentProps = FocusScopeContentProps & {\n  /** Container element for inline rendering (no portal to body) */\n  container?: HTMLElement;\n};\n\n/**\n * Extended content props for fixed-position modal components.\n * Components: Dialog, Sheet, Drawer, Credenza, AlertDialog\n */\nexport type FixedPositionContentProps = PortalContentProps & {\n  /** When false, hides the overlay/backdrop */\n  showOverlay?: boolean;\n};\n\n// =============================================================================\n// Indicator Component Common Types\n// =============================================================================\n// Shared types for StatusDot, CountDot, and StatusBadge components.\n\nexport type SemanticVariant = 'success' | 'info' | 'warning' | 'error' | 'disabled';\nexport type DotSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\nexport type StackableProps = { stacked?: boolean };\n\n// =============================================================================\n// Shared Dot Component Styles\n// =============================================================================\n// Common CVAs used by StatusDot, CountDot, and related indicator components.\n\nexport const dotColorVariants = cva('', {\n  variants: {\n    variant: {\n      success: 'bg-background-success-strong',\n      info: 'bg-background-informative-strong',\n      warning: 'bg-background-warning-strong',\n      error: 'bg-background-error-strong',\n      disabled: 'bg-surface-strong-hover',\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n  },\n});\n\nexport const dotStackedVariants = cva('!border-background', {\n  variants: {\n    size: {\n      xxs: 'border-[1px]',\n      xs: 'border-[2px]',\n      sm: 'border',\n      md: 'border-[1.5px]',\n      lg: 'border-2',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/base-nova/protoform/components/auto-form/shadcn-controls.ts",
      "content": "export type ShadcnComponentCoverageKind = 'field-control' | 'field-composition' | 'form-shell' | 'display-only';\n\nexport type ShadcnComponentCoverage = {\n  component: string;\n  kind: ShadcnComponentCoverageKind;\n  autoFormRole: string;\n  protoAnnotation?: string;\n};\n\nexport type ShadcnAutoFormControl = {\n  control: string;\n  shadcnComponent: string;\n  protoAnnotation: string;\n  bestFor: string;\n};\n\nexport const shadcnAutoFormControls: ShadcnAutoFormControl[] = [\n  {\n    bestFor: 'Short strings and scalar values',\n    control: 'text',\n    protoAnnotation: 'CONTROL_TYPE_TEXT',\n    shadcnComponent: 'Input',\n  },\n  {\n    bestFor: 'Long strings, descriptions, prompts, and policy text',\n    control: 'textarea',\n    protoAnnotation: 'CONTROL_TYPE_TEXTAREA',\n    shadcnComponent: 'Textarea',\n  },\n  {\n    bestFor: 'Secrets and masked values',\n    control: 'password',\n    protoAnnotation: 'CONTROL_TYPE_PASSWORD',\n    shadcnComponent: 'Input[type=password]',\n  },\n  {\n    bestFor: 'Email addresses',\n    control: 'email',\n    protoAnnotation: 'CONTROL_TYPE_EMAIL',\n    shadcnComponent: 'Input[type=email]',\n  },\n  {\n    bestFor: 'URLs and endpoints',\n    control: 'url',\n    protoAnnotation: 'CONTROL_TYPE_URL',\n    shadcnComponent: 'Input[type=url]',\n  },\n  {\n    bestFor: 'Currency-like numeric input',\n    control: 'currency',\n    protoAnnotation: 'CONTROL_TYPE_CURRENCY',\n    shadcnComponent: 'InputGroup + Input',\n  },\n  {\n    bestFor: 'Required boolean acknowledgement',\n    control: 'checkbox',\n    protoAnnotation: 'CONTROL_TYPE_CHECKBOX',\n    shadcnComponent: 'Checkbox',\n  },\n  {\n    bestFor: 'Boolean feature flags',\n    control: 'switch',\n    protoAnnotation: 'CONTROL_TYPE_SWITCH',\n    shadcnComponent: 'Switch',\n  },\n  {\n    bestFor: 'Compact boolean toggles',\n    control: 'toggle',\n    protoAnnotation: 'CONTROL_TYPE_TOGGLE',\n    shadcnComponent: 'Toggle',\n  },\n  {\n    bestFor: 'Small enum sets where all options should be visible',\n    control: 'radio',\n    protoAnnotation: 'CONTROL_TYPE_RADIO_GROUP',\n    shadcnComponent: 'RadioGroup',\n  },\n  {\n    bestFor: 'Enum or provider-backed single select',\n    control: 'select',\n    protoAnnotation: 'CONTROL_TYPE_SELECT',\n    shadcnComponent: 'Select',\n  },\n  {\n    bestFor: 'Searchable single select',\n    control: 'combobox',\n    protoAnnotation: 'CONTROL_TYPE_COMBOBOX',\n    shadcnComponent: 'Command + Popover',\n  },\n  {\n    bestFor: 'Repeated enum/string choices',\n    control: 'multiselect',\n    protoAnnotation: 'CONTROL_TYPE_MULTI_SELECT',\n    shadcnComponent: 'Command + Badge + Popover',\n  },\n  {\n    bestFor: 'Maps and repeated key/value pairs',\n    control: 'keyValue',\n    protoAnnotation: 'CONTROL_TYPE_KEY_VALUE',\n    shadcnComponent: 'KeyValueField',\n  },\n  {\n    bestFor: 'Struct, Value, Any, or arbitrary object payloads',\n    control: 'json',\n    protoAnnotation: 'CONTROL_TYPE_JSON',\n    shadcnComponent: 'JsonField',\n  },\n  {\n    bestFor: 'Dates and timestamps',\n    control: 'date',\n    protoAnnotation: 'CONTROL_TYPE_DATE / CONTROL_TYPE_TIMESTAMP',\n    shadcnComponent: 'Calendar + Popover',\n  },\n  {\n    bestFor: 'Bounded numeric ranges',\n    control: 'slider',\n    protoAnnotation: 'CONTROL_TYPE_SLIDER',\n    shadcnComponent: 'Slider + Input',\n  },\n];\n\nexport const shadcnComponentCoverage: ShadcnComponentCoverage[] = [\n  { autoFormRole: 'Root validation and destructive form state', component: 'Alert', kind: 'form-shell' },\n  { autoFormRole: 'Enum selected values and multi-select chips', component: 'Badge', kind: 'field-composition' },\n  { autoFormRole: 'Submit, array add/remove, and custom slot actions', component: 'Button', kind: 'field-composition' },\n  { autoFormRole: 'Date and timestamp picker surface', component: 'Calendar', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_DATE / CONTROL_TYPE_TIMESTAMP' },\n  { autoFormRole: 'Grouped examples, summaries, and docs demos', component: 'Card', kind: 'display-only' },\n  { autoFormRole: 'Boolean fields', component: 'Checkbox', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_CHECKBOX' },\n  { autoFormRole: 'Radio-like visual choices via fieldRegistry', component: 'Choicebox', kind: 'field-control' },\n  { autoFormRole: 'Nested disclosure via fieldRegistry slots', component: 'Collapsible', kind: 'field-composition' },\n  { autoFormRole: 'Searchable selects', component: 'Combobox', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_COMBOBOX' },\n  { autoFormRole: 'Combobox and multi-select command surface', component: 'Command', kind: 'field-composition' },\n  { autoFormRole: 'Copyable examples and generated payloads', component: 'CopyButton', kind: 'display-only' },\n  { autoFormRole: 'Custom modal flows through AutoFormSlot', component: 'Dialog', kind: 'field-composition' },\n  { autoFormRole: 'React Hook Form field primitives', component: 'Field', kind: 'form-shell' },\n  { autoFormRole: 'Label, description, and error grouping', component: 'Group', kind: 'form-shell' },\n  { autoFormRole: 'Text, email, URL, password, and numeric scalars', component: 'Input', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_TEXT / EMAIL / URL / PASSWORD / CURRENCY' },\n  { autoFormRole: 'Currency, date, suffix, and prefix affordances', component: 'InputGroup', kind: 'field-composition' },\n  { autoFormRole: 'Struct, Value, Any, and raw payload fields', component: 'JsonField', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_JSON' },\n  { autoFormRole: 'Map and repeated key/value fields', component: 'KeyValueField', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_KEY_VALUE' },\n  { autoFormRole: 'Accessible field names and required state', component: 'Label', kind: 'form-shell' },\n  { autoFormRole: 'Repeated enum/string choices', component: 'MultiSelect', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_MULTI_SELECT' },\n  { autoFormRole: 'Date pickers, comboboxes, and field help', component: 'Popover', kind: 'field-composition' },\n  { autoFormRole: 'Enum fields where every option should stay visible', component: 'RadioGroup', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_RADIO_GROUP' },\n  { autoFormRole: 'Single enum/provider-backed values', component: 'Select', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_SELECT' },\n  { autoFormRole: 'Visual separation in demos and custom slots', component: 'Separator', kind: 'display-only' },\n  { autoFormRole: 'Bounded numeric ranges', component: 'Slider', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_SLIDER' },\n  { autoFormRole: 'Loading async data providers', component: 'Spinner', kind: 'form-shell' },\n  { autoFormRole: 'Feature flags and boolean toggles', component: 'Switch', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_SWITCH' },\n  { autoFormRole: 'JSON/simple/advanced form mode tabs', component: 'Tabs', kind: 'form-shell' },\n  { autoFormRole: 'Tag entry through fieldRegistry', component: 'Tags', kind: 'field-control' },\n  { autoFormRole: 'Long string fields', component: 'Textarea', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_TEXTAREA' },\n  { autoFormRole: 'Compact boolean choices', component: 'Toggle', kind: 'field-control', protoAnnotation: 'CONTROL_TYPE_TOGGLE' },\n  { autoFormRole: 'Grouped compact choices through fieldRegistry', component: 'ToggleGroup', kind: 'field-control' },\n  { autoFormRole: 'Help text and annotation docs URLs', component: 'Tooltip', kind: 'form-shell' },\n  { autoFormRole: 'Headings, captions, and helper text', component: 'Typography', kind: 'form-shell' },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}