// ~/src/siteplane/components/input/input.tsx

"use client";

import { Input as InputPrimitive } from "@base-ui/react/input";
import * as React from "react";

import {
  type SiteplaneControlSize,
  useResolvedControlSize,
} from "../../system/provider/siteplane-ui-provider";
import {
  formControlSurfaceClassNames,
  formControlTextClassNames,
  surfaceClassNames,
  type FormControlTextSize,
  type FormControlVariant,
} from "../../system/styles/surface";
import { cn, type WithStringClassName } from "../../system/utils/cn";
import { dropSlotClass, slotClass } from "../../system/utils/slot-class";
import { useFieldLabelPlacement } from "../field";
import type { KitInputProps } from "./input-internal";

import "./input.css";

type InputRenderElementProps = React.ComponentProps<"input"> & {
  "data-slot"?: string;
};

export type InputProps = Omit<
  WithStringClassName<InputPrimitive.Props> &
    React.RefAttributes<HTMLInputElement>,
  "size"
> & {
  size?: SiteplaneControlSize | number;
  textSize?: FormControlTextSize;
  variant?: FormControlVariant;
  unstyled?: boolean;
  nativeInput?: boolean;
  renderInput?: React.ReactElement<InputRenderElementProps>;
  hidePickerIndicator?: boolean;
  insetStart?: boolean | undefined;
  insetEnd?: boolean | undefined;
};

const ExternalInputOwnerContext = React.createContext(false);

/**
 * Kit-internal boundary; the component index does not export it. Components
 * whose own behavior owner already connects the input to its field (Base UI
 * Combobox and Autocomplete inputs, React Aria color fields, hidden form
 * adapters) render the Input chassis inside it. There, `nativeInput` and
 * `renderInput` pass the element through unchanged instead of registering it
 * with an enclosing Field a second time.
 */
export function ExternalInputOwner({
  children,
}: {
  children?: React.ReactNode;
}): React.ReactElement {
  return (
    <ExternalInputOwnerContext.Provider value>
      {children}
    </ExternalInputOwnerContext.Provider>
  );
}

export function Input(inputProps: InputProps): React.ReactElement {
  // Kit components pass the internal profiles through KitInput
  // (input-internal.ts), the same function with the wider props type.
  const {
    className,
    size,
    textSize,
    variant = "default",
    unstyled = false,
    nativeInput = false,
    renderInput,
    hidePickerIndicator = false,
    insetEnd = false,
    insetStart = false,
    profile = "default",
    profileMode,
    style,
    ...props
  } = inputProps as KitInputProps;
  const externalOwner = React.useContext(ExternalInputOwnerContext);
  const externalElement = externalOwner && Boolean(renderInput || nativeInput);
  // A floating Field lays out the text field it holds (design-rework.css,
  // "Floating label fields"). A hidden or file input keeps its own layout, and
  // so does an element another owner renders, such as the hidden proxy of a
  // segmented date field, unless it is the input of a Combobox or Autocomplete.
  // A floating field takes no leading icon, so every label and value in a form
  // starts on one line: an input whose start edge is inset for an adjoining
  // element, such as an icon, a Combobox or Autocomplete start addon or an
  // InputGroup addon, keeps the label above it.
  const floating =
    useFieldLabelPlacement() === "floating" &&
    !insetStart &&
    props.type !== "hidden" &&
    props.type !== "file" &&
    (!externalElement ||
      (profile === "combobox" && profileMode !== "embedded"));
  // A blank placeholder lets CSS tell an empty field (:placeholder-shown), so
  // the label rests in an empty field and floats over a value before hydration.
  const floatingPlaceholder =
    floating && props.placeholder === undefined ? { placeholder: " " } : {};
  const visualSize = typeof size === "number" ? undefined : size;
  const nativeSize = typeof size === "number" ? size : undefined;
  const resolvedSize = useResolvedControlSize(visualSize);
  const resolvedTextSize =
    textSize ??
    (resolvedSize === "lg" || resolvedSize === "xl" ? "base" : undefined);
  // The native input fills its control: the field has no border, so a height
  // per size left a 2 px strip under it, or overflowed below 640 px. Its
  // height, radius, inline padding, line, placeholder and disabled cursor are
  // the kit base of every Input (design-rework.css).
  const inputClassName = cn(
    "w-full min-w-0 outline-none",
    props.type === "search" &&
      "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
    hidePickerIndicator && "sp-input-hide-picker",
    props.type === "date" && "sp-date-input",
  );
  const nativeInputProps = props as React.ComponentProps<"input">;
  const nativeInputStyle =
    typeof style !== "function" && style !== undefined ? { style } : {};

  // A hidden input only carries form data. The Legacy wrapper would otherwise
  // produce an empty visible surface.
  if (props.type === "hidden") {
    return <input {...nativeInputProps} type="hidden" {...nativeInputStyle} />;
  }

  return (
    <span
      className={
        cn(
          "sp-input-control sp-base-input",
          !unstyled &&
            (variant === "soft"
              ? surfaceClassNames.formControlSoft
              : cn(
                  surfaceClassNames.formControl,
                  formControlSurfaceClassNames[variant],
                )),
          resolvedTextSize && formControlTextClassNames[resolvedTextSize],
          profile === "sidebar" && "w-full",
          // A host's slot reaches the native input with the other props,
          // so its class stays off the control.
          dropSlotClass(className, props),
        ) || undefined
      }
      data-foundation="input"
      data-inset-end={insetEnd || undefined}
      data-inset-start={insetStart || undefined}
      data-label-placement={floating ? "floating" : undefined}
      data-profile={profile}
      data-profile-mode={profileMode}
      data-size={resolvedSize}
      data-slot="input-control"
      // Only an explicit textSize replaces the size-based field text.
      data-text-size={textSize}
      data-unstyled={unstyled || undefined}
      data-variant={variant}
    >
      {externalElement ? (
        // The surrounding behavior owner already supplies id, labelling,
        // description and validation for this element.
        React.cloneElement(renderInput ?? <input />, {
          ...nativeInputProps,
          ...floatingPlaceholder,
          className: cn(
            "sp-input",
            inputClassName,
            renderInput?.props.className,
          ),
          "data-slot": "input",
          size: nativeSize,
          ...nativeInputStyle,
        })
      ) : (
        // `nativeInput` and `renderInput` use the same Field control as the
        // default input, so FieldLabel, FieldDescription, FieldError and Field
        // state reach the rendered element.
        <InputPrimitive
          className={
            renderInput
              ? undefined
              : cn(slotClass("input", props), inputClassName)
          }
          data-slot="input"
          size={nativeSize}
          style={style}
          {...props}
          {...floatingPlaceholder}
          render={
            renderInput
              ? React.cloneElement(renderInput, {
                  className: cn(
                    "sp-input",
                    inputClassName,
                    renderInput.props.className,
                  ),
                  "data-slot": "input",
                })
              : props.render
          }
        />
      )}
    </span>
  );
}

