trackhome-react 0.4.0 → 0.5.1

package/dist/index.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   import { TrackhomeDashboard } from 'trackhome-react';
  *
  *   <TrackhomeDashboard
- *     endpoint="https://trk.example.com"
+ *     endpoint="YOUR_TRACKHOME_URL"
  *     authKey="ek_abc123..."
  *     uid="my-sales-dashboard"
  *   />
@@ -18,47 +18,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * (add / remove / edit / reorder via drag / resize) that saves back to
  * the server via PATCH /e/<authKey>/<uid>.
  *
- * Zero runtime dependencies beyond React itself — drag-and-drop and resize
- * are implemented with native HTML5 APIs to keep the published bundle small.
+ * The component is a thin shell: each widget kind is a self-contained module
+ * in ./widgets registered into `uiRegistry` (metadata + renderer + edit form).
+ * This file owns only the grid / drag / resize / autosave chrome and a generic
+ * editor that delegates per-kind fields to `uiRegistry[kind].EditForm`.
+ *
+ * Zero runtime dependencies beyond React itself.
  */
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-// ============================================================
-// Constants
-// ============================================================
-/** Width range in 12-column grid units. */
-const MIN_W = 2;
-const MAX_W = 12;
-const DEFAULT_W = 6;
-const WIDGET_KINDS = [
-    { value: 'metric', label: 'Metric', hint: 'Single big number (count over last N minutes)' },
-    { value: 'timeseries', label: 'Time series', hint: 'Line chart over time' },
-    { value: 'area', label: 'Area', hint: 'Filled area chart over time' },
-    { value: 'bar', label: 'Bar', hint: 'Vertical categorical bars' },
-    { value: 'pie', label: 'Pie', hint: 'Donut share-of-total' },
-    { value: 'top_events', label: 'Top events', hint: 'Ranked event-type list' },
-    { value: 'top_tags', label: 'Top tags', hint: 'Ranked tag-value list (needs prefix)' },
-    { value: 'funnel', label: 'Funnel', hint: 'Funnel waterfall (needs funnel slug)' },
-];
-function clampW(n) {
-    return Math.max(MIN_W, Math.min(MAX_W, Math.round(n)));
-}
-function newId() {
-    // RFC4122-ish, sufficient for client-side widget ids.
-    return 'w_' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
-}
-function defaultWidget(kind, partial) {
-    return {
-        id: newId(),
-        title: 'New widget',
-        kind,
-        tags: [],
-        bucket: '1 day',
-        metric: 'count',
-        minutes: 5,
-        layout: { x: 0, y: 0, w: DEFAULT_W, h: 4 },
-        ...partial,
-    };
-}
+import { MIN_W, MAX_W, DEFAULT_W, ACCENT, clampW, newId, uiRegistry, WIDGET_KINDS, defaultWidget, normalizeWidget, TagsAutosuggestInput, } from './widgets/index.js';
 // ============================================================
 // API client
 // ============================================================
@@ -79,75 +47,19 @@ function defaultRange() {
     const from = new Date(to.getTime() - 7 * 24 * 60 * 60 * 1000);
     return { from: from.toISOString().slice(0, 10), to: to.toISOString().slice(0, 10) };
 }
