@open-mercato/ui 0.6.1-develop.3278.1.a4d26475e4 → 0.6.1-develop.3287.1.450f4ffb56

package/src/backend/messages/message-compose-form-groups.tsx

@@ -3,6 +3,7 @@ import { FileCode, Globe, Lock } from 'lucide-react'
 import { type CrudField } from '../CrudForm'
 import { IconButton } from '../../primitives/icon-button'
 import { Input } from '../../primitives/input'
+import { EmailInput } from '../../primitives/email-input'
 import { Label } from '../../primitives/label'
 import {
   Select,
@@ -191,9 +192,8 @@ function ComposeModeFields({ compose }: ComposeProps) {
             {compose.visibility === 'public' ? (
               <>
                 <Label htmlFor="messages-compose-external-email">{compose.t('messages.externalEmail', 'External email')}</Label>
-                <Input
+                <EmailInput
                   id="messages-compose-external-email"
-                  type="email"
                   value={compose.externalEmail}
                   onChange={(event) => compose.setExternalEmail(event.target.value)}
                   placeholder={compose.t('messages.placeholders.externalEmail', 'name@example.com')}

package/src/backend/utils/serverErrors.ts

@@ -124,12 +124,19 @@ export function normalizeCrudServerError(err: unknown): NormalizedCrudServerErro
 
     if (typeof current !== 'object') continue
 
+    const errorField = (current as any).error
+    const nestedErrorMessage =
+      errorField && typeof errorField === 'object' &&
+      typeof (errorField as any).message === 'string' &&
+      (errorField as any).message.trim()
+        ? ((errorField as any).message as string)
+        : undefined
     const candidateMessage =
-      typeof (current as any).error === 'string'
-        ? (current as any).error
+      typeof errorField === 'string'
+        ? errorField
         : typeof (current as any).message === 'string'
           ? (current as any).message
-          : undefined
+          : nestedErrorMessage
     if (candidateMessage && !message) message = candidateMessage
 
     for (const key of JSON_FIELD_KEYS) {
@@ -266,12 +273,12 @@ export async function raiseCrudError(res: Response, fallbackMessage?: string): P
 
   if (parsed && typeof parsed === 'object') {
     const data = parsed as Record<string, unknown>
+    const normalized = normalizeCrudServerError(data)
+    const normalizedMessage = normalized.message?.trim()
     const rawMessage =
-      typeof data.error === 'string' && data.error.trim()
-        ? data.error.trim()
-        : typeof data.message === 'string' && data.message.trim()
-          ? data.message.trim()
-          : fallbackMessage ?? `Request failed (${res.status})`
+      normalizedMessage && normalizedMessage.length > 0
+        ? normalizedMessage
+        : fallbackMessage ?? `Request failed (${res.status})`
     const message = parseServerMessage(rawMessage)
     throw buildHttpError(message, {
       ...data,

package/src/portal/utils/__tests__/nav.test.ts

@@ -135,6 +135,86 @@ describe('buildPortalNav', () => {
     expect(buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })).toEqual([])
   })
 
+  it('dedupes manifest entries that share the same portal pattern', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main', order: 10 },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main', order: 10 },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    const main = groups.find((g) => g.id === 'main')!
+    expect(main.items).toHaveLength(1)
+    const ids = main.items.map((i) => i.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it('prefers the override with non-empty requireCustomerFeatures over a broad fallback', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/dashboard',
+        requireCustomerFeatures: ['portal.dashboard.view'],
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+    ]
+
+    const without = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    expect(without).toEqual([])
+
+    const withGrant = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.dashboard.view'],
+    })
+    expect(withGrant).toEqual([
+      { id: 'main', items: [expect.objectContaining({ label: 'Dashboard' })] },
+    ])
+  })
+
+  it('prefers the override with the longer requireCustomerFeatures list', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view', 'portal.orders.manage'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+    ]
+
+    const partial = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.orders.view'],
+    })
+    expect(partial).toEqual([])
+
+    const full = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.orders.view', 'portal.orders.manage'],
+    })
+    expect(full[0].items[0].label).toBe('Orders')
+  })
+
   it('sorts items by order then label', () => {
     const routes: FrontendRouteManifestEntry[] = [
       makeRoute({

package/src/portal/utils/nav.ts

@@ -46,6 +46,20 @@ function pickGroup(group: unknown): PortalNavGroupId {
   return 'main'
 }
 
+function pickPreferredRoute(
+  existing: FrontendRouteManifestEntry,
+  candidate: FrontendRouteManifestEntry,
+): FrontendRouteManifestEntry {
+  const existingFeatures = existing.requireCustomerFeatures ?? []
+  const candidateFeatures = candidate.requireCustomerFeatures ?? []
+  if (existingFeatures.length === 0 && candidateFeatures.length > 0) return candidate
+  if (candidateFeatures.length === 0 && existingFeatures.length > 0) return existing
+  if (existingFeatures.length !== candidateFeatures.length) {
+    return candidateFeatures.length > existingFeatures.length ? candidate : existing
+  }
+  return existing
+}
+
 /**
  * Build the portal sidebar from the frontend route manifest.
  *
@@ -66,19 +80,27 @@ export function buildPortalNav({
   const mainItems: PortalNavItem[] = []
   const accountItems: PortalNavItem[] = []
 
+  const dedupedByPattern = new Map<string, FrontendRouteManifestEntry>()
   for (const route of routes) {
     const pattern = route.pattern ?? route.path
     if (!isPortalPattern(pattern)) continue
     if (route.navHidden) continue
     const nav = route.nav
     if (!nav || typeof nav.label !== 'string' || nav.label.length === 0) continue
+    const existing = dedupedByPattern.get(pattern)
+    dedupedByPattern.set(pattern, existing ? pickPreferredRoute(existing, route) : route)
+  }
+
+  for (const route of dedupedByPattern.values()) {
+    const pattern = (route.pattern ?? route.path) as string
+    const nav = route.nav!
 
     const requireFeatures = route.requireCustomerFeatures ?? []
     if (!isPortalAdmin && requireFeatures.length) {
       if (!hasAllFeatures(grantedFeatures as string[], requireFeatures as string[])) continue
     }
 
-    const href = resolveHref(pattern as string, orgSlug)
+    const href = resolveHref(pattern, orgSlug)
     if (!hasNoUnresolvedParams(href)) continue
 
     const group = pickGroup(nav.group)

package/src/primitives/__tests__/password-input.test.tsx

@@ -0,0 +1,93 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { PasswordInput } from '../password-input'
+
+describe('PasswordInput primitive', () => {
+  it('renders the inner input as type="password" by default', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).not.toBeNull()
+    expect(input.type).toBe('password')
+  })
+
+  it('toggles the input type when the reveal button is clicked', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    const toggle = screen.getByRole('button', { name: 'Show password' })
+    expect(input.type).toBe('password')
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+
+    fireEvent.click(toggle)
+
+    expect(input.type).toBe('text')
+    expect(screen.getByRole('button', { name: 'Hide password' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('respects the controlled reveal state via revealed prop', () => {
+    const onRevealedChange = jest.fn()
+    const { container, rerender } = render(
+      <PasswordInput defaultValue="secret" revealed={false} onRevealedChange={onRevealedChange} />,
+    )
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.type).toBe('password')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show password' }))
+    expect(onRevealedChange).toHaveBeenCalledWith(true)
+    expect(input.type).toBe('password')
+
+    rerender(<PasswordInput defaultValue="secret" revealed onRevealedChange={onRevealedChange} />)
+    expect(input.type).toBe('text')
+  })
+
+  it('hides the reveal toggle when revealable is false', () => {
+    render(<PasswordInput defaultValue="secret" revealable={false} />)
+    expect(screen.queryByRole('button', { name: /show password|hide password/i })).toBeNull()
+  })
+
+  it('hides the leading lock icon when showLockIcon is false', () => {
+    const { container } = render(<PasswordInput showLockIcon={false} defaultValue="secret" />)
+    expect(container.querySelector('svg.lucide-lock')).toBeNull()
+  })
+
+  it('forwards consumer-supplied autoComplete to the input element', () => {
+    const { container } = render(
+      <PasswordInput defaultValue="secret" autoComplete="new-password" />,
+    )
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).toHaveAttribute('autocomplete', 'new-password')
+  })
+
+  it('does not set autoComplete when the consumer omits it (lets browser heuristics decide)', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.getAttribute('autocomplete')).toBeNull()
+  })
+
+  it('forwards name and id to the input element', () => {
+    const { container } = render(<PasswordInput id="signup-password" name="password" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.id).toBe('signup-password')
+    expect(input.name).toBe('password')
+  })
+
+  it('disables both the input and the reveal toggle when disabled', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" disabled />)
+    const input = container.querySelector('input') as HTMLInputElement
+    const toggle = screen.getByRole('button', { name: 'Show password' }) as HTMLButtonElement
+    expect(input.disabled).toBe(true)
+    expect(toggle.disabled).toBe(true)
+  })
+
+  it('forwards refs to the underlying input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<PasswordInput ref={ref} defaultValue="secret" />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('INPUT')
+  })
+})

package/src/primitives/__tests__/search-input.test.tsx

@@ -0,0 +1,95 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { SearchInput } from '../search-input'
+
+function Harness(initial: string, props: Partial<React.ComponentProps<typeof SearchInput>> = {}) {
+  const { onChange: consumerOnChange, ...rest } = props
+  function Wrapped() {
+    const [value, setValue] = React.useState(initial)
+    return (
+      <SearchInput
+        {...rest}
+        value={value}
+        onChange={(next) => {
+          setValue(next)
+          consumerOnChange?.(next)
+        }}
+      />
+    )
+  }
+  return render(<Wrapped />)
+}
+
+describe('SearchInput primitive', () => {
+  it('renders an input with type="search"', () => {
+    const { container } = Harness('')
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).not.toBeNull()
+    expect(input.type).toBe('search')
+  })
+
+  it('exposes the searchbox ARIA role (matches Playwright getByRole expectations)', () => {
+    Harness('')
+    expect(screen.getByRole('searchbox')).toBeInTheDocument()
+  })
+
+  it('uses the translated placeholder fallback', () => {
+    Harness('')
+    expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument()
+  })
+
+  it('honors a consumer-supplied placeholder over the i18n fallback', () => {
+    Harness('', { placeholder: 'Find a customer' })
+    expect(screen.getByPlaceholderText('Find a customer')).toBeInTheDocument()
+  })
+
+  it('does not render the clear button when value is empty', () => {
+    Harness('')
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('renders the clear button when value is non-empty', () => {
+    Harness('jan')
+    expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument()
+  })
+
+  it('clicking the clear button calls onChange("") when no onClear is supplied', () => {
+    const onChange = jest.fn()
+    Harness('jan', { onChange })
+    fireEvent.click(screen.getByRole('button', { name: 'Clear search' }))
+    expect(onChange).toHaveBeenCalledWith('')
+  })
+
+  it('clicking the clear button calls onClear instead of onChange when onClear is supplied', () => {
+    const onChange = jest.fn()
+    const onClear = jest.fn()
+    Harness('jan', { onChange, onClear })
+    fireEvent.click(screen.getByRole('button', { name: 'Clear search' }))
+    expect(onClear).toHaveBeenCalledTimes(1)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('hides the clear button when clearable=false even with non-empty value', () => {
+    Harness('jan', { clearable: false })
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('hides the clear button when disabled', () => {
+    Harness('jan', { disabled: true })
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('forwards typing to onChange', () => {
+    const onChange = jest.fn()
+    Harness('', { onChange })
+    const input = screen.getByRole('searchbox') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'kowalski' } })
+    expect(onChange).toHaveBeenCalledWith('kowalski')
+  })
+})

package/src/primitives/__tests__/zindex-overlay.test.tsx

@@ -1,3 +1,7 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
 import * as React from 'react'
 import * as fs from 'fs'
 import * as path from 'path'

package/src/primitives/amount-input.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from 'react'
+import type { VariantProps } from 'class-variance-authority'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemLeading,
+  SelectTrigger,
+} from './select'
+
+export type AmountCurrency = {
+  /** ISO 4217 code (e.g. `'EUR'`, `'USD'`, `'PLN'`). */
+  code: string
+  /** Symbol shown as the leading prefix inside the amount input (e.g. `'€'`). */
+  symbol: string
+  /** Human-readable label for the picker dropdown. */
+  label: string
+  /** Optional emoji flag (or any leading visual) for the picker row. */
+  flag?: string
+}
+
+/**
+ * Static currency list — extend as needed. Order is alphabetical by code so the picker reads
+ * predictably; the first entry is the default fallback when `value.currency` is empty or
+ * unrecognised.
+ */
+export const AMOUNT_CURRENCIES: AmountCurrency[] = [
+  { code: 'EUR', symbol: '€', label: 'Euro', flag: '🇪🇺' },
+  { code: 'USD', symbol: '$', label: 'US Dollar', flag: '🇺🇸' },
+  { code: 'GBP', symbol: '£', label: 'Pound Sterling', flag: '🇬🇧' },
+  { code: 'PLN', symbol: 'zł', label: 'Polish Złoty', flag: '🇵🇱' },
+  { code: 'CHF', symbol: 'CHF', label: 'Swiss Franc', flag: '🇨🇭' },
+  { code: 'SEK', symbol: 'kr', label: 'Swedish Krona', flag: '🇸🇪' },
+  { code: 'CZK', symbol: 'Kč', label: 'Czech Koruna', flag: '🇨🇿' },
+  { code: 'JPY', symbol: '¥', label: 'Japanese Yen', flag: '🇯🇵' },
+  { code: 'AUD', symbol: 'A$', label: 'Australian Dollar', flag: '🇦🇺' },
+  { code: 'CAD', symbol: 'C$', label: 'Canadian Dollar', flag: '🇨🇦' },
+]
+
+const DEFAULT_CURRENCY = AMOUNT_CURRENCIES[0]
+
+export type AmountValue = {
+  /** Raw numeric amount as a string (preserves leading zeros, partial decimals like `'12.'`). */
+  amount: string
+  /** ISO 4217 currency code from the picker. */
+  currency: string
+}
+
+export type AmountInputProps = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'size' | 'type' | 'value' | 'onChange'
+> &
+  VariantProps<typeof inputWrapperVariants> & {
+    value: AmountValue
+    onChange: (next: AmountValue) => void
+    /** Override the static currency list (e.g. limit to specific markets). */
+    currencies?: AmountCurrency[]
+    /** Hide the currency picker entirely — single-currency surfaces (e.g. settings page). */
+    showCurrency?: boolean
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+function findCurrency(code: string, list: AmountCurrency[]): AmountCurrency {
+  return list.find((c) => c.code === code) ?? list[0] ?? DEFAULT_CURRENCY
+}
+
+/**
+ * Amount input matching Figma `Text Input [1.1]` (node `266:5251`) **Amount** variant — leading
+ * currency symbol inside the input, then a vertical divider, then a `Select`-driven currency
+ * picker (flag + code + chevron). Numeric `inputMode="decimal"`.
+ *
+ * Value shape is `{ amount: string, currency: string }` — the amount is stored as a string to
+ * preserve raw user input (leading zeros, in-progress decimals). Parse to `Number` at the
+ * API/persistence boundary.
+ */
+export const AmountInput = React.forwardRef<HTMLInputElement, AmountInputProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size,
+      value,
+      onChange,
+      currencies: currenciesProp,
+      showCurrency = true,
+      placeholder,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.amountInput.placeholder', '0.00')
+    const currencies = currenciesProp ?? AMOUNT_CURRENCIES
+    const current = findCurrency(value.currency, currencies)
+
+    const handleAmountChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ amount: event.target.value, currency: current.code })
+      },
+      [current.code, onChange],
+    )
+
+    const handleCurrencyChange = React.useCallback(
+      (nextCode: string) => {
+        onChange({ amount: value.amount, currency: nextCode })
+      },
+      [onChange, value.amount],
+    )
+
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), 'px-0 overflow-hidden', className)}
+        data-slot="amount-input-wrapper"
+      >
+        <div className="flex flex-1 min-w-0 items-center gap-2 pl-3">
+          <span
+            className="text-sm text-muted-foreground select-none shrink-0 tabular-nums"
+            aria-hidden="true"
+          >
+            {current.symbol}
+          </span>
+          <input
+            ref={ref}
+            type="text"
+            inputMode="decimal"
+            value={value.amount}
+            onChange={handleAmountChange}
+            placeholder={resolvedPlaceholder}
+            disabled={disabled}
+            className={cn(
+              inputElementVariants({ size }),
+              'pr-3 tabular-nums',
+              inputClassName,
+            )}
+            {...props}
+          />
+        </div>
+        {showCurrency ? (
+          <>
+            <div aria-hidden="true" className="w-px self-stretch bg-input" />
+            <Select value={current.code} onValueChange={handleCurrencyChange} disabled={disabled}>
+              <SelectTrigger
+                aria-label={t('ui.inputs.amountInput.currencyLabel', 'Currency')}
+                className={cn(
+                  'h-auto w-auto shrink-0 gap-1.5 rounded-none border-0 bg-transparent px-2.5 py-2 shadow-none',
+                  'hover:bg-muted/40 focus:bg-muted/40 focus-visible:shadow-none focus-visible:border-0',
+                  'disabled:bg-transparent disabled:hover:bg-transparent',
+                )}
+              >
+                {current.flag ? (
+                  <span className="text-base leading-none" aria-hidden="true">{current.flag}</span>
+                ) : null}
+                <span className="text-sm text-foreground tabular-nums">{current.code}</span>
+              </SelectTrigger>
+              <SelectContent align="end">
+                {currencies.map((c) => (
+                  <SelectItem key={c.code} value={c.code}>
+                    {c.flag ? (
+                      <SelectItemLeading>
+                        <span className="text-base leading-none">{c.flag}</span>
+                      </SelectItemLeading>
+                    ) : null}
+                    <span className="flex-1 truncate">{c.label}</span>
+                    <span className="ml-2 text-xs text-muted-foreground tabular-nums">{c.code}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        ) : null}
+      </div>
+    )
+  },
+)
+AmountInput.displayName = 'AmountInput'

