hazo_config 2.0.0 → 2.1.0

package/README.md

@@ -223,6 +223,66 @@ The AppConfig component supports:
 - Section-based organization
 - Type conversion between general and JSON
 
+### Example: Generic List Editor (v2.0.2+)
+
+```typescript
+import { AppConfigListEditor } from 'hazo_config'
+import type { ColumnDef } from 'hazo_config'
+
+interface Tag {
+  [key: string]: unknown
+  tag_id: string
+  tag_label: string
+  color: string
+  description: string
+}
+
+const TAG_COLUMNS: ColumnDef<Tag>[] = [
+  { field: 'tag_label', label: 'Label', type: 'text', required: true, list_display: 'primary' },
+  { field: 'tag_id', label: 'Tag ID', type: 'text', required: true, list_display: 'badge' },
+  { field: 'color', label: 'Color', type: 'color_swatch', color_options: ['bg-blue-100 text-blue-800', 'bg-green-100 text-green-800'] },
+  { field: 'description', label: 'Description', type: 'textarea', list_display: 'secondary' },
+]
+
+export function TagManager({ tags, onTagsChange }) {
+  return (
+    <AppConfigListEditor<Tag>
+      items={tags}
+      on_items_change={onTagsChange}
+      columns={TAG_COLUMNS}
+      id_field="tag_id"
+      auto_id_from="tag_label"
+      title="Classification Tags"
+      description="Manage tags for document categorization."
+      enable_search={true}
+      delete_confirmation={(tag) => `Delete "${tag.tag_label}"?`}
+    />
+  )
+}
+```
+
+The `AppConfigListEditor` is a generic, reusable CRUD list editor for arrays of structured objects. It supports:
+- Dynamic form fields (text, textarea, number, select, color_swatch, toggle)
+- Auto-ID generation from a source field
+- Search/filter for long lists
+- Delete confirmation dialogs
+- Color swatch picker
+- Save status indicators (saving/saved/error)
+- Custom item rendering (indicator, preview, full row override)
+- Field validation with inline error messages
+- **JSON import/export** — export items as `.json` file, import from file with validation and duplicate skipping
+
+#### JSON Import/Export
+
+The list editor includes built-in Export and Import buttons in the section bar. Export downloads the current items as a formatted JSON file. Import opens a file picker, validates the JSON against column definitions, and merges new items into the list (skipping duplicates by ID).
+
+Utility functions are also exported for programmatic use:
+
+```typescript
+import { validate_import_data, merge_items, export_items_to_json, generate_export_filename } from 'hazo_config'
+import type { ImportResult } from 'hazo_config'
+```
+
 ## Development
 
 ### Local Setup
@@ -266,6 +326,8 @@ hazo_config/
 │   │   ├── config_viewer.tsx      # INI config viewer
 │   │   ├── config_editor.tsx      # INI config editor
 │   │   ├── app_config.tsx         # Database-backed config (v2.0+)
+│   │   ├── app_config_list_editor/ # Generic CRUD list editor (v2.0.2+)
+│   │   ├── ui/                    # shadcn/ui primitives (Dialog, Button, etc.)
 │   │   ├── use_app_config.ts      # Hook for app config
 │   │   └── *.stories.tsx
 │   ├── lib/                 # Core config management

package/dist/components/app_config_list_editor/app_config_list_editor.d.ts

