@pilotiq/pilotiq 0.2.0 → 0.4.0

package/dist/react/FieldLabelSlotRegistry.d.ts

@@ -0,0 +1,26 @@
+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;
+}
+/**
+ * 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 declare function registerFieldLabelSlot(C: ComponentType<FieldLabelSlotProps>): void;
+/** Returns the registered field label slot component, or `null`. */
+export declare function getFieldLabelSlot(): ComponentType<FieldLabelSlotProps> | null;
+//# sourceMappingURL=FieldLabelSlotRegistry.d.ts.map

package/dist/react/FieldLabelSlotRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabelSlotRegistry.d.ts","sourceRoot":"","sources":["../../src/react/FieldLabelSlotRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAK,MAAM,CAAA;IACpB,OAAO,EAAO,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACnE,YAAY,EAAE,MAAM,CAAA;CACrB;AAID;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAElF;AAED,oEAAoE;AACpE,wBAAgB,iBAAiB,IAAI,aAAa,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAE7E"}

package/dist/react/FieldLabelSlotRegistry.js

@@ -0,0 +1,16 @@
+let _component = 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) {
+    _component = C;
+}
+/** Returns the registered field label slot component, or `null`. */
+export function getFieldLabelSlot() {
+    return _component;
+}
+//# sourceMappingURL=FieldLabelSlotRegistry.js.map

package/dist/react/FieldLabelSlotRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabelSlotRegistry.js","sourceRoot":"","sources":["../../src/react/FieldLabelSlotRegistry.ts"],"names":[],"mappings":"AAaA,IAAI,UAAU,GAA8C,IAAI,CAAA;AAEhE;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,CAAqC;IAC1E,UAAU,GAAG,CAAC,CAAA;AAChB,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAA;AACnB,CAAC"}

package/dist/react/SchemaRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaRenderer.d.ts","sourceRoot":"","sources":["../../src/react/SchemaRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAyHvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAG,WAAW,EAAE,CAAA;IACxB,MAAM,CAAC,EAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAapF;AAqXD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE,KAAK,MAAM,GAAM,CAAC,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;AAC7E,KAAK,QAAQ,GAAI,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;AAkDtC;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAO,MAAM,EAChB,GAAG,EAAO,MAAM,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAI,MAAM,EAChB,MAAM,GAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACrC,YAAY,CAAC,EAAE,QAAQ,GACtB,OAAO,CAAC,IAAI,CAAC,CAoCf;AAk+ED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAC/B,KAAK,CAAC,SAAS,CAejB;AA41FD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB,kDAW3E"}
+{"version":3,"file":"SchemaRenderer.d.ts","sourceRoot":"","sources":["../../src/react/SchemaRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AA4HvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAG,WAAW,EAAE,CAAA;IACxB,MAAM,CAAC,EAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAapF;AAieD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE,KAAK,MAAM,GAAM,CAAC,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;AAC7E,KAAK,QAAQ,GAAI,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;AAkDtC;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAO,MAAM,EAChB,GAAG,EAAO,MAAM,EAAE,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAI,MAAM,EAChB,MAAM,GAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACrC,YAAY,CAAC,EAAE,QAAQ,GACtB,OAAO,CAAC,IAAI,CAAC,CAoCf;AAilFD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAC/B,KAAK,CAAC,SAAS,CAejB;AA41FD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB,kDAW3E"}

package/dist/react/SchemaRenderer.js

@@ -1,12 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 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';
@@ -30,7 +32,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '
 import { Table as DataTable, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './ui/table.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './ui/tooltip.js';
-import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, } from 'lucide-react';
+import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, InfoIcon, TriangleAlertIcon, CircleCheckIcon, CircleAlertIcon, } from 'lucide-react';
 import { useNavigate } from './navigate.js';
 import { parseDateRangeValue, encodeDateRangeValue, } from '../filters/DateRangeFilter.js';
 import { parseMultiSelectValue, encodeMultiSelectValue, } from '../filters/MultiSelectFilter.js';