export { InputPrimitive };


// ~/src/siteplane/components/input/input-internal.ts

import type * as React from "react";

import { Input, type InputProps } from "./input";

/*
 * Kit-internal Input. Not public API: the input index does not export this
 * module, and its names and profiles may change in any release. Command,
 * Combobox, Autocomplete, InputGroup and Sidebar render their input with these
 * composition profiles.
 */
export type InputProfile =
  "command" | "combobox" | "default" | "input-group" | "sidebar";
export type InputProfileMode = "default" | "embedded";

export type KitInputProps = InputProps & {
  profile?: InputProfile;
  profileMode?: InputProfileMode;
};

/** Input with the kit's composition profiles; the same component. */
export const KitInput = Input as (props: KitInputProps) => React.ReactElement;


// ~/src/siteplane/components/input/input.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  .sp-input-control:not([data-unstyled]) {
    --sp-input-segment-background: color-mix(
      in srgb,
      var(--color-blue-500) 16%,
      transparent
    );
    --sp-input-segment-padding-block: calc(var(--spacing) * 0.5);
    --sp-input-segment-padding-inline: var(--spacing);
    --sp-input-surface-subtle: rgb(0 0 0 / 4%);
    --sp-semantic-color-background: var(--color-white);
    --sp-semantic-color-border: rgb(0 0 0 / 8%);
    --sp-semantic-color-destructive: var(--color-red-500);
    --sp-semantic-color-foreground: var(--color-neutral-800);
    --sp-semantic-color-input: rgb(0 0 0 / 10%);
    --sp-semantic-color-muted-foreground: color-mix(
      in srgb,
      var(--color-neutral-500) 90%,
      var(--color-black)
    );
    --sp-semantic-color-ring: var(--color-neutral-400);
  }

  .sp-base-input[data-profile="input-group"] {
    display: contents;
  }

  .sp-base-input[data-profile="input-group"]::before {
    display: none;
  }

  /* Embedded Combobox inputs keep the public Input layout contract while the
   * surrounding popup owns the visible surface and focus treatment. */
  .sp-base-input[data-profile="combobox"][data-profile-mode="embedded"] {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    height: var(--sp-rw-control-md);
  }

  .sp-base-input[data-profile="combobox"][data-profile-mode="embedded"][data-size="sm"] {
    height: var(--sp-rw-control-sm);
  }

  .sp-base-input[data-profile="combobox"][data-profile-mode="embedded"][data-size="lg"] {
    height: var(--sp-rw-control-lg);
  }

  .sp-base-input[data-profile="combobox"][data-profile-mode="embedded"][data-size="xl"] {
    height: var(--sp-rw-control-xl);
  }

  .sp-base-input[data-profile="input-group"] .sp-input {
    flex: 1 1 0%;
    height: var(--sp-composite-control-height, 100%);
    border-radius: 0;
    padding-block-start: var(--sp-composite-control-padding-block-start, 0);
    padding-block-end: var(--sp-composite-control-padding-block-end, 0);
    padding-inline-start: var(
      --sp-composite-control-padding-inline-start,
      var(--sp-input-padding-inline, calc(var(--spacing) * 3))
    );
    padding-inline-end: var(
      --sp-composite-control-padding-inline-end,
      var(--sp-input-padding-inline, calc(var(--spacing) * 3))
    );
  }

  .dark .sp-input-control:not([data-unstyled]),
  [data-theme="dark"] .sp-input-control:not([data-unstyled]) {
    --sp-input-surface-subtle: rgb(255 255 255 / 4%);
    --sp-semantic-color-background: color-mix(
      in srgb,
      var(--color-neutral-950) 95%,
      var(--color-white)
    );
    --sp-semantic-color-border: rgb(255 255 255 / 6%);
    --sp-semantic-color-destructive: color-mix(
      in srgb,
      var(--color-red-500) 90%,
      var(--color-white)
    );
    --sp-semantic-color-foreground: var(--color-neutral-100);
    --sp-semantic-color-input: rgb(255 255 255 / 8%);
    --sp-semantic-color-muted-foreground: color-mix(
      in srgb,
      var(--color-neutral-500) 90%,
      var(--color-white)
    );
    --sp-semantic-color-ring: var(--color-neutral-500);
  }

  .sp-input-control:not([data-unstyled])[data-variant="soft"] {
    background-color: var(--sp-input-surface-subtle);
  }

  .sp-input-control:not([data-unstyled])[data-variant="soft"]:focus-within {
    background-color: var(--sp-semantic-color-background);
  }

  .sp-input-control:not([data-unstyled]):has(:disabled) {
    background-color: var(--sp-input-surface-subtle);
  }

  .sp-input-control:not([data-unstyled]):has(:autofill) {
    background-color: color-mix(
      in oklab,
      var(--sp-semantic-color-foreground) 4%,
      transparent
    );
  }

  :is(.dark, [data-theme="dark"])
    .sp-input-control:not([data-unstyled]):has(:autofill) {
    background-color: color-mix(
      in oklab,
      var(--sp-semantic-color-foreground) 8%,
      transparent
    );
  }

  .sp-input-hide-picker::-webkit-calendar-picker-indicator {
    display: none;
  }

  .sp-date-input {
    --input-segment-background: var(--sp-input-segment-background);
    --input-segment-padding-block: var(--sp-input-segment-padding-block);
    --input-segment-padding-inline: var(--sp-input-segment-padding-inline);
  }

  .sp-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  .sp-date-input::-webkit-datetime-edit-day-field,
  .sp-date-input::-webkit-datetime-edit-month-field,
  .sp-date-input::-webkit-datetime-edit-year-field {
    border-radius: var(--radius-md);
    padding-block: var(--input-segment-padding-block);
    padding-inline: var(--input-segment-padding-inline);
  }

  .sp-date-input::-webkit-datetime-edit-day-field:focus,
  .sp-date-input::-webkit-datetime-edit-month-field:focus,
  .sp-date-input::-webkit-datetime-edit-year-field:focus {
    background-color: var(--input-segment-background);
  }

  /* One rule per selector: Chrome rejects a ::selection after another
   * pseudo-element, and one selector it rejects drops a whole list, so the
   * input's own selection rule stands alone. */
  .sp-date-input::selection {
    background-color: transparent;
  }

  .sp-date-input::-webkit-datetime-edit-day-field::selection {
    background-color: transparent;
  }

  .sp-date-input::-webkit-datetime-edit-month-field::selection {
    background-color: transparent;
  }

  .sp-date-input::-webkit-datetime-edit-year-field::selection {
    background-color: transparent;
  }

  /* Embedded search headers: Input owns sizing, typography and native states. */
  :root .sp-base-input[data-profile="command"] {
    display: flex;
    width: 100%;
    min-width: 0;
    height: var(--sp-rw-line-24);
  }
  :root .sp-base-input[data-profile="command"] .sp-input {
    flex: 1;
    height: var(--sp-rw-line-24);
    padding: 0;
    font-size: var(--sp-rw-font-16);
    line-height: var(--sp-rw-line-24);
  }
  :root .sp-base-input[data-profile="command"]:has([aria-invalid="true"]) {
    outline: 1px solid var(--destructive);
  }
}


