@eifi1/ui-kit 0.51.4 → 0.51.6

package/dist/rhf/form-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/rhf/form-core.tsx"],"sourcesContent":["/**\n * The react-hook-form adapter: the five parts every bound field is built from, and the\n * hook they share. Behind `@eifi1/ui-kit/rhf`, which exports `Form` alone of them.\n *\n * The kit's own module since 0.34 (refactor audit 2026-10, API-6f): the bound `Rhf*`\n * fields and `RhfField` build on these parts, and import them from here. ./form is the\n * public face — `Form`; the parts left the public surface in 0.35 (deprecated in 0.34),\n * when no app imported them any more.\n *\n * ```tsx\n * <Form {...form}>\n *   <FormField control={form.control} name=\"amount\" render={({ field }) => (\n *     <FormItem>\n *       <FormLabel required>Amount</FormLabel>\n *       <FormControl>\n *         <NumberField value={field.value} onCommit={field.onChange} />\n *       </FormControl>\n *       <FormMessage />\n *     </FormItem>\n *   )} />\n * </Form>\n * ```\n *\n * The shape is shadcn's `form.tsx`, on purpose: Kastlan builds every form from that\n * file, so moving onto this one is an import line rather than a rewrite. What differs\n * is what the shadcn file gets wrong:\n *\n *  - **`aria-describedby` names only what is on screen.** shadcn always points the\n *    control at a description id, rendered or not, and at the message id whenever the\n *    field has an error, whether a message was rendered for it or not. A reference to\n *    a node that does not exist describes the field as nothing. Here the description\n *    and the message say when they are mounted, and the control points at exactly\n *    those.\n *  - **Merged, never replaced.** A control that already carries its own\n *    `aria-describedby` keeps it, first — the same rule as the kit's `error` prop\n *    (see `useFieldError` in components/field-parts.tsx).\n *  - **No Radix.** `FormControl` is a one-child `cloneElement`, not `Slot`, and the\n *    label is the kit's own `Label` — the kit carries no Radix dependency and this\n *    entry is not the place to start.\n *\n * ## Why this is its own entry\n *\n * The main barrel once shipped a react-hook-form hook (`use-rhf-wizard-step`) and\n * removed it: it made react-hook-form an install every consumer's typecheck paid for,\n * for a hook nobody called (see the wizard section of src/index.ts). This is the\n * answer to that, not a reversal of it. Nothing outside `src/rhf*` imports\n * react-hook-form — `__tests__/packaging-contract.test.ts` holds that — and the peer is\n * optional, so an app that does not use it installs nothing and imports nothing.\n *\n * ## Painting the field\n *\n * `FormControl` sets `aria-invalid` on its child. `NumberField` and the pickers paint\n * from that attribute; `Input`, `Select` and `Textarea` paint only from their\n * `invalid` prop (see its note in components/field-base.tsx: a bare attribute announces but\n * does not paint), so pass it from the render prop —\n * `<Input {...field} invalid={fieldState.invalid} />`. `FormControl` does not inject\n * `invalid` itself because its child may be a native element, which would print it\n * into the DOM as an unknown attribute.\n *\n * ## Clearing a picker: `null`, unless the picker is told otherwise\n *\n * Nothing here touches a value. `FormField` is `Controller`, so what a control hands\n * `field.onChange` is exactly what lands in the form — and what the entity pickers\n * hand it on a clear is `null`: `EntityCombobox`'s \"×\", `InlineEntityCombobox`'s \"×\"\n * and its emptied text. (`MultiEntityCombobox` and `MultiSelect` clear to `[]`.)\n *\n * A zod schema that spells \"no choice\" as `\"\"` (`z.string()`, or `z.literal(\"\")` in a\n * union) then fails on the `null`. Say so on the PICKER, not here:\n *\n * ```tsx\n * <EntityCombobox clearValue=\"\" value={field.value} onChange={field.onChange} … />\n * ```\n *\n * `clearValue` also types `onChange` (`(v: V | \"\") => void` rather than\n * `V | null`) and reads `\"\"` back as \"nothing selected\", so an initial `defaultValues`\n * of `\"\"` shows the placeholder rather than an unresolvable id. The adapter does not\n * coerce because it cannot see the schema: mapping `null` to `\"\"` for every field\n * would break every schema that wants `null` (`z.string().nullable()`), which is the\n * pickers' default for a reason — it is the one value no option can have.\n */\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactElement,\n} from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\nimport { Label, type LabelProps } from \"../components/field-base\";\nimport { cn } from \"../lib/cn\";\n\n/** The form's `useForm()` return, spread in: `<Form {...form}>`. react-hook-form's own\n *  `FormProvider`, under the name the shadcn file gave it. */\nexport const Form = FormProvider;\n\n// ── contexts ─────────────────────────────────────────────────────────────────\n\nconst FormFieldContext = createContext<{ name: string } | null>(null);\n\n/** The two optional nodes a control can be described by. */\ntype Described = \"description\" | \"message\";\n\ninterface FormItemContextValue {\n  id: string;\n  mounted: Record<Described, boolean>;\n  mark: (slot: Described, on: boolean) => void;\n}\n\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\n// ── FormField ────────────────────────────────────────────────────────────────\n\n/**\n * react-hook-form's `Controller`, with the field's name put in context for the parts\n * below it. Takes exactly `Controller`'s props.\n */\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>(props: ControllerProps<TFieldValues, TName, TTransformedValues>) {\n  const value = useMemo(() => ({ name: props.name as string }), [props.name]);\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\n// ── useFormField ─────────────────────────────────────────────────────────────\n\n/**\n * The ids and the state of the field around the caller: for a part of your own that\n * sits beside the kit's (a character counter that belongs in `aria-describedby`, a\n * label with a different look).\n *\n * Throws outside a `FormField` + `FormItem` pair. shadcn's version answered there with\n * ids like `undefined-form-item`, which label nothing and fail nowhere.\n */\nexport function useFormField() {\n  const field = useContext(FormFieldContext);\n  const item = useContext(FormItemContext);\n  if (!field) throw new Error(\"useFormField must be used inside <FormField>.\");\n  if (!item) throw new Error(\"useFormField must be used inside <FormItem>.\");\n  const { getFieldState } = useFormContext();\n  // Subscribes this part to the field's state, so a label or message re-renders when\n  // the field's error changes without the whole form doing so.\n  const formState = useFormState({ name: field.name });\n  const state = getFieldState(field.name, formState);\n  const formDescriptionId = `${item.id}-description`;\n  const formMessageId = `${item.id}-message`;\n  const describedBy = [\n    item.mounted.description && formDescriptionId,\n    item.mounted.message && formMessageId,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  return {\n    id: item.id,\n    name: field.name,\n    formItemId: `${item.id}-control`,\n    formDescriptionId,\n    formMessageId,\n    /** The ids of the description and message that are actually rendered, or\n     *  `undefined` when neither is. */\n    describedBy: describedBy || undefined,\n    ...state,\n  };\n}\n\n// ── FormItem ─────────────────────────────────────────────────────────────────\n\nexport type FormItemProps = ComponentProps<\"div\">;\n\n/** One field's box: mints the id its label, control, description and message share. */\nexport function FormItem({ className, ...rest }: FormItemProps) {\n  const id = useId();\n  const [mounted, setMounted] = useState<Record<Described, boolean>>({\n    description: false,\n    message: false,\n  });\n  const mark = useCallback(\n    (slot: Described, on: boolean) =>\n      setMounted((prev) => (prev[slot] === on ? prev : { ...prev, [slot]: on })),\n    [],\n  );\n  const value = useMemo(() => ({ id, mounted, mark }), [id, mounted, mark]);\n  return (\n    <FormItemContext.Provider value={value}>\n      {/* `content-start`: stretched to a taller neighbour's height in a grid row, the\n          item gave the extra to its rows and its control sat lower (showcase audit). */}\n      <div data-slot=\"form-item\" {...rest} className={cn(\"grid content-start gap-1\", className)} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Report a describing node's presence to the item, so the control points at it only\n *  while it is on screen. A layout effect, so the reference lands before paint. */\nfunction useDescribes(slot: Described, on: boolean) {\n  const item = useContext(FormItemContext);\n  const mark = item?.mark;\n  useLayoutEffect(() => {\n    if (!on || !mark) return;\n    mark(slot, true);\n    return () => mark(slot, false);\n  }, [slot, on, mark]);\n}\n\n// ── FormLabel ────────────────────────────────────────────────────────────────\n\nexport type FormLabelProps = LabelProps;\n\n/**\n * The kit's {@link Label}, bound to the control by `htmlFor` and turned to the danger\n * colour while the field is invalid. `required` draws the kit's `aria-hidden` mark:\n * whether the field is required is the control's to announce.\n */\nexport function FormLabel({ className, ...rest }: FormLabelProps) {\n  const { error, formItemId } = useFormField();\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={error ? true : undefined}\n      htmlFor={formItemId}\n      {...rest}\n      className={cn(\"data-[error=true]:text-danger\", className)}\n    />\n  );\n}\n\n// ── FormControl ──────────────────────────────────────────────────────────────\n\nexport interface FormControlProps {\n  /** Exactly one element: the kit field, or a native one. It receives `id`,\n   *  `aria-describedby` and `aria-invalid`. */\n  children: ReactElement;\n}\n\ntype AriaProps = {\n  id?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: ComponentProps<\"input\">[\"aria-invalid\"];\n};\n\n/**\n * Wires its one child to the item: the `id` the label points at, `aria-describedby`\n * naming the rendered description and message, and `aria-invalid` while the field has\n * an error.\n *\n * The child's own values win where it has them (an explicit `id`, a set\n * `aria-invalid`), as they did under Radix `Slot`; its own `aria-describedby` is\n * merged in front of the item's rather than replaced.\n */\nexport function FormControl({ children }: FormControlProps) {\n  const { invalid, formItemId, describedBy } = useFormField();\n  const child = Children.only(children);\n  if (!isValidElement<AriaProps>(child)) return child;\n  const own = child.props;\n  const merged = [own[\"aria-describedby\"], describedBy].filter(Boolean).join(\" \");\n  return cloneElement(child, {\n    id: own.id ?? formItemId,\n    \"aria-describedby\": merged || undefined,\n    \"aria-invalid\": own[\"aria-invalid\"] ?? (invalid || undefined),\n  });\n}\n\n// ── FormDescription / FormMessage ────────────────────────────────────────────\n\nexport type FormDescriptionProps = ComponentProps<\"p\">;\n\n/** Standing advice under the field (\"at least twelve characters\"). */\nexport function FormDescription({ className, ...rest }: FormDescriptionProps) {\n  const { formDescriptionId } = useFormField();\n  useDescribes(\"description\", true);\n  return (\n    <p\n      data-slot=\"form-description\"\n      {...rest}\n      id={formDescriptionId}\n      className={cn(\"text-caption leading-tight text-muted\", className)}\n    />\n  );\n}\n\nexport type FormMessageProps = ComponentProps<\"p\">;\n\n/**\n * The field's error message, from the form — the kit renders no string of its own\n * here; the schema or the `rules` carry the words. Without an error it renders its\n * `children`, if any, and otherwise nothing.\n *\n * Deliberately NOT `role=\"alert\"`, for the reason the kit's `error` prop gives: the\n * message is read when focus reaches the control, which is where a field's own error\n * is wanted, and an alert would interrupt on every keystroke of a form that\n * re-validates as you type.\n */\nexport function FormMessage({ className, children, ...rest }: FormMessageProps) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error.message ?? \"\") : children;\n  const shown = body !== undefined && body !== null && body !== false && body !== \"\";\n  useDescribes(\"message\", shown);\n  if (!shown) return null;\n  return (\n    <p\n      data-slot=\"form-message\"\n      {...rest}\n      id={formMessageId}\n      className={cn(\"text-caption leading-tight text-danger\", className)}\n    >\n      {body}\n    </p>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/rhf/form-core.tsx"],"sourcesContent":["/**\n * The react-hook-form adapter: the five parts every bound field is built from, and the\n * hook they share. Behind `@eifi1/ui-kit/rhf`, which exports `Form` alone of them.\n *\n * The kit's own module since 0.34 (refactor audit 2026-10, API-6f): the bound `Rhf*`\n * fields and `RhfField` build on these parts, and import them from here. ./form is the\n * public face — `Form`; the parts left the public surface in 0.35 (deprecated in 0.34),\n * when no app imported them any more.\n *\n * ```tsx\n * <Form {...form}>\n *   <FormField control={form.control} name=\"amount\" render={({ field }) => (\n *     <FormItem>\n *       <FormLabel required>Amount</FormLabel>\n *       <FormControl>\n *         <NumberField value={field.value} onCommit={field.onChange} />\n *       </FormControl>\n *       <FormMessage />\n *     </FormItem>\n *   )} />\n * </Form>\n * ```\n *\n * The shape is shadcn's `form.tsx`, on purpose: Kastlan builds every form from that\n * file, so moving onto this one is an import line rather than a rewrite. What differs\n * is what the shadcn file gets wrong:\n *\n *  - **`aria-describedby` names only what is on screen.** shadcn always points the\n *    control at a description id, rendered or not, and at the message id whenever the\n *    field has an error, whether a message was rendered for it or not. A reference to\n *    a node that does not exist describes the field as nothing. Here the description\n *    and the message say when they are mounted, and the control points at exactly\n *    those.\n *  - **Merged, never replaced.** A control that already carries its own\n *    `aria-describedby` keeps it, first — the same rule as the kit's `error` prop\n *    (see `useFieldError` in components/field-parts.tsx).\n *  - **No Radix.** `FormControl` is a one-child `cloneElement`, not `Slot`, and the\n *    label is the kit's own `Label` — the kit carries no Radix dependency and this\n *    entry is not the place to start.\n *\n * ## Why this is its own entry\n *\n * The main barrel once shipped a react-hook-form hook (`use-rhf-wizard-step`) and\n * removed it: it made react-hook-form an install every consumer's typecheck paid for,\n * for a hook nobody called (see the wizard section of src/index.ts). This is the\n * answer to that, not a reversal of it. Nothing outside `src/rhf*` imports\n * react-hook-form — `__tests__/packaging-contract.test.ts` holds that — and the peer is\n * optional, so an app that does not use it installs nothing and imports nothing.\n *\n * ## Painting the field\n *\n * `FormControl` sets `aria-invalid` on its child. `NumberField` and the pickers paint\n * from that attribute; `Input`, `Select` and `Textarea` paint only from their\n * `invalid` prop (see its note in components/field-base.tsx: a bare attribute announces but\n * does not paint), so pass it from the render prop —\n * `<Input {...field} invalid={fieldState.invalid} />`. `FormControl` does not inject\n * `invalid` itself because its child may be a native element, which would print it\n * into the DOM as an unknown attribute.\n *\n * ## Clearing a picker: `null`, unless the picker is told otherwise\n *\n * Nothing here touches a value. `FormField` is `Controller`, so what a control hands\n * `field.onChange` is exactly what lands in the form — and what the entity pickers\n * hand it on a clear is `null`: `EntityCombobox`'s \"×\", `InlineEntityCombobox`'s \"×\"\n * and its emptied text. (`MultiEntityCombobox` and `MultiSelect` clear to `[]`.)\n *\n * A zod schema that spells \"no choice\" as `\"\"` (`z.string()`, or `z.literal(\"\")` in a\n * union) then fails on the `null`. Say so on the PICKER, not here:\n *\n * ```tsx\n * <EntityCombobox clearValue=\"\" value={field.value} onChange={field.onChange} … />\n * ```\n *\n * `clearValue` also types `onChange` (`(v: V | \"\") => void` rather than\n * `V | null`) and reads `\"\"` back as \"nothing selected\", so an initial `defaultValues`\n * of `\"\"` shows the placeholder rather than an unresolvable id. The adapter does not\n * coerce because it cannot see the schema: mapping `null` to `\"\"` for every field\n * would break every schema that wants `null` (`z.string().nullable()`), which is the\n * pickers' default for a reason — it is the one value no option can have.\n */\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactElement,\n} from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\nimport { Label, type LabelProps } from \"../components/field-base\";\nimport { cn } from \"../lib/cn\";\n\n/** The form's `useForm()` return, spread in: `<Form {...form}>`. react-hook-form's own\n *  `FormProvider`, under the name the shadcn file gave it. */\nexport const Form = FormProvider;\n\n// ── contexts ─────────────────────────────────────────────────────────────────\n\nconst FormFieldContext = createContext<{ name: string } | null>(null);\n\n/** The two optional nodes a control can be described by. */\ntype Described = \"description\" | \"message\";\n\ninterface FormItemContextValue {\n  id: string;\n  mounted: Record<Described, boolean>;\n  mark: (slot: Described, on: boolean) => void;\n}\n\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\n// ── FormField ────────────────────────────────────────────────────────────────\n\n/**\n * react-hook-form's `Controller`, with the field's name put in context for the parts\n * below it. Takes exactly `Controller`'s props.\n */\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>(props: ControllerProps<TFieldValues, TName, TTransformedValues>) {\n  const value = useMemo(() => ({ name: props.name as string }), [props.name]);\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\n// ── useFormField ─────────────────────────────────────────────────────────────\n\n/**\n * The ids and the state of the field around the caller: for a part of your own that\n * sits beside the kit's (a character counter that belongs in `aria-describedby`, a\n * label with a different look).\n *\n * Throws outside a `FormField` + `FormItem` pair. shadcn's version answered there with\n * ids like `undefined-form-item`, which label nothing and fail nowhere.\n */\nexport function useFormField() {\n  const field = useContext(FormFieldContext);\n  const item = useContext(FormItemContext);\n  if (!field) throw new Error(\"useFormField must be used inside <FormField>.\");\n  if (!item) throw new Error(\"useFormField must be used inside <FormItem>.\");\n  const { getFieldState } = useFormContext();\n  // Subscribes this part to the field's state, so a label or message re-renders when\n  // the field's error changes without the whole form doing so.\n  const formState = useFormState({ name: field.name });\n  const state = getFieldState(field.name, formState);\n  const formDescriptionId = `${item.id}-description`;\n  const formMessageId = `${item.id}-message`;\n  const describedBy = [item.mounted.description && formDescriptionId, item.mounted.message && formMessageId]\n    .filter(Boolean)\n    .join(\" \");\n  return {\n    id: item.id,\n    name: field.name,\n    formItemId: `${item.id}-control`,\n    formDescriptionId,\n    formMessageId,\n    /** The ids of the description and message that are actually rendered, or\n     *  `undefined` when neither is. */\n    describedBy: describedBy || undefined,\n    ...state,\n  };\n}\n\n// ── FormItem ─────────────────────────────────────────────────────────────────\n\nexport type FormItemProps = ComponentProps<\"div\">;\n\n/** One field's box: mints the id its label, control, description and message share. */\nexport function FormItem({ className, ...rest }: FormItemProps) {\n  const id = useId();\n  const [mounted, setMounted] = useState<Record<Described, boolean>>({\n    description: false,\n    message: false,\n  });\n  const mark = useCallback(\n    (slot: Described, on: boolean) => setMounted((prev) => (prev[slot] === on ? prev : { ...prev, [slot]: on })),\n    [],\n  );\n  const value = useMemo(() => ({ id, mounted, mark }), [id, mounted, mark]);\n  return (\n    <FormItemContext.Provider value={value}>\n      {/* `content-start`: stretched to a taller neighbour's height in a grid row, the\n          item gave the extra to its rows and its control sat lower (showcase audit). */}\n      <div data-slot=\"form-item\" {...rest} className={cn(\"grid content-start gap-1\", className)} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Report a describing node's presence to the item, so the control points at it only\n *  while it is on screen. A layout effect, so the reference lands before paint. */\nfunction useDescribes(slot: Described, on: boolean) {\n  const item = useContext(FormItemContext);\n  const mark = item?.mark;\n  useLayoutEffect(() => {\n    if (!on || !mark) return;\n    mark(slot, true);\n    return () => mark(slot, false);\n  }, [slot, on, mark]);\n}\n\n// ── FormLabel ────────────────────────────────────────────────────────────────\n\nexport type FormLabelProps = LabelProps;\n\n/**\n * The kit's {@link Label}, bound to the control by `htmlFor` and turned to the danger\n * colour while the field is invalid. `required` draws the kit's `aria-hidden` mark:\n * whether the field is required is the control's to announce.\n */\nexport function FormLabel({ className, ...rest }: FormLabelProps) {\n  const { error, formItemId } = useFormField();\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={error ? true : undefined}\n      htmlFor={formItemId}\n      {...rest}\n      className={cn(\"data-[error=true]:text-danger\", className)}\n    />\n  );\n}\n\n// ── FormControl ──────────────────────────────────────────────────────────────\n\nexport interface FormControlProps {\n  /** Exactly one element: the kit field, or a native one. It receives `id`,\n   *  `aria-describedby` and `aria-invalid`. */\n  children: ReactElement;\n}\n\ntype AriaProps = {\n  id?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: ComponentProps<\"input\">[\"aria-invalid\"];\n};\n\n/**\n * Wires its one child to the item: the `id` the label points at, `aria-describedby`\n * naming the rendered description and message, and `aria-invalid` while the field has\n * an error.\n *\n * The child's own values win where it has them (an explicit `id`, a set\n * `aria-invalid`), as they did under Radix `Slot`; its own `aria-describedby` is\n * merged in front of the item's rather than replaced.\n */\nexport function FormControl({ children }: FormControlProps) {\n  const { invalid, formItemId, describedBy } = useFormField();\n  const child = Children.only(children);\n  if (!isValidElement<AriaProps>(child)) return child;\n  const own = child.props;\n  const merged = [own[\"aria-describedby\"], describedBy].filter(Boolean).join(\" \");\n  return cloneElement(child, {\n    id: own.id ?? formItemId,\n    \"aria-describedby\": merged || undefined,\n    \"aria-invalid\": own[\"aria-invalid\"] ?? (invalid || undefined),\n  });\n}\n\n// ── FormDescription / FormMessage ────────────────────────────────────────────\n\nexport type FormDescriptionProps = ComponentProps<\"p\">;\n\n/** Standing advice under the field (\"at least twelve characters\"). */\nexport function FormDescription({ className, ...rest }: FormDescriptionProps) {\n  const { formDescriptionId } = useFormField();\n  useDescribes(\"description\", true);\n  return (\n    <p\n      data-slot=\"form-description\"\n      {...rest}\n      id={formDescriptionId}\n      className={cn(\"text-caption leading-tight text-muted\", className)}\n    />\n  );\n}\n\nexport type FormMessageProps = ComponentProps<\"p\">;\n\n/**\n * The field's error message, from the form — the kit renders no string of its own\n * here; the schema or the `rules` carry the words. Without an error it renders its\n * `children`, if any, and otherwise nothing.\n *\n * Deliberately NOT `role=\"alert\"`, for the reason the kit's `error` prop gives: the\n * message is read when focus reaches the control, which is where a field's own error\n * is wanted, and an alert would interrupt on every keystroke of a form that\n * re-validates as you type.\n */\nexport function FormMessage({ className, children, ...rest }: FormMessageProps) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error.message ?? \"\") : children;\n  const shown = body !== undefined && body !== null && body !== false && body !== \"\";\n  useDescribes(\"message\", shown);\n  if (!shown) return null;\n  return (\n    <p\n      data-slot=\"form-message\"\n      {...rest}\n      id={formMessageId}\n      className={cn(\"text-caption leading-tight text-danger\", className)}\n    >\n      {body}\n    </p>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/rhf/line-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/rhf/line-items.tsx"],"sourcesContent":["/**\n * {@link LineItems} over react-hook-form's `useFieldArray`. `@eifi1/ui-kit/rhf`.\n *\n * ```tsx\n * <RhfLineItems\n *   name=\"components\"\n *   newItem={() => ({ type: \"net_rent\", amount: null, validFrom: \"\" })}\n *   minItems={1}\n *   columns={[\n *     { key: \"type\", header: \"Type\", render: ({ name, label }) => (\n *       <RhfSelect name={`${name}.type`} options={TYPES} aria-label={label} />\n *     ) },\n *     { key: \"amount\", header: \"Amount\", width: \"8rem\", align: \"end\", render: ({ name, label }) => (\n *       <RhfMoneyField name={`${name}.amount`} aria-label={label} />\n *     ) },\n *   ]}\n *   totals={{ amount: formatMoney(total) }}\n * />\n * ```\n *\n * The rows are the array's `fields` (keyed by their `id`, as react-hook-form asks),\n * Add appends `newItem()`, remove is `remove(index)`, and an error on the array\n * itself — the `rules` here, or a resolver's `lines: \"At least two lines\"` — is the\n * list's `error`. Each cell's `render` gets `name`, the row's path\n * (`\"components.2\"`), to bind its field to.\n *\n * `summary`, `fieldLabels`, `narrowColumns`, `removePlacement` and `removeAlign` pass\n * through to {@link LineItems}. With\n * `fieldLabels=\"floating\"` a cell's `fieldLabel` is the column's name; the bound\n * fields' own `label` is a label ABOVE the control, so for the floating\n * one render the kit field through `RhfField`:\n * `render={({ field, invalid }) => <Input label={fieldLabel} aria-label={label} {...field} invalid={invalid} />}`.\n */\nimport type { ReactNode } from \"react\";\nimport {\n  useFieldArray,\n  useFormState,\n  type FieldArray,\n  type FieldArrayPath,\n  type FieldArrayWithId,\n  type FieldValues,\n  type UseFieldArrayProps,\n} from \"react-hook-form\";\nimport {\n  LineItems,\n  type LineItemCellContext,\n  type LineItemsColumn,\n  type LineItemsProps,\n} from \"../components/line-items\";\n\n/** A cell's context, with the row's path in the form. */\nexport interface RhfLineItemCellContext<TItem, TArrayName extends string>\n  extends LineItemCellContext<TItem> {\n  /** The row's path: `${name}.${index}` — bind the cell's field to\n   *  `` `${name}.amount` ``. */\n  name: `${TArrayName}.${number}`;\n}\n\nexport interface RhfLineItemsColumn<TItem, TArrayName extends string>\n  extends Omit<LineItemsColumn<TItem>, \"render\"> {\n  render: (ctx: RhfLineItemCellContext<TItem, TArrayName>) => ReactNode;\n}\n\nexport interface RhfLineItemsProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,\n  TTransformed = TFieldValues,\n> extends Omit<\n    LineItemsProps<FieldArrayWithId<TFieldValues, TArrayName, \"id\">>,\n    \"items\" | \"columns\" | \"onAdd\" | \"onRemove\" | \"getKey\"\n  > {\n  name: TArrayName;\n  /** `form.control`. Optional under `<Form {...form}>`. */\n  control?: UseFieldArrayProps<TFieldValues, TArrayName, \"id\", TTransformed>[\"control\"];\n  /** `useFieldArray`'s `rules` (`minLength`, `validate` …); its message is the list's\n   *  error. */\n  rules?: UseFieldArrayProps<TFieldValues, TArrayName, \"id\", TTransformed>[\"rules\"];\n  columns: readonly RhfLineItemsColumn<FieldArrayWithId<TFieldValues, TArrayName, \"id\">, TArrayName>[];\n  /** A new row's values. Omitted: no add button. */\n  newItem?: () => FieldArray<TFieldValues, TArrayName>;\n  /** `false`: no remove buttons. Default `true`. */\n  removable?: boolean;\n}\n\n/** The message of an error at `path` in react-hook-form's errors tree: the array's\n *  own (`root`, from `rules`) or one a resolver put on the array. */\nfunction arrayError(errors: unknown, path: string): string | undefined {\n  let node: unknown = errors;\n  for (const key of path.split(\".\")) {\n    if (node === null || typeof node !== \"object\") return undefined;\n    node = (node as Record<string, unknown>)[key];\n  }\n  if (node === null || typeof node !== \"object\") return undefined;\n  const { root, message } = node as { root?: { message?: unknown }; message?: unknown };\n  const text = root?.message ?? message;\n  return typeof text === \"string\" && text !== \"\" ? text : undefined;\n}\n\n/** {@link LineItems} bound to a field array. See the module note. */\nexport function RhfLineItems<\n  TFieldValues extends FieldValues = FieldValues,\n  TArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,\n  TTransformed = TFieldValues,\n>({\n  name,\n  control,\n  rules,\n  columns,\n  newItem,\n  removable = true,\n  error,\n  ...rest\n}: RhfLineItemsProps<TFieldValues, TArrayName, TTransformed>) {\n  const { fields, append, remove } = useFieldArray<TFieldValues, TArrayName, \"id\", TTransformed>({\n    control,\n    name,\n    rules,\n  });\n  const { errors } = useFormState({ control, name: name as never });\n  const bound: LineItemsColumn<FieldArrayWithId<TFieldValues, TArrayName, \"id\">>[] = columns.map(\n    ({ render, ...column }) => ({\n      ...column,\n      render: (ctx) => render({ ...ctx, name: `${name}.${ctx.index}` as `${TArrayName}.${number}` }),\n    }),\n  );\n  return (\n    <LineItems\n      {...rest}\n      items={fields}\n      columns={bound}\n      getKey={(field) => field.id}\n      onAdd={newItem ? () => append(newItem()) : undefined}\n      onRemove={removable ? (index) => remove(index) : undefined}\n      error={error ?? arrayError(errors, name)}\n    />\n  );\n}\n"],"mappings":";AA8HI;AA5FJ;AAAA,EACE;AAAA,EACA;AAAA,OAMK;AACP;AAAA,EACE;AAAA,OAIK;AAsCP,SAAS,WAAW,QAAiB,MAAkC;AACrE,MAAI,OAAgB;AACpB,aAAW,OAAO,KAAK,MAAM,GAAG,GAAG;AACjC,QAAI,SAAS,QAAQ,OAAO,SAAS,SAAU,QAAO;AACtD,WAAQ,KAAiC,GAAG;AAAA,EAC9C;AACA,MAAI,SAAS,QAAQ,OAAO,SAAS,SAAU,QAAO;AACtD,QAAM,EAAE,MAAM,QAAQ,IAAI;AAC1B,QAAM,OAAO,MAAM,WAAW;AAC9B,SAAO,OAAO,SAAS,YAAY,SAAS,KAAK,OAAO;AAC1D;AAGO,SAAS,aAId;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAA8D;AAC5D,QAAM,EAAE,QAAQ,QAAQ,OAAO,IAAI,cAA4D;AAAA,IAC7F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,OAAO,IAAI,aAAa,EAAE,SAAS,KAAoB,CAAC;AAChE,QAAM,QAA6E,QAAQ;AAAA,IACzF,CAAC,EAAE,QAAQ,GAAG,OAAO,OAAO;AAAA,MAC1B,GAAG;AAAA,MACH,QAAQ,CAAC,QAAQ,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,IAAI,IAAI,KAAK,GAAgC,CAAC;AAAA,IAC/F;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ,CAAC,UAAU,MAAM;AAAA,MACzB,OAAO,UAAU,MAAM,OAAO,QAAQ,CAAC,IAAI;AAAA,MAC3C,UAAU,YAAY,CAAC,UAAU,OAAO,KAAK,IAAI;AAAA,MACjD,OAAO,SAAS,WAAW,QAAQ,IAAI;AAAA;AAAA,EACzC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/rhf/line-items.tsx"],"sourcesContent":["/**\n * {@link LineItems} over react-hook-form's `useFieldArray`. `@eifi1/ui-kit/rhf`.\n *\n * ```tsx\n * <RhfLineItems\n *   name=\"components\"\n *   newItem={() => ({ type: \"net_rent\", amount: null, validFrom: \"\" })}\n *   minItems={1}\n *   columns={[\n *     { key: \"type\", header: \"Type\", render: ({ name, label }) => (\n *       <RhfSelect name={`${name}.type`} options={TYPES} aria-label={label} />\n *     ) },\n *     { key: \"amount\", header: \"Amount\", width: \"8rem\", align: \"end\", render: ({ name, label }) => (\n *       <RhfMoneyField name={`${name}.amount`} aria-label={label} />\n *     ) },\n *   ]}\n *   totals={{ amount: formatMoney(total) }}\n * />\n * ```\n *\n * The rows are the array's `fields` (keyed by their `id`, as react-hook-form asks),\n * Add appends `newItem()`, remove is `remove(index)`, and an error on the array\n * itself — the `rules` here, or a resolver's `lines: \"At least two lines\"` — is the\n * list's `error`. Each cell's `render` gets `name`, the row's path\n * (`\"components.2\"`), to bind its field to.\n *\n * `summary`, `fieldLabels`, `narrowColumns`, `removePlacement` and `removeAlign` pass\n * through to {@link LineItems}. With\n * `fieldLabels=\"floating\"` a cell's `fieldLabel` is the column's name; the bound\n * fields' own `label` is a label ABOVE the control, so for the floating\n * one render the kit field through `RhfField`:\n * `render={({ field, invalid }) => <Input label={fieldLabel} aria-label={label} {...field} invalid={invalid} />}`.\n */\nimport type { ReactNode } from \"react\";\nimport {\n  useFieldArray,\n  useFormState,\n  type FieldArray,\n  type FieldArrayPath,\n  type FieldArrayWithId,\n  type FieldValues,\n  type UseFieldArrayProps,\n} from \"react-hook-form\";\nimport {\n  LineItems,\n  type LineItemCellContext,\n  type LineItemsColumn,\n  type LineItemsProps,\n} from \"../components/line-items\";\n\n/** A cell's context, with the row's path in the form. */\nexport interface RhfLineItemCellContext<TItem, TArrayName extends string> extends LineItemCellContext<TItem> {\n  /** The row's path: `${name}.${index}` — bind the cell's field to\n   *  `` `${name}.amount` ``. */\n  name: `${TArrayName}.${number}`;\n}\n\nexport interface RhfLineItemsColumn<TItem, TArrayName extends string> extends Omit<LineItemsColumn<TItem>, \"render\"> {\n  render: (ctx: RhfLineItemCellContext<TItem, TArrayName>) => ReactNode;\n}\n\nexport interface RhfLineItemsProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,\n  TTransformed = TFieldValues,\n> extends Omit<\n  LineItemsProps<FieldArrayWithId<TFieldValues, TArrayName, \"id\">>,\n  \"items\" | \"columns\" | \"onAdd\" | \"onRemove\" | \"getKey\"\n> {\n  name: TArrayName;\n  /** `form.control`. Optional under `<Form {...form}>`. */\n  control?: UseFieldArrayProps<TFieldValues, TArrayName, \"id\", TTransformed>[\"control\"];\n  /** `useFieldArray`'s `rules` (`minLength`, `validate` …); its message is the list's\n   *  error. */\n  rules?: UseFieldArrayProps<TFieldValues, TArrayName, \"id\", TTransformed>[\"rules\"];\n  columns: readonly RhfLineItemsColumn<FieldArrayWithId<TFieldValues, TArrayName, \"id\">, TArrayName>[];\n  /** A new row's values. Omitted: no add button. */\n  newItem?: () => FieldArray<TFieldValues, TArrayName>;\n  /** `false`: no remove buttons. Default `true`. */\n  removable?: boolean;\n}\n\n/** The message of an error at `path` in react-hook-form's errors tree: the array's\n *  own (`root`, from `rules`) or one a resolver put on the array. */\nfunction arrayError(errors: unknown, path: string): string | undefined {\n  let node: unknown = errors;\n  for (const key of path.split(\".\")) {\n    if (node === null || typeof node !== \"object\") return undefined;\n    node = (node as Record<string, unknown>)[key];\n  }\n  if (node === null || typeof node !== \"object\") return undefined;\n  const { root, message } = node as { root?: { message?: unknown }; message?: unknown };\n  const text = root?.message ?? message;\n  return typeof text === \"string\" && text !== \"\" ? text : undefined;\n}\n\n/** {@link LineItems} bound to a field array. See the module note. */\nexport function RhfLineItems<\n  TFieldValues extends FieldValues = FieldValues,\n  TArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,\n  TTransformed = TFieldValues,\n>({\n  name,\n  control,\n  rules,\n  columns,\n  newItem,\n  removable = true,\n  error,\n  ...rest\n}: RhfLineItemsProps<TFieldValues, TArrayName, TTransformed>) {\n  const { fields, append, remove } = useFieldArray<TFieldValues, TArrayName, \"id\", TTransformed>({\n    control,\n    name,\n    rules,\n  });\n  const { errors } = useFormState({ control, name: name as never });\n  const bound: LineItemsColumn<FieldArrayWithId<TFieldValues, TArrayName, \"id\">>[] = columns.map(\n    ({ render, ...column }) => ({\n      ...column,\n      render: (ctx) => render({ ...ctx, name: `${name}.${ctx.index}` as `${TArrayName}.${number}` }),\n    }),\n  );\n  return (\n    <LineItems\n      {...rest}\n      items={fields}\n      columns={bound}\n      getKey={(field) => field.id}\n      onAdd={newItem ? () => append(newItem()) : undefined}\n      onRemove={removable ? (index) => remove(index) : undefined}\n      error={error ?? arrayError(errors, name)}\n    />\n  );\n}\n"],"mappings":";AA4HI;AA1FJ;AAAA,EACE;AAAA,EACA;AAAA,OAMK;AACP;AAAA,EACE;AAAA,OAIK;AAoCP,SAAS,WAAW,QAAiB,MAAkC;AACrE,MAAI,OAAgB;AACpB,aAAW,OAAO,KAAK,MAAM,GAAG,GAAG;AACjC,QAAI,SAAS,QAAQ,OAAO,SAAS,SAAU,QAAO;AACtD,WAAQ,KAAiC,GAAG;AAAA,EAC9C;AACA,MAAI,SAAS,QAAQ,OAAO,SAAS,SAAU,QAAO;AACtD,QAAM,EAAE,MAAM,QAAQ,IAAI;AAC1B,QAAM,OAAO,MAAM,WAAW;AAC9B,SAAO,OAAO,SAAS,YAAY,SAAS,KAAK,OAAO;AAC1D;AAGO,SAAS,aAId;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAA8D;AAC5D,QAAM,EAAE,QAAQ,QAAQ,OAAO,IAAI,cAA4D;AAAA,IAC7F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,OAAO,IAAI,aAAa,EAAE,SAAS,KAAoB,CAAC;AAChE,QAAM,QAA6E,QAAQ;AAAA,IACzF,CAAC,EAAE,QAAQ,GAAG,OAAO,OAAO;AAAA,MAC1B,GAAG;AAAA,MACH,QAAQ,CAAC,QAAQ,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,IAAI,IAAI,KAAK,GAAgC,CAAC;AAAA,IAC/F;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ,CAAC,UAAU,MAAM;AAAA,MACzB,OAAO,UAAU,MAAM,OAAO,QAAQ,CAAC,IAAI;AAAA,MAC3C,UAAU,YAAY,CAAC,UAAU,OAAO,KAAK,IAAI;AAAA,MACjD,OAAO,SAAS,WAAW,QAAQ,IAAI;AAAA;AAAA,EACzC;AAEJ;","names":[]}