@@ -87,6 +89,15 @@ function renderField(el, index) {
     if (fieldType === 'hidden') {
         return _jsx(HiddenInput, { name: name, defaultValue: defaultValue }, index);
     }
+    // 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'] : undefined;
+    const agentRunBase = typeof el['_agentRunBase'] === 'string' ? el['_agentRunBase'] : undefined;
+    const labelSlot = (LabelSlot && aiActions?.length && agentRunBase)
+        ? _jsx(LabelSlot, { fieldName: name, actions: aiActions, agentRunBase: agentRunBase })
+        : undefined;
     const autofocus = el['autofocus'] === true;
     const extraInput = el['extraInputAttributes'];
     const common = {
@@ -104,10 +115,40 @@ function renderField(el, index) {
     // switch so consumers can override built-ins too if they want.
     const Custom = getFieldRenderer(fieldType);
     if (Custom) {
-        return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, children: _jsx(Custom, { el: el, name: name, defaultValue: defaultValue, required: required, disabled: disabled, placeholder: placeholder }) }, index));
+        return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, labelSlot: labelSlot, children: _jsx(Custom, { el: el, name: name, defaultValue: defaultValue, required: required, disabled: disabled, placeholder: placeholder }) }, index));
+    }
+    // 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 (_jsx(TextFieldShell, { el: el, name: name, label: label, required: required, common: common, labelSlot: labelSlot }, index));
     }
     const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder);