-// ============================================================
-// Widget renderers (self-contained, no external deps)
-// ============================================================
-function WidgetBody({ widget, data, theme, }) {
-    const accent = '#4f46e5';
-    const subtext = theme === 'dark' ? '#94a3b8' : '#64748b';
-    switch (widget.kind) {
-        case 'metric': {
-            const d = data;
-            const count = d?.count ?? 0;
-            return _jsx("div", { style: { fontSize: 28, fontWeight: 700, color: accent }, children: count.toLocaleString() });
-        }
-        case 'timeseries':
-        case 'area': {
-            const d = data ?? [];
-            if (d.length === 0)
-                return _jsx("div", { style: { fontSize: 12, color: subtext }, children: "No data." });
-            const max = Math.max(...d.map((p) => p.count), 1);
-            return (_jsx("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 2, height: 80 }, children: d.slice(-30).map((p, i) => (_jsx("div", { title: `${p.ts.slice(0, 10)}: ${p.count}`, style: {
-                        flex: 1,
-                        height: `${(p.count / max) * 100}%`,
-                        minHeight: 2,
-                        background: accent,
-                        opacity: widget.kind === 'area' ? 0.6 : 1,
-                        borderRadius: '2px 2px 0 0',
-                    } }, i))) }));
-        }
-        case 'bar':
-        case 'pie':
-        case 'top_events':
-        case 'top_tags': {
-            const d = data ?? [];
-            if (d.length === 0)
-                return _jsx("div", { style: { fontSize: 12, color: subtext }, children: "No data." });
-            const max = Math.max(...d.map((x) => x.count), 1);
-            return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: d.map((x, i) => {
-                    const label = x.type ?? x.tag ?? '—';
-                    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 11, color: subtext, width: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'monospace' }, children: label }), _jsx("div", { style: { flex: 1, height: 8, background: theme === 'dark' ? '#334155' : '#f1f5f9', borderRadius: 4, overflow: 'hidden' }, children: _jsx("div", { style: { width: `${(x.count / max) * 100}%`, height: '100%', background: accent, borderRadius: 4 } }) }), _jsx("div", { style: { fontSize: 11, color: subtext, minWidth: 40, textAlign: 'right' }, children: x.count.toLocaleString() })] }, i));
-                }) }));
-        }
-        case 'funnel': {
-            const d = data ?? {};
-            const steps = d.steps ?? [];
-            if (steps.length === 0)
-                return _jsx("div", { style: { fontSize: 12, color: subtext }, children: "No funnel data." });
-            const max = Math.max(...steps.map((s) => s.count), 1);
-            return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: steps.map((s, i) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 11, color: subtext, width: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'monospace' }, children: s.type }), _jsx("div", { style: { flex: 1, height: 10, background: theme === 'dark' ? '#334155' : '#f1f5f9', borderRadius: 4, overflow: 'hidden' }, children: _jsx("div", { style: { width: `${(s.count / max) * 100}%`, height: '100%', background: accent, borderRadius: 4 } }) }), _jsx("div", { style: { fontSize: 11, color: subtext, minWidth: 50, textAlign: 'right' }, children: s.count.toLocaleString() })] }, i))) }));
-        }
-        default:
-            return null;
-    }
-}
 function EditableWidgetCard({ widget, data, theme, editMode, index, total, dragIndex, dragOverIndex, onDragStart, onDragOver, onDragEnd, onDrop, onEdit, onDuplicate, onRemove, onResize, onMove, }) {
     const bg = theme === 'dark' ? '#1e293b' : '#ffffff';
     const text = theme === 'dark' ? '#f1f5f9' : '#1e293b';
     const border = theme === 'dark' ? '#334155' : '#e2e8f0';
-    const accentBorder = '#4f46e5';
     const layoutW = widget.layout?.w ?? DEFAULT_W;
-    // 12-col span — only applied in editMode so non-edit grid still uses minmax.
     const spanStyle = editMode ? { gridColumn: `span ${layoutW} / span ${layoutW}` } : {};
-    // Drag affordances.
     const isBeingDragged = dragIndex === index;
     const isDropTarget = editMode && dragOverIndex === index && dragIndex !== index;
     const cardBorder = isDropTarget
-        ? `2px dashed ${accentBorder}`
+        ? `2px dashed ${ACCENT}`
         : editMode
-            ? `1px solid ${accentBorder}`
+            ? `1px solid ${ACCENT}`
             : `1px solid ${border}`;
-    // Inline edit-mode button (small, icon-only).
     const btn = (extraStyle = {}) => ({
         background: theme === 'dark' ? '#475569' : '#e2e8f0',
         color: theme === 'dark' ? '#f1f5f9' : '#1e293b',
@@ -164,9 +76,8 @@ function EditableWidgetCard({ widget, data, theme, editMode, index, total, dragI
         justifyContent: 'center',
         ...extraStyle,
     });
-    return (_jsxs("div", { 
-        // Draggable in edit mode for reorder.
-        draggable: editMode, onDragStart: (e) => {
+    const Render = uiRegistry[widget.kind].Render;
+    return (_jsxs("div", { draggable: editMode, onDragStart: (e) => {
             if (!editMode)
                 return;
             e.dataTransfer.effectAllowed = 'move';
@@ -208,7 +119,7 @@ function EditableWidgetCard({ widget, data, theme, editMode, index, total, dragI
                                     padding: '1px 6px',
                                     borderRadius: 4,
                                     flexShrink: 0,
-                                }, children: widget.kind }))] }), editMode && (_jsxs("div", { style: { display: 'flex', gap: 2, flexShrink: 0 }, children: [_jsx("button", { title: "Edit configuration", onClick: onEdit, style: btn(), type: "button", children: "\u270E" }), _jsx("button", { title: "Duplicate", onClick: onDuplicate, style: btn(), type: "button", children: "\u29C9" }), _jsx("button", { title: "Move earlier", onClick: () => onMove(-1), disabled: index === 0, style: btn({ opacity: index === 0 ? 0.3 : 1 }), type: "button", children: "\u2191" }), _jsx("button", { title: "Move later", onClick: () => onMove(1), disabled: index === total - 1, style: btn({ opacity: index === total - 1 ? 0.3 : 1 }), type: "button", children: "\u2193" }), _jsx("button", { title: "Remove widget", onClick: onRemove, type: "button", style: { ...btn(), background: '#ef4444', color: '#fff' }, children: "\u00D7" })] }))] }), _jsx(WidgetBody, { widget: widget, data: data, theme: theme }), editMode && (_jsxs("div", { style: {
+                                }, children: widget.kind }))] }), editMode && (_jsxs("div", { style: { display: 'flex', gap: 2, flexShrink: 0 }, children: [_jsx("button", { title: "Edit configuration", onClick: onEdit, style: btn(), type: "button", children: "\u270E" }), _jsx("button", { title: "Duplicate", onClick: onDuplicate, style: btn(), type: "button", children: "\u29C9" }), _jsx("button", { title: "Move earlier", onClick: () => onMove(-1), disabled: index === 0, style: btn({ opacity: index === 0 ? 0.3 : 1 }), type: "button", children: "\u2191" }), _jsx("button", { title: "Move later", onClick: () => onMove(1), disabled: index === total - 1, style: btn({ opacity: index === total - 1 ? 0.3 : 1 }), type: "button", children: "\u2193" }), _jsx("button", { title: "Remove widget", onClick: onRemove, type: "button", style: { ...btn(), background: '#ef4444', color: '#fff' }, children: "\u00D7" })] }))] }), _jsx(Render, { widget: widget, data: data, theme: theme }), editMode && (_jsxs("div", { style: {
                     marginTop: 10,
                     paddingTop: 8,
                     borderTop: `1px dashed ${theme === 'dark' ? '#334155' : '#cbd5e1'}`,
@@ -219,337 +130,14 @@ function EditableWidgetCard({ widget, data, theme, editMode, index, total, dragI
                     color: theme === 'dark' ? '#94a3b8' : '#64748b',
                 }, children: [_jsx("span", { style: { minWidth: 36 }, children: "Width" }), _jsx("button", { type: "button", onClick: () => onResize(layoutW - 1), disabled: layoutW <= MIN_W, style: btn({ width: 18, height: 18, fontSize: 11, opacity: layoutW <= MIN_W ? 0.3 : 1 }), children: "\u2212" }), _jsxs("span", { style: { minWidth: 38, textAlign: 'center', fontVariantNumeric: 'tabular-nums' }, children: [layoutW, " / ", MAX_W] }), _jsx("button", { type: "button", onClick: () => onResize(layoutW + 1), disabled: layoutW >= MAX_W, style: btn({ width: 18, height: 18, fontSize: 11, opacity: layoutW >= MAX_W ? 0.3 : 1 }), children: "+" }), _jsx("div", { style: { display: 'flex', gap: 2, marginLeft: 'auto' }, children: [3, 4, 6, 8, 12].map((w) => (_jsx("button", { type: "button", onClick: () => onResize(w), title: `Width ${w}/${MAX_W}`, style: {
                                 ...btn({ width: 20, height: 18, fontSize: 10 }),
-                                background: layoutW === w
-                                    ? accentBorder
-                                    : theme === 'dark'
-                                        ? '#334155'
-                                        : '#e2e8f0',
+                                background: layoutW === w ? ACCENT : theme === 'dark' ? '#334155' : '#e2e8f0',
                                 color: layoutW === w ? '#fff' : text,
                             }, children: w }, w))) })] }))] }));
 }