package/dist/rhf/use-rhf-wizard-step.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/rhf/use-rhf-wizard-step.ts"],"sourcesContent":["/**\n * The bridge between a react-hook-form step and the wizard's Next gate.\n * `@eifi1/ui-kit/rhf`.\n *\n * ```tsx\n * function AddressStep({ onUpdate }: { onUpdate: (v: Address) => void }) {\n *   const form = useForm<Address>({ defaultValues });\n *   useRhfWizardStep(form, { onValid: onUpdate });\n *   return <Form {...form}>…</Form>;\n * }\n * ```\n *\n * Inside a `<StepperNav>` the hook registers the step's validator with the wizard, so\n * Next (and Finish on a form-bearing last step) runs it: on success the values go to\n * `onValid` and the wizard advances; on failure the bound fields show their inline\n * messages, react-hook-form focuses the first field in error, and the wizard stays\n * put — and, since the result carries no per-field errors, says its \"fill in the\n * required fields\" line so the button did not seem to do nothing. It also RETURNS the\n * validator, for a nav of your own outside `<StepperNav>` (where there is no wizard\n * context to register with, so nothing is registered).\n *\n * Two modes:\n *\n *  - **The whole form** (no `fields`): `form.handleSubmit`, exactly as kastlan's\n *    `use-rhf-wizard-step.ts` — every rule and the resolver run, `onValid` receives\n *    the TRANSFORMED values (a zod `.transform()` included), and focus follows the\n *    form's own `shouldFocusError` (on by default).\n *  - **Some fields** (`fields: [\"iban\", \"bic\"]`): `form.trigger(fields)`, for a wizard\n *    that keeps one form across several steps, each of which validates only what it\n *    shows. The first of those fields in error is focused (`shouldFocus`; the control\n *    has to take `field.ref`), errors on fields of later steps are not raised, and\n *    `onValid` receives `form.getValues()` — the untransformed values, because a\n *    resolver's output is only produced for the whole form.\n *\n * Both callbacks are read through refs, so the validator is registered once per form\n * however the caller writes them (an inline `(v) => onUpdate(v)` is the usual case).\n *\n * The positional `useRhfWizardStep(form, onValid)` of the hook kastlan kept is the\n * whole-form mode, and still accepted.\n *\n * Why it lives here and not in `@eifi1/ui-kit/wizard`: it imports react-hook-form,\n * which only this entry may (see packaging-contract).\n */\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { FieldPath, FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { useOptionalWizardContext } from \"../wizard/wizard-context\";\n\nexport type RhfWizardStepOptions<\n  TFieldValues extends FieldValues,\n  TTransformed = TFieldValues,\n> =\n  | {\n      /** Validate only these fields — the step's share of a form that spans steps. */\n      fields: readonly FieldPath<TFieldValues>[];\n      /** Called with `form.getValues()` when the fields pass, before the wizard\n       *  advances. */\n      onValid?: (values: TFieldValues) => void;\n    }\n  | {\n      /** Omitted: validate the whole form through `handleSubmit`. */\n      fields?: undefined;\n      /** Called with the form's (transformed) values when it passes, before the\n       *  wizard advances. */\n      onValid?: (values: TTransformed) => void;\n    };\n\n/**\n * Connects `form` to the wizard's step validation and returns the step's validator.\n * See the module note for the two modes.\n */\nexport function useRhfWizardStep<\n  TFieldValues extends FieldValues,\n  TContext = unknown,\n  TTransformed = TFieldValues,\n>(\n  form: UseFormReturn<TFieldValues, TContext, TTransformed>,\n  options?:\n    | RhfWizardStepOptions<TFieldValues, TTransformed>\n    | ((values: TTransformed) => void),\n): () => Promise<boolean> {\n  const opts = typeof options === \"function\" ? { onValid: options } : (options ?? {});\n  const optsRef = useRef(opts);\n  useEffect(() => {\n    optsRef.current = opts;\n  });\n\n  const validate = useCallback(async (): Promise<boolean> => {\n    const current = optsRef.current;\n    if (current.fields) {\n      const ok = await form.trigger([...current.fields], { shouldFocus: true });\n      if (ok) current.onValid?.(form.getValues());\n      return ok;\n    }\n    const onValid = current.onValid as ((values: TTransformed) => void) | undefined;\n    let ok = false;\n    await form.handleSubmit(\n      (values) => {\n        ok = true;\n        onValid?.(values);\n      },\n      () => {\n        ok = false;\n      },\n    )();\n    return ok;\n  }, [form]);\n\n  const wizard = useOptionalWizardContext();\n  const register = wizard?.registerStepValidate;\n  useEffect(() => register?.(validate), [register, validate]);\n\n  return validate;\n}\n"],"mappings":";AA2CA,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,gCAAgC;AAyBlC,SAAS,iBAKd,MACA,SAGwB;AACxB,QAAM,OAAO,OAAO,YAAY,aAAa,EAAE,SAAS,QAAQ,IAAK,WAAW,CAAC;AACjF,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,CAAC;AAED,QAAM,WAAW,YAAY,YAA8B;AACzD,UAAM,UAAU,QAAQ;AACxB,QAAI,QAAQ,QAAQ;AAClB,YAAMA,MAAK,MAAM,KAAK,QAAQ,CAAC,GAAG,QAAQ,MAAM,GAAG,EAAE,aAAa,KAAK,CAAC;AACxE,UAAIA,IAAI,SAAQ,UAAU,KAAK,UAAU,CAAC;AAC1C,aAAOA;AAAA,IACT;AACA,UAAM,UAAU,QAAQ;AACxB,QAAI,KAAK;AACT,UAAM,KAAK;AAAA,MACT,CAAC,WAAW;AACV,aAAK;AACL,kBAAU,MAAM;AAAA,MAClB;AAAA,MACA,MAAM;AACJ,aAAK;AAAA,MACP;AAAA,IACF,EAAE;AACF,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS,yBAAyB;AACxC,QAAM,WAAW,QAAQ;AACzB,YAAU,MAAM,WAAW,QAAQ,GAAG,CAAC,UAAU,QAAQ,CAAC;AAE1D,SAAO;AACT;","names":["ok"]}
+{"version":3,"sources":["../../src/rhf/use-rhf-wizard-step.ts"],"sourcesContent":["/**\n * The bridge between a react-hook-form step and the wizard's Next gate.\n * `@eifi1/ui-kit/rhf`.\n *\n * ```tsx\n * function AddressStep({ onUpdate }: { onUpdate: (v: Address) => void }) {\n *   const form = useForm<Address>({ defaultValues });\n *   useRhfWizardStep(form, { onValid: onUpdate });\n *   return <Form {...form}>…</Form>;\n * }\n * ```\n *\n * Inside a `<StepperNav>` the hook registers the step's validator with the wizard, so\n * Next (and Finish on a form-bearing last step) runs it: on success the values go to\n * `onValid` and the wizard advances; on failure the bound fields show their inline\n * messages, react-hook-form focuses the first field in error, and the wizard stays\n * put — and, since the result carries no per-field errors, says its \"fill in the\n * required fields\" line so the button did not seem to do nothing. It also RETURNS the\n * validator, for a nav of your own outside `<StepperNav>` (where there is no wizard\n * context to register with, so nothing is registered).\n *\n * Two modes:\n *\n *  - **The whole form** (no `fields`): `form.handleSubmit`, exactly as kastlan's\n *    `use-rhf-wizard-step.ts` — every rule and the resolver run, `onValid` receives\n *    the TRANSFORMED values (a zod `.transform()` included), and focus follows the\n *    form's own `shouldFocusError` (on by default).\n *  - **Some fields** (`fields: [\"iban\", \"bic\"]`): `form.trigger(fields)`, for a wizard\n *    that keeps one form across several steps, each of which validates only what it\n *    shows. The first of those fields in error is focused (`shouldFocus`; the control\n *    has to take `field.ref`), errors on fields of later steps are not raised, and\n *    `onValid` receives `form.getValues()` — the untransformed values, because a\n *    resolver's output is only produced for the whole form.\n *\n * Both callbacks are read through refs, so the validator is registered once per form\n * however the caller writes them (an inline `(v) => onUpdate(v)` is the usual case).\n *\n * The positional `useRhfWizardStep(form, onValid)` of the hook kastlan kept is the\n * whole-form mode, and still accepted.\n *\n * Why it lives here and not in `@eifi1/ui-kit/wizard`: it imports react-hook-form,\n * which only this entry may (see packaging-contract).\n */\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { FieldPath, FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { useOptionalWizardContext } from \"../wizard/wizard-context\";\n\nexport type RhfWizardStepOptions<TFieldValues extends FieldValues, TTransformed = TFieldValues> =\n  | {\n      /** Validate only these fields — the step's share of a form that spans steps. */\n      fields: readonly FieldPath<TFieldValues>[];\n      /** Called with `form.getValues()` when the fields pass, before the wizard\n       *  advances. */\n      onValid?: (values: TFieldValues) => void;\n    }\n  | {\n      /** Omitted: validate the whole form through `handleSubmit`. */\n      fields?: undefined;\n      /** Called with the form's (transformed) values when it passes, before the\n       *  wizard advances. */\n      onValid?: (values: TTransformed) => void;\n    };\n\n/**\n * Connects `form` to the wizard's step validation and returns the step's validator.\n * See the module note for the two modes.\n */\nexport function useRhfWizardStep<TFieldValues extends FieldValues, TContext = unknown, TTransformed = TFieldValues>(\n  form: UseFormReturn<TFieldValues, TContext, TTransformed>,\n  options?: RhfWizardStepOptions<TFieldValues, TTransformed> | ((values: TTransformed) => void),\n): () => Promise<boolean> {\n  const opts = typeof options === \"function\" ? { onValid: options } : (options ?? {});\n  const optsRef = useRef(opts);\n  useEffect(() => {\n    optsRef.current = opts;\n  });\n\n  const validate = useCallback(async (): Promise<boolean> => {\n    const current = optsRef.current;\n    if (current.fields) {\n      const ok = await form.trigger([...current.fields], { shouldFocus: true });\n      if (ok) current.onValid?.(form.getValues());\n      return ok;\n    }\n    const onValid = current.onValid as ((values: TTransformed) => void) | undefined;\n    let ok = false;\n    await form.handleSubmit(\n      (values) => {\n        ok = true;\n        onValid?.(values);\n      },\n      () => {\n        ok = false;\n      },\n    )();\n    return ok;\n  }, [form]);\n\n  const wizard = useOptionalWizardContext();\n  const register = wizard?.registerStepValidate;\n  useEffect(() => register?.(validate), [register, validate]);\n\n  return validate;\n}\n"],"mappings":";AA2CA,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,gCAAgC;AAsBlC,SAAS,iBACd,MACA,SACwB;AACxB,QAAM,OAAO,OAAO,YAAY,aAAa,EAAE,SAAS,QAAQ,IAAK,WAAW,CAAC;AACjF,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,CAAC;AAED,QAAM,WAAW,YAAY,YAA8B;AACzD,UAAM,UAAU,QAAQ;AACxB,QAAI,QAAQ,QAAQ;AAClB,YAAMA,MAAK,MAAM,KAAK,QAAQ,CAAC,GAAG,QAAQ,MAAM,GAAG,EAAE,aAAa,KAAK,CAAC;AACxE,UAAIA,IAAI,SAAQ,UAAU,KAAK,UAAU,CAAC;AAC1C,aAAOA;AAAA,IACT;AACA,UAAM,UAAU,QAAQ;AACxB,QAAI,KAAK;AACT,UAAM,KAAK;AAAA,MACT,CAAC,WAAW;AACV,aAAK;AACL,kBAAU,MAAM;AAAA,MAClB;AAAA,MACA,MAAM;AACJ,aAAK;AAAA,MACP;AAAA,IACF,EAAE;AACF,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS,yBAAyB;AACxC,QAAM,WAAW,QAAQ;AACzB,YAAU,MAAM,WAAW,QAAQ,GAAG,CAAC,UAAU,QAAQ,CAAC;AAE1D,SAAO;AACT;","names":["ok"]}

