hazo_config 1.4.2 → 2.0.2

package/README.md

@@ -1,6 +1,6 @@
 # Hazo Config Component Library
 
-A React component library for managing configuration with Storybook for component testing and documentation.
+A React component library for managing configuration with database-backed storage, supporting both INI files and app configuration. Includes React UI components with JSON editing capabilities.
 
 ## Tech Stack
 
@@ -11,6 +11,49 @@ A React component library for managing configuration with Storybook for componen
 - **Storybook** - Component development and testing
 - **Vite** - Build tool
 
+## Quick Start
+
+1. Install the package:
+```bash
+npm install hazo_config
+```
+
+2. Add CSS custom properties to your `globals.css`:
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+  }
+}
+```
+
+3. If using Tailwind v4, add the `@source` directive to `globals.css`:
+```css
+@import "tailwindcss";
+
+@source "../node_modules/hazo_config/dist";
+```
+
+4. Import and use components:
+```typescript
+// Client components
+import { AppConfig, ConfigViewer, MockConfigProvider } from 'hazo_config'
+
+// Server-side (API routes, server components)
+import { HazoConfig } from 'hazo_config/server'
+```
+
+See detailed setup instructions below.
+
 ## Usage
 
 ### Installation
@@ -19,13 +62,61 @@ A React component library for managing configuration with Storybook for componen
 npm install hazo_config
 ```
 
-### Tailwind CSS Setup (Required)
+### Styling Setup (Required)
+
+This package uses Tailwind CSS utility classes for styling. You must configure both Tailwind and CSS custom properties.
+
+#### CSS Custom Properties (Required for All Versions)
+
+Add these CSS custom properties to your `globals.css` or main CSS file. These are used for theming and dark mode support:
 
-This package uses Tailwind CSS utility classes for styling. You must configure Tailwind in your project.
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+  }
+}
+```
 
 #### Tailwind v3 Setup
 
-If using Tailwind v3, no additional setup is required beyond having Tailwind installed.
+If using Tailwind v3, ensure your `tailwind.config.js` includes:
+
+```js
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... rest of config
+}
+```
 
 #### Tailwind v4 Setup (Critical)
 
@@ -51,7 +142,8 @@ This package provides separate entry points for server and client code to preven
 
 ```typescript
 // Client code (React components, browser)
-import { ConfigViewer, ConfigEditor, MockConfigProvider } from 'hazo_config'
+import { ConfigViewer, ConfigEditor, AppConfig, MockConfigProvider } from 'hazo_config'
+import type { AppConfigItem, AppConfigContext, ConfigType } from 'hazo_config'
 
 // Server code (API routes, Next.js server components)
 import { HazoConfig } from 'hazo_config/server'
@@ -59,6 +151,17 @@ import { HazoConfig } from 'hazo_config/server'
 
 **Why?** The `HazoConfig` class uses Node.js `fs` and `path` modules. Importing it in client code causes "Module not found: Can't resolve 'fs'" errors. The `/server` entry point uses the `server-only` package to prevent accidental client imports.
 
+### Major Version 2.0 Changes
+
+**v2.0.0** introduces breaking changes with database-backed configuration support:
+
+- **New Component**: `AppConfig` for database-backed configuration with JSON value support
+- **Schema Change**: Replaces `org_id` with `scope_id` for flexible scoping
+- **JSON Support**: Store structured configuration as JSON with in-UI editing
+- **Type System**: New `ConfigType` ('general' | 'json') for value type management
+
+See [MIGRATION_V2.md](./MIGRATION_V2.md) for detailed migration guide from v1.x.
+
 ### Example: Server-side Config Loading
 
 ```typescript
@@ -69,7 +172,7 @@ const config = new HazoConfig({ filePath: './config.ini' })
 const dbHost = config.get('database', 'host')
 ```
 
-### Example: Client-side Config Display
+### Example: Client-side Config Display (INI-based)
 
 ```typescript
 // components/settings.tsx (React component)
@@ -85,6 +188,89 @@ export function Settings() {
 }
 ```
 