// ~/src/siteplane/components/input/index.ts

export { Input, InputPrimitive } from "./input";
export type { InputProps } from "./input";


// ~/src/siteplane/components/field/field.tsx

"use client";

import { Field as FieldPrimitive } from "@base-ui/react/field";
import { DEFAULT_VALIDITY_STATE } from "@base-ui/react/internals/field-constants";
import { useFieldRootContext } from "@base-ui/react/internals/field-root-context";
import { useFormContext } from "@base-ui/react/internals/form-context";
import { LabelableProvider } from "@base-ui/react/internals/labelable-provider";
import * as React from "react";

import { useFormReset } from "../../system/form/use-form-reset";
import { useMediaQuery } from "../../system/hooks/use-media-query";
import { cn, type WithStringClassName } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import { MotionReveal } from "../motion";
import { Tooltip, TooltipPopup } from "../tooltip";
import {
  type FieldErrorState,
  FieldErrorStateProvider,
  isFieldErrorShown,
  useFieldErrorState,
} from "./field-error-presence";

export type FieldLabelPlacement = "top" | "floating";

const FieldLabelPlacementContext =
  React.createContext<FieldLabelPlacement>("top");

/**
 * Where the enclosing Field draws its label: "top" above the control (the
 * default, and outside a Field) or "floating" inside it. Controls read it to
 * lay themselves out around a floating label.
 */
export function useFieldLabelPlacement(): FieldLabelPlacement {
  return React.useContext(FieldLabelPlacementContext);
}

/** Whether focus is in the enclosing Field (see `fieldHoldsFocus`). */
const FieldFocusContext = React.createContext(false);

/**
 * Focus is in a field while it is in its control, in an action inside it such
 * as a password's show/hide button, or in an open popup of it, whose trigger
 * inside the field is then expanded.
 */
function fieldHoldsFocus(field: HTMLElement): boolean {
  return (
    field.contains(field.ownerDocument.activeElement) ||
    field.querySelector('[aria-expanded="true"]') !== null
  );
}

/**
 * The space between a Field's label, control, description and error is
 * `--field-gap` (8 px). FieldError reads the same value, so the space it adds
 * opens and closes with the error instead of appearing in one step.
 *
 * `labelPlacement="floating"` draws the label inside the control: at rest it
 * stands in for the placeholder, and it glides to the top once the field has
 * focus or a value (design-rework.css, "Floating label fields").
 *
 * The Field follows whether focus is in it (`fieldHoldsFocus`): its error
 * tooltip shows only then, so one bubble shows at a time. With
 * `validationMode="onBlur"`, from the Field or its Form, leaving the field
 * validates it in full, so a required field that is left empty warns. Base UI
 * reports a missing value only once the value has changed; the Field asks Base
 * UI's own validate action instead.
 *
 * `requiredIndicator` marks the label of a required field with a red asterisk
 * (design-rework.css). It is a choice per form; the control's own `required`
 * stays the one source, so the asterisk shows only while the control is
 * required.
 *
 * A native reset of the form around the Field returns it to how it was before
 * the form's first submit (FieldFormReset).
 */