package/src/primitives/button-input.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from 'react'
+import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+
+export type ButtonInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Optional leading icon (decorative `aria-hidden` wrapper). */
+    leftIcon?: React.ReactNode
+    /**
+     * Required interactive trailing element rendered inside the wrapper, after the vertical
+     * divider. Typically an `<IconButton>` (copy URL, send, refresh). The slot stays focusable
+     * and screen-reader accessible — do NOT pass a decorative icon here.
+     */
+    trailingAction: React.ReactNode
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+/**
+ * Button input matching Figma `Text Input [1.1]` (node `266:5251`) **Button** variant — a text
+ * input with an interactive trailing button slot, separated by a vertical divider. Built on the
+ * shared `inputWrapperVariants` / `inputElementVariants` CVA so the visual contract matches the
+ * foundation `Input` primitive.
+ *
+ * Common pairings: share-link + copy button, subscribe-email + send button, API key + regenerate
+ * button. The trailing slot is rendered AS-IS (no auto-wrapping), so consumers control button
+ * type, size, variant, and `aria-label` directly via the passed element.
+ */
+export const ButtonInput = React.forwardRef<HTMLInputElement, ButtonInputProps>(
+  ({ className, inputClassName, size, leftIcon, trailingAction, disabled, ...props }, ref) => {
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), 'px-0 overflow-hidden', className)}
+        data-slot="button-input-wrapper"
+      >
+        <div className="flex flex-1 min-w-0 items-center gap-2 pl-3 pr-2">
+          {leftIcon ? (
+            <span
+              className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4"
+              aria-hidden="true"
+            >
+              {leftIcon}
+            </span>
+          ) : null}
+          <input
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              inputElementVariants({ size }),
+              inputClassName,
+            )}
+            {...props}
+          />
+        </div>
+        <div aria-hidden="true" className="w-px self-stretch bg-input" />
+        <div className="flex shrink-0 items-stretch">
+          {trailingAction}
+        </div>
+      </div>
+    )
+  },
+)
+ButtonInput.displayName = 'ButtonInput'