@@ -0,0 +1,7 @@
+import type { AppConfigListEditorProps } from './types.js';
+/**
+ * AppConfigListEditor - A polished CRUD list editor for config item arrays.
+ * Purely callback-based: no API calls, no database access.
+ */
+export declare function AppConfigListEditor<T extends Record<string, unknown>>({ items, on_items_change, columns, id_field, auto_id_from, title, description, enable_search, search_threshold, render_item, render_item_indicator, render_preview, delete_confirmation, max_items, id_editable_after_create, className, save_status, }: AppConfigListEditorProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app_config_list_editor.d.ts.map

package/dist/components/app_config_list_editor/app_config_list_editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app_config_list_editor.d.ts","sourceRoot":"","sources":["../../../src/components/app_config_list_editor/app_config_list_editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAqC,MAAM,YAAY,CAAA;AAS7F;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACrE,KAAK,EACL,eAAe,EACf,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,aAAqB,EACrB,gBAAoB,EACpB,WAAW,EACX,qBAAqB,EACrB,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,wBAAgC,EAChC,SAAS,EACT,WAAoB,GACrB,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CAgQ7B"}

package/dist/components/app_config_list_editor/app_config_list_editor.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// AppConfigListEditor - Main component
+// Generic CRUD list editor for arrays of structured objects stored as JSON config
+import { useState, useCallback, useMemo } from 'react';
+import { Plus } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { ListItemRow } from './components/list_item_row.js';
+import { EditModal } from './components/edit_modal.js';
+import { SearchBar } from './components/search_bar.js';
+import { EmptyState } from './components/empty_state.js';
+import { DeleteDialog } from './components/delete_dialog.js';
+import { SaveStatusIndicator } from './components/save_status_indicator.js';
+import { ImportExportButtons } from './components/import_export_buttons.js';
+/**
+ * AppConfigListEditor - A polished CRUD list editor for config item arrays.
+ * Purely callback-based: no API calls, no database access.
+ */
+export function AppConfigListEditor({ items, on_items_change, columns, id_field, auto_id_from, title, description, enable_search = false, search_threshold = 8, render_item, render_item_indicator, render_preview, delete_confirmation, max_items, id_editable_after_create = false, className, save_status = 'idle', }) {
+    const [search_term, set_search_term] = useState('');
+    const [edit_state, set_edit_state] = useState(null);
+    const [delete_state, set_delete_state] = useState(null);
+    // Derive a friendly item label from the title (e.g., "Classification Tags" -> "tags")
+    const item_label = useMemo(() => {
+        if (!title)
+            return 'items';
+        const words = title.toLowerCase().split(/\s+/);
+        return words[words.length - 1] || 'items';
+    }, [title]);
+    // Derive singular item type label (e.g., "tags" -> "Tag")
+    const item_type_label = useMemo(() => {
+        const singular = item_label.replace(/s$/, '');
+        return singular.charAt(0).toUpperCase() + singular.slice(1);
+    }, [item_label]);
+    // Derive section header label (uppercase, e.g., "TAGS")
+    const section_label = useMemo(() => item_label.toUpperCase(), [item_label]);
+    // Get all existing IDs for duplicate checking
+    const existing_ids = useMemo(() => items.map((item) => String(item[id_field])), [items, id_field]);
+    // Filter items by search term
+    const filtered_items = useMemo(() => {
+        if (!search_term.trim())
+            return items;
+        const term = search_term.toLowerCase();
+        return items.filter((item) => columns.some((col) => {
+            if (col.list_display === 'hidden' && col.show_in_list === false)
+                return false;
+            const val = item[col.field];
+            return val !== undefined && val !== null && String(val).toLowerCase().includes(term);
+        }));
+    }, [items, search_term, columns]);
+    const show_search = enable_search && items.length > search_threshold;
+    const is_max_reached = max_items !== undefined && max_items !== null && items.length >= max_items;
+    // CRUD handlers
+    const handle_add = useCallback(() => {
+        const empty_item = {};
+        // Initialize with defaults for toggle fields
+        for (const col of columns) {
+            if (col.type === 'toggle') {
+                empty_item[col.field] = false;
+            }
+        }
+        set_edit_state({
+            mode: 'create',
+            item: empty_item,
+            errors: new Map(),
+            user_touched_id: false,
+        });
+    }, [columns]);
+    const handle_edit = useCallback((item) => {
+        set_edit_state({
+            mode: 'edit',
+            item: { ...item },
+            original_item: item,
+            errors: new Map(),
+            user_touched_id: true,
+        });
+    }, []);
+    const handle_delete_request = useCallback((item) => {
+        if (!delete_confirmation) {
+            // No confirmation needed, delete immediately
+            on_items_change(items.filter((i) => i[id_field] !== item[id_field]));
+            return;
+        }
+        set_delete_state({ item });
+    }, [delete_confirmation, items, id_field, on_items_change]);
+    const handle_delete_confirm = useCallback(() => {
+        if (!delete_state)
+            return;
+        on_items_change(items.filter((i) => i[id_field] !== delete_state.item[id_field]));
+        set_delete_state(null);
+    }, [delete_state, items, id_field, on_items_change]);
+    const handle_save = useCallback((saved_item) => {
+        if (edit_state?.mode === 'create') {
+            on_items_change([...items, saved_item]);
+        }
+        else if (edit_state?.mode === 'edit') {
+            const original_id = edit_state.original_item?.[id_field];
+            on_items_change(items.map((i) => (i[id_field] === original_id ? saved_item : i)));
+        }
+        set_edit_state(null);
+    }, [edit_state, items, id_field, on_items_change]);
+    const handle_cancel_edit = useCallback(() => {
+        set_edit_state(null);
+    }, []);
+    const handle_cancel_delete = useCallback(() => {
+        set_delete_state(null);
+    }, []);
+    // Get delete confirmation message
+    const delete_message = useMemo(() => {
+        if (!delete_state || !delete_confirmation)
+            return '';
+        if (typeof delete_confirmation === 'function') {
+            return delete_confirmation(delete_state.item);
+        }
+        return delete_confirmation;
+    }, [delete_state, delete_confirmation]);
+    // Get delete item name for dialog title
+    const delete_item_name = useMemo(() => {
+        if (!delete_state)
+            return '';
+        const primary_col = columns.find((c) => c.list_display === 'primary');
+        if (primary_col) {
+            return String(delete_state.item[primary_col.field] ?? '');
+        }
+        return String(delete_state.item[id_field] ?? '');
+    }, [delete_state, columns, id_field]);
+    return (_jsxs("div", { className: cn('cls_list_editor', className), children: [(title || description) && (_jsxs("div", { className: "cls_list_editor_header mb-6", children: [title && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: title }), _jsx(SaveStatusIndicator, { status: save_status })] })), description && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: description }))] })), _jsxs("div", { className: "cls_list_editor_section_bar flex items-center justify-between mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500", children: section_label }) }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(ImportExportButtons, { items: items, on_items_change: on_items_change, columns: columns, id_field: id_field, title: title, max_items: max_items }), _jsxs("button", { type: "button", onClick: handle_add, disabled: is_max_reached, className: cn('inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-full transition-colors', is_max_reached
+                                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                                    : 'bg-violet-600 hover:bg-violet-700 text-white'), title: is_max_reached ? `Maximum of ${max_items} items reached` : undefined, children: [_jsx(Plus, { className: "w-4 h-4" }), "Add"] })] })] }), show_search && (_jsx("div", { className: "mb-3", children: _jsx(SearchBar, { value: search_term, on_change: set_search_term, item_count: filtered_items.length, item_label: item_label }) })), _jsx("div", { className: "cls_list_editor_card rounded-xl border border-gray-200 bg-white overflow-hidden", children: items.length === 0 ? (_jsx(EmptyState, { item_label: item_label, on_add: handle_add })) : filtered_items.length === 0 ? (_jsxs("div", { className: "py-8 text-center text-sm text-gray-500", children: ["No ", item_label, " matching \u201C", search_term, "\u201D"] })) : (_jsx("div", { className: "divide-y divide-gray-100", children: filtered_items.map((item, index) => (_jsx(ListItemRow, { item: item, index: index, columns: columns, render_item: render_item, render_item_indicator: render_item_indicator, on_edit: () => handle_edit(item), on_delete: () => handle_delete_request(item) }, String(item[id_field])))) })) }), is_max_reached && (_jsxs("p", { className: "text-xs text-gray-400 mt-2", children: ["Maximum of ", max_items, " ", item_label, " reached."] })), edit_state && (_jsx(EditModal, { open: true, mode: edit_state.mode, item: edit_state.item, columns: columns, id_field: id_field, auto_id_from: auto_id_from, id_editable_after_create: id_editable_after_create, existing_ids: existing_ids, item_type_label: item_type_label, render_preview: render_preview, on_save: handle_save, on_cancel: handle_cancel_edit })), delete_state && (_jsx(DeleteDialog, { open: true, item_name: delete_item_name, message: delete_message, on_confirm: handle_delete_confirm, on_cancel: handle_cancel_delete }))] }));
+}