export function Field({
  actionsRef,
  children,
  className,
  labelPlacement = "top",
  onBlur,
  onFocus,
  ref,
  requiredIndicator = false,
  ...props
}: WithStringClassName<FieldPrimitive.Root.Props> & {
  labelPlacement?: FieldLabelPlacement;
  /** Marks the label with a red asterisk while the control is required. */
  requiredIndicator?: boolean | undefined;
}): React.ReactElement {
  const formValidationMode = useFormContext().validationMode;
  const validatesOnBlur =
    (props.validationMode ?? formValidationMode) === "onBlur";
  const actions = React.useRef<FieldPrimitive.Root.Actions | null>(null);
  // The caller's actionsRef reaches the same validate action.
  React.useImperativeHandle(
    actionsRef,
    () => ({ validate: () => actions.current?.validate() }),
    [],
  );

  // Whether focus is in the field, and what leaving it does.
  const fieldRef = React.useRef<HTMLDivElement | null>(null);
  const [focused, setFocused] = React.useState(false);
  const focusedRef = React.useRef(false);
  const validatesOnBlurRef = React.useRef(validatesOnBlur);
  React.useLayoutEffect(() => {
    validatesOnBlurRef.current = validatesOnBlur;
  });
  const follow = React.useCallback((holds: boolean) => {
    const left = focusedRef.current && !holds;
    focusedRef.current = holds;
    setFocused(holds);
    if (left && validatesOnBlurRef.current) actions.current?.validate();
  }, []);
  // Wait until focus has settled: a field action keeps it inside the field,
  // and an opening popup marks its trigger expanded.
  const settle = React.useCallback(() => {
    requestAnimationFrame(() => {
      const field = fieldRef.current;
      if (field) follow(fieldHoldsFocus(field));
    });
  }, [follow]);
  // A control that has focus before hydration, such as an autofocused one.
  React.useLayoutEffect(() => {
    const field = fieldRef.current;
    if (field && fieldHoldsFocus(field)) follow(true);
  }, [follow]);
  // While focus is in the field, a popup of it can close with focus elsewhere,
  // so the field follows the document's focus moves until focus has left.
  React.useEffect(() => {
    if (!focused) return undefined;
    const document = fieldRef.current?.ownerDocument;
    if (!document) return undefined;
    document.addEventListener("focusin", settle);
    document.addEventListener("focusout", settle);
    return () => {
      document.removeEventListener("focusin", settle);
      document.removeEventListener("focusout", settle);
    };
  }, [focused, settle]);
  // The reset is cleared inside the Field root, where its state lives.
  const resetField = React.useRef<(() => void) | null>(null);
  const formResetRef = useFormReset<HTMLDivElement>(undefined, () =>
    resetField.current?.(),
  );
  const setFieldRef = React.useCallback(
    (element: HTMLDivElement | null) => {
      fieldRef.current = element;
      formResetRef.current = element;
      if (typeof ref === "function") ref(element);
      else if (ref) ref.current = element;
    },
    [formResetRef, ref],
  );

  return (
    <FieldLabelPlacementContext.Provider value={labelPlacement}>
      <FieldFocusContext.Provider value={focused}>
        <FieldPrimitive.Root
          actionsRef={actions}
          className={cn(
            // min-w-0: in a grid or flex form a Field never grows past its
            // track for a long value, such as a Select's nowrap trigger.
            slotClass("field", props),
            "flex min-w-0 flex-col items-start gap-(--field-gap) [--field-gap:calc(var(--spacing)*2)]",
            className,
          )}
          data-label-placement={
            labelPlacement === "floating" ? "floating" : undefined
          }
          data-required-indicator={requiredIndicator ? "" : undefined}
          data-slot="field"
          onBlur={(event) => {
            onBlur?.(event);
            settle();
          }}
          onFocus={(event) => {
            onFocus?.(event);
            follow(true);
          }}
          ref={setFieldRef}
          {...props}
        >
          <FieldFormReset field={fieldRef} handle={resetField} />
          {children}
        </FieldPrimitive.Root>
      </FieldFocusContext.Provider>
    </FieldLabelPlacementContext.Provider>
  );
}

/**
 * A native reset puts the form's values back to their defaults, and Base UI
 * keeps the Field's validity, its touched and dirty marks and the Form's
 * submitted state as they were; it does not follow a reset. The reset clears
 * them, so the Field is as it was before the form's first submit: its error
 * collapses as when the value becomes valid, its controls drop a custom
 * validity message, and the Form validates again on its next submit. Errors
 * the application passes to Form clear with the same reset (Form). It renders
 * nothing.
 */
function FieldFormReset({
  field: fieldElement,
  handle,
}: {
  field: React.RefObject<HTMLDivElement | null>;
  handle: React.RefObject<(() => void) | null>;
}): null {
  const field = useFieldRootContext(false);
  const form = useFormContext();
  React.useLayoutEffect(() => {
    handle.current = () => {
      form.submitAttemptedRef.current = false;
      for (const control of fieldElement.current?.querySelectorAll<
        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
      >("input, select, textarea") ?? [])
        control.setCustomValidity("");
      field.setValidityData((data) => ({
        ...data,
        error: "",
        errors: [],
        state: DEFAULT_VALIDITY_STATE,
        value: data.initialValue,
      }));
      field.setTouched(false);
      field.setDirty(false);
    };
  });
  return null;
}

/**
 * A label above a field sits on the 16 px line; one beside a checkbox, radio
 * or switch (holding it, next to it or leading the text column next to it)
 * takes the 21 px body line, since such labels are sentences and wrap (S13).
 * Label and FieldLabel share that rule in design-rework.css. A label of text
 * alone lays out as a block, so a required asterisk follows its last word when
 * it wraps.
 */
export function FieldLabel({
  className,
  ...props
}: WithStringClassName<FieldPrimitive.Label.Props>): React.ReactElement {
  return (
    <FieldPrimitive.Label
      className={cn(
        slotClass("field-label", props),
        "items-center gap-2",
        className,
      )}
      data-slot="field-label"
      {...props}
    />
  );
}

export function FieldItem({
  className,
  ...props
}: WithStringClassName<FieldPrimitive.Item.Props>): React.ReactElement {
  return (
    <FieldPrimitive.Item
      className={cn(slotClass("field-item", props), "flex", className)}
      data-slot="field-item"
      {...props}
    />
  );
}

export function FieldDescription({
  className,
  ...props
}: WithStringClassName<FieldPrimitive.Description.Props>): React.ReactElement {
  return (
    <FieldPrimitive.Description
      className={cn(
        // Under the label text when the label holds a choice control (S13).
        slotClass("field-description", props),
        "ps-[var(--field-choice-indent,0px)] text-muted-foreground",
        className,
      )}
      data-slot="field-description"
      {...props}
    />
  );
}

export type FieldErrorVariant = "inline" | "tooltip";

