@pilotiq/pilotiq 0.1.0 → 0.3.0

package/src/fields/TextField.ts

@@ -1,8 +1,47 @@
 import { Field, type FieldMeta } from './Field.js'
 import type { RenderContext } from '../schema/resolveSchema.js'
+import type { Action } from '../actions/Action.js'
+
+/**
+ * HTML5 `inputmode` values — drive the on-screen keyboard mobile browsers
+ * pop up. `'text'` is the default; the others map 1:1 to spec values.
+ */
+export type TextInputMode =
+  | 'none' | 'text' | 'numeric' | 'tel' | 'email' | 'decimal' | 'search' | 'url'
+
+/**
+ * HTML5 `autocapitalize` values — control which characters mobile virtual
+ * keyboards capitalize automatically. `'off'` and `'none'` are aliases per
+ * spec; we surface only `'off'` for clarity.
+ */
+export type TextAutocapitalize = 'off' | 'sentences' | 'words' | 'characters'
+
+/**
+ * Mask alphabet documented for `mask(pattern)`:
+ *   `9` — digit (0-9)
+ *   `a` — alpha (A-Za-z)
+ *   `*` — alphanumeric or any character
+ *   anything else — literal (rendered verbatim, skipped on input)
+ *
+ * Examples: `'(999) 999-9999'` (US phone), `'9999-9999-9999-9999'` (card),
+ * `'aaa-9999'` (custom). The renderer formats values keystroke-by-keystroke
+ * and strips literals from the submitted value so the persisted column
+ * stores the raw digits/letters.
+ */
 
 export class TextField extends Field {
   private _maxLength?: number
+  private _password   = false
+  private _revealable = false
+  private _copyable   = false
+  private _copyMessage?: string
+  private _mask?:        string
+  private _datalist?:    string[]
+  private _stripCharacters?: string[]
+  private _inputMode?:        TextInputMode
+  private _autocapitalize?:   TextAutocapitalize
+  private _prefixAction?: Action
+  private _suffixAction?: Action
 
   private constructor(name: string) {
     super(name, 'text')
@@ -15,10 +54,111 @@ export class TextField extends Field {
   maxLength(n: number): this { this._maxLength = n; return this }
   getMaxLength(): number | undefined { return this._maxLength }
 
+  /**
+   * Render the input as `type="password"`. Pair with `revealable()` to
+   * surface an eye-icon toggle. Pure presentation — the column type +
+   * value handling stays string-shaped.
+   */
+  password(v: boolean = true): this { this._password = v; return this }
+
+  /**
+   * Mount an eye-icon toggle in the suffix slot that flips the input
+   * type between `password` and `text`. No-op when the field is not in
+   * `password()` mode (the toggle hides itself client-side so a stray
+   * `revealable()` on a non-password input doesn't render a useless
+   * button).
+   */
+  revealable(v: boolean = true): this { this._revealable = v; return this }
+
+  /**
+   * Mount a copy button in the suffix slot that writes the current input
+   * value to the clipboard. The optional message overrides the default
+   * `'Copied!'` toast text — same convention as
+   * `Column.copyMessage()`.
+   */
+  copyable(message?: string): this {
+    this._copyable     = true
+    if (message !== undefined) this._copyMessage = message
+    return this
+  }
+
+  /**
+   * Format the input keystroke-by-keystroke against the supplied mask
+   * pattern. See `TextField` doc-block for the alphabet (`9` = digit,
+   * `a` = alpha, `*` = any, literals passthrough). Submitted values are
+   * stripped of literal characters before the form body lands on the
+   * server — the persisted column stores the raw chars only.
+   */
+  mask(pattern: string): this { this._mask = pattern; return this }
+
+  /**
+   * Suggest values via a native HTML5 `<datalist>` attached to the
+   * input. Browsers render an autocomplete dropdown; users can still
+   * type a value not on the list. Useful for canonical-but-not-exclusive
+   * sets (countries, departments, common email domains).
+   */
+  datalist(values: string[]): this { this._datalist = values.slice(); return this }
+
+  /**
+   * Strip the listed characters from the submitted value before
+   * validation runs. Pass a single string (each char becomes a strip
+   * token) or an array of strings. Useful for input-mask-style fields
+   * where the persisted column should not carry the mask literals
+   * (`'(' / ')' / '-' / ' '` for phone numbers, `' '` for credit cards).
+   * The strip applies on both create and edit — server-side authority,
+   * so a tampered client still gets cleaned values.
+   */
+  stripCharacters(chars: string | string[]): this {
+    const list = typeof chars === 'string' ? Array.from(chars) : [...chars]
+    if (list.length === 0) delete this._stripCharacters
+    else this._stripCharacters = list
+    return this
+  }
+
+  getStripCharacters(): string[] | undefined { return this._stripCharacters }
+
+  /**
+   * Set the HTML `inputmode` attribute — drives the virtual-keyboard
+   * layout on mobile. Distinct from `type=` (a `text` field with
+   * `inputMode('numeric')` still accepts non-digit pastes; for strict
+   * numeric-only, use `NumberField` instead).
+   */
+  inputMode(mode: TextInputMode): this { this._inputMode = mode; return this }
+
+  /** Set the HTML `autocapitalize` attribute. */
+  autocapitalize(mode: TextAutocapitalize): this { this._autocapitalize = mode; return this }
+
+  /**
+   * Mount a clickable Action button in the prefix slot of the input
+   * shell. Distinct from the passive `prefix()` decoration (which is a
+   * string or icon descriptor only). Use this for an in-input affordance
+   * — e.g. an OAuth-style "Generate" button next to an API key field.
+   * The Action retains its full chrome (`.icon() / .color() / .visible()
+   * / .modal*()`); visibility rules evaluate through the standard schema
+   * walker the same way they do anywhere else.
+   */
+  prefixAction(action: Action): this { this._prefixAction = action; return this }
+
+  /** Suffix-slot variant of `prefixAction`. Same semantics. */
+  suffixAction(action: Action): this { this._suffixAction = action; return this }
+
+  /** Read-only access for the resolver. */
+  getPrefixAction(): Action | undefined { return this._prefixAction }
+  getSuffixAction(): Action | undefined { return this._suffixAction }
+
   override toMeta(ctx?: RenderContext): FieldMeta {
     return {
       ...this.buildMeta(ctx),
-      ...(this._maxLength !== undefined ? { maxLength: this._maxLength } : {}),
+      ...(this._maxLength      !== undefined ? { maxLength:      this._maxLength      } : {}),
+      ...(this._password                       ? { password:       true                  } : {}),
+      ...(this._revealable                     ? { revealable:     true                  } : {}),
+      ...(this._copyable                       ? { copyable:       true                  } : {}),
+      ...(this._copyMessage    !== undefined ? { copyMessage:    this._copyMessage    } : {}),
+      ...(this._mask           !== undefined ? { mask:           this._mask           } : {}),
+      ...(this._datalist       !== undefined ? { datalist:       this._datalist       } : {}),
+      ...(this._stripCharacters!== undefined ? { stripCharacters:this._stripCharacters} : {}),
+      ...(this._inputMode      !== undefined ? { inputMode:      this._inputMode      } : {}),
+      ...(this._autocapitalize !== undefined ? { autocapitalize: this._autocapitalize } : {}),
     }
   }
 }

package/src/filters/QueryBuilderFilter.test.ts

@@ -140,6 +140,24 @@ describe('TextConstraint', () => {
     assert.deepEqual(q.ops[0]!.args, ['title', 'LIKE', '%hello%'])
   })
 
+  it('notContains → NOT LIKE %v%', () => {
+    const q = new FakeQuery()
+    TextConstraint.make('title').apply(q, 'notContains', 'spam')
+    assert.deepEqual(q.ops[0]!.args, ['title', 'NOT LIKE', '%spam%'])
+  })
+
+  it('notContains escapes LIKE wildcards', () => {
+    const q = new FakeQuery()
+    TextConstraint.make('title').apply(q, 'notContains', '50% off')
+    assert.deepEqual(q.ops[0]!.args, ['title', 'NOT LIKE', '%50\\% off%'])
+  })
+
+  it('notContains drops empty string', () => {
+    const q = new FakeQuery()
+    TextConstraint.make('title').apply(q, 'notContains', '')
+    assert.equal(q.ops.length, 0)
+  })
+
   it('startsWith / endsWith / equals / notEquals', () => {
     const checks: Array<[string, string, string]> = [
       ['startsWith', 'LIKE', 'foo%'],

package/src/filters/queryBuilder/Constraint.ts

@@ -26,7 +26,7 @@ export type ConstraintValueKind =
  */
 export type ConstraintOperatorName =
   | 'equals' | 'notEquals'
-  | 'contains' | 'startsWith' | 'endsWith'
+  | 'contains' | 'notContains' | 'startsWith' | 'endsWith'
   | 'lt' | 'lte' | 'gt' | 'gte' | 'between'
   | 'before' | 'after' | 'dateBetween'
   | 'in' | 'notIn'

package/src/filters/queryBuilder/TextConstraint.ts

@@ -1,11 +1,9 @@
 import { Constraint, type ConstraintOperator, type ConstraintOperatorName } from './Constraint.js'
 import type { ModelQuery } from '../../orm/modelDefaults.js'
 
-// `notContains` is intentionally omitted in v1 — the rudder Prisma adapter
-// doesn't translate `NOT LIKE` (only `LIKE`). Re-add once the adapter
-// learns negation, mirrored on the pilotiq `ModelWhereOperator` union.
 const OPERATORS: ConstraintOperator[] = [
   { name: 'contains',     label: 'Contains',         valueKind: 'text' },
+  { name: 'notContains',  label: 'Does not contain', valueKind: 'text' },
   { name: 'equals',       label: 'Equals',           valueKind: 'text' },
   { name: 'notEquals',    label: 'Does not equal',   valueKind: 'text' },
   { name: 'startsWith',   label: 'Starts with',      valueKind: 'text' },
@@ -38,9 +36,10 @@ export class TextConstraint extends Constraint {
     if (v === '') return query
 
     switch (operator) {
-      case 'contains':    return query.where(this.name, 'LIKE', `%${escapeLike(v)}%`)
-      case 'startsWith':  return query.where(this.name, 'LIKE', `${escapeLike(v)}%`)
-      case 'endsWith':    return query.where(this.name, 'LIKE', `%${escapeLike(v)}`)
+      case 'contains':    return query.where(this.name, 'LIKE',     `%${escapeLike(v)}%`)
+      case 'notContains': return query.where(this.name, 'NOT LIKE', `%${escapeLike(v)}%`)
+      case 'startsWith':  return query.where(this.name, 'LIKE',     `${escapeLike(v)}%`)
+      case 'endsWith':    return query.where(this.name, 'LIKE',     `%${escapeLike(v)}`)
       case 'equals':      return query.where(this.name, '=', v)
       case 'notEquals':   return query.where(this.name, '!=', v)
       default:            return query

package/src/orm/modelDefaults.ts

@@ -8,7 +8,7 @@ import type { SaveHandler, LoadRecordHandler, FormContext } from '../elements/Fo
  * structurally assignable to `ModelLike` — but pilotiq doesn't import
  * `@rudderjs/contracts` here to keep this file dependency-light.
  */
-export type ModelWhereOperator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'LIKE' | 'IN' | 'NOT IN'
+export type ModelWhereOperator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'LIKE' | 'NOT LIKE' | 'IN' | 'NOT IN'
 
 /**
  * Context passed into `Resource.query(ctx)`. Carries the resolved user so

package/src/react/SchemaRenderer.tsx

@@ -7,6 +7,7 @@ import { Input } from './ui/input.js'
 import { Popover, PopoverTrigger, PopoverContent } from './ui/popover.js'
 import { FieldShell } from './fields/FieldShell.js'
 import { TextLikeInput }     from './fields/TextLikeInput.js'
+import { useTextInputControls } from './fields/textInputControls.js'
 import { SelectFieldInput }  from './fields/SelectFieldInput.js'
 import { ToggleFieldInput }  from './fields/ToggleFieldInput.js'
 import { DateFieldInput }    from './fields/DateFieldInput.js'
@@ -65,6 +66,7 @@ import {
   CalendarIcon, FilterIcon, MoreHorizontalIcon,
   CircleIcon, InboxIcon, GripVerticalIcon,
   ChevronDownIcon, CopyIcon, CheckIcon, XIcon,
+  InfoIcon, TriangleAlertIcon, CircleCheckIcon, CircleAlertIcon,
 } from 'lucide-react'
 import type { ComponentType } from 'react'
 import { useNavigate, type NavigateFn } from './navigate.js'
@@ -215,6 +217,23 @@ function renderField(el: ElementMeta, index: number): React.ReactNode {
     )
   }
 
+  // TextField (and slug) rich affordances live in a dedicated shell so
+  // `useTextInputControls` can hold reveal-toggle / mask state via React
+  // hooks (renderField itself is a plain function, hooks would violate
+  // rules-of-hooks here).
+  if (fieldType === 'text' || fieldType === 'slug') {
+    return (
+      <TextFieldShell
+        key={index}
+        el={el}
+        name={name}
+        label={label}
+        required={required}
+        common={common}
+      />
+    )
+  }
+
   const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder)
 
   return (
@@ -224,6 +243,66 @@ function renderField(el: ElementMeta, index: number): React.ReactNode {
   )
 }
 
+/**
+ * Component-shape TextField renderer — wraps the input shell so we can
+ * use `useTextInputControls()` (which holds the eye-toggle / mask state).
+ * Keeps `renderField` itself hook-free.
+ */
+function TextFieldShell({
+  el, name, label, required, common,
+}: {
+  el:        ElementMeta
+  name:      string
+  label:     string
+  required:  boolean
+  common:    Record<string, unknown>
+}): React.ReactElement {
+  const controls = useTextInputControls(el, name, (m) => renderElement(m, 0))
+
+  // Build the input with all the new HTML attrs (inputMode /
+  // autocapitalize / list / maxLength + the password/text type from
+  // the controls hook).
+  const textExtra: Record<string, unknown> = {}
+  if (el['maxLength']      !== undefined) textExtra['maxLength']      = Number(el['maxLength'])
+  if (el['inputMode']      !== undefined) textExtra['inputMode']      = String(el['inputMode'])
+  if (el['autocapitalize'] !== undefined) textExtra['autoCapitalize'] = String(el['autocapitalize'])
+  if (Array.isArray(el['datalist'])) textExtra['list'] = `${name}__datalist`
+
+  const datalist = Array.isArray(el['datalist']) ? (el['datalist'] as string[]) : undefined
+
+  const input = (
+    <>
+      <TextLikeInput
+        el={el}
+        name={name}
+        common={common}
+        type={controls.type}
+        extraProps={textExtra}
+        multiline={false}
+        applyMask={controls.applyMask}
+      />
+      {datalist && (
+        <datalist id={`${name}__datalist`}>
+          {datalist.map((v, i) => <option key={i} value={v} />)}
+        </datalist>
+      )}
+    </>
+  )
+
+  return (
+    <FieldShell
+      el={el}
+      name={name}
+      label={label}
+      required={required}
+      before={controls.before}
+      after={controls.after}
+    >
+      {input}
+    </FieldShell>
+  )
+}
+
 function renderFieldInput(
   fieldType:    string,
   el:           ElementMeta,
@@ -404,6 +483,24 @@ function renderFieldInput(
           preview={el['preview'] !== false}
           directory={typeof el['directory'] === 'string' ? el['directory'] : undefined}
           uploadUrl={typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined}
+          downloadable={Boolean(el['downloadable'])}
+          openable={Boolean(el['openable'])}
+          reorderable={Boolean(el['reorderable'])}
+          appendFiles={Boolean(el['appendFiles'])}
+          panelLayout={
+            el['panelLayout'] === 'grid' ? 'grid'
+            : el['panelLayout'] === 'integrated' ? 'integrated'
+            : 'list'
+          }
+          {...(el['automaticallyResize'] && typeof el['automaticallyResize'] === 'object'
+            ? { automaticallyResize: el['automaticallyResize'] as { width: number; height: number } }
+            : {})}
+          imageEditor={Boolean(el['imageEditor'])}
+          circleCropper={Boolean(el['circleCropper'])}
+          automaticallyCropImagesToAspectRatio={Boolean(el['automaticallyCropImagesToAspectRatio'])}
+          {...(Array.isArray(el['imageEditorAspectRatioOptions'])
+            ? { imageEditorAspectRatioOptions: el['imageEditorAspectRatioOptions'] as Array<{ ratio: number; label: string }> }
+            : {})}
         />
       )
     }
@@ -732,6 +829,9 @@ function ActionModalDialog({
   const dispatchUrl = meta['dispatchUrl'] as string | undefined
   const fields      = (meta.children ?? []) as ElementMeta[]
   const hasForm     = fields.length > 0
+  // Filament v5 — auxiliary Elements stamped by the resolver between
+  // the body and the footer (Alert / Text / Heading / Action / …).
+  const contentFooter = (meta['modalContentFooter'] ?? []) as ElementMeta[]
 
   const heading     = modal?.heading ?? confirm?.title ?? (hasForm ? String(meta['label'] ?? 'Submit') : 'Are you sure?')
   const description = modal?.description ?? confirm?.message
@@ -897,12 +997,13 @@ function ActionModalDialog({
               </DialogTitle>
               {description && <DialogDescription>{description}</DialogDescription>}
             </DialogHeader>
-            {hasForm && (
+            {(hasForm || contentFooter.length > 0) && (
               <div className={`flex flex-col gap-3 py-2 ${bodyCls}`.trim()}>
                 {fields.map((f, i) => renderFormChild(f, i, initialValues, errors))}
+                {contentFooter.map((c, i) => renderElement(c, fields.length + i))}
               </div>
             )}
-            {!hasForm && stickyMode && <div className={bodyCls} />}
+            {!hasForm && contentFooter.length === 0 && stickyMode && <div className={bodyCls} />}
             {serverError && (
               <p className={`py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim()}>{serverError}</p>
             )}
@@ -2663,6 +2764,114 @@ function EntryCopyButton({ text, label }: { text: string; label: string }): Reac
   )
 }
 
+// ─── Alert renderer ─────────────────────────────────────────
+//
+// Owns dismissal state (per-mount + optional localStorage persistence)
+// + icon dispatch + footer-actions alignment. Lifted out of the inline
+// `case 'alert'` branch when Alert gained `dismissible() / iconColor() /
+// footerActionsAlignment()` setters — those need component-local state
+// (the dismiss button, the persisted-dismissal hydration on mount), and
+// inlining the hooks under a switch arm is fragile.
+
+const ALERT_TYPE_ICONS: Record<string, ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>> = {
+  info:    InfoIcon,
+  warning: TriangleAlertIcon,
+  success: CircleCheckIcon,
+  danger:  CircleAlertIcon,
+}
+
+const ALERT_TYPE_DEFAULT_ICON_COLOR: Record<string, string> = {
+  info:    'info',
+  warning: 'warning',
+  success: 'success',
+  danger:  'destructive',
+}
+
+const ALERT_ACTIONS_ALIGNMENT: Record<string, string> = {
+  start:  'justify-start',
+  center: 'justify-center',
+  end:    'justify-end',
+}
+
+function alertPersistKey(persistKey: string): string {
+  return `pilotiq.alert.${persistKey}`
+}
+
+function AlertRenderer(props: {
+  alertType:         string
+  content:           string
+  title?:            string
+  dismissible?:      boolean
+  persistDismissal?: string
+  iconColor?:        string
+  actionsAlignment?: string
+  footer:            React.ReactNode[]
+}): React.ReactNode {
+  const {
+    alertType, content, title, dismissible,
+    persistDismissal, iconColor, actionsAlignment, footer,
+  } = props
+  const [dismissed, setDismissed] = useState(false)
+
+  // Hydrate persisted-dismissal on first paint. `useState(false)` keeps
+  // SSR + first client paint identical (Hydration safe); the effect
+  // flips to dismissed if localStorage has the flag set.
+  useEffect(() => {
+    if (!persistDismissal) return
+    if (typeof window === 'undefined') return
+    try {
+      if (window.localStorage.getItem(alertPersistKey(persistDismissal)) === '1') {
+        setDismissed(true)
+      }
+    } catch { /* localStorage blocked (Safari ITP / SSR) — render visible */ }
+  }, [persistDismissal])
+
+  if (dismissed) return null
+
+  const styles    = alertStyles[alertType] ?? alertStyles['info']!
+  const Icon      = ALERT_TYPE_ICONS[alertType] ?? InfoIcon
+  const iconColorKey = iconColor ?? ALERT_TYPE_DEFAULT_ICON_COLOR[alertType] ?? 'info'
+  const iconColorCls = TEXT_COLOR_CLASSES[iconColorKey] ?? ''
+  const alignCls  = ALERT_ACTIONS_ALIGNMENT[actionsAlignment ?? 'start'] ?? 'justify-start'
+
+  const handleDismiss = (): void => {
+    setDismissed(true)
+    if (persistDismissal && typeof window !== 'undefined') {
+      try {
+        window.localStorage.setItem(alertPersistKey(persistDismissal), '1')
+      } catch { /* localStorage blocked — dismiss is per-mount only */ }
+    }
+  }
+
+  return (
+    <div className={`relative rounded-lg border p-4 ${styles} ${dismissible ? 'pr-9' : ''}`}>
+      <div className="flex gap-3">
+        <Icon className={`size-5 shrink-0 mt-0.5 ${iconColorCls}`} aria-hidden="true" />
+        <div className="flex-1 min-w-0">
+          {title !== undefined && <p className="font-medium mb-1">{title}</p>}
+          <p className="text-sm">{content}</p>
+          {footer.length > 0 && (
+            <div className={`flex items-center gap-2 mt-3 ${alignCls}`}>
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+      {dismissible && (
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss"
+          title="Dismiss"
+          className="absolute top-3 right-3 inline-flex h-6 w-6 items-center justify-center rounded opacity-70 hover:opacity-100 transition-opacity"
+        >
+          <XIcon className="size-4" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
 function renderElement(el: ElementMeta, index: number): React.ReactNode {
   switch (el.type) {
     case 'text':
@@ -2753,20 +2962,19 @@ function renderElement(el: ElementMeta, index: number): React.ReactNode {
     }
 
     case 'alert': {
-      const alertType = String(el['alertType'] ?? 'info')
-      const styles = alertStyles[alertType] ?? alertStyles['info']
-      const title = el['title'] ? String(el['title']) : undefined
       const footer = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup')
       return (
-        <div key={index} className={`rounded-lg border p-4 ${styles}`}>
-          {title && <p className="font-medium mb-1">{title}</p>}
-          <p className="text-sm">{String(el['content'] ?? '')}</p>
-          {footer.length > 0 && (
-            <div className="flex items-center gap-2 mt-3">
-              {footer.map((a, i) => renderActionLike(a, i))}
-            </div>
-          )}
-        </div>
+        <AlertRenderer
+          key={index}
+          alertType={String(el['alertType'] ?? 'info')}
+          content={String(el['content'] ?? '')}
+          {...(el['title']             !== undefined ? { title:             String(el['title'])             } : {})}
+          {...(el['dismissible']                     ? { dismissible:       Boolean(el['dismissible'])      } : {})}
+          {...(el['persistDismissal']  !== undefined ? { persistDismissal:  String(el['persistDismissal'])  } : {})}
+          {...(el['iconColor']         !== undefined ? { iconColor:         String(el['iconColor'])         } : {})}
+          {...(el['actionsAlignment']  !== undefined ? { actionsAlignment:  String(el['actionsAlignment'])  } : {})}
+          footer={footer.map((a, i) => renderActionLike(a, i))}
+        />
       )
     }
 

package/src/react/fields/BuilderInput.tsx

@@ -13,6 +13,7 @@ import {
   RowChromeIconButton,
   ReorderGrip,
   CollapseChevron,
+  BulkCollapseHeader,
   resolveRowChrome,
   DEFAULT_MOVE_UP,
   DEFAULT_MOVE_DOWN,
@@ -368,6 +369,35 @@ export function BuilderInput({
     })
   }
 
+  // Bulk expand / collapse — accordion preserves its "only one open"
+  // invariant by opening the first visible row on expandAll and clearing
+  // openId on collapseAll. Per-row mode iterates every row and writes
+  // the storage slot so reload restores the bulk state.
+  const expandAll = (): void => {
+    if (accordion) {
+      const firstVisible = rows.find(r => !r.hidden)
+      const next = firstVisible?.id ?? null
+      setAccordionOpenId(next)
+      writeAccordionToStorage(formId, name, next)
+      return
+    }
+    setCollapsed({})
+    for (const r of rows) writeCollapsedToStorage(formId, name, r.id, false)
+  }
+  const collapseAll = (): void => {
+    if (accordion) {
+      setAccordionOpenId(null)
+      writeAccordionToStorage(formId, name, null)
+      return
+    }
+    const next: Record<string, boolean> = {}
+    for (const r of rows) {
+      next[r.id] = true
+      writeCollapsedToStorage(formId, name, r.id, true)
+    }
+    setCollapsed(next)
+  }
+
   const hasVisibleRow    = rows.some(r => !r.hidden)
   const firstVisibleIdx  = rows.findIndex(r => !r.hidden)
   const lastVisibleIdx   = (() => {
@@ -388,6 +418,13 @@ export function BuilderInput({
       onChange={onContainerChange}
       onBlur={onContainerBlur}
     >
+      <BulkCollapseHeader
+        buttons={buttons}
+        disabled={disabled || !hasVisibleRow}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+      />
+
       {!hasVisibleRow && (
         <div className="rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground">
           No items yet. Click {addLabel} to start.

package/src/react/fields/FieldShell.tsx

@@ -20,9 +20,17 @@ export interface FieldShellProps {
   label:     string
   required:  boolean
   children:  React.ReactNode
+  /** Optional ReactNode rendered to the left of the input, after the
+   *  passive `prefix` decoration (when set). Used by `TextField`'s
+   *  `prefixAction()` / mask / datalist / etc. — composes with the
+   *  passive `prefix` slot rather than replacing it. */
+  before?:   React.ReactNode
+  /** Right-of-input counterpart. Used by `revealable() / copyable() /
+   *  suffixAction()`. Renders after the passive `suffix` decoration. */
+  after?:    React.ReactNode
 }
 
-export function FieldShell({ el, name, label, required, children }: FieldShellProps): React.ReactElement {
+export function FieldShell({ el, name, label, required, children, before, after }: FieldShellProps): React.ReactElement {
   const prefix     = el['prefix']     as string | { icon: string } | undefined
   const suffix     = el['suffix']     as string | { icon: string } | undefined
   const helperText = el['helperText'] as string | undefined
@@ -39,12 +47,15 @@ export function FieldShell({ el, name, label, required, children }: FieldShellPr
     </label>
   ) : null
 
-  const input = (prefix || suffix)
+  const hasDecoration = !!(prefix || suffix || before || after)
+  const input = hasDecoration
     ? (
       <div className="flex items-center gap-2">
+        {before}
         {prefix && <Decoration content={prefix} side="prefix" />}
         <div className="flex-1 min-w-0">{children}</div>
         {suffix && <Decoration content={suffix} side="suffix" />}
+        {after}
       </div>
     )
     : children