-function useDebounced(value, delayMs) {
-    const [debounced, setDebounced] = useState(value);
-    useEffect(() => {
-        const t = setTimeout(() => setDebounced(value), delayMs);
-        return () => clearTimeout(t);
-    }, [value, delayMs]);
-    return debounced;
-}
-/**
- * Single-value input with autosuggest dropdown. Used for event type and tag
- * prefix fields.
- */
-function AutosuggestInput({ endpoint, authKey, uid, suggestPath, value, onChange, placeholder, theme, inputStyle, }) {
-    const [text, setText] = useState(value);
-    const [open, setOpen] = useState(false);
-    const [highlight, setHighlight] = useState(0);
-    const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const debounced = useDebounced(text.trim(), 150);
-    // Sync incoming value once on mount / when external value changes (rare).
-    useEffect(() => {
-        setText(value);
-    }, [value]);
-    useEffect(() => {
-        let cancelled = false;
-        if (!open || debounced.length === 0) {
-            setItems([]);
-            setLoading(false);
-            return;
-        }
-        setLoading(true);
-        const url = `${endpoint.replace(/\/$/, '')}/e/${authKey}/${uid}/suggest/${suggestPath}?q=${encodeURIComponent(debounced)}&limit=10`;
-        fetch(url)
-            .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
-            .then((body) => {
-            if (cancelled)
-                return;
-            setItems(body.items ?? []);
-            setHighlight(0);
-        })
-            .catch(() => {
-            if (cancelled)
-                return;
-            setItems([]);
-        })
-            .finally(() => {
-            if (!cancelled)
-                setLoading(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [endpoint, authKey, uid, suggestPath, debounced, open]);
-    const showItemCreate = text.trim().length > 0 && !items.some((it) => it.value === text.trim());
-    function commit(v) {
-        setText(v);
-        onChange(v);
-        setOpen(false);
-    }
-    function onKeyDown(e) {
-        const totalOptions = items.length + (showItemCreate ? 1 : 0);
-        if (e.key === 'ArrowDown' && totalOptions > 0) {
-            e.preventDefault();
-            setOpen(true);
-            setHighlight((h) => Math.min(h + 1, totalOptions - 1));
-        }
-        else if (e.key === 'ArrowUp' && totalOptions > 0) {
-            e.preventDefault();
-            setHighlight((h) => Math.max(h - 1, 0));
-        }
-        else if (e.key === 'Enter') {
-            if (open && totalOptions > 0) {
-                e.preventDefault();
-                if (highlight < items.length)
-                    commit(items[highlight].value);
-                else
-                    commit(text.trim());
-            }
-        }
-        else if (e.key === 'Escape') {
-            setOpen(false);
-        }
-    }
-    const dropdownBg = theme === 'dark' ? '#0f172a' : '#ffffff';
-    const dropdownBorder = theme === 'dark' ? '#334155' : '#cbd5e1';
-    const hoverBg = theme === 'dark' ? '#1e293b' : '#eef2ff';
-    const subText = theme === 'dark' ? '#94a3b8' : '#64748b';
-    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("input", { style: inputStyle, value: text, onChange: (e) => {
-                    setText(e.target.value);
-                    onChange(e.target.value);
-                    setOpen(true);
-                    setHighlight(0);
-                }, onFocus: () => setOpen(true), onBlur: () => setTimeout(() => setOpen(false), 120), onKeyDown: onKeyDown, placeholder: placeholder, autoComplete: "off", spellCheck: false }), open && (text.trim().length > 0) && (_jsxs("div", { style: {
-                    position: 'absolute',
-                    top: 'calc(100% + 2px)',
-                    left: 0,
-                    right: 0,
-                    background: dropdownBg,
-                    border: `1px solid ${dropdownBorder}`,
-                    borderRadius: 6,
-                    boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
-                    zIndex: 1100,
-                    maxHeight: 240,
-                    overflowY: 'auto',
-                    fontSize: 12,
-                }, onMouseDown: (e) => e.preventDefault(), children: [loading && (_jsx("div", { style: { padding: '8px 10px', color: subText }, children: "Searching\u2026" })), !loading && items.length === 0 && !showItemCreate && (_jsx("div", { style: { padding: '8px 10px', color: subText }, children: "No matches." })), items.map((it, i) => (_jsxs("div", { onMouseEnter: () => setHighlight(i), onMouseDown: (e) => {
-                            e.preventDefault();
-                            commit(it.value);
-                        }, style: {
-                            padding: '6px 10px',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            gap: 8,
-                            background: i === highlight ? hoverBg : 'transparent',
-                            borderRadius: 4,
-                            fontFamily: suggestPath === 'prefixes' ? 'monospace' : undefined,
-                        }, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: it.value }), _jsx("span", { style: { color: subText, flexShrink: 0, fontVariantNumeric: 'tabular-nums' }, children: it.count.toLocaleString() })] }, it.value))), showItemCreate && (_jsxs("div", { onMouseEnter: () => setHighlight(items.length), onMouseDown: (e) => {
-                            e.preventDefault();
-                            commit(text.trim());
-                        }, style: {
-                            padding: '6px 10px',
-                            cursor: 'pointer',
-                            borderTop: `1px dashed ${dropdownBorder}`,
-                            marginTop: items.length > 0 ? 4 : 0,
-                            background: highlight === items.length ? hoverBg : 'transparent',
-                            borderRadius: 4,
-                            color: '#4f46e5',
-                            fontStyle: 'italic',
-                        }, children: ["Use \"", text.trim(), "\"", suggestPath === 'prefixes' ? ' (new prefix)' : ' (new)'] }))] }))] }));
-}
-/**
- * Multi-value tag input. Comma-separated in the draft model; each token gets
- * its own autosuggest dropdown as the user types. Backspace removes the last
- * token; Enter / comma commits the current text using the highlighted
- * suggestion (if any) and clears the input.
- */
-function TagsAutosuggestInput({ endpoint, authKey, uid, tags, onChange, placeholder, theme, inputStyle, }) {
-    const [text, setText] = useState('');
-    const [open, setOpen] = useState(false);
-    const [highlight, setHighlight] = useState(0);
-    const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const debounced = useDebounced(text.trim(), 150);
-    useEffect(() => {
-        let cancelled = false;
-        if (!open || debounced.length === 0) {
-            setItems([]);
-            setLoading(false);
-            return;
-        }
-        setLoading(true);
-        const url = `${endpoint.replace(/\/$/, '')}/e/${authKey}/${uid}/suggest/tags?q=${encodeURIComponent(debounced)}&limit=10`;
-        fetch(url)
-            .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
-            .then((body) => {
-            if (cancelled)
-                return;
-            setItems(body.items ?? []);
-            setHighlight(0);
-        })
-            .catch(() => {
-            if (cancelled)
-                return;
-            setItems([]);
-        })
-            .finally(() => {
-            if (!cancelled)
-                setLoading(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [endpoint, authKey, uid, debounced, open]);
-    function addTag(raw) {
-        const v = raw.trim();
-        if (!v)
-            return;
-        const next = Array.from(new Set([...tags, v]));
-        onChange(next);
-        setText('');
-        setItems([]);
-        setHighlight(0);
-    }
-    function removeTag(t) {
-        onChange(tags.filter((x) => x !== t));
-    }
-    function onKeyDown(e) {
-        const totalOptions = items.length + (text.trim().length > 0 && !items.some((it) => it.value === text.trim()) ? 1 : 0);
-        if (e.key === 'ArrowDown' && totalOptions > 0) {
-            e.preventDefault();
-            setOpen(true);
-            setHighlight((h) => Math.min(h + 1, totalOptions - 1));
-        }
-        else if (e.key === 'ArrowUp' && totalOptions > 0) {
-            e.preventDefault();
-            setHighlight((h) => Math.max(h - 1, 0));
-        }
-        else if (e.key === 'Enter' || e.key === ',') {
-            e.preventDefault();
-            if (open && totalOptions > 0) {
-                if (highlight < items.length)
-                    addTag(items[highlight].value);
-                else
-                    addTag(text.trim());
-            }
-            else {
-                addTag(text.trim());
-            }
-        }
-        else if (e.key === 'Backspace' && text === '' && tags.length > 0) {
-            // Remove last tag on backspace when input is empty.
-            removeTag(tags[tags.length - 1]);
-        }
-        else if (e.key === 'Escape') {
-            setOpen(false);
-        }
-    }
-    const dropdownBg = theme === 'dark' ? '#0f172a' : '#ffffff';
-    const dropdownBorder = theme === 'dark' ? '#334155' : '#cbd5e1';
-    const constainerBorder = dropdownBorder;
-    const hoverBg = theme === 'dark' ? '#1e293b' : '#eef2ff';
-    const subText = theme === 'dark' ? '#94a3b8' : '#64748b';
-    const chipBg = theme === 'dark' ? '#334155' : '#e0e7ff';
-    const chipText = theme === 'dark' ? '#f1f5f9' : '#3730a3';
-    const showItemCreate = text.trim().length > 0 && !items.some((it) => it.value === text.trim());
-    return (_jsxs("div", { style: {
-            ...inputStyle,
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: 4,
-            alignItems: 'center',
-            padding: '4px 6px',
-            cursor: 'text',
-            minHeight: inputStyle.padding ?? 36,
-        }, onMouseDown: () => {
-            // Focus the input when clicking anywhere in the chip area.
-            const i = document.getElementById('tag-input-internal');
-            if (i)
-                i.focus();
-        }, children: [tags.map((t) => (_jsxs("span", { style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 4,
-                    background: chipBg,
-                    color: chipText,
-                    padding: '2px 4px 2px 8px',
-                    borderRadius: 4,
-                    fontSize: 11,
-                    fontFamily: 'monospace',
-                }, children: [t, _jsx("button", { type: "button", onMouseDown: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            removeTag(t);
-                        }, style: {
-                            border: 'none',
-                            background: 'transparent',
-                            color: chipText,
-                            cursor: 'pointer',
-                            fontSize: 13,
-                            lineHeight: 1,
-                            padding: '0 4px',
-                        }, "aria-label": `Remove ${t}`, children: "\u00D7" })] }, t))), _jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 80 }, children: [_jsx("input", { id: "tag-input-internal", style: {
-                            width: '100%',
-                            background: 'transparent',
-                            border: 'none',
-                            outline: 'none',
-                            color: 'inherit',
-                            fontSize: 13,
-                            padding: '4px 2px',
-                            fontFamily: 'monospace',
-                        }, value: text, onChange: (e) => {
-                            // Strip commas — they commit a tag instead.
-                            const next = e.target.value.replace(/,/g, '');
-                            setText(next);
-                            setOpen(true);
-                            setHighlight(0);
-                        }, onFocus: () => setOpen(true), onBlur: () => setTimeout(() => setOpen(false), 120), onKeyDown: onKeyDown, placeholder: tags.length === 0 ? placeholder : '', autoComplete: "off", spellCheck: false }), open && text.trim().length > 0 && (_jsxs("div", { style: {
-                            position: 'absolute',
-                            top: 'calc(100% + 2px)',
-                            left: 0,
-                            right: 0,
-                            background: dropdownBg,
-                            border: `1px solid ${constainerBorder}`,
-                            borderRadius: 6,
-                            boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
-                            zIndex: 1100,
-                            maxHeight: 240,
-                            overflowY: 'auto',
-                            fontSize: 12,
-                        }, onMouseDown: (e) => e.preventDefault(), children: [loading && (_jsx("div", { style: { padding: '8px 10px', color: subText }, children: "Searching\u2026" })), !loading && items.length === 0 && !showItemCreate && (_jsx("div", { style: { padding: '8px 10px', color: subText }, children: "No matches." })), items.map((it, i) => (_jsxs("div", { onMouseEnter: () => setHighlight(i), onMouseDown: (e) => {
-                                    e.preventDefault();
-                                    addTag(it.value);
-                                }, style: {
-                                    padding: '6px 10px',
-                                    cursor: 'pointer',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    gap: 8,
-                                    background: i === highlight ? hoverBg : 'transparent',
-                                    borderRadius: 4,
-                                    fontFamily: 'monospace',
-                                }, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: it.value }), _jsx("span", { style: { color: subText, flexShrink: 0, fontVariantNumeric: 'tabular-nums' }, children: it.count.toLocaleString() })] }, it.value))), showItemCreate && (_jsxs("div", { onMouseEnter: () => setHighlight(items.length), onMouseDown: (e) => {
-                                    e.preventDefault();
-                                    addTag(text.trim());
-                                }, style: {
-                                    padding: '6px 10px',
-                                    cursor: 'pointer',
-                                    borderTop: `1px dashed ${constainerBorder}`,
-                                    marginTop: items.length > 0 ? 4 : 0,
-                                    background: highlight === items.length ? hoverBg : 'transparent',
-                                    borderRadius: 4,
-                                    color: '#4f46e5',
-                                    fontStyle: 'italic',
-                                    fontFamily: 'monospace',
-                                }, children: ["Add \"", text.trim(), "\" (new tag)"] }))] }))] })] }));
-}
 function WidgetEditorModal({ endpoint, authKey, uid, state, theme, onClose, onSave, }) {
     const [draft, setDraft] = useState(state.widget);
-    // Local helpers
-    const set = (k, v) => setDraft((d) => ({ ...d, [k]: v }));
+    const update = (patch) => setDraft((d) => ({ ...d, ...patch }));
     const setLayout = (patch) => setDraft((d) => ({ ...d, layout: { x: 0, y: 0, w: DEFAULT_W, h: 4, ...d.layout, ...patch } }));
-    // Theme-driven styles
     const overlay = {
         position: 'fixed',
         inset: 0,
@@ -566,7 +154,15 @@ function WidgetEditorModal({ endpoint, authKey, uid, state, theme, onClose, onSa
     const inputBorder = theme === 'dark' ? '#334155' : '#cbd5e1';
     const labelColor = theme === 'dark' ? '#cbd5e1' : '#475569';
     const subLabelColor = theme === 'dark' ? '#94a3b8' : '#64748b';
-    const labelStyle = { fontSize: 11, fontWeight: 600, color: labelColor, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4, display: 'block' };
+    const labelStyle = {
+        fontSize: 11,
+        fontWeight: 600,
+        color: labelColor,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        marginBottom: 4,
+        display: 'block',
+    };
     const inputStyle = {
         width: '100%',
         padding: '8px 10px',
@@ -577,9 +173,10 @@ function WidgetEditorModal({ endpoint, authKey, uid, state, theme, onClose, onSa
         borderRadius: 6,
         outline: 'none',
     };
-    const requiresTagPrefix = draft.kind === 'top_tags' || (draft.kind === 'bar' && draft.breakdown === 'tag') || (draft.kind === 'pie' && draft.breakdown === 'tag');
-    const requiresFunnel = draft.kind === 'funnel';
-    const isTimechart = draft.kind === 'timeseries' || draft.kind === 'area';
+    const ctx = { endpoint, authKey, uid, theme, inputStyle, labelStyle, subLabelColor };
+    const EditForm = uiRegistry[draft.kind].EditForm;
+    // Tag filters apply to most kinds; funnel carries its own filterTags instead.
+    const showCommonTags = draft.kind !== 'funnel';
     return (_jsx("div", { style: overlay, onMouseDown: (e) => { if (e.target === e.currentTarget)
             onClose(); }, children: _jsxs("div", { style: {
                 background: modalBg,
@@ -591,10 +188,10 @@ function WidgetEditorModal({ endpoint, authKey, uid, state, theme, onClose, onSa
                 overflowY: 'auto',
                 padding: 20,
                 boxShadow: '0 20px 50px rgba(0,0,0,0.3)',
-            }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }, children: [_jsx("div", { style: { fontSize: 15, fontWeight: 700 }, children: state.isNew ? 'Add widget' : 'Edit widget' }), _jsx("button", { type: "button", onClick: onClose, style: btnClose(modalText), children: "\u00D7" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Title" }), _jsx("input", { style: inputStyle, value: draft.title, onChange: (e) => set('title', e.target.value), placeholder: "e.g. Signups per day", autoFocus: true })] }), _jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Kind" }), _jsx("select", { style: inputStyle, value: draft.kind, onChange: (e) => {
+            }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }, children: [_jsx("div", { style: { fontSize: 15, fontWeight: 700 }, children: state.isNew ? 'Add widget' : 'Edit widget' }), _jsx("button", { type: "button", onClick: onClose, style: btnClose(modalText), children: "\u00D7" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Title" }), _jsx("input", { style: inputStyle, value: draft.title, onChange: (e) => update({ title: e.target.value }), placeholder: "e.g. Signups per day", autoFocus: true })] }), _jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Kind" }), _jsx("select", { style: inputStyle, value: draft.kind, onChange: (e) => {
                                         const kind = e.target.value;
-                                        setDraft((d) => ({ ...d, kind }));
-                                    }, children: WIDGET_KINDS.map((k) => (_jsx("option", { value: k.value, children: k.label }, k.value))) }), _jsx("span", { style: { display: 'block', fontSize: 11, color: subLabelColor, marginTop: 4 }, children: WIDGET_KINDS.find((k) => k.value === draft.kind)?.hint })] }), draft.kind === 'metric' && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Window (minutes)" }), _jsx("input", { type: "number", min: 1, style: inputStyle, value: draft.minutes ?? 5, onChange: (e) => set('minutes', Number(e.target.value) || 5) })] })), isTimechart && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Bucket interval" }), _jsxs("select", { style: inputStyle, value: draft.bucket ?? '1 day', onChange: (e) => set('bucket', e.target.value), children: [_jsx("option", { value: "1 hour", children: "1 hour" }), _jsx("option", { value: "6 hours", children: "6 hours" }), _jsx("option", { value: "1 day", children: "1 day" }), _jsx("option", { value: "7 days", children: "7 days" })] })] })), (draft.kind === 'bar' || draft.kind === 'pie') && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Breakdown" }), _jsxs("select", { style: inputStyle, value: draft.breakdown ?? 'event_type', onChange: (e) => set('breakdown', e.target.value), children: [_jsx("option", { value: "event_type", children: "Event type" }), _jsx("option", { value: "tag", children: "Tag value" })] })] })), (requiresTagPrefix || draft.kind === 'top_tags') && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Tag prefix" }), _jsx(AutosuggestInput, { endpoint: endpoint, authKey: authKey, uid: uid, suggestPath: "prefixes", value: draft.tagPrefix ?? '', onChange: (v) => set('tagPrefix', v || undefined), placeholder: "e.g. variant:", theme: theme, inputStyle: inputStyle })] })), requiresFunnel && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Funnel slug" }), _jsx("input", { style: inputStyle, value: draft.funnelSlug ?? '', onChange: (e) => set('funnelSlug', e.target.value), placeholder: "e.g. signup-funnel" })] })), draft.kind !== 'metric' && draft.kind !== 'funnel' && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Metric" }), _jsxs("select", { style: inputStyle, value: draft.metric ?? 'count', onChange: (e) => set('metric', e.target.value), children: [_jsx("option", { value: "count", children: "Count" }), _jsx("option", { value: "unique", children: "Unique visitors" }), _jsx("option", { value: "sum", children: "Sum" }), _jsx("option", { value: "avg", children: "Average" })] })] })), (isTimechart || draft.kind === 'metric' || draft.kind === 'bar' || draft.kind === 'pie' || draft.kind === 'top_events') && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Event type filter (optional)" }), _jsx(AutosuggestInput, { endpoint: endpoint, authKey: authKey, uid: uid, suggestPath: "events", value: draft.eventType ?? '', onChange: (v) => set('eventType', v || undefined), placeholder: "e.g. page_view", theme: theme, inputStyle: inputStyle })] })), _jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Tag filters" }), _jsx(TagsAutosuggestInput, { endpoint: endpoint, authKey: authKey, uid: uid, tags: draft.tags ?? [], onChange: (t) => set('tags', t), placeholder: "type to search, Enter to add", theme: theme, inputStyle: inputStyle })] }), _jsxs("label", { children: [_jsxs("span", { style: labelStyle, children: ["Width: ", _jsxs("span", { style: { color: modalText }, children: [draft.layout?.w ?? DEFAULT_W, " / ", MAX_W] })] }), _jsx("input", { type: "range", min: MIN_W, max: MAX_W, step: 1, value: draft.layout?.w ?? DEFAULT_W, onChange: (e) => setLayout({ w: Number(e.target.value) }), style: { width: '100%', accentColor: '#4f46e5' } })] })] }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }, children: [_jsx("button", { type: "button", onClick: onClose, style: {
+                                        setDraft((d) => defaultWidget(kind, { id: d.id, title: d.title, tags: d.tags, layout: d.layout }));
+                                    }, children: WIDGET_KINDS.map((k) => (_jsx("option", { value: k.value, children: k.label }, k.value))) }), _jsx("span", { style: { display: 'block', fontSize: 11, color: subLabelColor, marginTop: 4 }, children: WIDGET_KINDS.find((k) => k.value === draft.kind)?.hint })] }), _jsx(EditForm, { draft: draft, update: update, ctx: ctx }), showCommonTags && (_jsxs("label", { children: [_jsx("span", { style: labelStyle, children: "Tag filters" }), _jsx(TagsAutosuggestInput, { endpoint: endpoint, authKey: authKey, uid: uid, tags: draft.tags ?? [], onChange: (t) => update({ tags: t }), placeholder: "type to search, Enter to add", theme: theme, inputStyle: inputStyle })] })), _jsxs("label", { children: [_jsxs("span", { style: labelStyle, children: ["Width: ", _jsxs("span", { style: { color: modalText }, children: [draft.layout?.w ?? DEFAULT_W, " / ", MAX_W] })] }), _jsx("input", { type: "range", min: MIN_W, max: MAX_W, step: 1, value: draft.layout?.w ?? DEFAULT_W, onChange: (e) => setLayout({ w: Number(e.target.value) }), style: { width: '100%', accentColor: ACCENT } })] })] }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }, children: [_jsx("button", { type: "button", onClick: onClose, style: {
                                 padding: '8px 14px',
                                 fontSize: 13,
                                 borderRadius: 6,
@@ -608,23 +205,23 @@ function WidgetEditorModal({ endpoint, authKey, uid, state, theme, onClose, onSa
                                 fontWeight: 600,
                                 borderRadius: 6,
                                 border: 'none',
-                                background: draft.title.trim() ? '#4f46e5' : '#94a3b8',
+                                background: draft.title.trim() ? ACCENT : '#94a3b8',
                                 color: '#fff',
                                 cursor: draft.title.trim() ? 'pointer' : 'not-allowed',
                             }, children: state.isNew ? 'Add widget' : 'Save changes' })] })] }) }));