/**
 * The message of a failed validation. It expands with a fade when it appears
 * and collapses while it still shows its last message when it goes, so the
 * form below it never jumps. Showing and hiding follow Base UI's Field.Error.
 *
 * The block's negative margin takes back the Field's gap and the message's own
 * padding gives it again, so the space opens and closes with the block.
 *
 * `variant="tooltip"` shows the same message in a bubble beside the control
 * instead, so nothing below it moves. It is the default in a floating Field,
 * and `inline` everywhere else.
 */
export function FieldError({
  className,
  match,
  variant,
  ...props
}: WithStringClassName<FieldPrimitive.Error.Props> & {
  /**
   * `inline` reveals the message below the control; `tooltip` shows it in a
   * destructive bubble beside the control, out of the flow. The default is
   * `tooltip` in a floating Field and `inline` otherwise.
   */
  variant?: FieldErrorVariant | undefined;
}): React.ReactElement {
  const state = useFieldErrorState();
  const placement = useFieldLabelPlacement();
  const resolvedVariant =
    variant ?? (placement === "floating" ? "tooltip" : "inline");

  if (resolvedVariant === "tooltip")
    return (
      <FieldErrorTooltip
        className={className}
        shown={isFieldErrorShown(match, state)}
        state={state}
        {...props}
      />
    );

  return (
    <MotionReveal
      className="-mt-(--field-gap)"
      open={isFieldErrorShown(match, state)}
    >
      <FieldErrorStateProvider {...state}>
        {/* The motion component decides whether the error is shown, so the
            element itself always is. */}
        <FieldPrimitive.Error
          className={cn(
            // Under the label text when the label holds a choice control (S13).
            slotClass("field-error", props),
            "ps-[var(--field-choice-indent,0px)] pt-(--field-gap) text-destructive-foreground text-xs",
            className,
          )}
          data-slot="field-error"
          match
          {...props}
        />
      </FieldErrorStateProvider>
    </MotionReveal>
  );
}

/** Parts of a Field that are not its control. */
const fieldParts = new Set([
  "field-error-anchor",
  "field-error-description",
  "field-description",
  "field-label",
  "motion-reveal",
]);

/**
 * The visible control of the Field around `element`: its first child that is
 * no label, description, error or bare input (such as a Select's hidden form
 * input), or the Field itself.
 */
function fieldControlOf(element: Element | null): Element | null {
  const field = element?.closest('[data-slot="field"]') ?? null;
  if (!field) return null;
  for (const child of Array.from(field.children)) {
    if (
      child instanceof HTMLInputElement ||
      child.hasAttribute("hidden") ||
      fieldParts.has(child.getAttribute("data-slot") ?? "")
    )
      continue;
    return child;
  }
  return field;
}

/**
 * The tooltip variant of FieldError: the kit Tooltip, anchored to the Field's
 * control, in the destructive tone with an arrow. It shows while the error is
 * shown and focus is in the field, so at most one bubble shows at a time, as
 * the browser's own validation bubble does; other invalid fields show the
 * invalid frame. It sits at the control's inline end, centred, or below it,
 * start-aligned, on a narrow screen; Base UI places it and flips it when there
 * is no room. It never takes the pointer or focus. The bubble keeps the message
 * of its last shown render while it fades out.
 *
 * The control's error description is a visually hidden Field.Error beside the
 * anchor, there whenever the error is shown, with focus in the field or not;
 * the bubble only presents the same message, so it registers no description
 * of its own and is hidden from assistive technology.
 */
function FieldErrorTooltip({
  className,
  shown,
  state,
  ...props
}: WithStringClassName<FieldPrimitive.Error.Props> & {
  shown: boolean;
  state: FieldErrorState;
}): React.ReactElement {
  // The description keeps a given id; the bubble takes its own.
  const bubbleProps = { ...props, id: undefined };
  const anchorRef = React.useRef<HTMLSpanElement>(null);
  const focused = React.useContext(FieldFocusContext);
  const beside = useMediaQuery("sm");
  const [heldState, setHeldState] = React.useState(state);
  if (
    shown &&
    (heldState.field !== state.field || heldState.form !== state.form)
  )
    setHeldState(state);

  return (
    <>
      {/* Finds the Field in the document; the bubble itself is portalled. */}
      <span
        className="sp-field-error-anchor"
        data-slot="field-error-anchor"
        hidden
        ref={anchorRef}
      />
      {shown ? (
        <FieldPrimitive.Error
          className={cn(slotClass("field-error-description", props), "sr-only")}
          data-slot="field-error-description"
          match
          {...props}
        />
      ) : null}
      <Tooltip open={shown && focused}>
        <TooltipPopup
          align={beside ? "center" : "start"}
          anchor={() => fieldControlOf(anchorRef.current)}
          arrow
          interactive={false}
          side={beside ? "inline-end" : "bottom"}
          tone="error"
        >
          <FieldErrorStateProvider {...heldState}>
            {/* Its own labelable scope keeps the bubble out of the control's
                description. */}
            <LabelableProvider>
              <FieldPrimitive.Error
                aria-hidden="true"
                className={cn(
                  slotClass("field-error", undefined, bubbleProps.render),
                  className,
                )}
                data-slot="field-error"
                data-variant="tooltip"
                match
                {...bubbleProps}
              />
            </LabelableProvider>
          </FieldErrorStateProvider>
        </TooltipPopup>
      </Tooltip>
    </>
  );
}

// Base UI's own Control type, with className narrowed to a string: its ref
// still takes any HTMLElement, as a rendered textarea needs.
export const FieldControl: React.ForwardRefExoticComponent<
  WithStringClassName<Omit<FieldPrimitive.Control.Props, "ref">> &
    React.RefAttributes<HTMLElement>
> = FieldPrimitive.Control;
export const FieldValidity: typeof FieldPrimitive.Validity =
  FieldPrimitive.Validity;

export { FieldPrimitive };


// ~/src/siteplane/components/field/index.ts

export * from "./field";


// ~/src/siteplane/components/field/field-control-bridge.ts