package/dist/components/app_config_list_editor/components/color_swatch_picker.d.ts

@@ -0,0 +1,9 @@
+interface ColorSwatchPickerProps {
+    value: string;
+    options: string[];
+    on_change: (color: string) => void;
+    className?: string;
+}
+export declare function ColorSwatchPicker({ value, options, on_change, className, }: ColorSwatchPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=color_swatch_picker.d.ts.map

package/dist/components/app_config_list_editor/components/color_swatch_picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_swatch_picker.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/color_swatch_picker.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,sBAAsB,2CA+BxB"}

package/dist/components/app_config_list_editor/components/color_swatch_picker.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Color swatch picker component
+// Displays a row of circular color swatches for selection
+import { Check } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function ColorSwatchPicker({ value, options, on_change, className, }) {
+    return (_jsx("div", { className: cn('cls_color_swatch_picker flex flex-wrap gap-2', className), children: options.map((color) => {
+            const is_selected = value === color;
+            // Extract the bg class for the swatch display
+            const bg_class = color.split(' ').find(c => c.startsWith('bg-')) || 'bg-gray-200';
+            return (_jsx("button", { type: "button", onClick: () => on_change(color), className: cn('cls_color_swatch w-7 h-7 rounded-full flex items-center justify-center transition-transform hover:scale-110', bg_class, is_selected
+                    ? 'ring-2 ring-violet-600 ring-offset-2'
+                    : 'ring-1 ring-gray-200'), "aria-label": `Select color ${color}`, "aria-pressed": is_selected, children: is_selected && (_jsx(Check, { className: "w-3.5 h-3.5 text-current opacity-80" })) }, color));
+        }) }));
+}

package/dist/components/app_config_list_editor/components/delete_dialog.d.ts

@@ -0,0 +1,10 @@
+interface DeleteDialogProps {
+    open: boolean;
+    item_name: string;
+    message: string;
+    on_confirm: () => void;
+    on_cancel: () => void;
+}
+export declare function DeleteDialog({ open, item_name, message, on_confirm, on_cancel, }: DeleteDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=delete_dialog.d.ts.map

package/dist/components/app_config_list_editor/components/delete_dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete_dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/delete_dialog.tsx"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,2CAgCnB"}

package/dist/components/app_config_list_editor/components/delete_dialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Delete confirmation dialog component
+// Uses shadcn AlertDialog with red warning styling
+import { AlertTriangle } from 'lucide-react';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, } from '../../ui/alert-dialog.js';
+export function DeleteDialog({ open, item_name, message, on_confirm, on_cancel, }) {
+    return (_jsx(AlertDialog, { open: open, onOpenChange: (is_open) => { if (!is_open)
+            on_cancel(); }, children: _jsxs(AlertDialogContent, { className: "cls_delete_dialog max-w-sm rounded-2xl", children: [_jsxs(AlertDialogHeader, { className: "items-center sm:items-center", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-2", children: _jsx(AlertTriangle, { className: "w-6 h-6 text-red-600" }) }), _jsxs(AlertDialogTitle, { className: "text-center", children: ["Delete \u201C", item_name, "\u201D?"] }), _jsx(AlertDialogDescription, { className: "text-center", children: message })] }), _jsxs(AlertDialogFooter, { className: "sm:justify-center gap-2", children: [_jsx(AlertDialogCancel, { onClick: on_cancel, className: "rounded-full", children: "Cancel" }), _jsx(AlertDialogAction, { onClick: on_confirm, className: "rounded-full bg-red-600 text-white hover:bg-red-700", children: "Delete" })] })] }) }));
+}

package/dist/components/app_config_list_editor/components/edit_modal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ColumnDef } from '../types.js';
+interface EditModalProps<T extends Record<string, unknown>> {
+    open: boolean;
+    mode: 'create' | 'edit';
+    item: Partial<T>;
+    columns: ColumnDef<T>[];
+    id_field: keyof T & string;
+    auto_id_from?: keyof T & string;
+    id_editable_after_create?: boolean;
+    existing_ids: string[];
+    item_type_label: string;
+    render_preview?: (item: T) => React.ReactNode;
+    on_save: (item: T) => void;
+    on_cancel: () => void;
+}
+export declare function EditModal<T extends Record<string, unknown>>({ open, mode, item: initial_item, columns, id_field, auto_id_from, id_editable_after_create, existing_ids, item_type_label, render_preview, on_save, on_cancel, }: EditModalProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=edit_modal.d.ts.map

package/dist/components/app_config_list_editor/components/edit_modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit_modal.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/edit_modal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAG5C,UAAU,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxD,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IAChB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,IAAI,EACJ,IAAI,EACJ,IAAI,EAAE,YAAY,EAClB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,wBAAwB,EACxB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,OAAO,EACP,SAAS,GACV,EAAE,cAAc,CAAC,CAAC,CAAC,2CA2PnB"}

package/dist/components/app_config_list_editor/components/edit_modal.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Edit modal component
+// Centered dialog for creating/editing items with dynamic form fields
+import { useState, useCallback, useEffect } from 'react';
+import { cn } from '../../../lib/utils.js';
+import { Input } from '../../ui/input.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
+import { ColorSwatchPicker } from './color_swatch_picker.js';
+import { slugify } from '../types.js';
+export function EditModal({ open, mode, item: initial_item, columns, id_field, auto_id_from, id_editable_after_create, existing_ids, item_type_label, render_preview, on_save, on_cancel, }) {
+    const [form_data, set_form_data] = useState({});
+    const [errors, set_errors] = useState(new Map());
+    const [user_touched_id, set_user_touched_id] = useState(false);
+    // Reset form when modal opens
+    useEffect(() => {
+        if (open) {
+            set_form_data({ ...initial_item });
+            set_errors(new Map());
+            set_user_touched_id(mode === 'edit');
+        }
+    }, [open, initial_item, mode]);
+    const update_field = useCallback((field, value) => {
+        set_form_data((prev) => {
+            const updated = { ...prev, [field]: value };
+            // Auto-generate ID from source field when creating
+            if (auto_id_from &&
+                field === auto_id_from &&
+                !user_touched_id &&
+                mode === 'create') {
+                updated[id_field] = slugify(String(value ?? ''));
+            }
+            return updated;
+        });
+        // Clear error for this field on change
+        set_errors((prev) => {
+            const next = new Map(prev);
+            next.delete(field);
+            return next;
+        });
+    }, [auto_id_from, id_field, mode, user_touched_id]);
+    const handle_id_change = useCallback((value) => {
+        set_user_touched_id(true);
+        update_field(id_field, value);
+    }, [id_field, update_field]);
+    const validate_form = useCallback(() => {
+        const new_errors = new Map();
+        for (const col of columns) {
+            const value = form_data[col.field];
+            // Required check
+            if (col.required && (value === undefined || value === null || value === '')) {
+                new_errors.set(col.field, `${col.label} is required`);
+                continue;
+            }
+            // Custom validation
+            if (col.validate && value !== undefined && value !== null && value !== '') {
+                const error = col.validate(value, form_data);
+                if (error) {
+                    new_errors.set(col.field, error);
+                }
+            }
+        }
+        // Check ID field is filled
+        const id_value = form_data[id_field];
+        if (!id_value || String(id_value).trim() === '') {
+            new_errors.set(id_field, 'ID is required');
+        }
+        // Check for duplicate ID
+        if (id_value) {
+            const id_str = String(id_value);
+            const is_duplicate = mode === 'create'
+                ? existing_ids.includes(id_str)
+                : existing_ids.filter(id => id !== String(initial_item[id_field])).includes(id_str);
+            if (is_duplicate) {
+                new_errors.set(id_field, 'This ID already exists');
+            }
+        }
+        set_errors(new_errors);
+        return new_errors.size === 0;
+    }, [columns, form_data, id_field, existing_ids, mode, initial_item]);
+    const handle_save = useCallback(() => {
+        if (validate_form()) {
+            on_save(form_data);
+        }
+    }, [validate_form, form_data, on_save]);
+    const render_field = (col) => {
+        const value = form_data[col.field];
+        const error = errors.get(col.field);
+        const is_id_field = col.field === id_field;
+        const is_disabled = is_id_field && mode === 'edit' && !id_editable_after_create;
+        return (_jsxs("div", { className: "cls_edit_field space-y-1.5", children: [_jsxs("label", { className: "text-sm font-medium text-gray-700", children: [col.label, col.required && _jsx("span", { className: "text-red-500 ml-0.5", children: "*" })] }), col.type === 'text' && (_jsx(Input, { type: "text", value: String(value ?? ''), onChange: (e) => is_id_field
+                        ? handle_id_change(e.target.value)
+                        : update_field(col.field, e.target.value), placeholder: col.placeholder, disabled: is_disabled, className: cn('rounded-lg focus-visible:ring-violet-500/20 focus-visible:ring-offset-0', is_disabled && 'bg-gray-50 text-gray-500', error && 'border-red-400 focus-visible:ring-red-500/20') })), col.type === 'number' && (_jsx(Input, { type: "number", value: value !== undefined && value !== null ? String(value) : '', onChange: (e) => update_field(col.field, e.target.value === '' ? '' : Number(e.target.value)), placeholder: col.placeholder, className: cn('rounded-lg focus-visible:ring-violet-500/20 focus-visible:ring-offset-0', error && 'border-red-400 focus-visible:ring-red-500/20') })), col.type === 'textarea' && (_jsx("textarea", { value: String(value ?? ''), onChange: (e) => update_field(col.field, e.target.value), placeholder: col.placeholder, rows: 3, className: cn('flex w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/20 focus-visible:border-violet-300 disabled:cursor-not-allowed disabled:opacity-50', error && 'border-red-400 focus-visible:ring-red-500/20') })), col.type === 'select' && col.options && (_jsxs("select", { value: String(value ?? ''), onChange: (e) => update_field(col.field, e.target.value), className: cn('flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/20 focus-visible:border-violet-300', error && 'border-red-400 focus-visible:ring-red-500/20'), children: [_jsx("option", { value: "", children: col.placeholder || 'Select...' }), col.options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })), col.type === 'color_swatch' && col.color_options && (_jsx(ColorSwatchPicker, { value: String(value ?? ''), options: col.color_options, on_change: (color) => update_field(col.field, color) })), col.type === 'toggle' && (_jsx("button", { type: "button", role: "switch", "aria-checked": Boolean(value), onClick: () => update_field(col.field, !value), className: cn('relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors', value ? 'bg-violet-600' : 'bg-gray-200'), children: _jsx("span", { className: cn('pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition-transform', value ? 'translate-x-5' : 'translate-x-0') }) })), is_id_field && auto_id_from && mode === 'create' && !user_touched_id && (_jsxs("p", { className: "text-xs text-gray-400", children: ["Auto-generated from ", columns.find(c => c.field === auto_id_from)?.label?.toLowerCase() || auto_id_from] })), error && (_jsx("p", { className: "text-xs text-red-600", children: error }))] }, col.field));
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (is_open) => { if (!is_open)
+            on_cancel(); }, children: _jsxs(DialogContent, { className: "cls_edit_modal max-w-[460px] rounded-2xl p-0 gap-0 overflow-hidden", children: [_jsx(DialogHeader, { className: "px-6 pt-6 pb-4", children: _jsx(DialogTitle, { children: mode === 'create' ? `New ${item_type_label}` : `Edit ${item_type_label}` }) }), _jsxs("div", { className: "px-6 pb-4 space-y-4", children: [render_preview && Object.keys(form_data).length > 0 && (_jsx("div", { className: "p-3 bg-gray-50 rounded-lg border border-gray-100", children: render_preview(form_data) })), columns.map((col) => render_field(col))] }), _jsxs(DialogFooter, { className: "bg-gray-50 px-6 py-4 border-t border-gray-100 sm:justify-between", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: on_cancel, className: "rounded-full", children: "Cancel" }), _jsx(Button, { type: "button", onClick: handle_save, className: "rounded-full bg-violet-600 hover:bg-violet-700 text-white", children: mode === 'create' ? `Add ${item_type_label}` : 'Save Changes' })] })] }) }));
+}

package/dist/components/app_config_list_editor/components/empty_state.d.ts

@@ -0,0 +1,8 @@
+interface EmptyStateProps {
+    item_label: string;
+    on_add: () => void;
+    className?: string;
+}
+export declare function EmptyState({ item_label, on_add, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=empty_state.d.ts.map

package/dist/components/app_config_list_editor/components/empty_state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty_state.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/empty_state.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,eAAe,2CAsBjB"}

package/dist/components/app_config_list_editor/components/empty_state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Empty state component
+// Displayed when the list has no items
+import { Inbox, Plus } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function EmptyState({ item_label, on_add, className, }) {
+    return (_jsxs("div", { className: cn('cls_empty_state flex flex-col items-center justify-center py-12 px-4', className), children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3", children: _jsx(Inbox, { className: "w-6 h-6 text-gray-400" }) }), _jsxs("p", { className: "text-sm font-medium text-gray-900 mb-1", children: ["No ", item_label, " yet"] }), _jsxs("p", { className: "text-sm text-gray-500 mb-4", children: ["Get started by adding your first ", item_label.replace(/s$/, ''), "."] }), _jsxs("button", { type: "button", onClick: on_add, className: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-violet-600 hover:bg-violet-700 rounded-full transition-colors", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add your first ", item_label.replace(/s$/, '')] })] }));
+}

package/dist/components/app_config_list_editor/components/import_export_buttons.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnDef } from '../types.js';
+interface ImportExportButtonsProps<T extends Record<string, unknown>> {
+    items: T[];
+    on_items_change: (items: T[]) => void;
+    columns: ColumnDef<T>[];
+    id_field: keyof T & string;
+    title?: string;
+    max_items?: number;
+}
+export declare function ImportExportButtons<T extends Record<string, unknown>>({ items, on_items_change, columns, id_field, title, max_items, }: ImportExportButtonsProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=import_export_buttons.d.ts.map

package/dist/components/app_config_list_editor/components/import_export_buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"import_export_buttons.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/import_export_buttons.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAQ5C,UAAU,wBAAwB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,eAAe,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACrE,KAAK,EACL,eAAe,EACf,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CA0H7B"}

package/dist/components/app_config_list_editor/components/import_export_buttons.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Import/Export buttons for AppConfigListEditor
+// Provides JSON export (download) and import (file picker) with transient status messages
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { Download, Upload } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { validate_import_data, merge_items, export_items_to_json, generate_export_filename, } from '../utils/json_import_export.js';
+export function ImportExportButtons({ items, on_items_change, columns, id_field, title, max_items, }) {
+    const file_input_ref = useRef(null);
+    const [status_message, set_status_message] = useState(null);
+    // Auto-fade status message after 3 seconds
+    useEffect(() => {
+        if (!status_message)
+            return;
+        const timer = setTimeout(() => set_status_message(null), 3000);
+        return () => clearTimeout(timer);
+    }, [status_message]);
+    const handle_export = useCallback(() => {
+        const filename = generate_export_filename(title);
+        export_items_to_json(items, filename);
+    }, [items, title]);
+    const handle_import_click = useCallback(() => {
+        // Reset input so the same file can be re-imported
+        if (file_input_ref.current) {
+            file_input_ref.current.value = '';
+        }
+        file_input_ref.current?.click();
+    }, []);
+    const handle_file_selected = useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const text = e.target?.result;
+            if (typeof text !== 'string') {
+                set_status_message({ text: 'Failed to read file', is_error: true });
+                return;
+            }
+            let data;
+            try {
+                data = JSON.parse(text);
+            }
+            catch {
+                set_status_message({ text: 'Invalid JSON file', is_error: true });
+                return;
+            }
+            const { valid_items, errors } = validate_import_data(data, columns, id_field);
+            if (valid_items.length === 0) {
+                const msg = errors.length > 0 ? errors[0] : 'No valid items found';
+                set_status_message({ text: msg, is_error: true });
+                return;
+            }
+            const result = merge_items(items, valid_items, id_field, max_items);
+            on_items_change(result.merged_items);
+            const parts = [];
+            if (result.added_count > 0) {
+                parts.push(`Added ${result.added_count}`);
+            }
+            if (result.skipped_count > 0) {
+                parts.push(`${result.skipped_count} skipped`);
+            }
+            if (errors.length > 0) {
+                parts.push(`${errors.length} invalid`);
+            }
+            set_status_message({
+                text: parts.join(', '),
+                is_error: result.added_count === 0,
+            });
+        };
+        reader.readAsText(file);
+    }, [items, columns, id_field, max_items, on_items_change]);
+    return (_jsxs("div", { className: "cls_import_export flex items-center gap-1.5", children: [status_message && (_jsx("span", { className: cn('cls_import_status text-xs transition-opacity duration-300', status_message.is_error ? 'text-red-600' : 'text-green-600'), children: status_message.text })), _jsxs("button", { type: "button", onClick: handle_export, className: "inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors", title: "Export as JSON", children: [_jsx(Download, { className: "w-3.5 h-3.5" }), "Export"] }), _jsxs("button", { type: "button", onClick: handle_import_click, className: "inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors", title: "Import from JSON", children: [_jsx(Upload, { className: "w-3.5 h-3.5" }), "Import"] }), _jsx("input", { ref: file_input_ref, type: "file", accept: ".json", onChange: handle_file_selected, className: "hidden" })] }));
+}

package/dist/components/app_config_list_editor/components/list_item_row.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ColumnDef } from '../types.js';
+interface ListItemRowProps<T extends Record<string, unknown>> {
+    item: T;
+    index: number;
+    columns: ColumnDef<T>[];
+    render_item?: (item: T, index: number) => React.ReactNode;
+    render_item_indicator?: (item: T) => React.ReactNode;
+    on_edit: () => void;
+    on_delete: () => void;
+}
+export declare function ListItemRow<T extends Record<string, unknown>>({ item, index, columns, render_item, render_item_indicator, on_edit, on_delete, }: ListItemRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=list_item_row.d.ts.map

package/dist/components/app_config_list_editor/components/list_item_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item_row.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/list_item_row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1D,IAAI,EAAE,CAAC,CAAA;IACP,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACpD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC7D,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAgGrB"}

package/dist/components/app_config_list_editor/components/list_item_row.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function ListItemRow({ item, index, columns, render_item, render_item_indicator, on_edit, on_delete, }) {
+    // Custom render overrides everything
+    if (render_item) {
+        return (_jsxs("div", { className: "cls_list_editor_row flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors", children: [_jsx("div", { className: "flex-1 min-w-0", children: render_item(item, index) }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("button", { type: "button", onClick: on_edit, className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors", "aria-label": "Edit item", children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx("button", { type: "button", onClick: on_delete, className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors", "aria-label": "Delete item", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })] }));
+    }
+    // Default rendering based on column definitions
+    const primary_cols = columns.filter(c => c.list_display === 'primary');
+    const secondary_cols = columns.filter(c => c.list_display === 'secondary');
+    const badge_cols = columns.filter(c => c.list_display === 'badge');
+    return (_jsxs("div", { className: "cls_list_editor_row flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors", children: [render_item_indicator && (_jsx("div", { className: "shrink-0", children: render_item_indicator(item) })), _jsxs("div", { className: "flex-1 min-w-0", children: [primary_cols.map((col) => (_jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: String(item[col.field] ?? '') }, col.field))), secondary_cols.map((col) => (_jsx("div", { className: "text-xs text-gray-500 truncate mt-0.5", children: String(item[col.field] ?? '') }, col.field)))] }), badge_cols.length > 0 && (_jsx("div", { className: "flex items-center gap-2 shrink-0", children: badge_cols.map((col) => (_jsx("span", { className: cn('inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-mono', 'bg-gray-100 text-gray-600'), children: String(item[col.field] ?? '') }, col.field))) })), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("button", { type: "button", onClick: on_edit, className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors", "aria-label": "Edit item", children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx("button", { type: "button", onClick: on_delete, className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors", "aria-label": "Delete item", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })] }));
+}

package/dist/components/app_config_list_editor/components/save_status_indicator.d.ts

@@ -0,0 +1,7 @@
+interface SaveStatusIndicatorProps {
+    status: 'idle' | 'saving' | 'saved' | 'error';
+    className?: string;
+}
+export declare function SaveStatusIndicator({ status, className, }: SaveStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=save_status_indicator.d.ts.map

package/dist/components/app_config_list_editor/components/save_status_indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save_status_indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/save_status_indicator.tsx"],"names":[],"mappings":"AAOA,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,GACV,EAAE,wBAAwB,kDA+C1B"}

package/dist/components/app_config_list_editor/components/save_status_indicator.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Save status indicator component
+// Shows saving/saved/error states inline
+import { useEffect, useState } from 'react';
+import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function SaveStatusIndicator({ status, className, }) {
+    const [visible, set_visible] = useState(false);
+    useEffect(() => {
+        if (status === 'saved') {
+            set_visible(true);
+            const timer = setTimeout(() => set_visible(false), 2000);
+            return () => clearTimeout(timer);
+        }
+        if (status === 'saving' || status === 'error') {
+            set_visible(true);
+        }
+        else {
+            set_visible(false);
+        }
+    }, [status]);
+    if (!visible && status === 'idle')
+        return null;
+    return (_jsxs("div", { className: cn('cls_save_status flex items-center gap-1.5 text-xs transition-opacity duration-300', !visible && 'opacity-0', visible && 'opacity-100', className), children: [status === 'saving' && (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3.5 h-3.5 text-gray-500 animate-spin" }), _jsx("span", { className: "text-gray-500", children: "Saving..." })] })), status === 'saved' && (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "w-3.5 h-3.5 text-green-600" }), _jsx("span", { className: "text-green-600", children: "Saved" })] })), status === 'error' && (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "w-3.5 h-3.5 text-red-600" }), _jsx("span", { className: "text-red-600", children: "Error saving" })] }))] }));
+}

package/dist/components/app_config_list_editor/components/search_bar.d.ts

@@ -0,0 +1,10 @@
+interface SearchBarProps {
+    value: string;
+    on_change: (value: string) => void;
+    item_count: number;
+    item_label: string;
+    className?: string;
+}
+export declare function SearchBar({ value, on_change, item_count, item_label, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=search_bar.d.ts.map

package/dist/components/app_config_list_editor/components/search_bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_bar.d.ts","sourceRoot":"","sources":["../../../../src/components/app_config_list_editor/components/search_bar.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CA6BhB"}