hazo_config 2.0.0 → 2.0.2

package/README.md

@@ -223,6 +223,54 @@ 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
+
 ## Development
 
 ### Local Setup
@@ -266,6 +314,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;AAQ7F;;;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,2CAsP7B"}

package/dist/components/app_config_list_editor/app_config_list_editor.js

@@ -0,0 +1,128 @@
+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';
+/**
+ * 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("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/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"}

package/dist/components/app_config_list_editor/components/search_bar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Search bar component
+// Pill-shaped search input with icon, clear button, and item count
+import { Search, X } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function SearchBar({ value, on_change, item_count, item_label, className, }) {
+    return (_jsxs("div", { className: cn('cls_search_bar flex items-center gap-3', className), children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }), _jsx("input", { type: "text", value: value, onChange: (e) => on_change(e.target.value), placeholder: `Search ${item_label}...`, className: "w-full pl-9 pr-8 py-2 text-sm rounded-full border border-gray-200 bg-white focus:outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-300 transition-colors", "aria-label": `Search ${item_label}` }), value && (_jsx("button", { type: "button", onClick: () => on_change(''), className: "absolute right-2.5 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100", "aria-label": "Clear search", children: _jsx(X, { className: "w-3.5 h-3.5" }) }))] }), _jsxs("span", { className: "text-sm text-gray-500 whitespace-nowrap", children: [item_count, " ", item_label] })] }));
+}

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

@@ -0,0 +1,3 @@
+export { AppConfigListEditor } from './app_config_list_editor.js';
+export type { AppConfigListEditorProps, ColumnDef } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app_config_list_editor/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,YAAY,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/app_config_list_editor/index.js

@@ -0,0 +1,2 @@
+// Public exports for AppConfigListEditor
+export { AppConfigListEditor } from './app_config_list_editor.js';

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

@@ -0,0 +1,93 @@
+import type React from 'react';
+/**
+ * Column/field definition for list display and edit form
+ */
+export interface ColumnDef<T> {
+    /** The field key in the item */
+    field: keyof T & string;
+    /** Display label for the form */
+    label: string;
+    /** Column type determines the input control */
+    type: 'text' | 'textarea' | 'color_swatch' | 'select' | 'number' | 'toggle';
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether this field is required */
+    required?: boolean;
+    /** Show in the list view (default: true for text, false for textarea) */
+    show_in_list?: boolean;
+    /** How to display in list view */
+    list_display?: 'primary' | 'secondary' | 'badge' | 'hidden';
+    /** Options for 'select' type */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    /** Options for 'color_swatch' type */
+    color_options?: string[];
+    /** Validation function - returns error message or null */
+    validate?: (value: unknown, item: T) => string | null;
+}
+/**
+ * Props for the AppConfigListEditor component
+ */
+export interface AppConfigListEditorProps<T extends Record<string, unknown>> {
+    /** The array of items to display and edit */
+    items: T[];
+    /** Called when items change (add, edit, delete, reorder) */
+    on_items_change: (items: T[]) => void;
+    /** Column/field definitions for the list and edit form */
+    columns: ColumnDef<T>[];
+    /** Unique key field in each item (e.g., 'tag_id', 'type_id') */
+    id_field: keyof T & string;
+    /** Optional: field to auto-generate ID from (e.g., 'tag_label' -> auto-generates tag_id) */
+    auto_id_from?: keyof T & string;
+    /** Title shown above the list */
+    title?: string;
+    /** Subtitle/description */
+    description?: string;
+    /** Whether to allow drag-and-drop reordering (v2 feature) */
+    enable_reorder?: boolean;
+    /** Whether to show a search/filter input for long lists */
+    enable_search?: boolean;
+    /** Search threshold - only show search if item count exceeds this (default: 8) */
+    search_threshold?: number;
+    /** Custom render for each list item (overrides default rendering) */
+    render_item?: (item: T, index: number) => React.ReactNode;
+    /** Custom render for the item's leading visual (icon, color dot, avatar, etc.) */
+    render_item_indicator?: (item: T) => React.ReactNode;
+    /** Custom render for item preview/badge (shown in edit form) */
+    render_preview?: (item: T) => React.ReactNode;
+    /** Confirmation message for delete (null = no confirmation) */
+    delete_confirmation?: string | ((item: T) => string);
+    /** Max items allowed (null = unlimited) */
+    max_items?: number;
+    /** Whether the ID field is editable after creation (default: false) */
+    id_editable_after_create?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Save status indicator */
+    save_status?: 'idle' | 'saving' | 'saved' | 'error';
+}
+/**
+ * Internal state for the edit modal
+ */
+export interface EditModalState<T> {
+    mode: 'create' | 'edit';
+    item: Partial<T>;
+    original_item?: T;
+    errors: Map<string, string>;
+    user_touched_id: boolean;
+}
+/**
+ * Internal state for the delete confirmation dialog
+ */
+export interface DeleteDialogState<T> {
+    item: T;
+}
+/**
+ * Slugify a string for auto-ID generation.
+ * Converts to lowercase, replaces non-alphanumeric chars with underscores,
+ * collapses consecutive underscores, and trims leading/trailing underscores.
+ */
+export declare function slugify(value: string): string;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/app_config_list_editor/types.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACvB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC3E,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC3D,gCAAgC;IAChC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC5C,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;CACtD;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzE,6CAA6C;IAC7C,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,4DAA4D;IAC5D,eAAe,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACrC,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACvB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qEAAqE;IACrE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,kFAAkF;IAClF,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;IACpD,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,CAAA;IACjB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3B,eAAe,EAAE,OAAO,CAAA;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,IAAI,EAAE,CAAC,CAAA;CACR;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM7C"}