-    function btnClose(text) {
-        return {
-            width: 28,
-            height: 28,
-            padding: 0,
-            border: 'none',
-            background: 'transparent',
-            color: text,
-            fontSize: 22,
-            lineHeight: 1,
-            cursor: 'pointer',
-        };
-    }
+}
+function btnClose(text) {
+    return {
+        width: 28,
+        height: 28,
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        color: text,
+        fontSize: 22,
+        lineHeight: 1,
+        cursor: 'pointer',
+    };
 }
 // ============================================================
 // Main component
@@ -636,10 +233,8 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
     const [error, setError] = useState(null);
     const [editMode, setEditMode] = useState(false);
     const [editor, setEditor] = useState(null);
-    // Drag-and-drop reorder state.
     const [dragIndex, setDragIndex] = useState(null);
     const [dragOverIndex, setDragOverIndex] = useState(null);
-    // Saving indicator.
     const [saving, setSaving] = useState(false);
     const refreshTimer = useRef(null);
     const range = useMemo(() => dateRange ?? defaultRange(), [dateRange]);
@@ -649,7 +244,8 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
                 api(endpoint, authKey, uid, ''),
                 api(endpoint, authKey, uid, `/data?from=${range.from}&to=${range.to}`),
             ]);
-            setConfig(cfg);
+            // Upgrade any legacy stored widgets so old dashboards keep rendering.
+            setConfig({ ...cfg, widgets: (cfg.widgets ?? []).map(normalizeWidget) });
             setData(widgetData);
             setError(null);
         }