+### Example: Database-backed App Config (v2.0+)
+
+```typescript
+// app/settings/page.tsx (Next.js server component)
+'use client'
+
+import { AppConfig } from 'hazo_config'
+import type { AppConfigContext, AppConfigItem, ConfigType } from 'hazo_config'
+import { fetch_config, save_config, delete_config } from '@/lib/config_actions'
+
+export default function SettingsPage() {
+  const context: AppConfigContext = {
+    scope_id: 'your-scope-id',
+    user_id: 'optional-user-id'
+  }
+
+  return (
+    <AppConfig
+      title="Application Settings"
+      context={context}
+      fetch_config={fetch_config}
+      save_config={save_config}
+      delete_config={delete_config}
+    />
+  )
+}
+```
+
+The AppConfig component supports:
+- JSON and text configuration values
+- In-line editing with validation
+- Sensitive field masking (passwords, tokens, keys)
+- 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
@@ -125,13 +311,18 @@ npm run build-storybook
 hazo_config/
 ├── src/
 │   ├── components/          # React components (client-safe)
-│   │   ├── config_viewer.tsx
-│   │   ├── config_editor.tsx
+│   │   ├── 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
-│   │   ├── config_loader.ts # HazoConfig class (Node.js)
+│   │   ├── config_loader.ts       # HazoConfig class (Node.js)
 │   │   ├── mock_config_provider.ts # Client-safe mock
-│   │   └── types.ts
+│   │   ├── types.ts               # ConfigProvider interfaces
+│   │   └── app_config_types.ts    # AppConfig interfaces (v2.0+)
 │   ├── server/              # Server-only entry point
 │   │   └── index.ts
 │   ├── styles/              # Global styles

package/dist/components/app_config.d.ts

@@ -3,7 +3,7 @@ import type { AppConfigProps } from '../lib/app_config_types.js';
 /**
  * AppConfig component
  * Provides interface for viewing and editing database-backed configuration
- * Supports org-level and user-level configuration with sensitive field masking
+ * Supports sensitive field masking and both general (text) and json types
  * @param props - Component props
  * @returns React component
  */

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

