input-group — the joined field shell

<!--
  jixoai input group — the ADDON part (registry/files/ui/input-group/
  input-group-addon.svelte, OpenSpec 2026-08-30-expand-form-family F2).

  One add-on lane beside the group's input: prefix (align
  "inline-start", the default) or suffix (align "inline-end"). The
  content is the consumer's composition — muted text ("https://"),
  an icon glyph (<Icon name="x" /> via $lib/ui/icon over the generated
  set),
  a PressButton ("search"), a NativeSelect (the unit picker) — the
  addon owns ONLY the lane: flex-none rhythm over the density tokens,
  muted secondary text paint, and its ONE hairline seam (the edge
  facing the input; painted in input-group.css from the valued
  data-jx-igroup-addon hook — the shell carries ONE border, each
  addon ONE seam, the lane stays chromeless: no double borders).

  Disabled propagation reads the group context: a root-level disable
  renders the addon `inert` — the platform's containment, so every
  interactive descendant (button, select, link) loses activation and
  focus at once — plus the muted opacity paint. Per-part disables
  inside the addon stay the consumer's.
-->
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  import { getContext } from 'svelte';
  import { INPUT_GROUP_KEY, type InputGroupApi } from './input-group.svelte';
  import { inputGroupStyles } from './input-group.stylex';
  // the payload's own join (the separator serialize law): every
  // stylex.create member is an OBJECT in dev and the joined string in
  // shipped payloads — composition goes through THIS joiner (all
  // string values except $$css, space-joined).
  const cx = (
    ...styles: ({ readonly [key: string]: string | object } | undefined | string)[]
  ): string =>
    styles
      .filter(Boolean)
      .map((style) =>
        typeof style === 'string'
          ? style
          : Object.entries(style ?? {}).flatMap(([key, value]) =>
              key !== '$$css' && typeof value === 'string' ? [value] : [],
            ).join(' '),
      )
      .join(' ');


  interface Props extends HTMLAttributes<HTMLDivElement> {
    /** which lane the addon sits in — the seam faces the input:
        inline-start seams its inline-end, inline-end its inline-start */
    align?: 'inline-start' | 'inline-end';
    class?: string;
    children: Snippet;
  }

  let { align = 'inline-start', class: className = '', children, ...rest }: Props = $props();

  const group = getContext<InputGroupApi | undefined>(INPUT_GROUP_KEY);
  const groupDisabled = $derived(group?.disabled ?? false);
</script>

<div
  {...rest}
  data-jx-igroup-addon={align}
  inert={groupDisabled || undefined}
  class={cx(
    inputGroupStyles.addon,
    groupDisabled && inputGroupStyles.addonDisabled,
    className,
  )}
>
  {@render children()}
</div>

<!--
  jixoai input group — the INPUT part (registry/files/ui/input-group/
  input-group-input.svelte, OpenSpec 2026-08-30-expand-form-family F2).

  The real <input> of the group — chromeless by construction: the
  Tier-2 lane (.jx-html-control-lane, consumed-only from the shared
  sheet) gives the bare field paint; the GROUP root owns the one bezel
  and its state machines, the addons own the seams. No per-part
  border, no focus ring, no shadow — the lane is the give-way child
  (min-width 0) in a flex row of add-ons.

  The house value law, verbatim: `value` is $bindable — bound ⇒
  controlled, absent ⇒ purely uncontrolled (Svelte skips undefined
  writes, so FormData and form.reset() keep native behavior). A
  caller-supplied oninput observes alongside the internal law (never
  instead of it).

  Disabled propagation: the group root's `disabled` forces this input
  native-disabled through the context; the input's OWN `disabled`
  stays per-part (addons keep working beside a disabled lane — the
  copy/check-button composition).
-->
<script lang="ts">
  import type { HTMLInputAttributes } from 'svelte/elements';
  import { getContext } from 'svelte';
  import { INPUT_GROUP_KEY, type InputGroupApi } from './input-group.svelte';
  import { inputGroupStyles } from './input-group.stylex';
  // the payload's own join (the separator serialize law): every
  // stylex.create member is an OBJECT in dev and the joined string in
  // shipped payloads — composition goes through THIS joiner (all
  // string values except $$css, space-joined).
  const cx = (
    ...styles: ({ readonly [key: string]: string | object } | undefined | string)[]
  ): string =>
    styles
      .filter(Boolean)
      .map((style) =>
        typeof style === 'string'
          ? style
          : Object.entries(style ?? {}).flatMap(([key, value]) =>
              key !== '$$css' && typeof value === 'string' ? [value] : [],
            ).join(' '),
      )
      .join(' ');


  interface Props extends HTMLInputAttributes {
    /** $bindable; bound ⇒ controlled, absent ⇒ purely uncontrolled */
    value?: string | number;
    class?: string;
  }

  let {
    value = $bindable<string | number>(),
    class: className = '',
    disabled,
    ...rest
  }: Props = $props();

  const group = getContext<InputGroupApi | undefined>(INPUT_GROUP_KEY);
  /** the ONE propagation rule meets the per-part rule: either the
      group or the input itself disables the lane */
  const effectiveDisabled = $derived(disabled === true || group?.disabled === true);

  const controlled = $derived(value != null);

  function syncValue(event: Event) {
    if (controlled) value = (event.currentTarget as HTMLInputElement).value;
    // forward a caller-supplied input handler from the rest props
    (rest as { oninput?: (event: Event) => void }).oninput?.(event);
  }
</script>

<input
  {...rest}
  data-jx-igroup-input
  class={cx('jx-html-control-lane', inputGroupStyles.lane, className)}
  value={controlled ? value : undefined}
  disabled={effectiveDisabled || undefined}
  oninput={syncValue}
/>