@@ -681,21 +277,13 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
     const headerText = theme === 'dark' ? '#f1f5f9' : '#1e293b';
     const subText = theme === 'dark' ? '#94a3b8' : '#64748b';
     // ---------------- Mutators ----------------
-    // Every mutation updates local state immediately (optimistic) then PATCHes
-    // the full config to the server. The PATCH route on the API merges into
-    // the stored row so this is safe to call repeatedly.
     async function saveConfig(next) {
         setConfig(next);
         setSaving(true);
         try {
-            await api(endpoint, authKey, uid, '', {
-                method: 'PATCH',
-                body: JSON.stringify(next),
-            });
+            await api(endpoint, authKey, uid, '', { method: 'PATCH', body: JSON.stringify(next) });
         }
         catch (err) {
-            // Surface the error inline; the optimistic update stays so the user
-            // can copy their work or retry by making any further edit.
             setError(err.message);
         }
         finally {
@@ -745,14 +333,18 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
             : x));
     }
     function commitEditor(next) {
-        mutateWidgets((ws) => {
-            const exists = ws.some((w) => w.id === next.id);
-            return exists ? ws.map((w) => (w.id === next.id ? next : w)) : [...ws, next];
-        });
+        if (!config)
+            return;
+        const exists = config.widgets.some((w) => w.id === next.id);
+        const widgets = exists
+            ? config.widgets.map((w) => (w.id === next.id ? next : w))
+            : [...config.widgets, next];
         setEditor(null);
+        // Save, then refresh widget data so a new/kind-changed widget shows correct
+        // data immediately. fetchAll runs only AFTER the PATCH settles, so it can't
+        // re-GET a stale config and drop the just-added widget.
+        void saveConfig({ ...config, widgets }).then(() => fetchAll());
     }