import {
  DEFAULT_FIELD_ROOT_STATE,
  DEFAULT_VALIDITY_STATE,
} from "@base-ui/react/internals/field-constants";
import { useFieldRootContext } from "@base-ui/react/internals/field-root-context";
import { useRegisterFieldControl } from "@base-ui/react/internals/field-register-control";
import { useFormContext } from "@base-ui/react/internals/form-context";
import {
  useLabelableContext,
  useLabelableId,
} from "@base-ui/react/internals/labelable-provider";
import * as React from "react";

/*
 * Kit-internal Field adapter for controls whose own foundation (the React Aria
 * date, time and color controls) owns the value and, for date and time fields,
 * segments and constraint validation; the component index does not export it.
 * It connects such a control to an enclosing Field the way Base UI's own
 * Select does: FieldLabel names the control, FieldDescription and FieldError
 * describe it, Field and Form see its value and validity, and FieldError shows
 * the control's validation message.
 */

/** Validation result reported by the control's own validation owner. */
export type FieldControlValidation = {
  isInvalid: boolean;
  validationDetails: ValidityState;
  validationErrors: string[];
};

/**
 * For a control without constraints of its own, such as a color picker: the
 * proxy input checks `required` natively.
 */
export const noOwnerValidation: FieldControlValidation = {
  isInvalid: false,
  validationDetails: {
    badInput: false,
    customError: false,
    patternMismatch: false,
    rangeOverflow: false,
    rangeUnderflow: false,
    stepMismatch: false,
    tooLong: false,
    tooShort: false,
    typeMismatch: false,
    valid: true,
    valueMissing: false,
  },
  validationErrors: [],
};

export type FieldControlBridge = {
  /** Explicit `aria-describedby` ids, then FieldDescription and FieldError ids. */
  describedBy: string | undefined;
  /** The control's own disabled state or a disabled Field or Fieldset. */
  disabled: boolean;
  inField: boolean;
  /** Application-controlled Field state: Field `invalid` or a Form error. */
  invalid: boolean;
  /** Explicit `aria-labelledby`, otherwise the FieldLabel id. */
  labelledBy: string | undefined;
  /** A Field `name` takes precedence over the control's own name. */
  name: string | undefined;
  /** `false` while the Field reports an error. */
  valid: boolean | null;
};

export function useFieldControlBridge({
  "aria-describedby": ariaDescribedBy,
  "aria-labelledby": ariaLabelledBy,
  disabled,
  name,
}: {
  "aria-describedby"?: string | undefined;
  "aria-labelledby"?: string | undefined;
  disabled?: boolean | undefined;
  name?: string | undefined;
}): FieldControlBridge {
  const field = useFieldRootContext();
  const { getDescriptionProps, labelId } = useLabelableContext();
  const describedBy = getDescriptionProps({
    "aria-describedby": ariaDescribedBy,
  })["aria-describedby"];

  return {
    describedBy: describedBy || undefined,
    disabled: Boolean(disabled || field.disabled),
    inField: field.state !== DEFAULT_FIELD_ROOT_STATE,
    invalid: field.invalid === true,
    labelledBy: ariaLabelledBy ?? labelId,
    name: field.name ?? name,
    valid: field.state.valid,
  };
}

const segmentSelector = '[role="spinbutton"], [role="textbox"]';

/**
 * Sets or removes the invalid state on the editable segments in `container`.
 */
export function markFieldErrorSegments(
  container: ParentNode | null | undefined,
  invalid: boolean,
): void {
  for (const segment of container?.querySelectorAll(segmentSelector) ?? []) {
    if (invalid) {
      segment.setAttribute("aria-invalid", "true");
      segment.setAttribute("data-invalid", "true");
    } else {
      segment.removeAttribute("aria-invalid");
      segment.removeAttribute("data-invalid");
    }
  }
}

/**
 * Marks the owner's segments invalid while the Field reports an error that
 * the owner doesn't show itself, such as a Field `validate` result. The owner
 * renders `aria-invalid` and `data-invalid` from its own validation only, so
 * the segments get the same attributes as for the owner's own checks. The
 * owner's validation and the Field's result stay unchanged.
 */
export function useFieldErrorSegments(
  container: React.RefObject<HTMLElement | null>,
  {
    controlled,
    ownerInvalid,
  }: {
    /** The application controls the invalid state. */
    controlled: boolean;
    /** The owner renders its own invalid state. */
    ownerInvalid: boolean;
  },
): void {
  const field = useFieldRootContext();
  const fieldError = !controlled && field.state.valid === false;
  const markedRef = React.useRef(false);

  // The owner re-renders its segments from its own state, so this runs after
  // every render. Attributes the owner renders itself stay untouched.
  React.useLayoutEffect(() => {
    if (ownerInvalid || (!fieldError && !markedRef.current)) return;
    markFieldErrorSegments(container.current, fieldError);
    markedRef.current = fieldError;
  });
}

const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE).filter(
  (key) => key !== "valid",
) as Exclude<keyof ValidityState, "valid">[];

function isSameValidation(
  left: FieldControlValidation,
  right: FieldControlValidation,
): boolean {
  return (
    left === right ||
    (left.isInvalid === right.isInvalid &&
      left.validationErrors.join("\n") === right.validationErrors.join("\n") &&
      validityKeys.every(
        (key) =>
          Boolean(left.validationDetails[key]) ===
          Boolean(right.validationDetails[key]),
      ))
  );
}

export type FieldControlProxyProps = {
  "aria-hidden": true;
  autoComplete: "off";
  className: string;
  disabled: boolean;
  form: string | undefined;
  id: string | undefined;
  inputMode: "none";
  onChange: () => void;
  onFocus: () => void;
  onInvalid: (event: React.FormEvent<HTMLInputElement>) => void;
  ref: React.RefCallback<HTMLInputElement>;
  required: boolean | undefined;
  tabIndex: -1;
  value: string;
};

/**
 * Registers the control with the enclosing Field and Form and returns props
 * for a visually hidden proxy input, or `null` outside a Field. FieldLabel
 * points to the proxy, which passes focus on to the control. Field and Form
 * validation read the proxy's native validity, which mirrors the owner's
 * constraint validation plus `required`.
 */