@@ -1 +1 @@
-{"version":3,"file":"app_config.d.ts","sourceRoot":"","sources":["../../src/components/app_config.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAWhE;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAugB9C,CAAA"}
+{"version":3,"file":"app_config.d.ts","sourceRoot":"","sources":["../../src/components/app_config.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,OAAO,KAAK,EAAE,cAAc,EAA6B,MAAM,4BAA4B,CAAA;AA0P3F;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6a9C,CAAA"}

package/dist/components/app_config.js

@@ -1,29 +1,99 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // AppConfig component for managing database-backed configuration
-// Provides UI for viewing and editing org-level or user-level configuration stored in hazo_app_config table
+// Provides UI for viewing and editing configuration stored in hazo_app_config table
 import React, { useState, useCallback, useMemo } from 'react';
 import { cn } from '../lib/utils.js';
-import { RefreshCw, Save, Trash2, Eye, EyeOff, Plus } from 'lucide-react';
+import { RefreshCw, Save, Trash2, Eye, EyeOff, Plus, X } from 'lucide-react';
 import { useAppConfig } from './use_app_config.js';
 import { is_sensitive_field, mask_value, DEFAULT_SENSITIVE_PATTERNS } from './use_config_sections.js';
+const JsonEditor = ({ value, onChange, onValidationChange, placeholder, className }) => {
+    const [text_value, set_text_value] = useState(() => JSON.stringify(value, null, 2));
+    const [validation_error, set_validation_error] = useState();
+    const handle_change = (e) => {
+        const new_text = e.target.value;
+        set_text_value(new_text);
+        try {
+            const parsed = JSON.parse(new_text);
+            set_validation_error(undefined);
+            onChange(parsed);
+            onValidationChange?.(true);
+        }
+        catch (err) {
+            const error_msg = err instanceof Error ? err.message : 'Invalid JSON format';
+            set_validation_error(error_msg);
+            onValidationChange?.(false, error_msg);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("textarea", { value: text_value, onChange: handle_change, className: cn('w-full px-3 py-2 border rounded-md font-mono text-sm min-h-[120px] focus:outline-none focus:ring-2 focus:ring-primary', validation_error ? 'border-red-500 focus:ring-red-500' : 'border-input', className), placeholder: placeholder }), validation_error && (_jsxs("div", { className: "flex items-start gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-md", children: [_jsx(X, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }), _jsx("span", { children: validation_error })] }))] }));
+};
+const KeyDialog = ({ mode, section_name, on_close, on_save }) => {
+    const [new_section, set_new_section] = useState('');
+    const [new_key, set_new_key] = useState('');
+    const [new_value, set_new_value] = useState('');
+    const [new_type, set_new_type] = useState('general');
+    const [is_saving, set_is_saving] = useState(false);
+    const [is_json_valid, set_is_json_valid] = useState(true);
+    const handle_save = async () => {
+        const target_section = mode === 'add-section' ? new_section : section_name;
+        if (!target_section || !new_key)
+            return;
+        if (new_type === 'json' && !is_json_valid) {
+            return;
+        }
+        set_is_saving(true);
+        try {
+            let value_to_save = new_value;
+            if (new_type === 'json') {
+                try {
+                    value_to_save = JSON.parse(new_value);
+                }
+                catch {
+                    value_to_save = {};
+                }
+            }
+            await on_save(target_section, new_key, value_to_save, new_type);
+            on_close();
+        }
+        catch (err) {
+            console.error('Failed to save:', err);
+        }
+        finally {
+            set_is_saving(false);
+        }
+    };
+    const can_save = mode === 'add-section'
+        ? new_section && new_key && new_value && is_json_valid
+        : new_key && new_value && is_json_valid;
+    if (!mode)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4", children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b", children: [_jsx("h3", { className: "text-lg font-semibold", children: mode === 'add-section' ? 'Add New Section' : 'Add New Key' }), _jsx("button", { onClick: on_close, className: "text-muted-foreground hover:text-foreground", type: "button", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "p-6 space-y-4", children: [mode === 'add-section' && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Section Name" }), _jsx("input", { type: "text", placeholder: "e.g., integrations, notifications", value: new_section, onChange: (e) => set_new_section(e.target.value), className: "w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary", autoFocus: true })] })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Key Name" }), _jsx("input", { type: "text", placeholder: "e.g., api_key, webhook_url", value: new_key, onChange: (e) => set_new_key(e.target.value), className: "w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary", autoFocus: mode !== 'add-section' })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: "type", value: "general", checked: new_type === 'general', onChange: (e) => set_new_type(e.target.value), className: "w-4 h-4 text-primary" }), _jsx("span", { className: "text-sm", children: "General (Text)" })] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: "type", value: "json", checked: new_type === 'json', onChange: (e) => set_new_type(e.target.value), className: "w-4 h-4 text-primary" }), _jsx("span", { className: "text-sm", children: "JSON (Object)" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Value" }), new_type === 'json' ? (_jsx(JsonEditor, { value: new_value ? (() => {
+                                        try {
+                                            return JSON.parse(new_value);
+                                        }
+                                        catch {
+                                            return {};
+                                        }
+                                    })() : {}, onChange: (val) => set_new_value(JSON.stringify(val, null, 2)), onValidationChange: (isValid) => {
+                                        set_is_json_valid(isValid);
+                                    }, placeholder: '{"key": "value"}' })) : (_jsx("input", { type: "text", placeholder: "Enter value", value: new_value, onChange: (e) => set_new_value(e.target.value), className: "w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary" }))] })] }), _jsxs("div", { className: "flex items-center justify-end gap-3 p-6 border-t bg-muted/30", children: [_jsx("button", { onClick: on_close, className: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground", type: "button", children: "Cancel" }), _jsx("button", { onClick: handle_save, disabled: !can_save || is_saving, className: cn('px-4 py-2 text-sm font-medium rounded-md', can_save && !is_saving
+                                ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                                : 'bg-muted text-muted-foreground cursor-not-allowed'), type: "button", children: is_saving ? 'Saving...' : mode === 'add-section' ? 'Create Section' : 'Add Key' })] })] }) }));
+};
 /**
  * AppConfig component
  * Provides interface for viewing and editing database-backed configuration
- * Supports org-level and user-level configuration with sensitive field masking
+ * Supports sensitive field masking and both general (text) and json types
  * @param props - Component props
  * @returns React component
  */