package/dist/search/command-palette.js

@@ -262,71 +262,80 @@ function CommandPalette({
               ] }),
               failed && !loading && /* @__PURE__ */ jsx("div", { role: "alert", className: "px-3 py-6 text-center text-sm text-muted", children: l.error ?? DEFAULT_COMMAND_PALETTE_LABELS.error }),
               !failed && results.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted", children: l.empty }),
-              /* @__PURE__ */ jsx("ul", { id: listId, ref: listRef, role: "listbox", "aria-label": dialogName, className: "min-h-0 flex-1 overflow-y-auto py-1", children: groups.map(({ group, items }, groupIndex) => /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    id: groupId(groupIndex),
-                    role: "presentation",
-                    className: "px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-placeholder",
-                    children: group
-                  }
-                ),
-                /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": groupId(groupIndex), children: items.map((item) => {
-                  if (item.kind === "status") {
-                    return /* @__PURE__ */ jsxs(
-                      "li",
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  id: listId,
+                  ref: listRef,
+                  role: "listbox",
+                  "aria-label": dialogName,
+                  className: "min-h-0 flex-1 overflow-y-auto py-1",
+                  children: groups.map(({ group, items }, groupIndex) => /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
                       {
+                        id: groupId(groupIndex),
                         role: "presentation",
+                        className: "px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-placeholder",
+                        children: group
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": groupId(groupIndex), children: items.map((item) => {
+                      if (item.kind === "status") {
+                        return /* @__PURE__ */ jsxs(
+                          "li",
+                          {
+                            role: "presentation",
+                            className: cn(
+                              "flex items-center gap-2.5 px-3 text-xs text-placeholder",
+                              comfortable ? "min-h-11 py-2.5" : "py-2"
+                            ),
+                            children: [
+                              item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
+                              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+                            ]
+                          },
+                          item.id
+                        );
+                      }
+                      const idx = flatIndex.get(item) ?? -1;
+                      const isActive = idx === active;
+                      const redact = item.redact ?? redactLabels;
+                      const shared = {
+                        id: itemId(item.id),
+                        role: "option",
+                        "aria-selected": isActive,
+                        "data-index": idx,
+                        onMouseMove: () => setActive(idx),
                         className: cn(
-                          "flex items-center gap-2.5 px-3 text-xs text-placeholder",
-                          comfortable ? "min-h-11 py-2.5" : "py-2"
-                        ),
-                        children: [
-                          item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: item.icon }),
-                          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label })
-                        ]
-                      },
-                      item.id
-                    );
-                  }
-                  const idx = flatIndex.get(item) ?? -1;
-                  const isActive = idx === active;
-                  const redact = item.redact ?? redactLabels;
-                  const shared = {
-                    id: itemId(item.id),
-                    role: "option",
-                    "aria-selected": isActive,
-                    "data-index": idx,
-                    onMouseMove: () => setActive(idx),
-                    className: cn(
-                      "flex w-full items-center gap-2.5 px-3 text-start",
-                      comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
-                      isActive ? "bg-active text-primary" : "text-secondary"
-                    )
-                  };
-                  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-                    item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-placeholder", children: item.icon }),
-                    /* @__PURE__ */ jsx("span", { "data-private": redact || void 0, className: "min-w-0 flex-1 truncate", children: item.label }),
-                    item.hint && /* @__PURE__ */ jsx("span", { "data-private": redact || void 0, className: "shrink-0 text-xs text-placeholder", children: item.hint })
-                  ] });
-                  return /* @__PURE__ */ jsx("li", { role: "presentation", children: item.href ? /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      ...shared,
-                      href: item.href,
-                      draggable: false,
-                      onClick: (e) => {
-                        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
-                          return;
-                        e.preventDefault();
-                        choose(item);
-                      },
-                      children: inner
-                    }
-                  ) : /* @__PURE__ */ jsx("button", { type: "button", ...shared, onClick: () => choose(item), children: inner }) }, item.id);
-                }) })
-              ] }, group)) }),
+                          "flex w-full items-center gap-2.5 px-3 text-start",
+                          comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
+                          isActive ? "bg-active text-primary" : "text-secondary"
+                        )
+                      };
+                      const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+                        item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-placeholder", children: item.icon }),
+                        /* @__PURE__ */ jsx("span", { "data-private": redact || void 0, className: "min-w-0 flex-1 truncate", children: item.label }),
+                        item.hint && /* @__PURE__ */ jsx("span", { "data-private": redact || void 0, className: "shrink-0 text-xs text-placeholder", children: item.hint })
+                      ] });
+                      return /* @__PURE__ */ jsx("li", { role: "presentation", children: item.href ? /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          ...shared,
+                          href: item.href,
+                          draggable: false,
+                          onClick: (e) => {
+                            if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                            e.preventDefault();
+                            choose(item);
+                          },
+                          children: inner
+                        }
+                      ) : /* @__PURE__ */ jsx("button", { type: "button", ...shared, onClick: () => choose(item), children: inner }) }, item.id);
+                    }) })
+                  ] }, group))
+                }
+              ),
               l.hint && /* @__PURE__ */ jsx("div", { className: "border-t border-subtle px-3 py-1.5 text-caption text-placeholder", children: l.hint })
             ]
           }