-    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, children: input }, index));
+    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, labelSlot: labelSlot, children: input }, index));
+}
+/**
+ * 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, }) {
+    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 = {};
+    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'] : undefined;
+    const input = (_jsxs(_Fragment, { children: [_jsx(TextLikeInput, { el: el, name: name, common: common, type: controls.type, extraProps: textExtra, multiline: false, applyMask: controls.applyMask }), datalist && (_jsx("datalist", { id: `${name}__datalist`, children: datalist.map((v, i) => _jsx("option", { value: v }, i)) }))] }));
+    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, before: controls.before, after: controls.after, labelSlot: labelSlot, children: input }));
 }
 function renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder) {
     switch (fieldType) {
@@ -178,7 +219,13 @@ function renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common,
             return (_jsx(TagsInput, { name: name, defaultValue: defaultValue, disabled: disabled, placeholder: placeholder, suggestions: suggestions, separator: separator, splitKeys: splitKeys, maxTags: maxTags, reorderable: reorderable }));
         }
         case 'fileUpload': {
-            return (_jsx(FileUploadInput, { name: name, defaultValue: defaultValue, disabled: disabled, accept: el['accept'], maxSize: typeof el['maxSize'] === 'number' ? el['maxSize'] : undefined, multiple: Boolean(el['multiple']), preview: el['preview'] !== false, directory: typeof el['directory'] === 'string' ? el['directory'] : undefined, uploadUrl: typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined }));
+            return (_jsx(FileUploadInput, { name: name, defaultValue: defaultValue, disabled: disabled, accept: el['accept'], maxSize: typeof el['maxSize'] === 'number' ? el['maxSize'] : undefined, multiple: Boolean(el['multiple']), 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'] }
+                    : {}), imageEditor: Boolean(el['imageEditor']), circleCropper: Boolean(el['circleCropper']), automaticallyCropImagesToAspectRatio: Boolean(el['automaticallyCropImagesToAspectRatio']), ...(Array.isArray(el['imageEditorAspectRatioOptions'])
+                    ? { imageEditorAspectRatioOptions: el['imageEditorAspectRatioOptions'] }
+                    : {}) }));
         }
         case 'markdown': {
             const toolbarButtons = el['toolbarButtons'] ?? [];
@@ -403,6 +450,9 @@ function ActionModalDialog({ trigger, meta, ids, initialValues = {}, open: contr
     const dispatchUrl = meta['dispatchUrl'];
     const fields = (meta.children ?? []);
     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'] ?? []);
     const heading = modal?.heading ?? confirm?.title ?? (hasForm ? String(meta['label'] ?? 'Submit') : 'Are you sure?');
     const description = modal?.description ?? confirm?.message;
     const submitLabel = modal?.submitLabel ?? (destructive ? 'Delete' : (hasForm ? 'Submit' : 'Confirm'));
@@ -534,7 +584,7 @@ function ActionModalDialog({ trigger, meta, ids, initialValues = {}, open: contr
                     if (!o)
                         reset();
                     setOpen(o);
-                }, children: _jsxs(DialogContent, { className: popupClass, children: [showCloseButton && (_jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOpen(false), className: "absolute top-3 right-3 z-20 inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: _jsx(XIcon, { className: "size-4" }) })), _jsxs("form", { ref: formRef, onSubmit: onSubmit, className: formCls, children: [_jsxs(DialogHeader, { className: headerCls, children: [_jsxs(DialogTitle, { className: modal?.icon ? 'flex items-center gap-2' : undefined, children: [HeaderIcon && (_jsx(HeaderIcon, { "aria-hidden": true, className: `size-5 shrink-0 ${iconColorClass ?? ''}`.trim() })), _jsx("span", { children: heading })] }), description && _jsx(DialogDescription, { children: description })] }), hasForm && (_jsx("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: fields.map((f, i) => renderFormChild(f, i, initialValues, errors)) })), !hasForm && stickyMode && _jsx("div", { className: bodyCls }), serverError && (_jsx("p", { className: `py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim(), children: serverError })), _jsxs(DialogFooter, { className: footerCls, children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: cancelClass, children: cancelLabel }), _jsx("button", { type: "submit", disabled: submitting, autoFocus: submitAutofocus, className: confirmClass, children: submitting ? 'Working…' : submitLabel })] })] })] }) })] }));
+                }, children: _jsxs(DialogContent, { className: popupClass, children: [showCloseButton && (_jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOpen(false), className: "absolute top-3 right-3 z-20 inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: _jsx(XIcon, { className: "size-4" }) })), _jsxs("form", { ref: formRef, onSubmit: onSubmit, className: formCls, children: [_jsxs(DialogHeader, { className: headerCls, children: [_jsxs(DialogTitle, { className: modal?.icon ? 'flex items-center gap-2' : undefined, children: [HeaderIcon && (_jsx(HeaderIcon, { "aria-hidden": true, className: `size-5 shrink-0 ${iconColorClass ?? ''}`.trim() })), _jsx("span", { children: heading })] }), description && _jsx(DialogDescription, { children: description })] }), (hasForm || contentFooter.length > 0) && (_jsxs("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: [fields.map((f, i) => renderFormChild(f, i, initialValues, errors)), contentFooter.map((c, i) => renderElement(c, fields.length + i))] })), !hasForm && contentFooter.length === 0 && stickyMode && _jsx("div", { className: bodyCls }), serverError && (_jsx("p", { className: `py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim(), children: serverError })), _jsxs(DialogFooter, { className: footerCls, children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: cancelClass, children: cancelLabel }), _jsx("button", { type: "submit", disabled: submitting, autoFocus: submitAutofocus, className: confirmClass, children: submitting ? 'Working…' : submitLabel })] })] })] }) })] }));
 }
 /**
  * Confirm-style dialog wrapping an action's button. The trigger button is
@@ -1460,6 +1510,70 @@ function EntryCopyButton({ text, label }) {
     };
     return (_jsx("button", { type: "button", onClick: handleClick, "aria-label": label, title: label, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted", children: copied ? _jsx(CheckIcon, { className: "size-3.5" }) : _jsx(CopyIcon, { className: "size-3.5" }) }));
 }
+// ─── 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 = {
+    info: InfoIcon,
+    warning: TriangleAlertIcon,
+    success: CircleCheckIcon,
+    danger: CircleAlertIcon,
+};
+const ALERT_TYPE_DEFAULT_ICON_COLOR = {
+    info: 'info',
+    warning: 'warning',
+    success: 'success',
+    danger: 'destructive',
+};
+const ALERT_ACTIONS_ALIGNMENT = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+};
+function alertPersistKey(persistKey) {
+    return `pilotiq.alert.${persistKey}`;
+}
+function AlertRenderer(props) {
+    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 = () => {
+        setDismissed(true);
+        if (persistDismissal && typeof window !== 'undefined') {
+            try {
+                window.localStorage.setItem(alertPersistKey(persistDismissal), '1');
+            }
+            catch { /* localStorage blocked — dismiss is per-mount only */ }
+        }
+    };
+    return (_jsxs("div", { className: `relative rounded-lg border p-4 ${styles} ${dismissible ? 'pr-9' : ''}`, children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Icon, { className: `size-5 shrink-0 mt-0.5 ${iconColorCls}`, "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [title !== undefined && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: content }), footer.length > 0 && (_jsx("div", { className: `flex items-center gap-2 mt-3 ${alignCls}`, children: footer }))] })] }), dismissible && (_jsx("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", children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) }))] }));
+}
 function renderElement(el, index) {
     switch (el.type) {
         case 'text':
@@ -1508,11 +1622,8 @@ function renderElement(el, index) {
             return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [titleBlock, _jsx("div", { className: "flex items-center gap-2 shrink-0", children: headerActions.map((a, i) => renderActionLike(a, i)) })] }, index));
         }
         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 (_jsxs("div", { className: `rounded-lg border p-4 ${styles}`, children: [title && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: String(el['content'] ?? '') }), footer.length > 0 && (_jsx("div", { className: "flex items-center gap-2 mt-3", children: footer.map((a, i) => renderActionLike(a, i)) }))] }, index));
+            return (_jsx(AlertRenderer, { 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)) }, index));
         }
         case 'emptyState': {
             const heading = String(el['heading'] ?? '');