{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [],
  "description": "Native form-control field with deterministic unique description/error ids, server-rendered ARIA relationships, browser-owned validity, autofill/reset synchronization, and controlled dirty/touched/server-invalid state.",
  "files": [
    {
      "content": "\"use client\";\n\n/**\n * heidi-ui Field — native form-control labeling, state, and validation wiring.\n *\n * Field owns one native input, textarea, or select. Root generates stable ids;\n * Label, Description, and Error consume them; Control merges consumer\n * aria-describedby/aria-errormessage ids instead of replacing them. The\n * browser remains authoritative for value, constraint validation, FormData,\n * autofill, and reset. Heidi mirrors that truth into styling state only.\n *\n * RSC rule: named exports from Server Components; Field.X is client sugar.\n */\n\nimport {\n  type AnimationEvent,\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  createContext,\n  type FocusEvent,\n  Fragment,\n  type InputEvent,\n  type InvalidEvent,\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport {\n  composeHeidiEventHandlers,\n  mergeHeidiRefs,\n  renderHeidiElement,\n  type HeidiHostProps,\n  type HeidiIntrinsicHostProps\n} from \"../_internal/render-element\";\nimport { safeId } from \"../_internal/safe-id\";\nimport { useHeidiLayoutEffect } from \"../_internal/use-layout-effect\";\nimport { FIELD_CLASSES } from \"./field.classes.generated\";\n\nexport type FieldControlElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\nexport type FieldValue = boolean | string | string[];\n\nexport type FieldValidityState = {\n  badInput: boolean;\n  customError: boolean;\n  patternMismatch: boolean;\n  rangeOverflow: boolean;\n  rangeUnderflow: boolean;\n  stepMismatch: boolean;\n  tooLong: boolean;\n  tooShort: boolean;\n  typeMismatch: boolean;\n  valid: boolean | null;\n  valueMissing: boolean;\n};\n\nexport type FieldValidityKey = Exclude<keyof FieldValidityState, \"valid\">;\n\nexport type FieldErrorMatch = boolean | FieldValidityKey | FieldValidityKey[];\n\nexport type FieldRootState = {\n  disabled: boolean;\n  dirty: boolean;\n  filled: boolean;\n  focused: boolean;\n  invalid: boolean;\n  required: boolean;\n  touched: boolean;\n  valid: boolean | null;\n};\n\nexport type FieldValidityRenderState = {\n  error: string;\n  initialValue: FieldValue | null;\n  validity: FieldValidityState;\n  value: FieldValue | null;\n};\n\ntype FieldRuntimeState = {\n  controlDisabled: boolean;\n  controlRequired: boolean;\n  dirty: boolean;\n  focused: boolean;\n  initialValue: FieldValue | null;\n  touched: boolean;\n  validationEpoch: number;\n  validationMessage: string;\n  validity: FieldValidityState;\n  value: FieldValue | null;\n};\n\ntype SyncOptions = {\n  announce?: boolean;\n  focused?: boolean;\n  reset?: boolean;\n  touched?: boolean;\n  userInput?: boolean;\n};\n\ntype FieldContextValue = {\n  controlId: string;\n  descriptionIds: string[];\n  errorIds: string[];\n  name: string | undefined;\n  registerControl: (control: FieldControlElement | null) => void;\n  registerDescription: (id: string) => () => void;\n  registerError: (id: string) => () => void;\n  rootDisabled: boolean;\n  rootRequired: boolean;\n  state: FieldRootState;\n  syncControl: (control: FieldControlElement, options?: SyncOptions) => void;\n  validationEpoch: number;\n  validityRenderState: FieldValidityRenderState;\n};\n\nconst EMPTY_VALIDITY: FieldValidityState = {\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: null,\n  valueMissing: false\n};\n\nconst EMPTY_RUNTIME: FieldRuntimeState = {\n  controlDisabled: false,\n  controlRequired: false,\n  dirty: false,\n  focused: false,\n  initialValue: null,\n  touched: false,\n  validationEpoch: 0,\n  validationMessage: \"\",\n  validity: EMPTY_VALIDITY,\n  value: null\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\nfunction useFieldContext(part: string): FieldContextValue {\n  const context = useContext(FieldContext);\n  if (!context) {\n    throw new Error(`Field.${part} must be rendered inside Field.Root.`);\n  }\n  return context;\n}\n\nfunction readControlValue(control: FieldControlElement): FieldValue {\n  if (control instanceof HTMLInputElement) {\n    if (control.type === \"checkbox\" || control.type === \"radio\") {\n      return control.checked;\n    }\n    if (control.type === \"file\") {\n      return Array.from(control.files ?? []).map(\n        (file) => `${file.name}:${file.size}:${file.lastModified}`\n      );\n    }\n  }\n  if (control instanceof HTMLSelectElement && control.multiple) {\n    return Array.from(control.selectedOptions, (option) => option.value);\n  }\n  return control.value;\n}\n\nfunction fieldValuesEqual(a: FieldValue | null, b: FieldValue | null): boolean {\n  if (Array.isArray(a) || Array.isArray(b)) {\n    return Array.isArray(a) && Array.isArray(b) && a.join(\"\\u0000\") === b.join(\"\\u0000\");\n  }\n  return a === b;\n}\n\nfunction isFilled(value: FieldValue | null): boolean {\n  if (Array.isArray(value)) {\n    return value.length > 0;\n  }\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n  return value != null && value !== \"\";\n}\n\nfunction readValidity(control: FieldControlElement): FieldValidityState {\n  const { validity } = control;\n  return {\n    badInput: validity.badInput,\n    customError: validity.customError,\n    patternMismatch: validity.patternMismatch,\n    rangeOverflow: validity.rangeOverflow,\n    rangeUnderflow: validity.rangeUnderflow,\n    stepMismatch: validity.stepMismatch,\n    tooLong: validity.tooLong,\n    tooShort: validity.tooShort,\n    typeMismatch: validity.typeMismatch,\n    valid: validity.valid,\n    valueMissing: validity.valueMissing\n  };\n}\n\nfunction validitiesEqual(a: FieldValidityState, b: FieldValidityState): boolean {\n  return (\n    a.badInput === b.badInput &&\n    a.customError === b.customError &&\n    a.patternMismatch === b.patternMismatch &&\n    a.rangeOverflow === b.rangeOverflow &&\n    a.rangeUnderflow === b.rangeUnderflow &&\n    a.stepMismatch === b.stepMismatch &&\n    a.tooLong === b.tooLong &&\n    a.tooShort === b.tooShort &&\n    a.typeMismatch === b.typeMismatch &&\n    a.valid === b.valid &&\n    a.valueMissing === b.valueMissing\n  );\n}\n\nfunction runtimesEqual(a: FieldRuntimeState, b: FieldRuntimeState): boolean {\n  return (\n    a.controlDisabled === b.controlDisabled &&\n    a.controlRequired === b.controlRequired &&\n    a.dirty === b.dirty &&\n    a.focused === b.focused &&\n    fieldValuesEqual(a.initialValue, b.initialValue) &&\n    a.touched === b.touched &&\n    a.validationEpoch === b.validationEpoch &&\n    a.validationMessage === b.validationMessage &&\n    validitiesEqual(a.validity, b.validity) &&\n    fieldValuesEqual(a.value, b.value)\n  );\n}\n\nfunction fieldStateAttributes(state: FieldRootState): Record<string, string | undefined> {\n  return {\n    \"data-disabled\": state.disabled ? \"true\" : undefined,\n    \"data-dirty\": state.dirty ? \"true\" : undefined,\n    \"data-filled\": state.filled ? \"true\" : undefined,\n    \"data-focused\": state.focused ? \"true\" : undefined,\n    \"data-invalid\": state.invalid ? \"true\" : undefined,\n    \"data-required\": state.required ? \"true\" : undefined,\n    \"data-touched\": state.touched ? \"true\" : undefined,\n    \"data-valid\": state.valid === true ? \"true\" : undefined\n  };\n}\n\nfunction mergeIdRefs(...values: Array<string | undefined>): string | undefined {\n  const ids = values\n    .flatMap((value) => value?.split(/\\s+/) ?? [])\n    .filter(Boolean);\n  const merged = [...new Set(ids)].join(\" \");\n  return merged === \"\" ? undefined : merged;\n}\n\nfunction addRegisteredId(\n  setter: (update: (ids: string[]) => string[]) => void,\n  id: string\n): () => void {\n  setter((ids) => (ids.includes(id) ? ids : [...ids, id]));\n  return () => setter((ids) => ids.filter((candidate) => candidate !== id));\n}\n\ntype InternalFieldPartProps = {\n  __huiFieldPartId?: string;\n  children?: ReactNode;\n  keepMounted?: boolean;\n  match?: FieldErrorMatch;\n};\n\ntype PreparedFieldChildren = {\n  children: ReactNode;\n  descriptionIds: string[];\n  errorIds: string[];\n};\n\nfunction fieldPartId(\n  generatedId: string,\n  part: \"description\" | \"error\",\n  index: number\n): string {\n  return `${generatedId}-${part}${index === 0 ? \"\" : `-${index + 1}`}`;\n}\n\n/**\n * Layout effects cannot contribute relationships to server markup. Prepare\n * direct parts (including parts inside fragments or intrinsic wrappers) before\n * rendering Control so its first HTML already owns the exact active IDREFs.\n * Parts created inside an opaque component still register after mount.\n */\nfunction prepareFieldChildren(\n  children: ReactNode,\n  generatedId: string,\n  state: FieldRootState,\n  validity: FieldValidityState\n): PreparedFieldChildren {\n  const descriptionIds: string[] = [];\n  const errorIds: string[] = [];\n  let descriptionIndex = 0;\n  let errorIndex = 0;\n\n  const visit = (node: ReactNode): ReactNode => {\n    if (!isValidElement(node)) {\n      return node;\n    }\n    if (node.type === FieldDescription) {\n      const id = fieldPartId(generatedId, \"description\", descriptionIndex);\n      descriptionIndex += 1;\n      descriptionIds.push(id);\n      return cloneElement(node as ReactElement<InternalFieldPartProps>, {\n        __huiFieldPartId: id\n      });\n    }\n    if (node.type === FieldError) {\n      const props = node.props as InternalFieldPartProps;\n      const id = fieldPartId(generatedId, \"error\", errorIndex);\n      errorIndex += 1;\n      if (validityMatches(props.match, state, validity)) {\n        errorIds.push(id);\n      }\n      return cloneElement(node as ReactElement<InternalFieldPartProps>, {\n        __huiFieldPartId: id\n      });\n    }\n    if (node.type !== Fragment && typeof node.type !== \"string\") {\n      return node;\n    }\n    const props = node.props as { children?: ReactNode };\n    if (props.children === undefined) {\n      return node;\n    }\n    return cloneElement(\n      node as ReactElement<{ children?: ReactNode }>,\n      undefined,\n      Children.map(props.children, visit)\n    );\n  };\n\n  return {\n    children: Children.map(children, visit),\n    descriptionIds,\n    errorIds\n  };\n}\n\ntype RootNativeProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\" | \"className\" | \"ref\" | \"style\"\n>;\n\nexport type FieldRootProps = HeidiIntrinsicHostProps<FieldRootState, \"div\"> &\n  RootNativeProps & {\n    children?: ReactNode;\n    controlId?: string;\n    dirty?: boolean;\n    disabled?: boolean;\n    invalid?: boolean;\n    name?: string;\n    ref?: Ref<HTMLDivElement>;\n    required?: boolean;\n    touched?: boolean;\n  };\n\nexport function FieldRoot({\n  children,\n  className,\n  controlId: controlIdProp,\n  dirty: dirtyProp,\n  disabled = false,\n  invalid: invalidProp,\n  name,\n  ref,\n  render,\n  required = false,\n  style,\n  touched: touchedProp,\n  ...nativeProps\n}: FieldRootProps) {\n  const generatedId = `hui-field-${safeId(useId())}`;\n  const controlId = controlIdProp ?? `${generatedId}-control`;\n  const controlRef = useRef<FieldControlElement | null>(null);\n  const externalInvalidInitializedRef = useRef(false);\n  const initialValueRef = useRef<FieldValue | null>(null);\n  const previousInvalidPropRef = useRef(invalidProp);\n  const [externalValidationEpoch, setExternalValidationEpoch] = useState(0);\n  const [registeredDescriptionIds, setRegisteredDescriptionIds] = useState<\n    string[]\n  >([]);\n  const [registeredErrorIds, setRegisteredErrorIds] = useState<string[]>([]);\n  const [runtime, setRuntime] = useState<FieldRuntimeState>(EMPTY_RUNTIME);\n\n  const syncControl = useCallback(\n    (control: FieldControlElement, options: SyncOptions = {}) => {\n      const value = readControlValue(control);\n      if (options.reset || initialValueRef.current == null) {\n        initialValueRef.current = value;\n      }\n      const initialValue = initialValueRef.current;\n      const validity = readValidity(control);\n      setRuntime((previous) => {\n        const next: FieldRuntimeState = {\n          controlDisabled: control.disabled,\n          controlRequired: control.required,\n          dirty: options.reset ? false : !fieldValuesEqual(value, initialValue),\n          focused: options.reset ? false : (options.focused ?? previous.focused),\n          initialValue,\n          touched: options.reset ? false : (options.touched ?? previous.touched),\n          validationEpoch: previous.validationEpoch +\n            (options.announce ||\n            (options.userInput &&\n              validity.valid === false &&\n              previous.validity.valid !== false)\n              ? 1\n              : 0),\n          validationMessage: control.validationMessage,\n          validity,\n          value\n        };\n        return runtimesEqual(previous, next) ? previous : next;\n      });\n    },\n    []\n  );\n\n  const registerControl = useCallback(\n    (control: FieldControlElement | null) => {\n      if (controlRef.current === control) {\n        return;\n      }\n      controlRef.current = control;\n      if (!control) {\n        initialValueRef.current = null;\n        setRuntime(EMPTY_RUNTIME);\n        return;\n      }\n      initialValueRef.current = readControlValue(control);\n      syncControl(control, { reset: true });\n    },\n    [syncControl]\n  );\n\n  const registerDescription = useCallback((id: string) => {\n    return addRegisteredId(setRegisteredDescriptionIds, id);\n  }, []);\n  const registerError = useCallback((id: string) => {\n    return addRegisteredId(setRegisteredErrorIds, id);\n  }, []);\n\n  const nativeValid = runtime.validity.valid;\n  const invalid = invalidProp ?? (nativeValid === false);\n  const valid = invalidProp === undefined ? nativeValid : !invalidProp;\n\n  useEffect(() => {\n    if (!externalInvalidInitializedRef.current) {\n      externalInvalidInitializedRef.current = true;\n      previousInvalidPropRef.current = invalidProp;\n      return;\n    }\n    if (invalidProp === true && previousInvalidPropRef.current !== true) {\n      setExternalValidationEpoch((epoch) => epoch + 1);\n    }\n    previousInvalidPropRef.current = invalidProp;\n  }, [invalidProp]);\n  const state = useMemo<FieldRootState>(\n    () => ({\n      disabled: disabled || runtime.controlDisabled,\n      dirty: dirtyProp ?? runtime.dirty,\n      filled: isFilled(runtime.value),\n      focused: runtime.focused,\n      invalid,\n      required: required || runtime.controlRequired,\n      touched: touchedProp ?? runtime.touched,\n      valid\n    }),\n    [\n      dirtyProp,\n      disabled,\n      invalid,\n      required,\n      runtime,\n      touchedProp,\n      valid\n    ]\n  );\n  const validityRenderState = useMemo<FieldValidityRenderState>(\n    () => ({\n      error: runtime.validationMessage,\n      initialValue: runtime.initialValue,\n      validity: runtime.validity,\n      value: runtime.value\n    }),\n    [runtime]\n  );\n  const preparedChildren = useMemo(\n    () => prepareFieldChildren(children, generatedId, state, runtime.validity),\n    [children, generatedId, runtime.validity, state]\n  );\n  const descriptionIds = useMemo(\n    () => [\n      ...new Set([...preparedChildren.descriptionIds, ...registeredDescriptionIds])\n    ],\n    [preparedChildren.descriptionIds, registeredDescriptionIds]\n  );\n  const errorIds = useMemo(\n    () => [...new Set([...preparedChildren.errorIds, ...registeredErrorIds])],\n    [preparedChildren.errorIds, registeredErrorIds]\n  );\n  const context = useMemo<FieldContextValue>(\n    () => ({\n      controlId,\n      descriptionIds,\n      errorIds,\n      name,\n      registerControl,\n      registerDescription,\n      registerError,\n      rootDisabled: disabled,\n      rootRequired: required,\n      state,\n      syncControl,\n      validationEpoch: runtime.validationEpoch + externalValidationEpoch,\n      validityRenderState\n    }),\n    [\n      controlId,\n      descriptionIds,\n      disabled,\n      errorIds,\n      externalValidationEpoch,\n      name,\n      registerControl,\n      registerDescription,\n      registerError,\n      required,\n      runtime.validationEpoch,\n      state,\n      syncControl,\n      validityRenderState\n    ]\n  );\n\n  return (\n    <FieldContext value={context}>\n      {renderHeidiElement({\n        className: FIELD_CLASSES.root,\n        dataPart: \"field-root\",\n        element: \"div\",\n        props: {\n          ...nativeProps,\n          ...fieldStateAttributes(state),\n          children: preparedChildren.children,\n          ref\n        },\n        renderProps: { className, render, style },\n        state\n      })}\n    </FieldContext>\n  );\n}\n\ntype LabelNativeProps = Omit<\n  ComponentPropsWithoutRef<\"label\">,\n  \"children\" | \"className\" | \"htmlFor\" | \"onMouseDown\" | \"ref\" | \"style\"\n>;\n\nexport type FieldLabelProps = HeidiIntrinsicHostProps<FieldRootState, \"label\"> &\n  LabelNativeProps & {\n    children?: ReactNode;\n    htmlFor?: string;\n    onMouseDown?: ComponentPropsWithoutRef<\"label\">[\"onMouseDown\"];\n    ref?: Ref<HTMLLabelElement>;\n  };\n\nexport function FieldLabel({\n  children,\n  className,\n  htmlFor,\n  onMouseDown,\n  ref,\n  render,\n  style,\n  ...nativeProps\n}: FieldLabelProps) {\n  const { controlId, state } = useFieldContext(\"Label\");\n  const handleMouseDown = composeHeidiEventHandlers(\n    onMouseDown,\n    (event: MouseEvent<HTMLLabelElement>) => {\n      const target = event.target;\n      const control = event.currentTarget.control;\n      const ownerWindow = event.currentTarget.ownerDocument.defaultView;\n      const ElementConstructor = ownerWindow?.Element;\n      const NodeConstructor = ownerWindow?.Node;\n      if (\n        (NodeConstructor && target instanceof NodeConstructor && control?.contains(target)) ||\n        (ElementConstructor &&\n          target instanceof ElementConstructor &&\n          target.closest(\"button,input,select,textarea\"))\n      ) {\n        return;\n      }\n      if (event.detail > 1) {\n        event.preventDefault();\n      }\n    }\n  );\n\n  return renderHeidiElement({\n    className: FIELD_CLASSES.label,\n    dataPart: \"field-label\",\n    element: \"label\",\n    props: {\n      ...nativeProps,\n      ...fieldStateAttributes(state),\n      children,\n      htmlFor: htmlFor ?? controlId,\n      onMouseDown: handleMouseDown,\n      ref\n    },\n    renderProps: { className, render, style },\n    state\n  });\n}\n\ntype ControlNativeProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  | \"aria-describedby\"\n  | \"aria-errormessage\"\n  | \"aria-invalid\"\n  | \"children\"\n  | \"className\"\n  | \"disabled\"\n  | \"id\"\n  | \"name\"\n  | \"onAnimationStart\"\n  | \"onBlur\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onInput\"\n  | \"onInvalid\"\n  | \"ref\"\n  | \"required\"\n  | \"style\"\n>;\n\ntype ControlRenderProps = ComponentPropsWithoutRef<\"input\"> & {\n  ref?: Ref<FieldControlElement>;\n};\n\nexport type FieldControlProps = HeidiHostProps<FieldRootState, ControlRenderProps> &\n  ControlNativeProps & {\n    \"aria-describedby\"?: string;\n    \"aria-errormessage\"?: string;\n    disabled?: boolean;\n    name?: string;\n    onAnimationStart?: (event: AnimationEvent<FieldControlElement>) => void;\n    onBlur?: (event: FocusEvent<FieldControlElement>) => void;\n    onChange?: (event: ChangeEvent<FieldControlElement>) => void;\n    onFocus?: (event: FocusEvent<FieldControlElement>) => void;\n    onInput?: (event: InputEvent<FieldControlElement>) => void;\n    onInvalid?: (event: InvalidEvent<FieldControlElement>) => void;\n    ref?: Ref<FieldControlElement>;\n    required?: boolean;\n  };\n\nfunction isFieldControlElement(element: Element): element is FieldControlElement {\n  return (\n    element instanceof HTMLInputElement ||\n    element instanceof HTMLSelectElement ||\n    element instanceof HTMLTextAreaElement\n  );\n}\n\nexport function FieldControl({\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  className,\n  disabled = false,\n  name,\n  onAnimationStart,\n  onBlur,\n  onChange,\n  onFocus,\n  onInput,\n  onInvalid,\n  ref,\n  render,\n  required = false,\n  style,\n  ...nativeProps\n}: FieldControlProps) {\n  const context = useFieldContext(\"Control\");\n  const { registerControl, syncControl } = context;\n  const localRef = useRef<FieldControlElement | null>(null);\n  const warnedHostRef = useRef(false);\n  const effectiveState: FieldRootState = {\n    ...context.state,\n    disabled: context.rootDisabled || disabled,\n    required: context.rootRequired || required\n  };\n  const assignControl = useCallback(\n    (element: HTMLInputElement | null) => {\n      const next = element && isFieldControlElement(element) ? element : null;\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        element &&\n        !next &&\n        !warnedHostRef.current\n      ) {\n        warnedHostRef.current = true;\n        // oxlint-disable-next-line no-console -- replacing a native control loses validation and form semantics.\n        console.error(\n          \"heidi-ui Field: Control render must resolve to an input, textarea, or select.\"\n        );\n      }\n      localRef.current = next;\n      registerControl(next);\n    },\n    [registerControl]\n  );\n\n  // A controlled value or constraint can change without a native input event.\n  // Re-reading after every commit keeps Field state aligned with the DOM while\n  // the equality guard in Root prevents a render loop.\n  useHeidiLayoutEffect(() => {\n    if (localRef.current) {\n      syncControl(localRef.current);\n    }\n  });\n\n  useEffect(() => {\n    const control = localRef.current;\n    const ownerForm = control?.form;\n    if (!control || !ownerForm) {\n      return;\n    }\n    const ownerWindow = control.ownerDocument.defaultView;\n    let frame = 0;\n    const handleReset = () => {\n      if (ownerWindow) {\n        ownerWindow.cancelAnimationFrame(frame);\n        frame = ownerWindow.requestAnimationFrame(() => {\n          syncControl(control, { reset: true });\n        });\n      } else {\n        syncControl(control, { reset: true });\n      }\n    };\n    ownerForm.addEventListener(\"reset\", handleReset);\n    return () => {\n      if (ownerWindow) {\n        ownerWindow.cancelAnimationFrame(frame);\n      }\n      ownerForm.removeEventListener(\"reset\", handleReset);\n    };\n  }, [nativeProps.form, syncControl]);\n\n  const handleAnimationStart = composeHeidiEventHandlers(\n    onAnimationStart,\n    (event: AnimationEvent<FieldControlElement>) => {\n      if (event.animationName === \"hui-field-autofill-detected\") {\n        syncControl(event.currentTarget);\n      }\n    }\n  );\n  const handleBlur = composeHeidiEventHandlers(\n    onBlur,\n    (event: FocusEvent<FieldControlElement>) => {\n      syncControl(event.currentTarget, { focused: false, touched: true });\n    }\n  );\n  const handleChange = composeHeidiEventHandlers(\n    onChange,\n    (event: ChangeEvent<FieldControlElement>) => {\n      syncControl(event.currentTarget, { userInput: true });\n    }\n  );\n  const handleFocus = composeHeidiEventHandlers(\n    onFocus,\n    (event: FocusEvent<FieldControlElement>) => {\n      syncControl(event.currentTarget, { focused: true });\n    }\n  );\n  const handleInput = composeHeidiEventHandlers(\n    onInput,\n    (event: InputEvent<FieldControlElement>) => {\n      syncControl(event.currentTarget, { userInput: true });\n    }\n  );\n  const handleInvalid = composeHeidiEventHandlers(\n    onInvalid,\n    (event: InvalidEvent<FieldControlElement>) => {\n      syncControl(event.currentTarget, {\n        announce: true,\n        touched: true\n      });\n    }\n  );\n\n  return renderHeidiElement({\n    className: FIELD_CLASSES.control,\n    dataPart: \"field-control\",\n    element: \"input\",\n    props: {\n      ...nativeProps,\n      ...fieldStateAttributes(effectiveState),\n      \"aria-describedby\": mergeIdRefs(\n        ariaDescribedBy,\n        context.descriptionIds.join(\" \"),\n        effectiveState.invalid ? context.errorIds.join(\" \") : undefined\n      ),\n      \"aria-errormessage\": effectiveState.invalid && context.errorIds.length > 0\n        ? mergeIdRefs(ariaErrorMessage, context.errorIds.join(\" \"))\n        : ariaErrorMessage,\n      \"aria-invalid\": effectiveState.invalid || undefined,\n      disabled: effectiveState.disabled,\n      id: context.controlId,\n      name: context.name ?? name,\n      onAnimationStart: handleAnimationStart,\n      onBlur: handleBlur,\n      onChange: handleChange,\n      onFocus: handleFocus,\n      onInput: handleInput,\n      onInvalid: handleInvalid,\n      ref: mergeHeidiRefs(\n        ref as Ref<HTMLInputElement>,\n        assignControl\n      ),\n      required: effectiveState.required\n    },\n    renderProps: { className, render, style },\n    state: effectiveState\n  });\n}\n\ntype DescriptionNativeProps = Omit<\n  ComponentPropsWithoutRef<\"p\">,\n  \"children\" | \"className\" | \"id\" | \"ref\" | \"style\"\n>;\n\nexport type FieldDescriptionProps = HeidiIntrinsicHostProps<FieldRootState, \"p\"> &\n  DescriptionNativeProps & {\n    children?: ReactNode;\n    ref?: Ref<HTMLParagraphElement>;\n  };\n\nexport function FieldDescription(props: FieldDescriptionProps): ReactElement;\nexport function FieldDescription({\n  __huiFieldPartId,\n  children,\n  className,\n  ref,\n  render,\n  style,\n  ...nativeProps\n}: FieldDescriptionProps & InternalFieldPartProps): ReactElement {\n  const generatedId = `hui-field-description-${safeId(useId())}`;\n  const descriptionId = __huiFieldPartId ?? generatedId;\n  const { registerDescription, state } = useFieldContext(\"Description\");\n  useHeidiLayoutEffect(() => {\n    if (__huiFieldPartId !== undefined) {\n      return;\n    }\n    return registerDescription(descriptionId);\n  }, [__huiFieldPartId, descriptionId, registerDescription]);\n  return renderHeidiElement({\n    className: FIELD_CLASSES.description,\n    dataPart: \"field-description\",\n    element: \"p\",\n    props: {\n      ...nativeProps,\n      ...fieldStateAttributes(state),\n      children,\n      id: descriptionId,\n      ref\n    },\n    renderProps: { className, render, style },\n    state\n  });\n}\n\ntype ErrorNativeProps = Omit<\n  ComponentPropsWithoutRef<\"p\">,\n  \"children\" | \"className\" | \"hidden\" | \"id\" | \"ref\" | \"style\"\n>;\n\nexport type FieldErrorProps = HeidiIntrinsicHostProps<FieldRootState, \"p\"> &\n  ErrorNativeProps & {\n    children?: ReactNode;\n    keepMounted?: boolean;\n    match?: FieldErrorMatch;\n    ref?: Ref<HTMLParagraphElement>;\n  };\n\nfunction validityMatches(\n  match: FieldErrorMatch | undefined,\n  state: FieldRootState,\n  validity: FieldValidityState\n): boolean {\n  if (match === undefined) {\n    return state.invalid;\n  }\n  if (typeof match === \"boolean\") {\n    return match;\n  }\n  const keys = Array.isArray(match) ? match : [match];\n  return keys.some((key) => validity[key]);\n}\n\nexport function FieldError(props: FieldErrorProps): ReactElement | null;\nexport function FieldError({\n  __huiFieldPartId,\n  children,\n  className,\n  keepMounted = false,\n  match,\n  ref,\n  render,\n  role,\n  style,\n  ...nativeProps\n}: FieldErrorProps & InternalFieldPartProps): ReactElement | null {\n  const generatedId = `hui-field-error-${safeId(useId())}`;\n  const errorId = __huiFieldPartId ?? generatedId;\n  const context = useFieldContext(\"Error\");\n  const { registerError } = context;\n  const matches = validityMatches(\n    match,\n    context.state,\n    context.validityRenderState.validity\n  );\n  const currentEpochRef = useRef(context.validationEpoch);\n  const previousEpochRef = useRef(context.validationEpoch);\n  const readyRef = useRef(false);\n  const [announced, setAnnounced] = useState(false);\n  currentEpochRef.current = context.validationEpoch;\n\n  useHeidiLayoutEffect(() => {\n    if (__huiFieldPartId !== undefined || !matches) {\n      return;\n    }\n    return registerError(errorId);\n  }, [__huiFieldPartId, errorId, matches, registerError]);\n\n  useEffect(() => {\n    const ownerWindow = document.defaultView;\n    let frame = 0;\n    if (ownerWindow) {\n      frame = ownerWindow.requestAnimationFrame(() => {\n        readyRef.current = true;\n        previousEpochRef.current = currentEpochRef.current;\n      });\n    } else {\n      readyRef.current = true;\n    }\n    return () => {\n      ownerWindow?.cancelAnimationFrame(frame);\n    };\n    // Initial native constraint state is mirrored during the first commit. It\n    // must never create a mount-time role=alert announcement.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!readyRef.current) {\n      return;\n    }\n    const newInvalidTransition =\n      matches && context.validationEpoch > previousEpochRef.current;\n    previousEpochRef.current = context.validationEpoch;\n    if (!matches) {\n      setAnnounced(false);\n    } else if (newInvalidTransition) {\n      setAnnounced(true);\n    }\n  }, [context.validationEpoch, matches]);\n\n  if (!keepMounted && !matches) {\n    return null;\n  }\n\n  return renderHeidiElement({\n    className: FIELD_CLASSES.error,\n    dataPart: \"field-error\",\n    element: \"p\",\n    props: {\n      ...nativeProps,\n      ...fieldStateAttributes(context.state),\n      children,\n      hidden: !matches,\n      id: errorId,\n      ref,\n      role: role ?? (announced ? \"alert\" : undefined)\n    },\n    renderProps: { className, render, style },\n    state: context.state\n  });\n}\n\nexport type FieldValidityProps = {\n  children: (state: FieldValidityRenderState) => ReactNode;\n};\n\nexport function FieldValidity({ children }: FieldValidityProps) {\n  const { validityRenderState } = useFieldContext(\"Validity\");\n  return children(validityRenderState);\n}\n\nexport const Field = {\n  Control: FieldControl,\n  Description: FieldDescription,\n  Error: FieldError,\n  Label: FieldLabel,\n  Root: FieldRoot,\n  Validity: FieldValidity\n} as const;\n",
      "path": "packages/heidi-ui/src/field/field.tsx",
      "target": "components/ui/heidi/field/field.tsx",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui field — STRUCTURAL CSS only. No --hui-*.\n * Native controls keep browser form behavior; the one animation name is an\n * autofill signal consumed by Field.Control and makes no visual change.\n */\n\n@layer heidi-ui-base {\n  @keyframes hui-field-autofill-detected {\n  }\n\n  .hui-field-root {\n    min-inline-size: 0;\n  }\n\n  .hui-field-label,\n  .hui-field-description,\n  .hui-field-error {\n    overflow-wrap: anywhere;\n  }\n\n  .hui-field-control {\n    max-inline-size: 100%;\n  }\n\n  .hui-field-control:-webkit-autofill {\n    animation-duration: 1ms;\n    animation-name: hui-field-autofill-detected;\n  }\n}\n",
      "path": "packages/heidi-ui/src/field/field.base.css",
      "target": "components/ui/heidi/field/field.base.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui field — VISUAL theme (opt-in). Consumes --hui-*.\n */\n\n@layer heidi-ui {\n  .hui-field-root {\n    display: grid;\n    gap: var(--hui-space-1-5);\n  }\n\n  .hui-field-label {\n    color: var(--hui-color-fg-strong);\n    font-size: var(--hui-text-body-size);\n    font-weight: var(--hui-font-weight-medium);\n  }\n\n  .hui-field-control {\n    background: var(--hui-color-bg-elevated);\n    border: var(--hui-border-width) var(--hui-border-style) var(--hui-color-border-default);\n    border-radius: var(--hui-radius-md);\n    color: var(--hui-color-fg-default);\n    font: inherit;\n    padding: var(--hui-space-1-5) var(--hui-space-3);\n  }\n\n  .hui-field-control:focus-visible,\n  .hui-field-root[data-focused=\"true\"] .hui-field-control:focus-visible {\n    border-color: var(--hui-color-focus-ring);\n    outline: var(--hui-focus-ring-width) solid var(--hui-color-focus-ring);\n    outline-offset: var(--hui-focus-ring-offset);\n  }\n\n  .hui-field-description {\n    color: var(--hui-color-fg-muted);\n    font-size: var(--hui-text-body-size);\n    margin: 0;\n  }\n\n  .hui-field-error {\n    color: var(--hui-color-danger);\n    font-size: var(--hui-text-body-size);\n    margin: 0;\n  }\n\n  .hui-field-root[data-disabled=\"true\"] {\n    opacity: 0.5;\n  }\n\n  .hui-field-root[data-invalid=\"true\"] .hui-field-control {\n    border-color: var(--hui-color-danger);\n    border-width: var(--hui-border-width-strong);\n  }\n\n  .hui-field-root[data-valid=\"true\"] .hui-field-control,\n  .hui-field-root[data-touched=\"true\"] .hui-field-control {\n    border-style: var(--hui-border-style);\n  }\n\n  .hui-field-root[data-required=\"true\"] .hui-field-label {\n    font-weight: var(--hui-font-weight-medium);\n  }\n\n  .hui-field-root[data-filled=\"true\"] .hui-field-control {\n    color: var(--hui-color-fg-default);\n  }\n\n  .hui-field-root[data-dirty=\"true\"] .hui-field-control {\n    background: var(--hui-color-bg-elevated);\n  }\n\n  @media (forced-colors: active) {\n    .hui-field-control {\n      background: Field;\n      border: var(--hui-border-width) solid FieldText;\n      color: FieldText;\n      forced-color-adjust: none;\n    }\n\n    .hui-field-control:focus-visible {\n      outline-color: Highlight;\n    }\n\n    .hui-field-root[data-disabled=\"true\"] .hui-field-control {\n      border-color: GrayText;\n      color: GrayText;\n    }\n\n    .hui-field-error,\n    .hui-field-root[data-invalid=\"true\"] .hui-field-control {\n      border-color: LinkText;\n      color: LinkText;\n    }\n  }\n}\n",
      "path": "packages/heidi-ui/src/field/field.theme.css",
      "target": "components/ui/heidi/field/field.theme.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui field — aggregator.\n */\n\n@import \"./field.base.css\";\n@import \"../../../../styles/heidi-ui-adapter.css\";\n@import \"./field.theme.css\";\n",
      "path": "packages/heidi-ui/src/field/field.css",
      "target": "components/ui/heidi/field/field.css",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from packages/heidi-ui/src/field/field.base.css + packages/heidi-ui/src/field/field.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\nexport const FIELD_CLASSES = {\n  control: \"hui-field-control\",\n  description: \"hui-field-description\",\n  error: \"hui-field-error\",\n  label: \"hui-field-label\",\n  root: \"hui-field-root\",\n} as const;\n",
      "path": "packages/heidi-ui/src/field/field.classes.generated.ts",
      "target": "components/ui/heidi/field/field.classes.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from field.anatomy.json + field.base.css + field.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\n\nexport type FieldDirty = \"true\";\nexport type FieldDisabled = \"true\";\nexport type FieldFilled = \"true\";\nexport type FieldFocused = \"true\";\nexport type FieldInvalid = \"true\";\nexport type FieldRequired = \"true\";\nexport type FieldTouched = \"true\";\nexport type FieldValid = \"true\";\n\nexport const FIELD_ANATOMY = {\n  \"component\": \"field\",\n  \"description\": \"Native form-control field with deterministic unique description/error ids, server-rendered ARIA relationships, browser-owned validity, autofill/reset synchronization, and controlled dirty/touched/server-invalid state.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"control\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-describedby\",\n          \"aria-errormessage\",\n          \"aria-invalid\"\n        ],\n        \"role\": null\n      },\n      \"class\": \"hui-field-control\",\n      \"css\": {\n        \"structural\": [\n          \"animation-duration\",\n          \"animation-name\",\n          \"max-inline-size\"\n        ]\n      },\n      \"dataPart\": \"field-control\",\n      \"description\": \"Native input by default; render may resolve to a native textarea or select. Root authority supplies id/name/disabled/required while consumer IDREFs are merged with every Field.Description and active matching Field.Error id in initial server markup and after hydration.\",\n      \"element\": \"input\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"aria-describedby\",\n        \"aria-errormessage\",\n        \"className\",\n        \"disabled\",\n        \"name\",\n        \"onAnimationStart\",\n        \"onBlur\",\n        \"onChange\",\n        \"onFocus\",\n        \"onInput\",\n        \"onInvalid\",\n        \"ref\",\n        \"render\",\n        \"required\",\n        \"style\"\n      ],\n      \"pseudoStates\": [\n        \":focus-visible\"\n      ],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-dirty\": [\n          \"true\"\n        ],\n        \"data-filled\": [\n          \"true\"\n        ],\n        \"data-focused\": [\n          \"true\"\n        ],\n        \"data-invalid\": [\n          \"true\"\n        ],\n        \"data-required\": [\n          \"true\"\n        ],\n        \"data-touched\": [\n          \"true\"\n        ],\n        \"data-valid\": [\n          \"true\"\n        ]\n      }\n    },\n    \"description\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-description\",\n      \"css\": {\n        \"structural\": [\n          \"overflow-wrap\"\n        ]\n      },\n      \"dataPart\": \"field-description\",\n      \"description\": \"Descriptive content with an instance-unique deterministic id that Control appends to consumer-supplied aria-describedby ids.\",\n      \"element\": \"p\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-dirty\": [\n          \"true\"\n        ],\n        \"data-filled\": [\n          \"true\"\n        ],\n        \"data-focused\": [\n          \"true\"\n        ],\n        \"data-invalid\": [\n          \"true\"\n        ],\n        \"data-required\": [\n          \"true\"\n        ],\n        \"data-touched\": [\n          \"true\"\n        ],\n        \"data-valid\": [\n          \"true\"\n        ]\n      }\n    },\n    \"error\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-error\",\n      \"css\": {\n        \"structural\": [\n          \"overflow-wrap\"\n        ]\n      },\n      \"dataPart\": \"field-error\",\n      \"description\": \"Matched native or controlled error content with an instance-unique deterministic id. Only active matching errors enter Control IDREFs. It has no alert role on initial render; a newly-invalid or native-invalid transition receives a one-commit role=alert announcement.\",\n      \"element\": \"p\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"keepMounted\",\n        \"match\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-dirty\": [\n          \"true\"\n        ],\n        \"data-filled\": [\n          \"true\"\n        ],\n        \"data-focused\": [\n          \"true\"\n        ],\n        \"data-invalid\": [\n          \"true\"\n        ],\n        \"data-required\": [\n          \"true\"\n        ],\n        \"data-touched\": [\n          \"true\"\n        ],\n        \"data-valid\": [\n          \"true\"\n        ]\n      }\n    },\n    \"label\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-label\",\n      \"css\": {\n        \"structural\": [\n          \"overflow-wrap\"\n        ]\n      },\n      \"dataPart\": \"field-label\",\n      \"description\": \"Native label associated to Root's deterministic control id, with the same double-click text-selection guard as standalone Label.\",\n      \"element\": \"label\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"htmlFor\",\n        \"onMouseDown\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-dirty\": [\n          \"true\"\n        ],\n        \"data-filled\": [\n          \"true\"\n        ],\n        \"data-focused\": [\n          \"true\"\n        ],\n        \"data-invalid\": [\n          \"true\"\n        ],\n        \"data-required\": [\n          \"true\"\n        ],\n        \"data-touched\": [\n          \"true\"\n        ],\n        \"data-valid\": [\n          \"true\"\n        ]\n      }\n    },\n    \"root\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-root\",\n      \"css\": {\n        \"structural\": [\n          \"min-inline-size\"\n        ]\n      },\n      \"dataPart\": \"field-root\",\n      \"description\": \"Single-control field context. Prepares direct part identities and relationships for server markup, then mirrors the native control's validity/value/focus lifecycle into render state and data hooks; dirty/touched/invalid may be controlled externally.\",\n      \"element\": \"div\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"controlId\",\n        \"dirty\",\n        \"disabled\",\n        \"invalid\",\n        \"name\",\n        \"ref\",\n        \"render\",\n        \"required\",\n        \"style\",\n        \"touched\"\n      ],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-dirty\": [\n          \"true\"\n        ],\n        \"data-filled\": [\n          \"true\"\n        ],\n        \"data-focused\": [\n          \"true\"\n        ],\n        \"data-invalid\": [\n          \"true\"\n        ],\n        \"data-required\": [\n          \"true\"\n        ],\n        \"data-touched\": [\n          \"true\"\n        ],\n        \"data-valid\": [\n          \"true\"\n        ]\n      }\n    }\n  },\n  \"rootProps\": [\n    \"controlId\",\n    \"dirty\",\n    \"disabled\",\n    \"invalid\",\n    \"name\",\n    \"required\",\n    \"touched\"\n  ],\n  \"tokens\": [\n    \"--hui-border-style\",\n    \"--hui-border-width\",\n    \"--hui-border-width-strong\",\n    \"--hui-color-bg-elevated\",\n    \"--hui-color-border-default\",\n    \"--hui-color-danger\",\n    \"--hui-color-fg-default\",\n    \"--hui-color-fg-muted\",\n    \"--hui-color-fg-strong\",\n    \"--hui-color-focus-ring\",\n    \"--hui-focus-ring-offset\",\n    \"--hui-focus-ring-width\",\n    \"--hui-font-weight-medium\",\n    \"--hui-radius-md\",\n    \"--hui-space-1-5\",\n    \"--hui-space-3\",\n    \"--hui-text-body-size\"\n  ]\n} as const;\n",
      "path": "packages/heidi-ui/src/field/field.anatomy.generated.ts",
      "target": "components/ui/heidi/field/field.anatomy.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "{\n  \"component\": \"field\",\n  \"description\": \"Native form-control field with deterministic unique description/error ids, server-rendered ARIA relationships, browser-owned validity, autofill/reset synchronization, and controlled dirty/touched/server-invalid state.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"control\": {\n      \"aria\": {\n        \"owns\": [\"aria-describedby\", \"aria-errormessage\", \"aria-invalid\"],\n        \"role\": null\n      },\n      \"class\": \"hui-field-control\",\n      \"css\": {\n        \"structural\": [\"animation-duration\", \"animation-name\", \"max-inline-size\"]\n      },\n      \"dataPart\": \"field-control\",\n      \"description\": \"Native input by default; render may resolve to a native textarea or select. Root authority supplies id/name/disabled/required while consumer IDREFs are merged with every Field.Description and active matching Field.Error id in initial server markup and after hydration.\",\n      \"element\": \"input\",\n      \"nativeProps\": true,\n      \"props\": [\"aria-describedby\", \"aria-errormessage\", \"className\", \"disabled\", \"name\", \"onAnimationStart\", \"onBlur\", \"onChange\", \"onFocus\", \"onInput\", \"onInvalid\", \"ref\", \"render\", \"required\", \"style\"],\n      \"pseudoStates\": [\":focus-visible\"],\n      \"states\": {\n        \"data-disabled\": [\"true\"],\n        \"data-dirty\": [\"true\"],\n        \"data-filled\": [\"true\"],\n        \"data-focused\": [\"true\"],\n        \"data-invalid\": [\"true\"],\n        \"data-required\": [\"true\"],\n        \"data-touched\": [\"true\"],\n        \"data-valid\": [\"true\"]\n      }\n    },\n    \"description\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-description\",\n      \"css\": {\n        \"structural\": [\"overflow-wrap\"]\n      },\n      \"dataPart\": \"field-description\",\n      \"description\": \"Descriptive content with an instance-unique deterministic id that Control appends to consumer-supplied aria-describedby ids.\",\n      \"element\": \"p\",\n      \"nativeProps\": true,\n      \"props\": [\"className\", \"ref\", \"render\", \"style\"],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\"true\"],\n        \"data-dirty\": [\"true\"],\n        \"data-filled\": [\"true\"],\n        \"data-focused\": [\"true\"],\n        \"data-invalid\": [\"true\"],\n        \"data-required\": [\"true\"],\n        \"data-touched\": [\"true\"],\n        \"data-valid\": [\"true\"]\n      }\n    },\n    \"error\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-error\",\n      \"css\": {\n        \"structural\": [\"overflow-wrap\"]\n      },\n      \"dataPart\": \"field-error\",\n      \"description\": \"Matched native or controlled error content with an instance-unique deterministic id. Only active matching errors enter Control IDREFs. It has no alert role on initial render; a newly-invalid or native-invalid transition receives a one-commit role=alert announcement.\",\n      \"element\": \"p\",\n      \"nativeProps\": true,\n      \"props\": [\"className\", \"keepMounted\", \"match\", \"ref\", \"render\", \"style\"],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\"true\"],\n        \"data-dirty\": [\"true\"],\n        \"data-filled\": [\"true\"],\n        \"data-focused\": [\"true\"],\n        \"data-invalid\": [\"true\"],\n        \"data-required\": [\"true\"],\n        \"data-touched\": [\"true\"],\n        \"data-valid\": [\"true\"]\n      }\n    },\n    \"label\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-label\",\n      \"css\": {\n        \"structural\": [\"overflow-wrap\"]\n      },\n      \"dataPart\": \"field-label\",\n      \"description\": \"Native label associated to Root's deterministic control id, with the same double-click text-selection guard as standalone Label.\",\n      \"element\": \"label\",\n      \"nativeProps\": true,\n      \"props\": [\"className\", \"htmlFor\", \"onMouseDown\", \"ref\", \"render\", \"style\"],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\"true\"],\n        \"data-dirty\": [\"true\"],\n        \"data-filled\": [\"true\"],\n        \"data-focused\": [\"true\"],\n        \"data-invalid\": [\"true\"],\n        \"data-required\": [\"true\"],\n        \"data-touched\": [\"true\"],\n        \"data-valid\": [\"true\"]\n      }\n    },\n    \"root\": {\n      \"aria\": {\n        \"owns\": [],\n        \"role\": null\n      },\n      \"class\": \"hui-field-root\",\n      \"css\": {\n        \"structural\": [\"min-inline-size\"]\n      },\n      \"dataPart\": \"field-root\",\n      \"description\": \"Single-control field context. Prepares direct part identities and relationships for server markup, then mirrors the native control's validity/value/focus lifecycle into render state and data hooks; dirty/touched/invalid may be controlled externally.\",\n      \"element\": \"div\",\n      \"nativeProps\": true,\n      \"props\": [\"className\", \"controlId\", \"dirty\", \"disabled\", \"invalid\", \"name\", \"ref\", \"render\", \"required\", \"style\", \"touched\"],\n      \"pseudoStates\": [],\n      \"states\": {\n        \"data-disabled\": [\"true\"],\n        \"data-dirty\": [\"true\"],\n        \"data-filled\": [\"true\"],\n        \"data-focused\": [\"true\"],\n        \"data-invalid\": [\"true\"],\n        \"data-required\": [\"true\"],\n        \"data-touched\": [\"true\"],\n        \"data-valid\": [\"true\"]\n      }\n    }\n  },\n  \"rootProps\": [\"controlId\", \"dirty\", \"disabled\", \"invalid\", \"name\", \"required\", \"touched\"]\n}\n",
      "path": "packages/heidi-ui/src/field/field.anatomy.json",
      "target": "components/ui/heidi/field/field.anatomy.json",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared host rendering for heidi-ui parts — Base-UI-shaped composition\n * (docs/HEIDI-UI-HEADLESS.md § 4 / HEIDI-UI.md § 4.5):\n *   - className / style as value or (state) => value\n *   - render as ReactElement or (props, state) => ReactElement\n *   - ref forwarding\n *   - data-hui-part always set (stable unstyled hook)\n *\n * Structural inline styles (e.g. anchorName) are merged last so a consumer\n * style override cannot drop platform wiring.\n */\n\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  type CSSProperties,\n  type ComponentPropsWithRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback\n} from \"react\";\n\nexport type HeidiClassName<State> = string | ((state: State) => string | undefined) | undefined;\n\nexport type HeidiStyle<State> =\n  | CSSProperties\n  | ((state: State) => CSSProperties | undefined)\n  | undefined;\n\nexport type HeidiRenderFn<State, Props> = (\n  props: Props,\n  state: State\n) => ReactElement;\n\nexport type HeidiRender<State, Props> =\n  | ReactElement\n  | HeidiRenderFn<State, Props>\n  | undefined;\n\ntype DefaultRenderProps = HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> };\n\nexport type HeidiHostProps<\n  State,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  className?: HeidiClassName<State>;\n  render?: HeidiRender<State, RenderProps>;\n  style?: HeidiStyle<State>;\n};\n\nexport type HeidiIntrinsicHostProps<\n  State,\n  Tag extends keyof HTMLElementTagNameMap\n> = HeidiHostProps<State, ComponentPropsWithRef<Tag>>;\n\nfunction resolveClassName<State>(\n  className: HeidiClassName<State>,\n  state: State\n): string | undefined {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\nfunction resolveStyle<State>(style: HeidiStyle<State>, state: State): CSSProperties | undefined {\n  return typeof style === \"function\" ? style(state) : style;\n}\n\nfunction mergeClassNames(...parts: Array<string | undefined>): string | undefined {\n  const merged = parts.filter(Boolean).join(\" \");\n  return merged.length > 0 ? merged : undefined;\n}\n\n/**\n * Compose a consumer event with library behavior. Consumers run first and may\n * cancel the component behavior with `event.preventDefault()`. Heidi keeps\n * this native-event convention intentionally: it avoids a second branded event\n * API while still making async/controlled actions vetoable.\n */\nexport function composeHeidiEventHandlers<Event extends { defaultPrevented: boolean }>(\n  consumer: ((event: Event) => void) | undefined,\n  library: (event: Event) => void\n): (event: Event) => void {\n  return (event) => {\n    consumer?.(event);\n    if (!event.defaultPrevented) {\n      library(event);\n    }\n  };\n}\n\n/** React 19-safe ref fan-out, including callback-ref cleanup functions. */\nexport function mergeHeidiRefs<Element>(\n  ...inputRefs: Array<Ref<Element> | undefined>\n): Ref<Element> | undefined {\n  const refs = Array.from(\n    new Set(\n      inputRefs.filter(\n        (ref): ref is Exclude<Ref<Element>, null> => ref != null\n      )\n    )\n  );\n  if (refs.length === 0) {\n    return undefined;\n  }\n  if (refs.length === 1) {\n    return refs[0];\n  }\n\n  let cache = mergedRefCache;\n  for (const ref of refs) {\n    const key = ref as object;\n    let child = cache.children.get(key);\n    if (!child) {\n      child = { children: new WeakMap() };\n      cache.children.set(key, child);\n    }\n    cache = child;\n  }\n  if (cache.callback) {\n    return cache.callback as RefCallback<Element>;\n  }\n\n  const callback: RefCallback<Element> = (node) => {\n    const cleanups: Array<() => void> = [];\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        const cleanup = ref(node);\n        if (node !== null) {\n          cleanups.push(typeof cleanup === \"function\" ? cleanup : () => ref(null));\n        }\n      } else if (ref) {\n        ref.current = node;\n        if (node !== null) {\n          cleanups.push(() => {\n            ref.current = null;\n          });\n        }\n      }\n    }\n    return cleanups.length > 0\n      ? () => {\n          for (const cleanup of cleanups) {\n            cleanup();\n          }\n        }\n      : undefined;\n  };\n  cache.callback = callback as RefCallback<unknown>;\n  return callback;\n}\n\ntype MergedRefCache = {\n  callback?: RefCallback<unknown>;\n  children: WeakMap<object, MergedRefCache>;\n};\n\nconst mergedRefCache: MergedRefCache = { children: new WeakMap() };\n\ntype UnknownHandler = (...args: never[]) => unknown;\n\nfunction isEventHandler(key: string, value: unknown): value is UnknownHandler {\n  return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction defaultPrevented(args: unknown[]): boolean {\n  const event = args[0];\n  return (\n    typeof event === \"object\" &&\n    event !== null &&\n    \"defaultPrevented\" in event &&\n    event.defaultPrevented === true\n  );\n}\n\nfunction composeUnknownHandlers(\n  consumer: UnknownHandler,\n  library: UnknownHandler\n): UnknownHandler {\n  if (consumer === library) {\n    return library;\n  }\n  return ((...args: unknown[]) => {\n    (consumer as (...handlerArgs: unknown[]) => unknown)(...args);\n    if (!defaultPrevented(args)) {\n      (library as (...handlerArgs: unknown[]) => unknown)(...args);\n    }\n  }) as UnknownHandler;\n}\n\n/** Library-owned host props — permissive so button `type`, `data-*`, `popover`, etc. type-check. */\nexport type HeidiElementProps<Tag extends keyof HTMLElementTagNameMap> = Record<\n  string,\n  unknown\n> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElementTagNameMap[Tag]>;\n  style?: CSSProperties;\n};\n\ntype RenderElementParams<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  /** Default class from the generated hui-* map (theme/base target). */\n  className?: string;\n  /** Stable machine hook — always emitted. */\n  dataPart: string;\n  /** Intrinsic tag when `render` is omitted. */\n  element: Tag;\n  /** Props the library owns (aria, ids, handlers, popover, …). */\n  props: HeidiElementProps<Tag>;\n  /** Optional consumer composition props. */\n  renderProps?: HeidiHostProps<State, RenderProps>;\n  /** Typed state passed to functional className/style/render. */\n  state: State;\n  /** Structural inline styles that must survive consumer style merges. */\n  structuralStyle?: CSSProperties;\n  /**\n   * Render-element handlers to remove instead of composing. This is reserved\n   * for states such as a focusable disabled composite item where the public\n   * contract requires press handlers to be completely inert.\n   */\n  suppressRenderedHandlers?: readonly string[];\n};\n\n/**\n * Render a heidi-ui host element with optional Base-shaped composition.\n */\nexport function renderHeidiElement<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n>(\n  params: RenderElementParams<State, Tag, RenderProps>\n): ReactElement {\n  const {\n    className,\n    dataPart,\n    element,\n    props,\n    renderProps,\n    state,\n    structuralStyle,\n    suppressRenderedHandlers\n  } = params;\n  const consumerClass = resolveClassName(renderProps?.className, state);\n  const consumerStyle = resolveStyle(renderProps?.style, state);\n  const mergedStyle: CSSProperties | undefined =\n    props.style || consumerStyle || structuralStyle\n      ? { ...props.style, ...consumerStyle, ...structuralStyle }\n      : undefined;\n\n  const outProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  } = {\n    ...(props as HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }),\n    className: mergeClassNames(consumerClass, className),\n    \"data-hui-part\": dataPart,\n    style: mergedStyle\n  };\n\n  const render = renderProps?.render;\n  if (typeof render === \"function\") {\n    // Post-merge the returned element as well. This deliberately makes the\n    // stable data hook, owned semantics, refs, and internal handlers survive\n    // even when a render function forgets to spread one of the supplied props.\n    return mergeRenderedElement(\n      render(outProps as unknown as RenderProps, state),\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n  if (isValidElement(render)) {\n    return mergeRenderedElement(\n      render,\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n\n  return createElement(element, outProps as never, props.children);\n}\n\ntype RenderedProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  style?: CSSProperties;\n};\n\nfunction mergeRenderedElement(\n  element: ReactElement,\n  libraryProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  },\n  dataPart: string,\n  structuralStyle: CSSProperties | undefined,\n  suppressRenderedHandlers: readonly string[] | undefined\n): ReactElement {\n  const rendered = element as ReactElement<RenderedProps>;\n  const renderedProps = rendered.props;\n  const renderedClass =\n    renderedProps.className === libraryProps.className\n      ? undefined\n      : renderedProps.className;\n  const merged: RenderedProps = {\n    ...renderedProps,\n    ...libraryProps,\n    className: mergeClassNames(renderedClass, libraryProps.className),\n    \"data-hui-part\": dataPart,\n    ref: mergeHeidiRefs(libraryProps.ref, renderedProps.ref),\n    style: {\n      ...libraryProps.style,\n      ...renderedProps.style,\n      ...structuralStyle\n    }\n  };\n\n  if (Object.prototype.hasOwnProperty.call(renderedProps, \"children\")) {\n    merged.children = renderedProps.children;\n  }\n\n  const suppressedHandlers = suppressRenderedHandlers\n    ? new Set(suppressRenderedHandlers)\n    : null;\n  for (const key of new Set([...Object.keys(renderedProps), ...Object.keys(libraryProps)])) {\n    const consumer = renderedProps[key];\n    const library = (libraryProps as unknown as Record<string, unknown>)[key];\n    if (suppressedHandlers?.has(key)) {\n      merged[key] = library;\n      continue;\n    }\n    if (isEventHandler(key, consumer) && isEventHandler(key, library)) {\n      merged[key] = composeUnknownHandlers(consumer, library);\n    }\n  }\n\n  return cloneElement(rendered, merged as never);\n}\n",
      "path": "packages/heidi-ui/src/_internal/render-element.ts",
      "target": "components/ui/heidi/_internal/render-element.ts",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared id sanitizer for heidi-ui hosts.\n *\n * React's useId() emits characters that are invalid in HTML id / attribute\n * selectors and in CSS identifiers (`«r0»` in React 19, `:r0:` earlier).\n * heidi-ui interpolates these ids into element ids, aria relationships, and\n * dashed-ident anchor names (`--hui-*-anchor-…`), so everything outside\n * [a-zA-Z0-9_-] is stripped.\n */\n\nexport function safeId(id: string): string {\n  return id.replace(/[^a-zA-Z0-9_-]/g, \"\");\n}\n",
      "path": "packages/heidi-ui/src/_internal/safe-id.ts",
      "target": "components/ui/heidi/_internal/safe-id.ts",
      "type": "registry:ui"
    },
    {
      "content": "import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * `useLayoutEffect` that does not warn on the server.\n *\n * ponytail: fifteen primitives imported `useLayoutEffect` straight from React.\n * Every one of them carries `\"use client\"`, which is easy to misread as\n * \"client-only\" — in the App Router it means \"hydrated on the client\", and the\n * component is still rendered to HTML on the server first. React logs\n * \"useLayoutEffect does nothing on the server\" for each one, so a consumer\n * doing SSR saw a wall of warnings the app that ships this library never saw,\n * because it renders these routes on the client path.\n *\n * The branch is evaluated ONCE at module scope, not per render, and it is\n * therefore stable across a component's lifetime — swapping which hook is\n * called between renders would violate the rules of hooks. `typeof document`\n * rather than `typeof window`: both work, but `document` is the thing the\n * effect actually needs, and it keeps the check honest in exotic runtimes that\n * define a partial `window`.\n *\n * Rejected: `useInsertionEffect`, which runs earlier but is specified for\n * style injection and is not a general layout hook; and per-file guards, which\n * is what the 15 copies would have become.\n */\nexport const useHeidiLayoutEffect =\n  typeof document === \"undefined\" ? useEffect : useLayoutEffect;\n",
      "path": "packages/heidi-ui/src/_internal/use-layout-effect.ts",
      "target": "components/ui/heidi/_internal/use-layout-effect.ts",
      "type": "registry:ui"
    }
  ],
  "name": "field",
  "registryDependencies": [
    "@heidi-ui/heidi-tokens"
  ],
  "title": "Field",
  "type": "registry:ui"
}