package/dist/search/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/search/command-palette.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CornerDownLeft, Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"../components/field-base\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_COMMAND_PALETTE_LABELS } from \"./command-palette-labels\";\n\nexport interface CommandItem {\n  id: string;\n  /** Primary text. */\n  label: string;\n  /** Secondary text on the right (e.g. an amount, a date, a group hint). */\n  hint?: string;\n  /** Heading this item is grouped under. */\n  group: string;\n  /** Leading icon / element. */\n  icon?: ReactNode;\n  /** Invoked when the item is chosen (navigate, run an action, …). */\n  onSelect: () => void;\n  /** Where this item leads, when it is a navigation rather than an action. Renders\n   *  the row as a real anchor so it can be middle-/⌘-clicked into a new tab\n   *  (Keksdose feedback #451); `onSelect` still runs for a plain click and for ↵, so\n   *  in-app navigation stays client-side. `href` only adds what the browser can do\n   *  with a link and JavaScript cannot fake — the rejected alternative, an\n   *  `onAuxClick` calling `window.open`, gets the middle click and nothing else. */\n  href?: string;\n  /** Marks this row's label and hint `data-private`, so session replay and screenshot\n   *  tooling masks them — a payee, an account name, an amount. Overrides the palette's\n   *  {@link CommandPaletteProps.redactLabels} either way, so `false` un-masks one\n   *  harmless row (\"Settings\") in a palette that masks by default. */\n  redact?: boolean;\n  /**\n   * `\"status\"` makes the row a line of text rather than a choice — a group's\n   * \"Searching…\" while its source is still out, or its error. It is skipped by the\n   * arrow keys and ↵, has no hover highlight, and its `onSelect` is never called.\n   * Default `\"option\"`.\n   */\n  kind?: \"option\" | \"status\";\n}\n\n/** Group items preserving first-seen group order; `flat` is the navigable rows only. */\nfunction groupItems(items: CommandItem[]) {\n  const order: string[] = [];\n  const byGroup = new Map<string, CommandItem[]>();\n  for (const item of items) {\n    if (!byGroup.has(item.group)) {\n      byGroup.set(item.group, []);\n      order.push(item.group);\n    }\n    byGroup.get(item.group)!.push(item);\n  }\n  const flat = order.flatMap((g) => byGroup.get(g)!).filter((item) => item.kind !== \"status\");\n  return {\n    groups: order.map((g) => ({ group: g, items: byGroup.get(g)! })),\n    flat,\n    /** Each selectable item's position in `flat` — its `data-index` and keyboard slot. */\n    flatIndex: new Map(flat.map((item, index) => [item, index])),\n  };\n}\n\nexport interface CommandPaletteLabels {\n  placeholder: string;\n  empty: string;\n  loading: string;\n  /** Hint shown in the footer, e.g. \"↑↓ to navigate · ↵ to select · esc to close\". */\n  hint?: string;\n  /**\n   * Accessible name of the dialog itself. It used to borrow `placeholder`, which is\n   * written to sit greyed-out in an empty box (\"Search…\", \"Type a command\"), not to\n   * name a window — and a reader heard the ellipsis read out as part of the name.\n   *\n   * Optional, unlike `placeholder`, so a translation annotated as\n   * `CommandPaletteLabels` keeps compiling; the default always carries it.\n   */\n  dialog?: string;\n  /**\n   * Shown in place of the results when the `search` provider throws or its promise\n   * rejects. Optional for the same reason as `dialog`; the default always carries it.\n   */\n  error?: string;\n  /** Names the \"×\" that empties the field. Optional like `dialog`. */\n  clear?: string;\n  /** Names the button that commits the typed text when `searchOn=\"submit\"`. */\n  submit?: string;\n  /** Names the close button of the full-screen phone presentation, which has no\n   *  backdrop to tap and, on a phone, no Escape key. */\n  close?: string;\n}\n\n// Defined in ./command-palette-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COMMAND_PALETTE_LABELS };\n\n/**\n * How tall the palette's rows are. `\"compact\"` (the default) is the desktop list the\n * palette always drew, 36px a row; `\"comfortable\"` gives every row the kit's 44px touch\n * target (`min-h-11`) and body-size text — keksdose's phone search, where a 36px row\n * under a thumb picks its neighbour.\n */\nexport type CommandPaletteDensity = \"compact\" | \"comfortable\";\n\n/** A provider's answer is a promise — the only case with anything to wait for. */\nconst isThenable = (value: unknown): value is PromiseLike<unknown> =>\n  typeof (value as PromiseLike<unknown> | null)?.then === \"function\";\n\n/** The defaults minus `dialog`, so a resolved `dialog` means someone SUPPLIED one —\n *  see the dialog's `aria-label` for why that distinction matters. */\nconst { dialog: DEFAULT_DIALOG_NAME, ...DEFAULTS_WITHOUT_DIALOG } = DEFAULT_COMMAND_PALETTE_LABELS;\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onClose: () => void;\n  /**\n   * Returns results for a query (called debounced as the user types; an empty\n   * query is allowed — return defaults like pages/recent). Sync or async; stale\n   * async responses are ignored.\n   *\n   * A SYNCHRONOUS provider (one returning an array, not a promise) never shows the\n   * \"Searching…\" hint: its answer is there the moment it is asked, and the hint only\n   * flashed through the debounce before results that were never late — keksdose's\n   * transaction search filters a list already in memory. The palette tells the two\n   * apart by what the provider RETURNS, call by call, so there is no prop to keep in\n   * step with the implementation: an async provider shows the hint from the first\n   * promise on (and during the debounce of every later query), a sync one never.\n   *\n   * Its IDENTITY is not a re-run signal — it is read through a ref, so the palette\n   * never re-searches merely because the caller rebuilt the callback. That is\n   * deliberate: a provider closing over a list rendered from a query allocates a new\n   * function on most renders, and re-running the search on each would make typing\n   * stutter. Use {@link CommandPaletteProps.revision} when the DATA behind the\n   * provider changes.\n   */\n  search: (query: string) => CommandItem[] | Promise<CommandItem[]>;\n  /**\n   * Anything whose change means the current results are out of date — typically the\n   * arrays the provider searches over. Compared by identity (as an effect dependency\n   * would be), so pass stable references: a `data = []` default allocates a fresh\n   * array on every render while a query is pending and would re-search forever.\n   *\n   * Without it, a provider whose data arrives AFTER the palette opened never gets\n   * asked again: the user's last keystroke settles the debounce, the queries resolve a\n   * moment later, and the groups they would have contributed are simply absent until\n   * another keystroke. That is the ordinary first open on a cold cache.\n   */\n  revision?: unknown;\n  /**\n   * The search text, CONTROLLED. Keksdose binds it to the URL's `q`, so a search\n   * survives a reload, can be shared as a link, and Back walks through it — none of\n   * which state inside the palette can do.\n   *\n   * Leave it out and the palette keeps its own, as before, starting empty on every\n   * open. Given, it is never reset on open: the owner decides what an open shows, and\n   * a palette that blanked the URL's `q` each time would fight its own address bar.\n   * `onQueryChange` is then how a keystroke gets anywhere, since it is the only writer.\n   */\n  query?: string;\n  /** Every edit of the field's text. Fires in both modes — uncontrolled, it only\n   *  observes. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * When the typed text becomes THE query — the one `search` runs on and\n   * `onQueryChange` reports.\n   *\n   * - `\"input\"` (default): every keystroke, debounced for the search, as before.\n   * - `\"submit\"`: typing edits a draft; the query is committed by ↵ or the submit\n   *   button beside the field. Until then the results stay on the last committed query\n   *   and `onQueryChange` stays quiet — which is what an owner binding `query` to the\n   *   URL's `q` needs, or every keystroke re-filters the page behind and pushes history.\n   *   ↵ with a draft that differs from the committed query COMMITS; ↵ with nothing new\n   *   typed chooses the highlighted row, as in `\"input\"` mode. The draft follows any\n   *   outside change of the committed query (Back through the URL), and an uncommitted\n   *   draft is dropped when the palette is closed.\n   *\n   * The clear \"×\" commits the empty query in both modes: an emptied box over results\n   * (or a page) still filtered by the old text is the stuck state Keksdose #423 was.\n   */\n  searchOn?: \"input\" | \"submit\";\n  /** Mark every row's label and hint `data-private` (see {@link CommandItem.redact},\n   *  which overrides it per row). Off by default. */\n  redactLabels?: boolean;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the palette fills the screen:\n   * no inset, no rounded panel, the field pinned at the top inside the safe areas and\n   * the list scrolling under it, with a close button since there is no backdrop to tap.\n   * On by default — a top-centred card at 70vh leaves little room once the keyboard is\n   * up. `false` keeps the card on every viewport.\n   */\n  fullScreenOnPhone?: boolean;\n  /** Row height — see {@link CommandPaletteDensity}. Default `\"compact\"`. */\n  density?: CommandPaletteDensity;\n  labels?: LabelOverride<CommandPaletteLabels>;\n}\n\n// Defined in ./use-command-key, so `GlobalSearch` can listen for ⌘K without loading the\n// palette before it is opened (0.34, MOD-1).\nexport { useCommandKey } from \"./use-command-key\";\n\n/**\n * A ⌘K-style command palette: a top-centred modal with a search field and a\n * grouped, keyboard-navigable result list. Domain-free — the app supplies\n * results via the `search` provider (pages, actions, records, …); each result\n * carries its own `onSelect`.\n */\nexport function CommandPalette({\n  open,\n  onClose,\n  search,\n  revision,\n  query: queryProp,\n  onQueryChange,\n  searchOn = \"input\",\n  redactLabels = false,\n  fullScreenOnPhone = true,\n  density = \"compact\",\n  labels,\n}: CommandPaletteProps) {\n  const l = useKitLabels(\"commandPalette\", DEFAULTS_WITHOUT_DIALOG, labels);\n  // `dialog` is new, and until it existed the dialog was named by `placeholder`. An\n  // app that translated `placeholder` and has not heard of `dialog` would otherwise\n  // go from a German name to an English \"Search\" on update — so a translated\n  // placeholder keeps doing the job until a `dialog` is supplied.\n  const dialogName =\n    l.dialog ??\n    (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);\n  const [ownQuery, setOwnQuery] = useState(\"\");\n  const controlled = queryProp !== undefined;\n  const query = controlled ? queryProp : ownQuery;\n  const setQuery = (next: string) => {\n    if (!controlled) setOwnQuery(next);\n    onQueryChange?.(next);\n  };\n  const submitMode = searchOn === \"submit\";\n  // The field's text in `\"submit\"` mode. It follows the committed query whenever that\n  // changes — adjusted during render, React's pattern for state derived from a prop,\n  // rather than in an effect that would paint the stale draft first.\n  const [draft, setDraft] = useState(query);\n  const [draftBase, setDraftBase] = useState(query);\n  if (draftBase !== query) {\n    setDraftBase(query);\n    setDraft(query);\n  }\n  const fieldText = submitMode ? draft : query;\n  const commit = (next: string) => {\n    setDraft(next);\n    setQuery(next);\n  };\n  const dirty = submitMode && draft !== query;\n  const isPhone = usePhoneLayout() && fullScreenOnPhone;\n  const [results, setResults] = useState<CommandItem[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const [active, setActive] = useState(0);\n  // Per instance: these were the literal \"command-palette-list\" / \"command-item-<id>\",\n  // so two palettes on one page (an app-wide one and a scoped one) pointed each\n  // other's `aria-controls` and `aria-activedescendant` at the wrong list.\n  const uid = useId();\n  const listId = `${uid}-list`;\n  const itemId = (id: string) => `${uid}-item-${id}`;\n  const groupId = (index: number) => `${uid}-group-${index}`;\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The latest `search`, callable from the debounced effect without being one of its\n  // dependencies — `revision` is what re-runs it (see the prop's docstring).\n  const runSearch = useEffectEvent((q: string) => search(q));\n  const reqId = useRef(0);\n  /** What the provider's last answer was: a promise (`false`), an array (`true`), or\n   *  not known yet. Only a provider known to be async shows \"Searching…\" while the\n   *  debounce runs — see `search`. */\n  const syncRef = useRef<boolean | undefined>(undefined);\n  /** The query the results on screen answer, and the row highlighted in them — so a\n   *  re-run for the SAME query (a `revision` change: a source streaming in) keeps the\n   *  highlight on its row instead of throwing it back to the top mid-arrow. */\n  const shownQuery = useRef<string | null>(null);\n  const activeIdRef = useRef<string | undefined>(undefined);\n\n  // Back dismisses the palette (Keksdose feedback #172). Declared with the other\n  // hooks, above the `if (!open) return null` below — a hook past a conditional\n  // return changes the hook order between renders. Passing `open` rather than\n  // mounting-while-open is what lets it sit here.\n  useOverlayHistory(open, onClose);\n\n  // A modal like any other: Tab stays inside, the page behind does not scroll, and\n  // focus goes back to whatever opened it — the palette used to drop it on <body>.\n  // Initial focus is the field, not the container: typing is the only reason to open it.\n  useFocusTrap(dialogRef, { active: open, initialFocus: () => inputRef.current });\n  useBodyScrollLock(open);\n\n  // Reset when opened — the palette's OWN text only; a controlled query belongs to\n  // its owner (see the prop). Adjusted during render on the closed-to-open transition\n  // (starting from \"closed\", so a palette mounted open resets too). `controlled` is\n  // read at the open, not watched: a caller switching modes while the palette is open\n  // is not a reason to wipe what is typed.\n  const [wasOpen, setWasOpen] = useState(false);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) {\n      if (!controlled) setOwnQuery(\"\");\n      // An uncommitted draft does not outlive the open it was typed in.\n      setDraft(controlled ? query : \"\");\n      setActive(0);\n    }\n  }\n  // The ref half of that reset: results from a previous open do not carry a\n  // highlight into this one.\n  useEffect(() => {\n    if (open) shownQuery.current = null;\n  }, [open]);\n\n  // Debounced, race-safe search.\n  useEffect(() => {\n    if (!open) return;\n    const id = ++reqId.current;\n    if (syncRef.current === false) setLoading(true);\n    const run = async () => {\n      try {\n        const answer = runSearch(query);\n        syncRef.current = !isThenable(answer);\n        if (!syncRef.current) setLoading(true);\n        const r = await answer;\n        if (reqId.current === id) {\n          const keep = shownQuery.current === query ? activeIdRef.current : undefined;\n          const at = keep === undefined ? -1 : groupItems(r).flat.findIndex((item) => item.id === keep);\n          shownQuery.current = query;\n          setResults(r);\n          setFailed(false);\n          setActive(Math.max(at, 0));\n        }\n      } catch (err) {\n        // There was no catch: the previous query's results stayed on screen as if they\n        // answered this one, and the rejection went unhandled. Clear them and say so.\n        if (reqId.current === id) {\n          shownQuery.current = null;\n          setResults([]);\n          setFailed(true);\n          setActive(0);\n        }\n        console.error(\"CommandPalette: search failed\", err);\n      } finally {\n        if (reqId.current === id) setLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n    // `revision`, not `search`: see the prop's docstring. The debounce is re-armed on a\n    // revision change, which is right — data arriving is not a keystroke and there is\n    // nothing to feel laggy about.\n  }, [query, open, revision]);\n\n  // Group results, preserving first-seen group order; keep a flat list for nav.\n  const { groups, flat, flatIndex } = useMemo(() => groupItems(results), [results]);\n  useEffect(() => {\n    activeIdRef.current = flat[active]?.id;\n  });\n\n  const choose = (item: CommandItem | undefined) => {\n    if (!item) return;\n    onClose();\n    item.onSelect();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, flat.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      // The Enter that confirms an IME composition is the IME's (BUG-9).\n      if (isImeEnter(e)) return;\n      e.preventDefault();\n      if (dirty) commit(draft);\n      else choose(flat[active]);\n    }\n  };\n\n  // A layer on the kit's Escape stack while open (Wave 2, DUP-1), taken on the whole\n  // dialog, not only the field: once Tab has moved focus to a row (or a footer\n  // control), Escape used to do nothing at all. It closed without stopping the key, so\n  // a dialog the palette was opened from closed with it.\n  useDismissLayer(open, onClose);\n  const onDialogKeyDown = (e: React.KeyboardEvent) => {\n    takeEscape(e);\n  };\n\n  // Keep the active row scrolled into view.\n  useEffect(() => {\n    const el = listRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`);\n    // Optional-called, as in combobox-core: jsdom has no scrollIntoView, and every\n    // consumer's tests crashed on the first highlighted row (kastlan stubbed it).\n    el?.scrollIntoView?.({ block: \"nearest\" });\n  }, [active]);\n\n  if (!open) return null;\n\n  const comfortable = density === \"comfortable\";\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer-only backdrop dismiss; Escape is the keyboard path\n    <div\n      className={cn(\n        \"fixed inset-0 z-[70] flex items-start justify-center bg-black/40\",\n        isPhone ? \"p-0\" : \"p-4 pt-[10vh]\",\n      )}\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape from anywhere in the dialog */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={dialogName}\n        // The trap's fallback target when the field is not there to take focus.\n        tabIndex={-1}\n        // Escape bubbling up from anything inside — a dialog is where it belongs.\n        onKeyDown={onDialogKeyDown}\n        data-fullscreen={isPhone || undefined}\n        className={cn(\n          \"flex w-full flex-col overflow-hidden bg-surface outline-none\",\n          isPhone\n            ? \"h-full\"\n            : \"max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl\",\n        )}\n        // Full screen means edge to edge, so the notch, the home indicator and the\n        // rounded corners are the panel's to keep clear of.\n        style={\n          isPhone\n            ? {\n                paddingTop: \"max(0px, env(safe-area-inset-top))\",\n                paddingBottom: \"max(0px, env(safe-area-inset-bottom))\",\n                paddingLeft: \"max(0px, env(safe-area-inset-left))\",\n                paddingRight: \"max(0px, env(safe-area-inset-right))\",\n              }\n            : undefined\n        }\n      >\n        <div className=\"flex shrink-0 items-center gap-2 border-b border-subtle px-3\">\n          <Search className=\"size-4 shrink-0 text-placeholder\" />\n          <input\n            ref={inputRef}\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-activedescendant={flat[active] ? itemId(flat[active].id) : undefined}\n            value={fieldText}\n            onChange={(e) => (submitMode ? setDraft(e.target.value) : setQuery(e.target.value))}\n            onKeyDown={onKeyDown}\n            placeholder={l.placeholder}\n            enterKeyHint={submitMode ? \"search\" : undefined}\n            className={cn(\n              \"w-full bg-transparent py-3 outline-none placeholder:text-placeholder text-primary\",\n              // 16px on a phone, or iOS zooms the page in on focus — and on any other\n              // touch screen too (a tablet's popover), FIELD_TOUCH_TEXT (§10.1).\n              isPhone ? \"text-base\" : cn(\"text-sm\", FIELD_TOUCH_TEXT),\n            )}\n          />\n          {loading && <span className=\"shrink-0 text-caption text-placeholder\">{l.loading}</span>}\n          {fieldText !== \"\" && (\n            <button\n              type=\"button\"\n              aria-label={l.clear ?? DEFAULT_COMMAND_PALETTE_LABELS.clear}\n              onClick={() => {\n                commit(\"\");\n                // Clearing starts the next query far more often than it ends this one.\n                inputRef.current?.focus();\n              }}\n              className=\"shrink-0 rounded p-1 text-placeholder hover:text-secondary\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n          {dirty && (\n            <button\n              type=\"button\"\n              aria-label={l.submit ?? DEFAULT_COMMAND_PALETTE_LABELS.submit}\n              onClick={() => {\n                commit(draft);\n                inputRef.current?.focus();\n              }}\n              className=\"shrink-0 rounded p-1 text-secondary hover:text-primary\"\n            >\n              <CornerDownLeft className=\"size-4\" />\n            </button>\n          )}\n          {isPhone && (\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className=\"-me-1 shrink-0 rounded px-1 py-2 text-sm text-secondary hover:text-primary\"\n            >\n              {l.close ?? DEFAULT_COMMAND_PALETTE_LABELS.close}\n            </button>\n          )}\n        </div>\n\n        {/* The status lines sit outside the listbox: a listbox owns options and groups,\n            and \"No results\" is neither. */}\n        {failed && !loading && (\n          <div role=\"alert\" className=\"px-3 py-6 text-center text-sm text-muted\">\n            {l.error ?? DEFAULT_COMMAND_PALETTE_LABELS.error}\n          </div>\n        )}\n        {/* `results`, not `flat`: a group whose only row is its \"Searching…\" line is not\n            an empty result. */}\n        {!failed && results.length === 0 && !loading && (\n          <div className=\"px-3 py-6 text-center text-sm text-muted\">{l.empty}</div>\n        )}\n        {/* Listbox grouping: each group is a `role=\"group\"` named by its heading, and\n            the list markup in between is presentational so the listbox's children are\n            groups and options only — as a plain <li>/<ul> tree a reader announced\n            \"list, 2 items\" between options and never tied the heading to its rows. */}\n        <ul id={listId} ref={listRef} role=\"listbox\" aria-label={dialogName} className=\"min-h-0 flex-1 overflow-y-auto py-1\">\n          {groups.map(({ group, items }, groupIndex) => (\n            <li key={group} role=\"presentation\">\n              <div\n                id={groupId(groupIndex)}\n                role=\"presentation\"\n                className=\"px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-placeholder\"\n              >\n                {group}\n              </div>\n              <ul role=\"group\" aria-labelledby={groupId(groupIndex)}>\n                {items.map((item) => {\n                  if (item.kind === \"status\") {\n                    return (\n                      <li\n                        key={item.id}\n                        role=\"presentation\"\n                        className={cn(\n                          \"flex items-center gap-2.5 px-3 text-xs text-placeholder\",\n                          comfortable ? \"min-h-11 py-2.5\" : \"py-2\",\n                        )}\n                      >\n                        {item.icon && <span className=\"flex size-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n                        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                      </li>\n                    );\n                  }\n                  const idx = flatIndex.get(item) ?? -1;\n                  const isActive = idx === active;\n                  const redact = item.redact ?? redactLabels;\n                  // Written once and worn by either tag below, so the anchor and the\n                  // button can never drift apart in looks or in listbox semantics.\n                  // `role=\"option\"` on an <a href> is fine: the browser's middle-click\n                  // behaviour keys off the element, not the ARIA role.\n                  const shared = {\n                    id: itemId(item.id),\n                    role: \"option\" as const,\n                    \"aria-selected\": isActive,\n                    \"data-index\": idx,\n                    onMouseMove: () => setActive(idx),\n                    className: cn(\n                      \"flex w-full items-center gap-2.5 px-3 text-start\",\n                      comfortable ? \"min-h-11 py-2.5 text-base\" : \"py-2 text-sm\",\n                      isActive\n                        ? \"bg-active text-primary\"\n                        : \"text-secondary\",\n                    ),\n                  };\n                  const inner = (\n                    <>\n                      {item.icon && (\n                        <span className=\"flex size-4 shrink-0 items-center justify-center text-placeholder\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <span data-private={redact || undefined} className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                      </span>\n                      {item.hint && (\n                        <span data-private={redact || undefined} className=\"shrink-0 text-xs text-placeholder\">\n                          {item.hint}\n                        </span>\n                      )}\n                    </>\n                  );\n                  return (\n                    <li key={item.id} role=\"presentation\">\n                      {item.href ? (\n                        <a\n                          {...shared}\n                          href={item.href}\n                          draggable={false}\n                          onClick={(e) => {\n                            // A modified click belongs to the browser (feedback\n                            // #451) — and the palette deliberately stays OPEN for\n                            // it: ⌘-clicking three results in a row is the reason to\n                            // want this, and closing after the first would undo it.\n                            if (\n                              e.button !== 0 ||\n                              e.metaKey ||\n                              e.ctrlKey ||\n                              e.shiftKey ||\n                              e.altKey\n                            )\n                              return;\n                            e.preventDefault();\n                            choose(item);\n                          }}\n                        >\n                          {inner}\n                        </a>\n                      ) : (\n                        <button type=\"button\" {...shared} onClick={() => choose(item)}>\n                          {inner}\n                        </button>\n                      )}\n                    </li>\n                  );\n                })}\n              </ul>\n            </li>\n          ))}\n        </ul>\n\n        {l.hint && (\n          <div className=\"border-t border-subtle px-3 py-1.5 text-caption text-placeholder\">\n            {l.hint}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AA6bQ,SA4HY,UA3HV,KADF;AA7bR,SAAS,WAAW,gBAAgB,OAAO,SAAS,QAAQ,gBAAgB;AAE5E,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,QAAQ,SAAS;AAC1C,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,YAAY,uBAAuB;AAC5C,SAAS,kBAAkB;AAC3B,SAAS,oBAAwC;AACjD,SAAS,sCAAsC;AAoC/C,SAAS,WAAW,OAAsB;AACxC,QAAM,QAAkB,CAAC;AACzB,QAAM,UAAU,oBAAI,IAA2B;AAC/C,aAAW,QAAQ,OAAO;AACxB,QAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,GAAG;AAC5B,cAAQ,IAAI,KAAK,OAAO,CAAC,CAAC;AAC1B,YAAM,KAAK,KAAK,KAAK;AAAA,IACvB;AACA,YAAQ,IAAI,KAAK,KAAK,EAAG,KAAK,IAAI;AAAA,EACpC;AACA,QAAM,OAAO,MAAM,QAAQ,CAAC,MAAM,QAAQ,IAAI,CAAC,CAAE,EAAE,OAAO,CAAC,SAAS,KAAK,SAAS,QAAQ;AAC1F,SAAO;AAAA,IACL,QAAQ,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,QAAQ,IAAI,CAAC,EAAG,EAAE;AAAA,IAC/D;AAAA;AAAA,IAEA,WAAW,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC;AAAA,EAC7D;AACF;AA2CA,MAAM,aAAa,CAAC,UAClB,OAAQ,OAAuC,SAAS;AAI1D,MAAM,EAAE,QAAQ,qBAAqB,GAAG,wBAAwB,IAAI;AAwFpE,SAAS,qBAAqB;AAQvB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV;AACF,GAAwB;AACtB,QAAM,IAAI,aAAa,kBAAkB,yBAAyB,MAAM;AAKxE,QAAM,aACJ,EAAE,WACD,EAAE,gBAAgB,+BAA+B,cAAc,EAAE,cAAc;AAClF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,aAAa,cAAc;AACjC,QAAM,QAAQ,aAAa,YAAY;AACvC,QAAM,WAAW,CAAC,SAAiB;AACjC,QAAI,CAAC,WAAY,aAAY,IAAI;AACjC,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,aAAa,aAAa;AAIhC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,MAAI,cAAc,OAAO;AACvB,iBAAa,KAAK;AAClB,aAAS,KAAK;AAAA,EAChB;AACA,QAAM,YAAY,aAAa,QAAQ;AACvC,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,IAAI;AACb,aAAS,IAAI;AAAA,EACf;AACA,QAAM,QAAQ,cAAc,UAAU;AACtC,QAAM,UAAU,eAAe,KAAK;AACpC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,CAAC,CAAC;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAItC,QAAM,MAAM,MAAM;AAClB,QAAM,SAAS,GAAG,GAAG;AACrB,QAAM,SAAS,CAAC,OAAe,GAAG,GAAG,SAAS,EAAE;AAChD,QAAM,UAAU,CAAC,UAAkB,GAAG,GAAG,UAAU,KAAK;AACxD,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,OAAyB,IAAI;AAG7C,QAAM,YAAY,eAAe,CAAC,MAAc,OAAO,CAAC,CAAC;AACzD,QAAM,QAAQ,OAAO,CAAC;AAItB,QAAM,UAAU,OAA4B,MAAS;AAIrD,QAAM,aAAa,OAAsB,IAAI;AAC7C,QAAM,cAAc,OAA2B,MAAS;AAMxD,oBAAkB,MAAM,OAAO;AAK/B,eAAa,WAAW,EAAE,QAAQ,MAAM,cAAc,MAAM,SAAS,QAAQ,CAAC;AAC9E,oBAAkB,IAAI;AAOtB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,MAAM;AACR,UAAI,CAAC,WAAY,aAAY,EAAE;AAE/B,eAAS,aAAa,QAAQ,EAAE;AAChC,gBAAU,CAAC;AAAA,IACb;AAAA,EACF;AAGA,YAAU,MAAM;AACd,QAAI,KAAM,YAAW,UAAU;AAAA,EACjC,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE,MAAM;AACnB,QAAI,QAAQ,YAAY,MAAO,YAAW,IAAI;AAC9C,UAAM,MAAM,YAAY;AACtB,UAAI;AACF,cAAM,SAAS,UAAU,KAAK;AAC9B,gBAAQ,UAAU,CAAC,WAAW,MAAM;AACpC,YAAI,CAAC,QAAQ,QAAS,YAAW,IAAI;AACrC,cAAM,IAAI,MAAM;AAChB,YAAI,MAAM,YAAY,IAAI;AACxB,gBAAM,OAAO,WAAW,YAAY,QAAQ,YAAY,UAAU;AAClE,gBAAM,KAAK,SAAS,SAAY,KAAK,WAAW,CAAC,EAAE,KAAK,UAAU,CAAC,SAAS,KAAK,OAAO,IAAI;AAC5F,qBAAW,UAAU;AACrB,qBAAW,CAAC;AACZ,oBAAU,KAAK;AACf,oBAAU,KAAK,IAAI,IAAI,CAAC,CAAC;AAAA,QAC3B;AAAA,MACF,SAAS,KAAK;AAGZ,YAAI,MAAM,YAAY,IAAI;AACxB,qBAAW,UAAU;AACrB,qBAAW,CAAC,CAAC;AACb,oBAAU,IAAI;AACd,oBAAU,CAAC;AAAA,QACb;AACA,gBAAQ,MAAM,iCAAiC,GAAG;AAAA,MACpD,UAAE;AACA,YAAI,MAAM,YAAY,GAAI,YAAW,KAAK;AAAA,MAC5C;AAAA,IACF;AACA,UAAM,IAAI,WAAW,KAAK,QAAQ,MAAM,CAAC;AACzC,WAAO,MAAM,aAAa,CAAC;AAAA,EAI7B,GAAG,CAAC,OAAO,MAAM,QAAQ,CAAC;AAG1B,QAAM,EAAE,QAAQ,MAAM,UAAU,IAAI,QAAQ,MAAM,WAAW,OAAO,GAAG,CAAC,OAAO,CAAC;AAChF,YAAU,MAAM;AACd,gBAAY,UAAU,KAAK,MAAM,GAAG;AAAA,EACtC,CAAC;AAED,QAAM,SAAS,CAAC,SAAkC;AAChD,QAAI,CAAC,KAAM;AACX,YAAQ;AACR,SAAK,SAAS;AAAA,EAChB;AAEA,QAAM,YAAY,CAAC,MAA2B;AAC5C,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAe;AACjB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC;AAAA,IACnD,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAe;AACjB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,IACrC,WAAW,EAAE,QAAQ,SAAS;AAE5B,UAAI,WAAW,CAAC,EAAG;AACnB,QAAE,eAAe;AACjB,UAAI,MAAO,QAAO,KAAK;AAAA,UAClB,QAAO,KAAK,MAAM,CAAC;AAAA,IAC1B;AAAA,EACF;AAMA,kBAAgB,MAAM,OAAO;AAC7B,QAAM,kBAAkB,CAAC,MAA2B;AAClD,eAAW,CAAC;AAAA,EACd;AAGA,YAAU,MAAM;AACd,UAAM,KAAK,QAAQ,SAAS,cAA2B,gBAAgB,MAAM,IAAI;AAGjF,QAAI,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,EAC3C,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,cAAc,YAAY;AAChC,SAAO;AAAA;AAAA,IAEL;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA,aAAa,CAAC,MAAM;AAClB,cAAI,EAAE,WAAW,EAAE,cAAe,SAAQ;AAAA,QAC5C;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAW;AAAA,YACX,cAAY;AAAA,YAEZ,UAAU;AAAA,YAEV,WAAW;AAAA,YACX,mBAAiB,WAAW;AAAA,YAC5B,WAAW;AAAA,cACT;AAAA,cACA,UACI,WACA;AAAA,YACN;AAAA,YAGA,OACE,UACI;AAAA,cACE,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,aAAa;AAAA,cACb,cAAc;AAAA,YAChB,IACA;AAAA,YAGN;AAAA,mCAAC,SAAI,WAAU,gEACb;AAAA,oCAAC,UAAO,WAAU,oCAAmC;AAAA,gBACrD;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,MAAK;AAAA,oBACL,iBAAa;AAAA,oBACb,iBAAe;AAAA,oBACf,yBAAuB,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM,EAAE,EAAE,IAAI;AAAA,oBAChE,OAAO;AAAA,oBACP,UAAU,CAAC,MAAO,aAAa,SAAS,EAAE,OAAO,KAAK,IAAI,SAAS,EAAE,OAAO,KAAK;AAAA,oBACjF;AAAA,oBACA,aAAa,EAAE;AAAA,oBACf,cAAc,aAAa,WAAW;AAAA,oBACtC,WAAW;AAAA,sBACT;AAAA;AAAA;AAAA,sBAGA,UAAU,cAAc,GAAG,WAAW,gBAAgB;AAAA,oBACxD;AAAA;AAAA,gBACF;AAAA,gBACC,WAAW,oBAAC,UAAK,WAAU,0CAA0C,YAAE,SAAQ;AAAA,gBAC/E,cAAc,MACb;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,EAAE,SAAS,+BAA+B;AAAA,oBACtD,SAAS,MAAM;AACb,6BAAO,EAAE;AAET,+BAAS,SAAS,MAAM;AAAA,oBAC1B;AAAA,oBACA,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,gBAED,SACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,EAAE,UAAU,+BAA+B;AAAA,oBACvD,SAAS,MAAM;AACb,6BAAO,KAAK;AACZ,+BAAS,SAAS,MAAM;AAAA,oBAC1B;AAAA,oBACA,WAAU;AAAA,oBAEV,8BAAC,kBAAe,WAAU,UAAS;AAAA;AAAA,gBACrC;AAAA,gBAED,WACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,WAAU;AAAA,oBAET,YAAE,SAAS,+BAA+B;AAAA;AAAA,gBAC7C;AAAA,iBAEJ;AAAA,cAIC,UAAU,CAAC,WACV,oBAAC,SAAI,MAAK,SAAQ,WAAU,4CACzB,YAAE,SAAS,+BAA+B,OAC7C;AAAA,cAID,CAAC,UAAU,QAAQ,WAAW,KAAK,CAAC,WACnC,oBAAC,SAAI,WAAU,4CAA4C,YAAE,OAAM;AAAA,cAMrE,oBAAC,QAAG,IAAI,QAAQ,KAAK,SAAS,MAAK,WAAU,cAAY,YAAY,WAAU,uCAC5E,iBAAO,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,eAC7B,qBAAC,QAAe,MAAK,gBACnB;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI,QAAQ,UAAU;AAAA,oBACtB,MAAK;AAAA,oBACL,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBACA,oBAAC,QAAG,MAAK,SAAQ,mBAAiB,QAAQ,UAAU,GACjD,gBAAM,IAAI,CAAC,SAAS;AACnB,sBAAI,KAAK,SAAS,UAAU;AAC1B,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,MAAK;AAAA,wBACL,WAAW;AAAA,0BACT;AAAA,0BACA,cAAc,oBAAoB;AAAA,wBACpC;AAAA,wBAEC;AAAA,+BAAK,QAAQ,oBAAC,UAAK,WAAU,oDAAoD,eAAK,MAAK;AAAA,0BAC5F,oBAAC,UAAK,WAAU,2BAA2B,eAAK,OAAM;AAAA;AAAA;AAAA,sBARjD,KAAK;AAAA,oBASZ;AAAA,kBAEJ;AACA,wBAAM,MAAM,UAAU,IAAI,IAAI,KAAK;AACnC,wBAAM,WAAW,QAAQ;AACzB,wBAAM,SAAS,KAAK,UAAU;AAK9B,wBAAM,SAAS;AAAA,oBACb,IAAI,OAAO,KAAK,EAAE;AAAA,oBAClB,MAAM;AAAA,oBACN,iBAAiB;AAAA,oBACjB,cAAc;AAAA,oBACd,aAAa,MAAM,UAAU,GAAG;AAAA,oBAChC,WAAW;AAAA,sBACT;AAAA,sBACA,cAAc,8BAA8B;AAAA,sBAC5C,WACI,2BACA;AAAA,oBACN;AAAA,kBACF;AACA,wBAAM,QACJ,iCACG;AAAA,yBAAK,QACJ,oBAAC,UAAK,WAAU,qEACb,eAAK,MACR;AAAA,oBAEF,oBAAC,UAAK,gBAAc,UAAU,QAAW,WAAU,2BAChD,eAAK,OACR;AAAA,oBACC,KAAK,QACJ,oBAAC,UAAK,gBAAc,UAAU,QAAW,WAAU,qCAChD,eAAK,MACR;AAAA,qBAEJ;AAEF,yBACE,oBAAC,QAAiB,MAAK,gBACpB,eAAK,OACJ;AAAA,oBAAC;AAAA;AAAA,sBACE,GAAG;AAAA,sBACJ,MAAM,KAAK;AAAA,sBACX,WAAW;AAAA,sBACX,SAAS,CAAC,MAAM;AAKd,4BACE,EAAE,WAAW,KACb,EAAE,WACF,EAAE,WACF,EAAE,YACF,EAAE;AAEF;AACF,0BAAE,eAAe;AACjB,+BAAO,IAAI;AAAA,sBACb;AAAA,sBAEC;AAAA;AAAA,kBACH,IAEA,oBAAC,YAAO,MAAK,UAAU,GAAG,QAAQ,SAAS,MAAM,OAAO,IAAI,GACzD,iBACH,KA5BK,KAAK,EA8Bd;AAAA,gBAEJ,CAAC,GACH;AAAA,mBAjGO,KAkGT,CACD,GACH;AAAA,cAEC,EAAE,QACD,oBAAC,SAAI,WAAU,oEACZ,YAAE,MACL;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/search/command-palette.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CornerDownLeft, Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"../components/field-base\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_COMMAND_PALETTE_LABELS } from \"./command-palette-labels\";\n\nexport interface CommandItem {\n  id: string;\n  /** Primary text. */\n  label: string;\n  /** Secondary text on the right (e.g. an amount, a date, a group hint). */\n  hint?: string;\n  /** Heading this item is grouped under. */\n  group: string;\n  /** Leading icon / element. */\n  icon?: ReactNode;\n  /** Invoked when the item is chosen (navigate, run an action, …). */\n  onSelect: () => void;\n  /** Where this item leads, when it is a navigation rather than an action. Renders\n   *  the row as a real anchor so it can be middle-/⌘-clicked into a new tab\n   *  (Keksdose feedback #451); `onSelect` still runs for a plain click and for ↵, so\n   *  in-app navigation stays client-side. `href` only adds what the browser can do\n   *  with a link and JavaScript cannot fake — the rejected alternative, an\n   *  `onAuxClick` calling `window.open`, gets the middle click and nothing else. */\n  href?: string;\n  /** Marks this row's label and hint `data-private`, so session replay and screenshot\n   *  tooling masks them — a payee, an account name, an amount. Overrides the palette's\n   *  {@link CommandPaletteProps.redactLabels} either way, so `false` un-masks one\n   *  harmless row (\"Settings\") in a palette that masks by default. */\n  redact?: boolean;\n  /**\n   * `\"status\"` makes the row a line of text rather than a choice — a group's\n   * \"Searching…\" while its source is still out, or its error. It is skipped by the\n   * arrow keys and ↵, has no hover highlight, and its `onSelect` is never called.\n   * Default `\"option\"`.\n   */\n  kind?: \"option\" | \"status\";\n}\n\n/** Group items preserving first-seen group order; `flat` is the navigable rows only. */\nfunction groupItems(items: CommandItem[]) {\n  const order: string[] = [];\n  const byGroup = new Map<string, CommandItem[]>();\n  for (const item of items) {\n    if (!byGroup.has(item.group)) {\n      byGroup.set(item.group, []);\n      order.push(item.group);\n    }\n    byGroup.get(item.group)!.push(item);\n  }\n  const flat = order.flatMap((g) => byGroup.get(g)!).filter((item) => item.kind !== \"status\");\n  return {\n    groups: order.map((g) => ({ group: g, items: byGroup.get(g)! })),\n    flat,\n    /** Each selectable item's position in `flat` — its `data-index` and keyboard slot. */\n    flatIndex: new Map(flat.map((item, index) => [item, index])),\n  };\n}\n\nexport interface CommandPaletteLabels {\n  placeholder: string;\n  empty: string;\n  loading: string;\n  /** Hint shown in the footer, e.g. \"↑↓ to navigate · ↵ to select · esc to close\". */\n  hint?: string;\n  /**\n   * Accessible name of the dialog itself. It used to borrow `placeholder`, which is\n   * written to sit greyed-out in an empty box (\"Search…\", \"Type a command\"), not to\n   * name a window — and a reader heard the ellipsis read out as part of the name.\n   *\n   * Optional, unlike `placeholder`, so a translation annotated as\n   * `CommandPaletteLabels` keeps compiling; the default always carries it.\n   */\n  dialog?: string;\n  /**\n   * Shown in place of the results when the `search` provider throws or its promise\n   * rejects. Optional for the same reason as `dialog`; the default always carries it.\n   */\n  error?: string;\n  /** Names the \"×\" that empties the field. Optional like `dialog`. */\n  clear?: string;\n  /** Names the button that commits the typed text when `searchOn=\"submit\"`. */\n  submit?: string;\n  /** Names the close button of the full-screen phone presentation, which has no\n   *  backdrop to tap and, on a phone, no Escape key. */\n  close?: string;\n}\n\n// Defined in ./command-palette-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COMMAND_PALETTE_LABELS };\n\n/**\n * How tall the palette's rows are. `\"compact\"` (the default) is the desktop list the\n * palette always drew, 36px a row; `\"comfortable\"` gives every row the kit's 44px touch\n * target (`min-h-11`) and body-size text — keksdose's phone search, where a 36px row\n * under a thumb picks its neighbour.\n */\nexport type CommandPaletteDensity = \"compact\" | \"comfortable\";\n\n/** A provider's answer is a promise — the only case with anything to wait for. */\nconst isThenable = (value: unknown): value is PromiseLike<unknown> =>\n  typeof (value as PromiseLike<unknown> | null)?.then === \"function\";\n\n/** The defaults minus `dialog`, so a resolved `dialog` means someone SUPPLIED one —\n *  see the dialog's `aria-label` for why that distinction matters. */\nconst { dialog: DEFAULT_DIALOG_NAME, ...DEFAULTS_WITHOUT_DIALOG } = DEFAULT_COMMAND_PALETTE_LABELS;\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onClose: () => void;\n  /**\n   * Returns results for a query (called debounced as the user types; an empty\n   * query is allowed — return defaults like pages/recent). Sync or async; stale\n   * async responses are ignored.\n   *\n   * A SYNCHRONOUS provider (one returning an array, not a promise) never shows the\n   * \"Searching…\" hint: its answer is there the moment it is asked, and the hint only\n   * flashed through the debounce before results that were never late — keksdose's\n   * transaction search filters a list already in memory. The palette tells the two\n   * apart by what the provider RETURNS, call by call, so there is no prop to keep in\n   * step with the implementation: an async provider shows the hint from the first\n   * promise on (and during the debounce of every later query), a sync one never.\n   *\n   * Its IDENTITY is not a re-run signal — it is read through a ref, so the palette\n   * never re-searches merely because the caller rebuilt the callback. That is\n   * deliberate: a provider closing over a list rendered from a query allocates a new\n   * function on most renders, and re-running the search on each would make typing\n   * stutter. Use {@link CommandPaletteProps.revision} when the DATA behind the\n   * provider changes.\n   */\n  search: (query: string) => CommandItem[] | Promise<CommandItem[]>;\n  /**\n   * Anything whose change means the current results are out of date — typically the\n   * arrays the provider searches over. Compared by identity (as an effect dependency\n   * would be), so pass stable references: a `data = []` default allocates a fresh\n   * array on every render while a query is pending and would re-search forever.\n   *\n   * Without it, a provider whose data arrives AFTER the palette opened never gets\n   * asked again: the user's last keystroke settles the debounce, the queries resolve a\n   * moment later, and the groups they would have contributed are simply absent until\n   * another keystroke. That is the ordinary first open on a cold cache.\n   */\n  revision?: unknown;\n  /**\n   * The search text, CONTROLLED. Keksdose binds it to the URL's `q`, so a search\n   * survives a reload, can be shared as a link, and Back walks through it — none of\n   * which state inside the palette can do.\n   *\n   * Leave it out and the palette keeps its own, as before, starting empty on every\n   * open. Given, it is never reset on open: the owner decides what an open shows, and\n   * a palette that blanked the URL's `q` each time would fight its own address bar.\n   * `onQueryChange` is then how a keystroke gets anywhere, since it is the only writer.\n   */\n  query?: string;\n  /** Every edit of the field's text. Fires in both modes — uncontrolled, it only\n   *  observes. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * When the typed text becomes THE query — the one `search` runs on and\n   * `onQueryChange` reports.\n   *\n   * - `\"input\"` (default): every keystroke, debounced for the search, as before.\n   * - `\"submit\"`: typing edits a draft; the query is committed by ↵ or the submit\n   *   button beside the field. Until then the results stay on the last committed query\n   *   and `onQueryChange` stays quiet — which is what an owner binding `query` to the\n   *   URL's `q` needs, or every keystroke re-filters the page behind and pushes history.\n   *   ↵ with a draft that differs from the committed query COMMITS; ↵ with nothing new\n   *   typed chooses the highlighted row, as in `\"input\"` mode. The draft follows any\n   *   outside change of the committed query (Back through the URL), and an uncommitted\n   *   draft is dropped when the palette is closed.\n   *\n   * The clear \"×\" commits the empty query in both modes: an emptied box over results\n   * (or a page) still filtered by the old text is the stuck state Keksdose #423 was.\n   */\n  searchOn?: \"input\" | \"submit\";\n  /** Mark every row's label and hint `data-private` (see {@link CommandItem.redact},\n   *  which overrides it per row). Off by default. */\n  redactLabels?: boolean;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the palette fills the screen:\n   * no inset, no rounded panel, the field pinned at the top inside the safe areas and\n   * the list scrolling under it, with a close button since there is no backdrop to tap.\n   * On by default — a top-centred card at 70vh leaves little room once the keyboard is\n   * up. `false` keeps the card on every viewport.\n   */\n  fullScreenOnPhone?: boolean;\n  /** Row height — see {@link CommandPaletteDensity}. Default `\"compact\"`. */\n  density?: CommandPaletteDensity;\n  labels?: LabelOverride<CommandPaletteLabels>;\n}\n\n// Defined in ./use-command-key, so `GlobalSearch` can listen for ⌘K without loading the\n// palette before it is opened (0.34, MOD-1).\nexport { useCommandKey } from \"./use-command-key\";\n\n/**\n * A ⌘K-style command palette: a top-centred modal with a search field and a\n * grouped, keyboard-navigable result list. Domain-free — the app supplies\n * results via the `search` provider (pages, actions, records, …); each result\n * carries its own `onSelect`.\n */\nexport function CommandPalette({\n  open,\n  onClose,\n  search,\n  revision,\n  query: queryProp,\n  onQueryChange,\n  searchOn = \"input\",\n  redactLabels = false,\n  fullScreenOnPhone = true,\n  density = \"compact\",\n  labels,\n}: CommandPaletteProps) {\n  const l = useKitLabels(\"commandPalette\", DEFAULTS_WITHOUT_DIALOG, labels);\n  // `dialog` is new, and until it existed the dialog was named by `placeholder`. An\n  // app that translated `placeholder` and has not heard of `dialog` would otherwise\n  // go from a German name to an English \"Search\" on update — so a translated\n  // placeholder keeps doing the job until a `dialog` is supplied.\n  const dialogName =\n    l.dialog ?? (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);\n  const [ownQuery, setOwnQuery] = useState(\"\");\n  const controlled = queryProp !== undefined;\n  const query = controlled ? queryProp : ownQuery;\n  const setQuery = (next: string) => {\n    if (!controlled) setOwnQuery(next);\n    onQueryChange?.(next);\n  };\n  const submitMode = searchOn === \"submit\";\n  // The field's text in `\"submit\"` mode. It follows the committed query whenever that\n  // changes — adjusted during render, React's pattern for state derived from a prop,\n  // rather than in an effect that would paint the stale draft first.\n  const [draft, setDraft] = useState(query);\n  const [draftBase, setDraftBase] = useState(query);\n  if (draftBase !== query) {\n    setDraftBase(query);\n    setDraft(query);\n  }\n  const fieldText = submitMode ? draft : query;\n  const commit = (next: string) => {\n    setDraft(next);\n    setQuery(next);\n  };\n  const dirty = submitMode && draft !== query;\n  const isPhone = usePhoneLayout() && fullScreenOnPhone;\n  const [results, setResults] = useState<CommandItem[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const [active, setActive] = useState(0);\n  // Per instance: these were the literal \"command-palette-list\" / \"command-item-<id>\",\n  // so two palettes on one page (an app-wide one and a scoped one) pointed each\n  // other's `aria-controls` and `aria-activedescendant` at the wrong list.\n  const uid = useId();\n  const listId = `${uid}-list`;\n  const itemId = (id: string) => `${uid}-item-${id}`;\n  const groupId = (index: number) => `${uid}-group-${index}`;\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The latest `search`, callable from the debounced effect without being one of its\n  // dependencies — `revision` is what re-runs it (see the prop's docstring).\n  const runSearch = useEffectEvent((q: string) => search(q));\n  const reqId = useRef(0);\n  /** What the provider's last answer was: a promise (`false`), an array (`true`), or\n   *  not known yet. Only a provider known to be async shows \"Searching…\" while the\n   *  debounce runs — see `search`. */\n  const syncRef = useRef<boolean | undefined>(undefined);\n  /** The query the results on screen answer, and the row highlighted in them — so a\n   *  re-run for the SAME query (a `revision` change: a source streaming in) keeps the\n   *  highlight on its row instead of throwing it back to the top mid-arrow. */\n  const shownQuery = useRef<string | null>(null);\n  const activeIdRef = useRef<string | undefined>(undefined);\n\n  // Back dismisses the palette (Keksdose feedback #172). Declared with the other\n  // hooks, above the `if (!open) return null` below — a hook past a conditional\n  // return changes the hook order between renders. Passing `open` rather than\n  // mounting-while-open is what lets it sit here.\n  useOverlayHistory(open, onClose);\n\n  // A modal like any other: Tab stays inside, the page behind does not scroll, and\n  // focus goes back to whatever opened it — the palette used to drop it on <body>.\n  // Initial focus is the field, not the container: typing is the only reason to open it.\n  useFocusTrap(dialogRef, { active: open, initialFocus: () => inputRef.current });\n  useBodyScrollLock(open);\n\n  // Reset when opened — the palette's OWN text only; a controlled query belongs to\n  // its owner (see the prop). Adjusted during render on the closed-to-open transition\n  // (starting from \"closed\", so a palette mounted open resets too). `controlled` is\n  // read at the open, not watched: a caller switching modes while the palette is open\n  // is not a reason to wipe what is typed.\n  const [wasOpen, setWasOpen] = useState(false);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) {\n      if (!controlled) setOwnQuery(\"\");\n      // An uncommitted draft does not outlive the open it was typed in.\n      setDraft(controlled ? query : \"\");\n      setActive(0);\n    }\n  }\n  // The ref half of that reset: results from a previous open do not carry a\n  // highlight into this one.\n  useEffect(() => {\n    if (open) shownQuery.current = null;\n  }, [open]);\n\n  // Debounced, race-safe search.\n  useEffect(() => {\n    if (!open) return;\n    const id = ++reqId.current;\n    if (syncRef.current === false) setLoading(true);\n    const run = async () => {\n      try {\n        const answer = runSearch(query);\n        syncRef.current = !isThenable(answer);\n        if (!syncRef.current) setLoading(true);\n        const r = await answer;\n        if (reqId.current === id) {\n          const keep = shownQuery.current === query ? activeIdRef.current : undefined;\n          const at = keep === undefined ? -1 : groupItems(r).flat.findIndex((item) => item.id === keep);\n          shownQuery.current = query;\n          setResults(r);\n          setFailed(false);\n          setActive(Math.max(at, 0));\n        }\n      } catch (err) {\n        // There was no catch: the previous query's results stayed on screen as if they\n        // answered this one, and the rejection went unhandled. Clear them and say so.\n        if (reqId.current === id) {\n          shownQuery.current = null;\n          setResults([]);\n          setFailed(true);\n          setActive(0);\n        }\n        console.error(\"CommandPalette: search failed\", err);\n      } finally {\n        if (reqId.current === id) setLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n    // `revision`, not `search`: see the prop's docstring. The debounce is re-armed on a\n    // revision change, which is right — data arriving is not a keystroke and there is\n    // nothing to feel laggy about.\n  }, [query, open, revision]);\n\n  // Group results, preserving first-seen group order; keep a flat list for nav.\n  const { groups, flat, flatIndex } = useMemo(() => groupItems(results), [results]);\n  useEffect(() => {\n    activeIdRef.current = flat[active]?.id;\n  });\n\n  const choose = (item: CommandItem | undefined) => {\n    if (!item) return;\n    onClose();\n    item.onSelect();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, flat.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      // The Enter that confirms an IME composition is the IME's (BUG-9).\n      if (isImeEnter(e)) return;\n      e.preventDefault();\n      if (dirty) commit(draft);\n      else choose(flat[active]);\n    }\n  };\n\n  // A layer on the kit's Escape stack while open (Wave 2, DUP-1), taken on the whole\n  // dialog, not only the field: once Tab has moved focus to a row (or a footer\n  // control), Escape used to do nothing at all. It closed without stopping the key, so\n  // a dialog the palette was opened from closed with it.\n  useDismissLayer(open, onClose);\n  const onDialogKeyDown = (e: React.KeyboardEvent) => {\n    takeEscape(e);\n  };\n\n  // Keep the active row scrolled into view.\n  useEffect(() => {\n    const el = listRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`);\n    // Optional-called, as in combobox-core: jsdom has no scrollIntoView, and every\n    // consumer's tests crashed on the first highlighted row (kastlan stubbed it).\n    el?.scrollIntoView?.({ block: \"nearest\" });\n  }, [active]);\n\n  if (!open) return null;\n\n  const comfortable = density === \"comfortable\";\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer-only backdrop dismiss; Escape is the keyboard path\n    <div\n      className={cn(\n        \"fixed inset-0 z-[70] flex items-start justify-center bg-black/40\",\n        isPhone ? \"p-0\" : \"p-4 pt-[10vh]\",\n      )}\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape from anywhere in the dialog */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={dialogName}\n        // The trap's fallback target when the field is not there to take focus.\n        tabIndex={-1}\n        // Escape bubbling up from anything inside — a dialog is where it belongs.\n        onKeyDown={onDialogKeyDown}\n        data-fullscreen={isPhone || undefined}\n        className={cn(\n          \"flex w-full flex-col overflow-hidden bg-surface outline-none\",\n          isPhone ? \"h-full\" : \"max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl\",\n        )}\n        // Full screen means edge to edge, so the notch, the home indicator and the\n        // rounded corners are the panel's to keep clear of.\n        style={\n          isPhone\n            ? {\n                paddingTop: \"max(0px, env(safe-area-inset-top))\",\n                paddingBottom: \"max(0px, env(safe-area-inset-bottom))\",\n                paddingLeft: \"max(0px, env(safe-area-inset-left))\",\n                paddingRight: \"max(0px, env(safe-area-inset-right))\",\n              }\n            : undefined\n        }\n      >\n        <div className=\"flex shrink-0 items-center gap-2 border-b border-subtle px-3\">\n          <Search className=\"size-4 shrink-0 text-placeholder\" />\n          <input\n            ref={inputRef}\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-activedescendant={flat[active] ? itemId(flat[active].id) : undefined}\n            value={fieldText}\n            onChange={(e) => (submitMode ? setDraft(e.target.value) : setQuery(e.target.value))}\n            onKeyDown={onKeyDown}\n            placeholder={l.placeholder}\n            enterKeyHint={submitMode ? \"search\" : undefined}\n            className={cn(\n              \"w-full bg-transparent py-3 outline-none placeholder:text-placeholder text-primary\",\n              // 16px on a phone, or iOS zooms the page in on focus — and on any other\n              // touch screen too (a tablet's popover), FIELD_TOUCH_TEXT (§10.1).\n              isPhone ? \"text-base\" : cn(\"text-sm\", FIELD_TOUCH_TEXT),\n            )}\n          />\n          {loading && <span className=\"shrink-0 text-caption text-placeholder\">{l.loading}</span>}\n          {fieldText !== \"\" && (\n            <button\n              type=\"button\"\n              aria-label={l.clear ?? DEFAULT_COMMAND_PALETTE_LABELS.clear}\n              onClick={() => {\n                commit(\"\");\n                // Clearing starts the next query far more often than it ends this one.\n                inputRef.current?.focus();\n              }}\n              className=\"shrink-0 rounded p-1 text-placeholder hover:text-secondary\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n          {dirty && (\n            <button\n              type=\"button\"\n              aria-label={l.submit ?? DEFAULT_COMMAND_PALETTE_LABELS.submit}\n              onClick={() => {\n                commit(draft);\n                inputRef.current?.focus();\n              }}\n              className=\"shrink-0 rounded p-1 text-secondary hover:text-primary\"\n            >\n              <CornerDownLeft className=\"size-4\" />\n            </button>\n          )}\n          {isPhone && (\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className=\"-me-1 shrink-0 rounded px-1 py-2 text-sm text-secondary hover:text-primary\"\n            >\n              {l.close ?? DEFAULT_COMMAND_PALETTE_LABELS.close}\n            </button>\n          )}\n        </div>\n\n        {/* The status lines sit outside the listbox: a listbox owns options and groups,\n            and \"No results\" is neither. */}\n        {failed && !loading && (\n          <div role=\"alert\" className=\"px-3 py-6 text-center text-sm text-muted\">\n            {l.error ?? DEFAULT_COMMAND_PALETTE_LABELS.error}\n          </div>\n        )}\n        {/* `results`, not `flat`: a group whose only row is its \"Searching…\" line is not\n            an empty result. */}\n        {!failed && results.length === 0 && !loading && (\n          <div className=\"px-3 py-6 text-center text-sm text-muted\">{l.empty}</div>\n        )}\n        {/* Listbox grouping: each group is a `role=\"group\"` named by its heading, and\n            the list markup in between is presentational so the listbox's children are\n            groups and options only — as a plain <li>/<ul> tree a reader announced\n            \"list, 2 items\" between options and never tied the heading to its rows. */}\n        <ul\n          id={listId}\n          ref={listRef}\n          role=\"listbox\"\n          aria-label={dialogName}\n          className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n        >\n          {groups.map(({ group, items }, groupIndex) => (\n            <li key={group} role=\"presentation\">\n              <div\n                id={groupId(groupIndex)}\n                role=\"presentation\"\n                className=\"px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-placeholder\"\n              >\n                {group}\n              </div>\n              <ul role=\"group\" aria-labelledby={groupId(groupIndex)}>\n                {items.map((item) => {\n                  if (item.kind === \"status\") {\n                    return (\n                      <li\n                        key={item.id}\n                        role=\"presentation\"\n                        className={cn(\n                          \"flex items-center gap-2.5 px-3 text-xs text-placeholder\",\n                          comfortable ? \"min-h-11 py-2.5\" : \"py-2\",\n                        )}\n                      >\n                        {item.icon && (\n                          <span className=\"flex size-4 shrink-0 items-center justify-center\">{item.icon}</span>\n                        )}\n                        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                      </li>\n                    );\n                  }\n                  const idx = flatIndex.get(item) ?? -1;\n                  const isActive = idx === active;\n                  const redact = item.redact ?? redactLabels;\n                  // Written once and worn by either tag below, so the anchor and the\n                  // button can never drift apart in looks or in listbox semantics.\n                  // `role=\"option\"` on an <a href> is fine: the browser's middle-click\n                  // behaviour keys off the element, not the ARIA role.\n                  const shared = {\n                    id: itemId(item.id),\n                    role: \"option\" as const,\n                    \"aria-selected\": isActive,\n                    \"data-index\": idx,\n                    onMouseMove: () => setActive(idx),\n                    className: cn(\n                      \"flex w-full items-center gap-2.5 px-3 text-start\",\n                      comfortable ? \"min-h-11 py-2.5 text-base\" : \"py-2 text-sm\",\n                      isActive ? \"bg-active text-primary\" : \"text-secondary\",\n                    ),\n                  };\n                  const inner = (\n                    <>\n                      {item.icon && (\n                        <span className=\"flex size-4 shrink-0 items-center justify-center text-placeholder\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <span data-private={redact || undefined} className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                      </span>\n                      {item.hint && (\n                        <span data-private={redact || undefined} className=\"shrink-0 text-xs text-placeholder\">\n                          {item.hint}\n                        </span>\n                      )}\n                    </>\n                  );\n                  return (\n                    <li key={item.id} role=\"presentation\">\n                      {item.href ? (\n                        <a\n                          {...shared}\n                          href={item.href}\n                          draggable={false}\n                          onClick={(e) => {\n                            // A modified click belongs to the browser (feedback\n                            // #451) — and the palette deliberately stays OPEN for\n                            // it: ⌘-clicking three results in a row is the reason to\n                            // want this, and closing after the first would undo it.\n                            if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n                            e.preventDefault();\n                            choose(item);\n                          }}\n                        >\n                          {inner}\n                        </a>\n                      ) : (\n                        <button type=\"button\" {...shared} onClick={() => choose(item)}>\n                          {inner}\n                        </button>\n                      )}\n                    </li>\n                  );\n                })}\n              </ul>\n            </li>\n          ))}\n        </ul>\n\n        {l.hint && <div className=\"border-t border-subtle px-3 py-1.5 text-caption text-placeholder\">{l.hint}</div>}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/search/global-search.js