export function useFieldControlProxy({
  controlled,
  disabled,
  displayValidation,
  focusTarget,
  form,
  name,
  onRevalidate,
  realtimeValidation,
  required,
  value,
}: {
  /** The application controls the invalid state and explains it itself. */
  controlled: boolean;
  disabled: boolean;
  /** The validation the owner currently displays. */
  displayValidation: FieldControlValidation;
  /** The element that receives focus for the Field, such as the first segment. */
  focusTarget: () => HTMLElement | null;
  form: string | undefined;
  name: string | undefined;
  /** Asks the owner to display its current validation. */
  onRevalidate: () => void;
  /** The owner's current validation, displayed or not. */
  realtimeValidation: FieldControlValidation;
  required: boolean | undefined;
  /** Serialized value; an empty string while the control is empty. */
  value: string;
}): FieldControlProxyProps | null {
  const field = useFieldRootContext();
  const { clearErrors } = useFormContext();
  const inField = field.state !== DEFAULT_FIELD_ROOT_STATE;
  const controlId = useLabelableId();
  const inputRef = React.useRef<HTMLInputElement | null>(null);
  const valueRef = React.useRef(value);
  const focusTargetRef = React.useRef(focusTarget);
  const changeRef = React.useRef(noop);
  const displaysErrorRef = React.useRef(displayValidation.isInvalid);
  const revalidateRef = React.useRef(onRevalidate);
  const controlRef = React.useMemo<React.RefObject<HTMLElement | null>>(
    () => ({
      get current() {
        return focusTargetRef.current();
      },
    }),
    [],
  );
  const getValue = React.useCallback(() => valueRef.current, []);
  const {
    name: fieldName,
    setDirty,
    setFilled,
    setValidityData,
    validation,
    validityData,
  } = field;

  useRegisterFieldControl(
    controlRef,
    controlId,
    value,
    getValue,
    inField && !disabled,
    name,
  );

  React.useLayoutEffect(() => {
    valueRef.current = value;
    focusTargetRef.current = focusTarget;
    displaysErrorRef.current = displayValidation.isInvalid;
    revalidateRef.current = onRevalidate;
    // A value change validates again, like a Base UI control; an error that
    // is already shown follows the value instead of waiting for the next blur.
    changeRef.current = () => {
      clearErrors(fieldName);
      setDirty(value !== (validityData.initialValue ?? ""));
      validation.change(value);
      if (!controlled && displayValidation.isInvalid) onRevalidate();
    };
    // The proxy's native validity mirrors the owner's constraint validation,
    // so Field and Form validation see the result the owner reports.
    inputRef.current?.setCustomValidity(
      realtimeValidation.isInvalid
        ? realtimeValidation.validationErrors.join(" ") || "Invalid value."
        : "",
    );
  });

  React.useLayoutEffect(() => {
    if (inField) setFilled(value !== "");
  }, [inField, setFilled, value]);

  const previousValueRef = React.useRef(value);
  React.useEffect(() => {
    if (previousValueRef.current === value) return;
    previousValueRef.current = value;
    if (inField) changeRef.current();
  }, [inField, value]);

  // Field or Form validation, such as a Form submission, found an error that
  // the owner does not display yet. The owner then displays its own result,
  // which marks the control invalid as well.
  const fieldValid = field.state.valid;
  React.useEffect(() => {
    if (inField && !controlled && fieldValid === false) {
      if (!displaysErrorRef.current) revalidateRef.current();
    }
  }, [controlled, fieldValid, inField]);

  // The owner displays validation after blur, native form submission or
  // reset; the Field shows the same result, so FieldError explains it.
  const displayedRef = React.useRef<FieldControlValidation | null>(null);
  React.useEffect(() => {
    const previous = displayedRef.current;
    displayedRef.current = displayValidation;
    if (!inField || controlled || previous === null) return;
    if (isSameValidation(previous, displayValidation)) return;
    const details = displayValidation.validationDetails;
    setValidityData((current) => ({
      ...current,
      error: displayValidation.validationErrors[0] ?? "",
      errors: displayValidation.validationErrors,
      state: {
        badInput: details.badInput,
        customError: details.customError,
        patternMismatch: details.patternMismatch,
        rangeOverflow: details.rangeOverflow,
        rangeUnderflow: details.rangeUnderflow,
        stepMismatch: details.stepMismatch,
        tooLong: details.tooLong,
        tooShort: details.tooShort,
        typeMismatch: details.typeMismatch,
        valid: !displayValidation.isInvalid,
        valueMissing: details.valueMissing,
      },
      value: valueRef.current,
    }));
  }, [controlled, displayValidation, inField, setValidityData]);

  const validationInputRef = validation.inputRef;
  const setInputRef = React.useCallback(
    (element: HTMLInputElement | null) => {
      inputRef.current = element;
      validationInputRef.current = element;
    },
    [validationInputRef],
  );

  if (!inField) return null;

  return {
    "aria-hidden": true,
    autoComplete: "off",
    className: "sr-only",
    disabled,
    form,
    id: controlId,
    inputMode: "none",
    onChange: noop,
    onFocus: () => focusTargetRef.current()?.focus(),
    // The control reports the error itself; the browser bubble would repeat it.
    onInvalid: (event) => event.preventDefault(),
    ref: setInputRef,
    required,
    tabIndex: -1,
    value,
  };
}

function noop(): void {}

/**
 * Whether an editable segment of a React Aria date or time field shows its
 * placeholder, so the field shows no complete value.
 */
export function hasClearedSegment(
  state:
    | {
        segments: readonly { isEditable: boolean; isPlaceholder: boolean }[];
      }
    | null
    | undefined,
): boolean {
  return (
    state?.segments.some(
      (segment) => segment.isEditable && segment.isPlaceholder,
    ) ?? false
  );
}

// The day conversions live with the system so the Calendar, which ships
// without Input, converts days the same way as the date and time fields.
export { nativeDayTime, toNativeDay } from "../../system/date/native-day";

