@pilotiq/pilotiq 0.2.0 → 0.4.0

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/pageData.ts

@@ -955,6 +955,37 @@ export function tagFormWizardUrls(
   }
 }
 
+/**
+ * Stamp `_agentRunBase` on every field element in the resolved
+ * `ElementMeta[]` tree that carries `aiActions`. Operates on the
+ * post-`resolveSchema` wire shape (plain objects) rather than on
+ * `Element` instances — `aiActions` is added by the `field-ai.ts`
+ * wrapper during `toMeta()`, so it isn't visible to pre-resolve walkers.
+ *
+ * Only called on edit pages where a `recordId` is known. Create pages
+ * deliberately skip it — field AI actions target existing content.
+ */
+export function tagFieldAiUrls(
+  elements: ReadonlyArray<Record<string, unknown>>,
+  agentBase: string,
+): void {
+  for (const el of elements) {
+    if (Array.isArray(el['aiActions']) && (el['aiActions'] as unknown[]).length > 0) {
+      ;(el as Record<string, unknown>)['_agentRunBase'] = agentBase
+    }
+    const children = el['children']
+    if (Array.isArray(children)) tagFieldAiUrls(children as Record<string, unknown>[], agentBase)
+    // Repeater rows
+    const rows = el['rows']
+    if (Array.isArray(rows)) {
+      for (const row of rows as Record<string, unknown>[]) {
+        const rowChildren = row['children']
+        if (Array.isArray(rowChildren)) tagFieldAiUrls(rowChildren as Record<string, unknown>[], agentBase)
+      }
+    }
+  }
+}
+
 /**
  * Audit row 2026-05-07 cont'd⁸ — stamp the inline-create-option endpoint
  * URL on every `SelectField` that has called `createOptionForm()`. Walks
@@ -1860,6 +1891,8 @@ export async function resourceEditData(
     editRoute,
   )
 
+  tagFieldAiUrls(schemaData as Record<string, unknown>[], `${resourceBase}/${recordId}/_agents`)
+
   return {
     panel:    await panelInfo(pilotiq, req, editRoute),
     page:     PageClass.toMeta(),

package/src/react/FieldLabelSlotRegistry.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from 'react'
+
+/**
+ * Props the field label slot component receives from `SchemaRenderer`.
+ * For AI actions this carries the field name, action list, and the
+ * pre-composed agent-run base URL stamped by `tagFieldAiUrls`.
+ */
+export interface FieldLabelSlotProps {
+  fieldName:    string
+  actions:      Array<{ slug: string; label: string; icon?: string }>
+  agentRunBase: string
+}
+
+let _component: ComponentType<FieldLabelSlotProps> | null = null
+
+/**
+ * Register a component to render inline next to every field label that
+ * has `aiActions` stamped on its meta. Called once at boot by a plugin's
+ * `register(panel)` step (e.g. `@pilotiq-pro/ai`). No-op when no plugin
+ * registers — `getFieldLabelSlot()` returns `null` and `SchemaRenderer`
+ * skips the slot.
+ */
+export function registerFieldLabelSlot(C: ComponentType<FieldLabelSlotProps>): void {
+  _component = C
+}
+
+/** Returns the registered field label slot component, or `null`. */
+export function getFieldLabelSlot(): ComponentType<FieldLabelSlotProps> | null {
+  return _component
+}

package/src/react/SchemaRenderer.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react'
 import type { ElementMeta } from '../schema/Element.js'
 import { getFieldRenderer } from './registry.js'
+import { getFieldLabelSlot } from './FieldLabelSlotRegistry.js'
 import { FormStateProvider, useFormState, FormIdContext } from './FormStateContext.js'
 import { Checkbox } from './ui/checkbox.js'
 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 +67,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'
@@ -183,6 +186,16 @@ function renderField(el: ElementMeta, index: number): React.ReactNode {
     return <HiddenInput key={index} name={name} defaultValue={defaultValue} />
   }
 
+  // Field label slot — rendered next to the label when a plugin registered
+  // a component via registerFieldLabelSlot() and the field has aiActions +
+  // _agentRunBase stamped on its meta (set by tagFieldAiUrls in pageData).
+  const LabelSlot = getFieldLabelSlot()
+  const aiActions = Array.isArray(el['aiActions']) ? el['aiActions'] as Array<{ slug: string; label: string; icon?: string }> : undefined
+  const agentRunBase = typeof el['_agentRunBase'] === 'string' ? el['_agentRunBase'] : undefined
+  const labelSlot = (LabelSlot && aiActions?.length && agentRunBase)
+    ? <LabelSlot fieldName={name} actions={aiActions} agentRunBase={agentRunBase} />
+    : undefined
+
   const autofocus = el['autofocus'] === true
   const extraInput = el['extraInputAttributes'] as Record<string, string | number | boolean> | undefined
   const common = {
@@ -202,7 +215,7 @@ function renderField(el: ElementMeta, index: number): React.ReactNode {
   const Custom = getFieldRenderer(fieldType)
   if (Custom) {
     return (
-      <FieldShell key={index} el={el} name={name} label={label} required={required}>
+      <FieldShell key={index} el={el} name={name} label={label} required={required} labelSlot={labelSlot}>
         <Custom
           el={el}
           name={name}
@@ -215,10 +228,90 @@ 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}
+        labelSlot={labelSlot}
+      />
+    )
+  }
+
   const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder)
 
   return (
-    <FieldShell key={index} el={el} name={name} label={label} required={required}>
+    <FieldShell key={index} el={el} name={name} label={label} required={required} labelSlot={labelSlot}>
+      {input}
+    </FieldShell>
+  )
+}
+
+/**
+ * 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, labelSlot,
+}: {
+  el:          ElementMeta
+  name:        string
+  label:       string
+  required:    boolean
+  common:      Record<string, unknown>
+  labelSlot?:  React.ReactNode
+}): 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}
+      labelSlot={labelSlot}
+    >
       {input}
     </FieldShell>
   )
@@ -404,6 +497,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 +843,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 +1011,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 +2778,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 +2976,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,20 @@ 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
+  /** Optional ReactNode rendered inline next to the label — used by
+   *  plugins that register via `registerFieldLabelSlot()`. */
+  labelSlot?: React.ReactNode
 }
 
-export function FieldShell({ el, name, label, required, children }: FieldShellProps): React.ReactElement {
+export function FieldShell({ el, name, label, required, children, before, after, labelSlot }: 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
@@ -36,15 +47,19 @@ export function FieldShell({ el, name, label, required, children }: FieldShellPr
   const labelEl = label !== '' ? (
     <label htmlFor={name} className={labelClass}>
       {label}{required && <span className="text-destructive ml-0.5">*</span>}
+      {labelSlot}
     </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