-    // Drag handlers — HTML5 DnD. The card sets dragIndex on dragstart, and on
-    // drop we splice the dragged item out and reinsert at the drop position.
     function handleDrop(dropAt) {
         if (dragIndex === null || dragIndex === dropAt) {
             setDragIndex(null);
@@ -768,14 +360,10 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
         setDragIndex(null);
         setDragOverIndex(null);
     }
-    // Grid: in edit mode we use a strict 12-col grid so width spans make sense.
-    // In view mode we keep the auto-fill behaviour so widgets flow naturally.
     const gridStyle = editMode
         ? { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 8 }
         : { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 8 };
-    return (_jsxs("div", { className: className, style: { background: bg, borderRadius: 12, padding: 16, position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, gap: 8, flexWrap: 'wrap' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 8, minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 16, fontWeight: 700, color: headerText, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: config.name }), saving && (_jsx("span", { style: { fontSize: 10, color: subText }, children: "saving\u2026" }))] }), editable && (_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [editMode && (_jsx("button", { type: "button", onClick: () => {
-                                    setEditor({ widget: defaultWidget('timeseries'), isNew: true });
-                                }, style: primaryBtn(false), children: "+ Add widget" })), _jsx("button", { type: "button", onClick: () => setEditMode(!editMode), style: primaryBtn(editMode), children: editMode ? '✓ Done' : '✎ Edit' })] }))] }), editMode && (_jsxs("div", { style: {
+    return (_jsxs("div", { className: className, style: { background: bg, borderRadius: 12, padding: 16, position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, gap: 8, flexWrap: 'wrap' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 8, minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 16, fontWeight: 700, color: headerText, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: config.name }), saving && _jsx("span", { style: { fontSize: 10, color: subText }, children: "saving\u2026" })] }), editable && (_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [editMode && (_jsx("button", { type: "button", onClick: () => setEditor({ widget: defaultWidget('timeseries'), isNew: true }), style: primaryBtn(false), children: "+ Add widget" })), _jsx("button", { type: "button", onClick: () => setEditMode(!editMode), style: primaryBtn(editMode), children: editMode ? '✓ Done' : '✎ Edit' })] }))] }), editMode && (_jsxs("div", { style: {
                     fontSize: 11,
                     color: subText,
                     background: theme === 'dark' ? '#1e293b' : '#eef2ff',
@@ -796,9 +384,6 @@ export function TrackhomeDashboard({ endpoint, authKey, uid, editable = false, r
                             borderRadius: 8,
                         }, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginBottom: 8 }, children: "No widgets yet." }), _jsx("button", { type: "button", onClick: () => setEditor({ widget: defaultWidget('timeseries'), isNew: true }), style: primaryBtn(false), children: "+ Add your first widget" })] })) : (_jsx(_Fragment, { children: "No widgets." })) }))] }), _jsx("div", { style: { textAlign: 'right', marginTop: 8, fontSize: 10, color: theme === 'dark' ? '#475569' : '#cbd5e1' }, children: "powered by trackhome" }), editor && (_jsx(WidgetEditorModal, { endpoint: endpoint, authKey: authKey, uid: uid, state: editor, theme: theme, onClose: () => setEditor(null), onSave: commitEditor }))] }));
 }
-// ============================================================
-// Shared button style
-// ============================================================
 function primaryBtn(solid) {
     return {
         fontSize: 12,