export type SegmentedValueOptions<T> = {
  /** The application controls the value. */
  controlled: boolean;
  /** The owner value of the `value` prop, read while controlled. */
  value: T | null;
  /** The owner value the field starts with while uncontrolled. */
  defaultValue: T | null;
  /** The form value; an empty string while the field holds no value. */
  serialize: (value: T | null) => string;
  /** Reports a value the user set, or `null` when the user cleared it. */
  onValueChange: (value: T | null) => void;
  required: boolean | undefined;
  /** The error of a required field that shows an incomplete value. */
  incompleteMessage: string;
};

export type SegmentedValue<T> = {
  /** A segment shows its placeholder, so the field holds no value. */
  incomplete: boolean;
  /** The owner's `value` while controlled. */
  ownerValue: T | null;
  /** The owner's change callback. */
  onOwnerChange: (value: T | null) => void;
  /** The owner's `validate`: a required field is invalid while incomplete. */
  validate: () => string | undefined;
  /**
   * Called after every render of the field's content with what its segments
   * show: whether a segment is cleared, the owner's value and the value the
   * field holds, which is empty while a segment is cleared.
   */
  sync: (shown: {
    cleared: boolean;
    effective: T | null;
    value: T | null;
  }) => void;
};

/**
 * The value of a segmented date or time field as its segments show it.
 * React Aria keeps the last complete value while the user clears a segment
 * and reports nothing until the field is complete or empty again. The kit
 * treats such a field as empty: its form value is empty, `onValueChange`
 * reports the clear once, and a required field is invalid. When the segments
 * are complete again, the value is reported again, also when React Aria still
 * held it. A controlled field passes the held value on to React Aria while
 * the application holds the clear, so the segments the user left stay as
 * they are.
 */
export function useSegmentedValue<T>({
  controlled,
  defaultValue,
  incompleteMessage,
  onValueChange,
  required,
  serialize,
  value,
}: SegmentedValueOptions<T>): SegmentedValue<T> {
  const [incomplete, setIncomplete] = React.useState(false);
  const [held, setHeld] = React.useState<T | null>(null);
  // The value the application knows: the last one reported, or its own. A
  // new value from the application is known at once, before the content
  // reports what its segments show after the same render.
  const reported = React.useRef<string | null>(null);
  reported.current ??= serialize(controlled ? value : defaultValue);
  const valueKey = controlled ? serialize(value) : null;
  // React Aria resets the segments whenever the value it gets is a new object,
  // so a render with the same value, such as a parent update during an edit,
  // passes the same object on; the value is keyed by its form value.
  const ownValue = React.useMemo(() => value, [valueKey]);
  const [lastValueKey, setLastValueKey] = React.useState(valueKey);
  if (valueKey !== lastValueKey) {
    setLastValueKey(valueKey);
    if (valueKey !== null) reported.current = valueKey;
    // A value from the application ends a held clear.
    if (value !== null) setHeld(null);
  }

  const report = (next: T | null) => {
    const key = serialize(next);
    if (key === reported.current) return;
    reported.current = key;
    onValueChange(next);
  };

  return {
    incomplete,
    ownerValue: controlled ? (ownValue ?? held) : null,
    onOwnerChange: (next) => {
      setHeld(null);
      report(next);
    },
    validate: () => (required && incomplete ? incompleteMessage : undefined),
    sync: ({ cleared, effective, value: shown }) => {
      if (cleared !== incomplete) setIncomplete(cleared);
      if (serialize(effective) === reported.current) return;
      if (controlled && cleared) setHeld(shown);
      report(effective);
    },
  };
}


// ~/src/siteplane/components/field/field-error-presence.tsx

"use client";

import {
  FieldRootContext,
  useFieldRootContext,
} from "@base-ui/react/internals/field-root-context";
import {
  FormContext,
  useFormContext,
} from "@base-ui/react/internals/form-context";
import type * as React from "react";

/*
 * Kit-internal helpers of FieldError: when the error is shown, and the Field
 * state a leaving error keeps. Like the control bridge next to it, they read
 * Base UI's Field and Form context, which the pinned @base-ui/react version
 * exports; the component index does not export them.
 */

export type FieldErrorMatch = boolean | keyof ValidityState | undefined;

/** The Field and Form state a FieldError reads, as it is at one render. */
export type FieldErrorState = {
  field: FieldRootContext;
  form: FormContext;
};

/**
 * The state of the enclosing Field and Form. Like Base UI's own Field.Error it
 * needs an enclosing Field.
 */
export function useFieldErrorState(): FieldErrorState {
  return { field: useFieldRootContext(false), form: useFormContext() };
}

/**
 * Whether a FieldError shows its message. This is the rule of Base UI's own
 * Field.Error: `match` shows it always, a disabled Field never, a validity key
 * when that check fails, otherwise a failed validation or a Form error for the
 * Field's name. FieldError needs the answer outside the element, because the
 * motion component keeps an error on screen while it leaves.
 */
export function isFieldErrorShown(
  match: FieldErrorMatch,
  { field, form }: Pick<FieldErrorState, "field" | "form">,
): boolean {
  if (match === true) return true;
  if (field.state.disabled) return false;
  if (typeof match === "string")
    return Boolean(field.validityData.state[match]);

  const formError =
    field.name && Object.hasOwn(form.errors, field.name)
      ? form.errors[field.name]
      : null;
  const hasFormError = Array.isArray(formError)
    ? formError.length > 0
    : Boolean(formError);
  return hasFormError || field.validityData.state.valid === false;
}

/**
 * Hands the Field and Form state it is given to everything inside. FieldError
 * passes the state of its latest render. While the error leaves, the motion
 * component keeps rendering the element of that last render, so the message
 * stays what it was and does not change as the Field becomes valid, which the
 * validity and Form state that clears the error would otherwise do.
 */
export function FieldErrorStateProvider({
  children,
  field,
  form,
}: FieldErrorState & { children: React.ReactNode }): React.ReactElement {
  return (
    <FieldRootContext.Provider value={field}>
      <FormContext.Provider value={form}>{children}</FormContext.Provider>
    </FieldRootContext.Provider>
  );
}