package/dist/components/app_config_list_editor/types.js

@@ -0,0 +1,14 @@
+// Type definitions for AppConfigListEditor component
+// Defines column configuration, component props, and internal state types
+/**
+ * Slugify a string for auto-ID generation.
+ * Converts to lowercase, replaces non-alphanumeric chars with underscores,
+ * collapses consecutive underscores, and trims leading/trailing underscores.
+ */
+export function slugify(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .replace(/_+/g, '_');
+}

package/dist/components/index.d.ts

@@ -8,4 +8,6 @@ export { useConfigSections, is_sensitive_field, mask_value, DEFAULT_SENSITIVE_PA
 export type { UseConfigSectionsResult } from './use_config_sections.js';
 export { useAppConfig } from './use_app_config.js';
 export type { UseAppConfigResult } from '../lib/app_config_types.js';
+export { AppConfigListEditor } from './app_config_list_editor/index.js';
+export type { AppConfigListEditorProps, ColumnDef } from './app_config_list_editor/index.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAGhE,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,0BAA0B,EAC3B,MAAM,0BAA0B,CAAA;AACjC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAGhE,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,0BAA0B,EAC3B,MAAM,0BAA0B,CAAA;AACjC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAGpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AACvE,YAAY,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/components/index.js

@@ -6,3 +6,5 @@ export { AppConfig } from './app_config.js';
 // Hook exports
 export { useConfigSections, is_sensitive_field, mask_value, DEFAULT_SENSITIVE_PATTERNS } from './use_config_sections.js';
 export { useAppConfig } from './use_app_config.js';
+// AppConfigListEditor exports
+export { AppConfigListEditor } from './app_config_list_editor/index.js';

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAKpE,QAAA,MAAM,WAAW,iDAA4B,CAAA;AAE7C,QAAA,MAAM,kBAAkB,wHAA+B,CAAA;AAEvD,QAAA,MAAM,iBAAiB,uDAA8B,CAAA;AAErD,QAAA,MAAM,kBAAkB,wKAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,wKAetB,CAAA;AAGF,QAAA,MAAM,iBAAiB;8BAGpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB;8BAGpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,gBAAgB,8KASpB,CAAA;AAGF,QAAA,MAAM,sBAAsB,wLAS1B,CAAA;AAIF,QAAA,MAAM,iBAAiB,6KASrB,CAAA;AAGF,QAAA,MAAM,iBAAiB,6KAarB,CAAA;AAGF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold", className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), className), ...props })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;sFA2BnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAWX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,8JAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,8JAqBjB,CAAA;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,WAAW,oKAYf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KASrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/dialog.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,KAAK,8KAcV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_config",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Config wrapper with error handling",
   "type": "module",
   "main": "dist/index.js",
@@ -52,6 +52,9 @@
   },
   "homepage": "https://github.com/pub12/hazo_config#readme",
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "ini": "^4.1.0",