@pilotiq/pilotiq 0.2.0 → 0.4.0

package/src/react/fields/RepeaterInput.tsx

@@ -12,6 +12,7 @@ import {
   RowChromeIconButton,
   ReorderGrip,
   CollapseChevron,
+  BulkCollapseHeader,
   resolveRowChrome,
   DEFAULT_MOVE_UP,
   DEFAULT_MOVE_DOWN,
@@ -428,6 +429,37 @@ export function RepeaterInput({
     })
   }
 
+  // ── Bulk expand / collapse ──────────────────────────────
+  // Accordion's "only one open" invariant survives both bulk actions:
+  // expandAll opens the first visible row (matches the implicit
+  // "always show something" mental model); collapseAll sets null.
+  // Per-row mode iterates every row id and writes the storage slot
+  // alongside the in-memory map so reload restores the bulk action.
+  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)
+  }
+
   // Visibility computed each render — hidden rows still occupy slots in
   // `rows` (so values round-trip + reorder-around math stays simple), but
   // they don't count for the user-facing empty state, drop indicator, or
@@ -494,6 +526,13 @@ export function RepeaterInput({
       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/TextLikeInput.tsx

@@ -12,7 +12,7 @@ import { Textarea } from '../ui/textarea.js'
  * config. Outside a controlled form, falls back to plain `defaultValue`.
  */
 export function TextLikeInput({
-  el, name, common, type, extraProps, multiline,
+  el, name, common, type, extraProps, multiline, applyMask,
 }: {
   el:         ElementMeta
   name:       string
@@ -20,6 +20,10 @@ export function TextLikeInput({
   type:       string
   extraProps: Record<string, unknown>
   multiline:  boolean
+  /** Optional keystroke formatter — `TextField.mask(pattern)`. When
+   *  set, every change runs the value through this fn before it lands
+   *  in state / the DOM. Defaults to identity. */
+  applyMask?: (value: string) => string
 }): React.ReactElement {
   const fs = useFieldState(name)
   const liveCfg = el['live']
@@ -27,11 +31,13 @@ export function TextLikeInput({
     ? liveCfg as { onBlur?: boolean; debounce?: number }
     : {})
   const onBlurMode = liveOpts.onBlur === true
+  const mask = applyMask ?? identity
 
   if (fs.controlled) {
     const ctxValue = fs.value !== undefined && fs.value !== null ? String(fs.value) : ''
     const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-      fs.setValue(e.target.value)
+      const formatted = mask(e.target.value)
+      fs.setValue(formatted)
       if (!onBlurMode) fs.triggerLive()
     }
     const onBlur = (): void => {
@@ -49,6 +55,20 @@ export function TextLikeInput({
     return <Input {...(props as React.ComponentProps<typeof Input>)} type={type} />
   }
 
+  // Uncontrolled path with mask: wire onInput so the user sees the
+  // formatted value as they type. Without `applyMask`, fall through to
+  // the legacy bare-defaultValue render so the DOM stays unchanged.
+  if (applyMask) {
+    const onInput = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+      const target = e.currentTarget
+      target.value = mask(target.value)
+    }
+    if (multiline) return <Textarea {...(common as React.ComponentProps<typeof Textarea>)} {...extraProps} onInput={onInput} />
+    return <Input {...(common as React.ComponentProps<typeof Input>)} type={type} {...extraProps} onInput={onInput} />
+  }
+
   if (multiline) return <Textarea {...(common as React.ComponentProps<typeof Textarea>)} {...extraProps} />
   return <Input {...(common as React.ComponentProps<typeof Input>)} type={type} {...extraProps} />
 }
+
+function identity(v: string): string { return v }

package/src/react/fields/rowChromeButton.tsx

@@ -4,6 +4,8 @@ import {
   ArrowUpIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  ChevronsDownIcon,
+  ChevronsUpIcon,
   CopyIcon,
   GripVerticalIcon,
   Trash2Icon,
@@ -154,11 +156,14 @@ export function ReorderGrip({
 }
 
 /**
- * Collapse chevron — picks the open/closed glyph from state, then lets a
- * `collapseAction` customizer override icon / label / tooltip / color.
- * When a custom icon is set, both states use it (matches Filament; flat
- * customizer surface — separate open/closed icon overrides aren't worth
- * the extra setter).
+ * Collapse chevron — picks the open/closed glyph from state, then lets
+ * customizer overrides take over. When the row is currently collapsed,
+ * `expand` (from `expandAction(...)`) wins, falling back to `collapse`
+ * (from `collapseAction(...)`) for back-compat with single-override
+ * setups. When the row is open, `collapse` is used directly. Authors
+ * who want different chrome per state set both `collapseAction` and
+ * `expandAction`; authors who want a single uniform override keep
+ * setting just `collapseAction`.
  */
 export function CollapseChevron({
   isCollapsed,
@@ -177,10 +182,13 @@ export function CollapseChevron({
     tooltip:    isCollapsed ? 'Expand' : 'Collapse',
     colorClass: 'text-muted-foreground hover:text-foreground',
   }
+  const override = isCollapsed
+    ? (buttons?.expand ?? buttons?.collapse)
+    : buttons?.collapse
   return (
     <RowChromeIconButton
       defaults={defaults}
-      override={buttons?.collapse}
+      override={override}
       disabled={disabled}
       onClick={onToggle}
       ariaExpanded={!isCollapsed}
@@ -223,3 +231,91 @@ export const DEFAULT_REORDER: ButtonDefaults = {
   tooltip:    'Drag to reorder',
   colorClass: 'text-muted-foreground',
 }
+export const DEFAULT_EXPAND_ALL: ButtonDefaults = {
+  Icon:       ChevronsDownIcon,
+  label:      'Expand all',
+  tooltip:    'Expand all',
+  colorClass: 'text-muted-foreground hover:text-foreground',
+}
+export const DEFAULT_COLLAPSE_ALL: ButtonDefaults = {
+  Icon:       ChevronsUpIcon,
+  label:      'Collapse all',
+  tooltip:    'Collapse all',
+  colorClass: 'text-muted-foreground hover:text-foreground',
+}
+
+/**
+ * Field-header strip with bulk Expand-all / Collapse-all chips. Renders
+ * only the buttons whose customizer slot is set on `buttons` — the
+ * presence of `buttons.expandAll` / `buttons.collapseAll` is what flips
+ * the matching button into existence (different from per-row chrome,
+ * which always renders when collapsible). Returns `null` when neither
+ * slot is configured so callers can mount the strip unconditionally.
+ */
+export function BulkCollapseHeader({
+  buttons,
+  disabled,
+  onExpandAll,
+  onCollapseAll,
+}: {
+  buttons:        RowButtonsMeta | undefined
+  disabled:       boolean
+  onExpandAll:    () => void
+  onCollapseAll:  () => void
+}): React.ReactElement | null {
+  const expandAllOverride   = buttons?.expandAll
+  const collapseAllOverride = buttons?.collapseAll
+  if (!expandAllOverride && !collapseAllOverride) return null
+  return (
+    <div className="flex items-center justify-end gap-1">
+      {expandAllOverride && (
+        <BulkChromeButton
+          defaults={DEFAULT_EXPAND_ALL}
+          override={expandAllOverride}
+          disabled={disabled}
+          onClick={onExpandAll}
+        />
+      )}
+      {collapseAllOverride && (
+        <BulkChromeButton
+          defaults={DEFAULT_COLLAPSE_ALL}
+          override={collapseAllOverride}
+          disabled={disabled}
+          onClick={onCollapseAll}
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * Compact button used by `BulkCollapseHeader` — icon + label, sized to
+ * read as a header chip (smaller than a full Action button, larger than
+ * the icon-only per-row chrome). Picks up the same `RowButton`
+ * override surface as every other slot.
+ */
+function BulkChromeButton({
+  defaults,
+  override,
+  disabled,
+  onClick,
+}: {
+  defaults: ButtonDefaults
+  override: RowButtonMeta | undefined
+  disabled: boolean
+  onClick:  () => void
+}): React.ReactElement {
+  const { Icon, label, tooltip, colorClass } = resolveRowChrome(defaults, override)
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={tooltip}
+      className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs ${colorClass} disabled:opacity-30`}
+    >
+      <Icon className="size-3.5" />
+      {label}
+    </button>
+  )
+}

package/src/react/fields/textInputControls.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useCallback } from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { useToast } from '../Toaster.js'
+
+/**
+ * TextField rich affordances live in this file (audit gap #3):
+ *  - `revealable()` — eye-icon toggle that flips `type="password"` ↔ `text`
+ *  - `copyable(message?)` — copy-to-clipboard button + toast
+ *  - `prefixAction(Action) / suffixAction(Action)` — embedded Action buttons
+ *  - `mask(pattern)`     — keystroke-by-keystroke pattern formatter
+ *
+ * The components export a `useTextInputControls(el, name)` hook that
+ * returns `{ before, after, type, applyMask }` so the calling renderer
+ * can mount the controls inside `FieldShell`'s `before / after` slots
+ * and feed the masked value back through the controlled-input bridge.
+ *
+ * Mask alphabet:
+ *   `9` — digit (0-9)
+ *   `a` — alpha (A-Za-z)
+ *   `*` — alphanumeric or any character
+ *   anything else — literal (rendered verbatim)
+ *
+ * Submitted values are stripped of mask literals via `stripCharacters`
+ * (server-side coerce); the client also strips on input so what the user
+ * sees in the DOM matches what gets posted.
+ */
+
+export interface TextInputControlsResult {
+  before: React.ReactNode
+  after:  React.ReactNode
+  /** Effective `type` attribute — `'password'` when password+!revealed,
+   *  `'text'` otherwise. Pass through to the rendered `<input>`. */
+  type:   string
+  /** When the field has `mask(pattern)` set, format `value` against the
+   *  pattern. Returns the formatted string. Skips when no mask. */
+  applyMask: (value: string) => string
+}
+
+/** `renderAction(meta)` is supplied by the caller (SchemaRenderer's
+ *  `renderElement`) to avoid an import cycle between the controls
+ *  module and the main schema renderer. */
+export function useTextInputControls(
+  el:           ElementMeta,
+  name:         string,
+  renderAction: (meta: ElementMeta) => React.ReactNode,
+): TextInputControlsResult {
+  const isPassword  = el['password']   === true
+  const isRevealable= el['revealable'] === true
+  const isCopyable  = el['copyable']   === true
+  const copyMessage = (el['copyMessage'] as string | undefined) ?? 'Copied!'
+  const mask        = el['mask']       as string | undefined
+  const prefixAct   = el['prefixAction'] as ElementMeta | undefined
+  const suffixAct   = el['suffixAction'] as ElementMeta | undefined
+
+  const [revealed, setRevealed] = useState(false)
+  const inputId = name
+
+  const onCopy = useCopyHandler(inputId, copyMessage)
+
+  const type = isPassword && !revealed ? 'password' : 'text'
+
+  const beforeNodes: React.ReactNode[] = []
+  if (prefixAct) beforeNodes.push(
+    <div key="pre-act" className="shrink-0">{renderAction(prefixAct)}</div>
+  )
+
+  const afterNodes: React.ReactNode[] = []
+  if (isCopyable)   afterNodes.push(<CopyButton    key="copy"    onCopy={onCopy} />)
+  if (isRevealable && isPassword) {
+    afterNodes.push(
+      <RevealToggle
+        key="reveal"
+        revealed={revealed}
+        onToggle={() => setRevealed(v => !v)}
+      />
+    )
+  }
+  if (suffixAct) afterNodes.push(
+    <div key="suf-act" className="shrink-0">{renderAction(suffixAct)}</div>
+  )
+
+  const applyMask = useCallback((value: string): string => {
+    if (!mask) return value
+    return formatWithMask(value, mask)
+  }, [mask])
+
+  return {
+    before: beforeNodes.length > 0 ? <>{beforeNodes}</> : null,
+    after:  afterNodes.length  > 0 ? <>{afterNodes}</>  : null,
+    type,
+    applyMask,
+  }
+}
+
+/**
+ * Format `raw` against `mask` using the documented alphabet. Literals
+ * in the mask render verbatim and consume no source character; pattern
+ * tokens consume the next matching source character (skipping
+ * mismatches so the user can paste an already-formatted value and have
+ * it re-format cleanly).
+ */
+export function formatWithMask(raw: string, mask: string): string {
+  let out = ''
+  let r   = 0
+  for (let m = 0; m < mask.length; m++) {
+    const token = mask[m]!
+    const isPattern = token === '9' || token === 'a' || token === '*'
+    if (isPattern) {
+      if (r >= raw.length) break
+      // Advance through `raw` until we find a matching character.
+      while (r < raw.length) {
+        const ch = raw[r]!
+        const ok = token === '9'
+          ? /[0-9]/.test(ch)
+          : token === 'a'
+            ? /[A-Za-z]/.test(ch)
+            : true
+        r++
+        if (ok) { out += ch; break }
+      }
+    } else {
+      // Literal character — emit even when raw is exhausted, so a
+      // partially-typed value still shows the upcoming chrome
+      // (e.g. `(415) ` after the user types three digits). Consume the
+      // matching raw char if present so a paste of the already-formatted
+      // value doesn't double up.
+      out += token
+      if (raw[r] === token) r++
+    }
+  }
+  return out
+}
+
+function useCopyHandler(
+  inputId: string,
+  message: string,
+): () => void {
+  const { notify } = useToast()
+  return () => {
+    if (typeof document === 'undefined') return
+    const el = document.getElementById(inputId) as HTMLInputElement | HTMLTextAreaElement | null
+    if (!el) return
+    const value = el.value
+    const writeText = navigator?.clipboard?.writeText?.bind(navigator.clipboard)
+    if (writeText) {
+      writeText(value).then(
+        () => notify({ type: 'success', title: message, duration: 2000 }),
+        () => notify({ type: 'error',   title: 'Copy failed' }),
+      )
+    } else {
+      // Fallback: select + execCommand. Modern browsers all expose
+      // navigator.clipboard, so this is rare-path.
+      el.select()
+      try {
+        document.execCommand('copy')
+        notify({ type: 'success', title: message, duration: 2000 })
+      } catch {
+        notify({ type: 'error', title: 'Copy failed' })
+      }
+      el.setSelectionRange?.(0, 0)
+    }
+  }
+}
+
+function ChromeButton({ onClick, ariaLabel, children, autoFocus }: {
+  onClick:    (e: React.MouseEvent) => void
+  ariaLabel:  string
+  children:   React.ReactNode
+  autoFocus?: boolean
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      onClick={(e) => { e.preventDefault(); onClick(e) }}
+      aria-label={ariaLabel}
+      className="inline-flex items-center justify-center rounded-md size-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground shrink-0"
+      autoFocus={autoFocus}
+    >
+      {children}
+    </button>
+  )
+}
+
+function CopyButton({ onCopy }: { onCopy: () => void }): React.ReactElement {
+  return (
+    <ChromeButton onClick={onCopy} ariaLabel="Copy">
+      <CopyIcon className="size-4" />
+    </ChromeButton>
+  )
+}
+
+function RevealToggle({ revealed, onToggle }: {
+  revealed: boolean
+  onToggle: () => void
+}): React.ReactElement {
+  return (
+    <ChromeButton
+      onClick={onToggle}
+      ariaLabel={revealed ? 'Hide value' : 'Show value'}
+    >
+      {revealed ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+    </ChromeButton>
+  )
+}
+
+// ─── Inline icon SVGs (avoids pulling lucide-react import into this file
+// without checking it's already a dep — keeps the bundle stable). ────
+
+function CopyIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  )
+}
+
+function EyeIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+function EyeOffIcon(props: React.SVGProps<SVGSVGElement>): React.ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+      <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+      <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+      <line x1="2" x2="22" y1="2" y2="22" />
+    </svg>
+  )
+}
+

package/src/react/index.ts

@@ -13,6 +13,7 @@ export {
   type FormFieldsProps,
 } from './SchemaRenderer.js'
 export { registerFieldRenderer, getFieldRenderer, type FieldRendererProps } from './registry.js'
+export { registerFieldLabelSlot, getFieldLabelSlot, type FieldLabelSlotProps } from './FieldLabelSlotRegistry.js'
 export {
   registerWidgetRenderer,
   getWidgetRenderer,

package/src/routes.ts

@@ -547,9 +547,29 @@ async function handleUploadRequest(
     }
   }
 
+  // Server-side resize via @rudderjs/image (optional peer dep)
+  const resizeWidthStr  = typeof body['resize_width']  === 'string' ? body['resize_width']  : ''
+  const resizeHeightStr = typeof body['resize_height'] === 'string' ? body['resize_height'] : ''
+  let uploadFile: File = file
+  if (resizeWidthStr && resizeHeightStr) {
+    const w = Number(resizeWidthStr)
+    const h = Number(resizeHeightStr)
+    if (Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const pkg = await import('@rudderjs/image' as string) as { image: (input: unknown) => { resize(w: number, h: number): { format(f: string): { toBuffer(): Promise<Buffer> } } } }
+        const buf = await pkg.image(file).resize(w, h).format('webp').toBuffer()
+        const baseName = file.name.replace(/\.[^.]+$/, '')
+        uploadFile = new File([buf.buffer as ArrayBuffer], `${baseName}.webp`, { type: 'image/webp' })
+      } catch {
+        // @rudderjs/image not installed or resize failed — fall through with original file
+      }
+    }
+  }
+
   try {
     const result = await cfg.uploads.adapter.put({
-      file,
+      file: uploadFile,
       ...(directory ? { directory } : {}),
       fieldName,
     })

package/src/schema/Alert.test.ts

@@ -60,4 +60,50 @@ describe('Alert schema primitive', () => {
     const out = await resolveSchema(tree)
     assert.equal('children' in out[0]!, false)
   })
+
+  // ─── Filament v5 chrome polish (2026-05-08, audit gap #8) ──
+
+  it('controls(...) is an alias for actions(...)', async () => {
+    const a = Action.make('upgrade').label('Upgrade').url('/billing')
+    const tree = [Alert.make('hi').controls([a])]
+    const out = await resolveSchema(tree)
+    const children = (out[0]!.children ?? []) as Array<{ type: string; name?: string }>
+    assert.equal(children.length, 1)
+    assert.equal(children[0]!.name, 'upgrade')
+  })
+
+  it('controlActions(...) is the variadic spread alias', async () => {
+    const a = Action.make('upgrade').label('Upgrade').url('/billing')
+    const b = Action.make('learnMore').label('Read more').url('/docs')
+    const tree = [Alert.make('hi').controlActions(a, b)]
+    const out = await resolveSchema(tree)
+    const children = (out[0]!.children ?? []) as Array<{ name?: string }>
+    assert.equal(children.length, 2)
+    assert.equal(children[0]!.name, 'upgrade')
+    assert.equal(children[1]!.name, 'learnMore')
+  })
+
+  it('dismissible() emits dismissible: true on meta; absent by default', () => {
+    assert.equal('dismissible' in Alert.make('a').toMeta(),                   false)
+    assert.equal(Alert.make('a').dismissible().toMeta().dismissible,          true)
+    assert.equal('dismissible' in Alert.make('a').dismissible(false).toMeta(), false)
+  })
+
+  it('persistDismissal(key) auto-arms dismissible() and stamps the key', () => {
+    const meta = Alert.make('a').persistDismissal('billing-2026-q2').toMeta()
+    assert.equal(meta.dismissible,      true)
+    assert.equal(meta.persistDismissal, 'billing-2026-q2')
+  })
+
+  it('iconColor() emits the override only when set', () => {
+    assert.equal('iconColor' in Alert.make('a').toMeta(),                  false)
+    assert.equal(Alert.make('a').iconColor('destructive').toMeta().iconColor, 'destructive')
+  })
+
+  it('footerActionsAlignment() emits only when non-default', () => {
+    assert.equal('actionsAlignment' in Alert.make('a').toMeta(),                                 false)
+    assert.equal('actionsAlignment' in Alert.make('a').footerActionsAlignment('start').toMeta(), false)
+    assert.equal(Alert.make('a').footerActionsAlignment('center').toMeta().actionsAlignment, 'center')
+    assert.equal(Alert.make('a').footerActionsAlignment('end').toMeta().actionsAlignment,    'end')
+  })
 })