-export const AppConfig = ({ level, context, fetch_config, save_config, delete_config, className, on_update, on_error, sensitive_fields, sensitive_patterns = DEFAULT_SENSITIVE_PATTERNS, disable_auto_mask = false, title, }) => {
-    const { sections, is_loading, error, reload, set_value, delete_value } = useAppConfig(level, context, fetch_config, save_config, delete_config);
+export const AppConfig = ({ context, fetch_config, save_config, delete_config, className, on_update, on_error, sensitive_fields, sensitive_patterns = DEFAULT_SENSITIVE_PATTERNS, disable_auto_mask = false, title = 'Configuration', }) => {
+    const { sections, is_loading, error, reload, set_value, delete_value, } = useAppConfig(context, fetch_config, save_config, delete_config);
     const [selected_section, set_selected_section] = useState(null);
-    const [new_section, set_new_section] = useState('');
-    const [new_key, set_new_key] = useState('');
-    const [new_value, set_new_value] = useState('');
     const [editing_fields, set_editing_fields] = useState(new Map());
     const [revealed_fields, set_revealed_fields] = useState(new Set());
     const [has_unsaved_changes, set_has_unsaved_changes] = useState(false);
     const [is_saving, set_is_saving] = useState(false);
-    const [show_add_section, set_show_add_section] = useState(false);
+    const [dialog_mode, set_dialog_mode] = useState(null);
     // Report errors to parent
     React.useEffect(() => {
         if (error && on_error) {
@@ -36,12 +106,6 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
             set_selected_section(Object.keys(sections)[0]);
         }
     }, [sections, selected_section]);
-    /**
-     * Default title based on level
-     */
-    const display_title = useMemo(() => {
-        return title ?? (level === 'org' ? 'Organization Settings' : 'User Settings');
-    }, [title, level]);
     /**
      * Check if a field should be masked
      */
@@ -82,10 +146,13 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
     /**
      * Get the current editing value for a field, or the original value
      */
-    const get_field_value = useCallback((section, key, original_value) => {
+    const get_field_value = useCallback((section, key, item) => {
         const field_id = get_field_id(section, key);
         const editing = editing_fields.get(field_id);
-        return editing ? editing.value : original_value;
+        if (editing) {
+            return editing.value;
+        }
+        return item.config_type === 'json' ? item.config_value_json : item.config_value_text;
     }, [editing_fields, get_field_id]);
     /**
      * Handle field value change (stores in local state, not database)
@@ -125,7 +192,10 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
         try {
             // Save all pending edits to the database
             for (const edit of editing_fields.values()) {
-                await set_value(edit.section, edit.key, edit.value);
+                const item = sections[edit.section]?.[edit.key];
+                if (item) {
+                    await set_value(edit.section, edit.key, edit.value, item.config_type);
+                }
             }
             set_editing_fields(new Map());
             set_has_unsaved_changes(false);
@@ -141,11 +211,13 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
         finally {
             set_is_saving(false);
         }
-    }, [editing_fields, set_value, on_update, on_error]);
+    }, [editing_fields, sections, set_value, on_update, on_error]);
     /**
      * Handle delete key
      */
     const handle_delete_key = useCallback(async (section, key) => {
+        if (!window.confirm(`Delete key "${key}"?`))
+            return;
         try {
             await delete_value(section, key);
             // Remove from editing state if present
@@ -166,63 +238,26 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
         }
     }, [delete_value, get_field_id, on_update, on_error]);
     /**
-     * Add a new key-value pair to selected section
+     * Handle adding a key from dialog
      */
-    const handle_add_key = useCallback(async () => {
-        const target_section = show_add_section ? new_section : selected_section;
-        if (target_section && new_key && new_value) {
-            try {
-                await set_value(target_section, new_key, new_value);
-                set_new_key('');
-                set_new_value('');
-                set_new_section('');
-                set_show_add_section(false);
-                // Select the new section if it was just created
-                if (show_add_section) {
-                    set_selected_section(target_section);
-                }
-                if (on_update) {
-                    on_update();
-                }
+    const handle_dialog_save = useCallback(async (section, key, value, type) => {
+        try {
+            await set_value(section, key, value, type);
+            // Select the section if it was just created
+            if (dialog_mode === 'add-section') {
+                set_selected_section(section);
             }
-            catch (err) {
-                if (on_error) {
-                    on_error(err instanceof Error ? err : new Error(String(err)));
-                }
+            if (on_update) {
+                on_update();
             }
         }
-    }, [selected_section, new_section, new_key, new_value, show_add_section, set_value, on_update, on_error]);
-    /**
-     * Handle new key input change
-     */
-    const handle_new_key_change = useCallback((e) => {
-        set_new_key(e.target.value);
-    }, []);
-    /**
-     * Handle new value input change
-     */
-    const handle_new_value_change = useCallback((e) => {
-        set_new_value(e.target.value);
-    }, []);
-    /**
-     * Handle new section input change
-     */
-    const handle_new_section_change = useCallback((e) => {
-        set_new_section(e.target.value);
-    }, []);
-    /**
-     * Handle section selection
-     */
-    const handle_section_select = useCallback((section_name) => {
-        set_selected_section(section_name);
-    }, []);
-    /**
-     * Toggle add new section mode
-     */
-    const toggle_add_section = useCallback(() => {
-        set_show_add_section(prev => !prev);
-        set_new_section('');
-    }, []);
+        catch (err) {
+            if (on_error) {
+                on_error(err instanceof Error ? err : new Error(String(err)));
+            }
+            throw err;
+        }
+    }, [set_value, dialog_mode, on_update, on_error]);
     /**
      * Memoized section list
      */
@@ -236,18 +271,20 @@ export const AppConfig = ({ level, context, fetch_config, save_config, delete_co
     if (is_loading) {
         return (_jsx("div", { className: cn('cls_app_config flex items-center justify-center p-8', className), children: _jsx("div", { className: "text-muted-foreground", children: "Loading configuration..." }) }));
     }
-    return (_jsxs("div", { className: cn('cls_app_config space-y-4', className), children: [_jsxs("div", { className: "cls_app_config_header flex items-center justify-between border-b pb-2", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-xl font-semibold", children: [display_title, has_unsaved_changes && (_jsx("span", { className: "ml-2 text-sm text-amber-600", children: "(unsaved changes)" }))] }), _jsx("p", { className: "text-sm text-muted-foreground", children: level === 'org' ? 'Settings for your organization' : 'Your personal settings' })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: handle_refresh, className: "px-3 py-1 border rounded hover:bg-muted flex items-center gap-2", "aria-label": "Refresh configuration", type: "button", disabled: is_saving, children: [_jsx(RefreshCw, { size: 16 }), "Refresh"] }), _jsxs("button", { onClick: handle_save, className: cn('px-3 py-1 rounded flex items-center gap-2', has_unsaved_changes
-                                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-                                    : 'bg-muted text-muted-foreground'), "aria-label": "Save configuration", type: "button", disabled: !has_unsaved_changes || is_saving, children: [_jsx(Save, { size: 16 }), is_saving ? 'Saving...' : 'Save'] })] })] }), _jsxs("div", { className: "cls_app_config_content grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "cls_app_config_sections_list border rounded p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "font-semibold", children: "Sections" }), _jsx("button", { onClick: toggle_add_section, className: "text-primary hover:text-primary/80", "aria-label": "Add new section", type: "button", children: _jsx(Plus, { size: 18 }) })] }), _jsxs("div", { className: "space-y-1", role: "listbox", "aria-label": "Configuration sections", children: [section_list.map((section_name) => (_jsx("button", { onClick: () => handle_section_select(section_name), className: cn('w-full text-left px-2 py-1 rounded text-sm', selected_section === section_name
-                                            ? 'bg-primary text-primary-foreground'
-                                            : 'hover:bg-muted'), role: "option", "aria-selected": selected_section === section_name, type: "button", children: section_name }, section_name))), section_list.length === 0 && (_jsx("div", { className: "text-sm text-muted-foreground py-2", children: "No sections yet. Add your first configuration below." }))] })] }), _jsx("div", { className: "cls_app_config_section_content md:col-span-2 border rounded p-4", children: selected_section ? (_jsxs(_Fragment, { children: [_jsx("h3", { className: "font-semibold mb-4", children: selected_section }), _jsxs("div", { className: "space-y-3", children: [current_section_data &&
-                                            Object.entries(current_section_data).map(([key, value]) => {
-                                                const is_sensitive = should_mask_field(key);
-                                                const field_id = `config-${selected_section}-${key}`;
-                                                const show_value = !is_sensitive || is_revealed(selected_section, key);
-                                                const display_value = get_field_value(selected_section, key, value);
-                                                return (_jsxs("div", { className: "cls_app_config_item", children: [_jsx("label", { htmlFor: field_id, className: "block text-sm font-medium mb-1", children: key }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: field_id, type: is_sensitive && !show_value ? 'password' : 'text', value: is_sensitive && !show_value ? mask_value(display_value) : display_value, onChange: (e) => handle_field_change(selected_section, key, e.target.value), className: "flex-1 px-2 py-1 border rounded", readOnly: is_sensitive && !show_value }), is_sensitive && (_jsx("button", { onClick: () => toggle_reveal(selected_section, key), className: "text-gray-500 hover:text-gray-700", "aria-label": show_value ? 'Hide value' : 'Show value', type: "button", children: show_value ? _jsx(EyeOff, { size: 18 }) : _jsx(Eye, { size: 18 }) })), _jsx("button", { onClick: () => handle_delete_key(selected_section, key), className: "text-red-500 hover:text-red-700", "aria-label": `Delete ${key}`, type: "button", children: _jsx(Trash2, { size: 18 }) })] })] }, key));
-                                            }), _jsxs("div", { className: "cls_add_new_key border-t pt-3 mt-3", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Add New Key" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "new-key-name", className: "sr-only", children: "Key name" }), _jsx("input", { id: "new-key-name", type: "text", placeholder: "Key name", value: new_key, onChange: handle_new_key_change, className: "w-full px-2 py-1 border rounded text-sm" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "new-key-value", className: "sr-only", children: "Value" }), _jsx("input", { id: "new-key-value", type: "text", placeholder: "Value", value: new_value, onChange: handle_new_value_change, className: "w-full px-2 py-1 border rounded text-sm" })] }), _jsx("button", { onClick: handle_add_key, className: "px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90 text-sm", type: "button", disabled: !new_key || !new_value, children: "Add Key" })] })] })] })] })) : show_add_section ? (_jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "font-semibold mb-4", children: "Add New Section" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "new-section-name", className: "block text-sm font-medium mb-1", children: "Section Name" }), _jsx("input", { id: "new-section-name", type: "text", placeholder: "Section name (e.g., 'general', 'notifications')", value: new_section, onChange: handle_new_section_change, className: "w-full px-2 py-1 border rounded text-sm" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "new-section-key", className: "block text-sm font-medium mb-1", children: "First Key" }), _jsx("input", { id: "new-section-key", type: "text", placeholder: "Key name", value: new_key, onChange: handle_new_key_change, className: "w-full px-2 py-1 border rounded text-sm" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "new-section-value", className: "block text-sm font-medium mb-1", children: "Value" }), _jsx("input", { id: "new-section-value", type: "text", placeholder: "Value", value: new_value, onChange: handle_new_value_change, className: "w-full px-2 py-1 border rounded text-sm" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handle_add_key, className: "px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90 text-sm", type: "button", disabled: !new_section || !new_key || !new_value, children: "Create Section" }), _jsx("button", { onClick: toggle_add_section, className: "px-3 py-1 border rounded hover:bg-muted text-sm", type: "button", children: "Cancel" })] })] })] })) : (_jsx("div", { className: "text-center text-muted-foreground py-8", children: section_list.length > 0
-                                ? 'Select a section to view/edit'
-                                : 'Click the + button to add your first configuration section' })) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn('cls_app_config space-y-6', className), children: [_jsxs("div", { className: "cls_app_config_header flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold", children: title }), has_unsaved_changes && (_jsx("p", { className: "text-sm text-amber-600 mt-1", children: "You have unsaved changes" }))] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("button", { onClick: handle_refresh, className: "px-4 py-2 border border-input rounded-md hover:bg-accent hover:text-accent-foreground flex items-center gap-2 transition-colors", type: "button", disabled: is_saving, children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Refresh"] }), _jsxs("button", { onClick: handle_save, className: cn('px-4 py-2 rounded-md flex items-center gap-2 transition-colors', has_unsaved_changes
+                                            ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                                            : 'bg-muted text-muted-foreground cursor-not-allowed'), type: "button", disabled: !has_unsaved_changes || is_saving, children: [_jsx(Save, { className: "h-4 w-4" }), is_saving ? 'Saving...' : 'Save'] })] })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", children: [_jsx("div", { className: "lg:col-span-1", children: _jsxs("div", { className: "bg-card border border-border rounded-lg overflow-hidden", children: [_jsx("div", { className: "p-4 border-b bg-muted/30", children: _jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "font-semibold", children: "Sections" }), _jsx("button", { onClick: () => set_dialog_mode('add-section'), className: "text-primary hover:text-primary/80 transition-colors", type: "button", children: _jsx(Plus, { className: "h-5 w-5" }) })] }) }), _jsx("div", { className: "p-2", children: section_list.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground text-center py-8 px-4", children: "No sections yet. Click + to add your first section." })) : (_jsx("div", { className: "space-y-1", children: section_list.map((section_name) => (_jsx("button", { onClick: () => set_selected_section(section_name), className: cn('w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors', selected_section === section_name
+                                                        ? 'bg-primary text-primary-foreground'
+                                                        : 'hover:bg-muted'), type: "button", children: section_name }, section_name))) })) })] }) }), _jsx("div", { className: "lg:col-span-3", children: selected_section && current_section_data ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-xl font-semibold", children: selected_section }), _jsxs("button", { onClick: () => set_dialog_mode('add'), className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 flex items-center gap-2 transition-colors", type: "button", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Key"] })] }), _jsxs("div", { className: "space-y-3", children: [Object.entries(current_section_data).map(([key, item]) => {
+                                                    const is_sensitive = should_mask_field(key);
+                                                    const show_value = !is_sensitive || is_revealed(selected_section, key);
+                                                    const display_value = get_field_value(selected_section, key, item);
+                                                    return (_jsxs("div", { className: "bg-card border border-border rounded-lg p-4 hover:shadow-sm transition-shadow", children: [_jsxs("div", { className: "flex items-start justify-between mb-3", children: [_jsx("div", { className: "flex-1", children: _jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("span", { className: "font-medium", children: key }), _jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full font-medium', item.config_type === 'json'
+                                                                                        ? 'bg-purple-100 text-purple-700'
+                                                                                        : 'bg-gray-100 text-gray-700'), children: item.config_type })] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [is_sensitive && (_jsx("button", { onClick: () => toggle_reveal(selected_section, key), className: "text-muted-foreground hover:text-foreground transition-colors", type: "button", children: show_value ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) })), _jsx("button", { onClick: () => handle_delete_key(selected_section, key), className: "text-red-500 hover:text-red-700 transition-colors", type: "button", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), item.config_type === 'json' ? (_jsx(JsonEditor, { value: typeof display_value === 'object' ? display_value : {}, onChange: (val) => handle_field_change(selected_section, key, val), className: "bg-muted/30" })) : (_jsx("input", { type: is_sensitive && !show_value ? 'password' : 'text', value: is_sensitive && !show_value
+                                                                    ? mask_value(String(display_value))
+                                                                    : String(display_value), onChange: (e) => handle_field_change(selected_section, key, e.target.value), className: "w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-primary", readOnly: is_sensitive && !show_value }))] }, key));
+                                                }), Object.keys(current_section_data).length === 0 && (_jsx("div", { className: "text-center py-12 text-muted-foreground", children: "No keys in this section yet. Click \"Add Key\" to get started." }))] })] })) : (_jsx("div", { className: "flex items-center justify-center h-64 bg-muted/30 border border-dashed border-border rounded-lg", children: _jsx("div", { className: "text-center text-muted-foreground", children: section_list.length > 0
+                                            ? 'Select a section to view and edit keys'
+                                            : 'Click + to create your first configuration section' }) })) })] })] }), _jsx(KeyDialog, { mode: dialog_mode, section_name: selected_section || undefined, on_close: () => set_dialog_mode(null), on_save: handle_dialog_save })] }));
 };

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"}