@@ -23,14 +23,24 @@ const pageLoad = (href) => window.location.assign(href);
 const identity = (href) => href;
 function signature(entries) {
   return entries.map(
-    (e) => [e.id, e.title, (e.keywords ?? []).join(""), e.description, e.group, e.hint, e.href, e.weight, e.redact].join(
-      "
"
-    )
+    (e) => [
+      e.id,
+      e.title,
+      (e.keywords ?? []).join(""),
+      e.description,
+      e.group,
+      e.hint,
+      e.href,
+      e.weight,
+      e.redact
+    ].join("
")
   ).join("");
 }
 function refocusField() {
   requestAnimationFrame(() => {
-    const fields = document.querySelectorAll('[role="dialog"][aria-modal="true"] input[role="combobox"]');
+    const fields = document.querySelectorAll(
+      '[role="dialog"][aria-modal="true"] input[role="combobox"]'
+    );
     fields[fields.length - 1]?.focus();
   });
 }
@@ -252,7 +262,26 @@ function GlobalSearchImpl({
       }
     }
     return ordered(out);
-  }, [q, suggestionList, suggestionsKeepGroups, byId, index, sourceList, sourceResults, order, groupLimit, toItem, l.suggestions, l.results, pl.loading, pl.error, setOpen, setQuery, noop, redactLabels]);
+  }, [
+    q,
+    suggestionList,
+    suggestionsKeepGroups,
+    byId,
+    index,
+    sourceList,
+    sourceResults,
+    order,
+    groupLimit,
+    toItem,
+    l.suggestions,
+    l.results,
+    pl.loading,
+    pl.error,
+    setOpen,
+    setQuery,
+    noop,
+    redactLabels
+  ]);
   const provider = useCallback(() => items, [items]);
   const resolvedPaletteLabels = useMemo(
     () => ({ dialog: l.trigger, placeholder: l.placeholder, ...paletteLabels }),