@maxal_studio/kratosjs-react 1.0.0

package/dist/components/columns/ViewColumnComponent.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function ViewColumnComponent({ column, record }) {
+    // ViewColumn is for custom rendering - in a real implementation,
+    // this would load a custom view/template
+    // For now, just display a placeholder
+    return _jsxs("span", { className: "text-fg-secondary italic", children: ["Custom view: ", column.view] });
+}

package/dist/components/errors/ErrorBoundary.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    /** Custom fallback; receives the error and a reset callback */
+    fallback?: (error: Error, reset: () => void) => React.ReactNode;
+    /** Short label for the failed area, shown in the default fallback */
+    label?: string;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Generic error boundary so a crash in one route, modal or widget
+ * doesn't take down the whole admin panel.
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    reset: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+}
+export {};

package/dist/components/errors/ErrorBoundary.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * Generic error boundary so a crash in one route, modal or widget
+ * doesn't take down the whole admin panel.
+ */
+export class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+        this.reset = () => {
+            this.setState({ error: null });
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        console.error('KratosJS error boundary caught:', error, info.componentStack);
+    }
+    render() {
+        const { error } = this.state;
+        if (!error) {
+            return this.props.children;
+        }
+        if (this.props.fallback) {
+            return this.props.fallback(error, this.reset);
+        }
+        return (_jsxs("div", { className: "m-4 rounded-lg border border-danger/30 bg-danger-soft p-4", children: [_jsx("p", { className: "text-sm font-semibold text-danger", children: this.props.label ? `Something went wrong in ${this.props.label}` : 'Something went wrong' }), _jsx("p", { className: "mt-1 text-sm k-text-secondary break-words", children: error.message }), _jsx(PillButton, { type: "button", variant: "default", onClick: this.reset, className: "mt-3", children: translate('core:common.try_again') })] }));
+    }
+}

package/dist/components/filters/CustomFilterComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SerializedFilter } from '@maxal_studio/kratosjs';
+interface CustomFilterProps {
+    filter: SerializedFilter;
+    value?: string[];
+    onChange: (value: string[] | undefined) => void;
+    embedded?: boolean;
+}
+export declare function CustomFilterComponent({ filter, value, onChange, embedded }: CustomFilterProps): React.JSX.Element;
+export {};

package/dist/components/filters/CustomFilterComponent.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../utils/classNames';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+export function CustomFilterComponent({ filter, value, onChange, embedded = false }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [localSelectedValues, setLocalSelectedValues] = useState([]);
+    const appliedValues = Array.isArray(value) ? value : value ? [value] : [];
+    const options = filter.componentProps?.options || [];
+    const toggleOption = (option) => {
+        const newValues = localSelectedValues.includes(option)
+            ? localSelectedValues.filter(v => v !== option)
+            : [...localSelectedValues, option];
+        setLocalSelectedValues(newValues);
+    };
+    const clearAll = () => {
+        setLocalSelectedValues([]);
+        onChange(undefined);
+        setIsOpen(false);
+    };
+    const applyChanges = () => {
+        onChange(localSelectedValues.length > 0 ? localSelectedValues : undefined);
+        setIsOpen(false);
+    };
+    const handleOpen = () => {
+        setLocalSelectedValues(appliedValues);
+        setIsOpen(embedded ? !isOpen : true);
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("button", { onClick: handleOpen, type: "button", className: cn('w-full h-10 px-3 pr-10 text-sm text-left rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent', appliedValues.length > 0 && 'ring-2 ring-ring border-accent'), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "truncate", children: appliedValues.length > 0 ? appliedValues.map(v => v).join(', ') : 'Select...' }), _jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [appliedValues.length > 0 && (_jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold text-white bg-accent rounded-full", children: appliedValues.length })), _jsx("svg", { className: "w-4 h-4 text-fg-secondary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] })] }) }), isOpen && (_jsxs(_Fragment, { children: [!embedded && _jsx("div", { className: "fixed inset-0 z-[60]", onClick: () => setIsOpen(false) }), _jsxs("div", { className: cn('flex max-h-[400px] flex-col overflow-hidden border border-border bg-surface', embedded
+                            ? 'mt-2 rounded-xl'
+                            : 'absolute left-0 right-0 top-full z-[70] mt-2 rounded-lg shadow-xl'), children: [_jsxs("div", { className: "p-2 overflow-y-auto flex-1", children: [options.map((option) => (_jsxs("label", { className: cn('flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors', 'hover:bg-hover', localSelectedValues.includes(option) && 'bg-muted'), children: [_jsx("input", { type: "checkbox", checked: localSelectedValues.includes(option), onChange: () => toggleOption(option), className: "w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-accent focus:ring-ring" }), _jsx("span", { className: "text-sm text-fg capitalize", children: option })] }, option))), options.length === 0 && (_jsx("div", { className: "px-3 py-4 text-center text-sm text-fg-secondary", children: translate('core:filters.no_options') }))] }), _jsxs("div", { className: "flex items-center justify-between p-2 border-t border-border flex-shrink-0", children: [_jsx("button", { onClick: clearAll, type: "button", className: "text-xs font-medium text-fg-secondary hover:text-fg", disabled: localSelectedValues.length === 0, children: translate('core:common.clear') }), _jsx(PillButton, { type: "button", variant: "primary", onClick: applyChanges, children: translate('core:common.apply') })] })] })] }))] }));
+}

package/dist/components/filters/DateFilterComponent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SerializedFilter } from '@maxal_studio/kratosjs';
+/** Date filter value sent to API: always from/to (YYYY-MM-DD) */
+export type DateFilterValue = undefined | {
+    from?: string;
+    to?: string;
+};
+interface DateFilterProps {
+    filter: SerializedFilter;
+    value?: DateFilterValue;
+    onChange: (value: DateFilterValue) => void;
+    embedded?: boolean;
+}
+export declare function DateFilterComponent({ filter, value, onChange, embedded }: DateFilterProps): React.JSX.Element;
+export {};

package/dist/components/filters/DateFilterComponent.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../utils/classNames';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+// Labels are catalog keys (not literals): translating here at module load would
+// freeze them to the default locale, so they're resolved at render time instead.
+const PRESET_OPTIONS = [
+    { value: 'today', labelKey: 'core:filters.preset_today' },
+    { value: 'yesterday', labelKey: 'core:filters.preset_yesterday' },
+    { value: 'this_week', labelKey: 'core:filters.preset_this_week' },
+    { value: 'this_month', labelKey: 'core:filters.preset_this_month' },
+    { value: 'this_year', labelKey: 'core:filters.preset_this_year' },
+    { value: 'custom', labelKey: 'core:filters.preset_custom' },
+];
+const pad = (n) => String(n).padStart(2, '0');
+const toDateStr = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+/**
+ * Compute from/to (YYYY-MM-DD) for a preset using the user's local time.
+ */
+function getDateRangeForPreset(preset) {
+    const now = new Date();
+    switch (preset) {
+        case 'today': {
+            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+            return { from: toDateStr(start), to: toDateStr(end) };
+        }
+        case 'yesterday': {
+            const y = new Date(now);
+            y.setDate(y.getDate() - 1);
+            const start = new Date(y.getFullYear(), y.getMonth(), y.getDate());
+            const end = new Date(y.getFullYear(), y.getMonth(), y.getDate(), 23, 59, 59, 999);
+            return { from: toDateStr(start), to: toDateStr(end) };
+        }
+        case 'this_week': {
+            const day = now.getDay();
+            const diff = day === 0 ? -6 : 1 - day;
+            const monday = new Date(now);
+            monday.setDate(monday.getDate() + diff);
+            const start = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate());
+            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+            return { from: toDateStr(start), to: toDateStr(end) };
+        }
+        case 'this_month': {
+            const start = new Date(now.getFullYear(), now.getMonth(), 1);
+            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+            return { from: toDateStr(start), to: toDateStr(end) };
+        }
+        case 'this_year': {
+            const start = new Date(now.getFullYear(), 0, 1);
+            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+            return { from: toDateStr(start), to: toDateStr(end) };
+        }
+        default:
+            return null;
+    }
+}
+/** Infer which preset matches the current from/to (for display and reopening popup). */
+function inferPresetFromValue(value) {
+    if (!value || (typeof value === 'object' && !value.from && !value.to))
+        return 'custom';
+    const from = value.from;
+    const to = value.to;
+    if (!from && !to)
+        return 'custom';
+    for (const preset of ['today', 'yesterday', 'this_week', 'this_month', 'this_year']) {
+        const range = getDateRangeForPreset(preset);
+        if (range && range.from === from && range.to === to)
+            return preset;
+    }
+    return 'custom';
+}
+function getPresetLabel(preset) {
+    const opt = PRESET_OPTIONS.find(o => o.value === preset);
+    return opt ? translate(opt.labelKey) : preset;
+}
+export function DateFilterComponent({ filter, value, onChange, embedded = false }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const inferredPreset = value && (value.from || value.to) ? inferPresetFromValue(value) : 'custom';
+    const customFrom = (value && value.from) || '';
+    const customTo = (value && value.to) || '';
+    const [localPreset, setLocalPreset] = useState(inferredPreset);
+    const [localFromDate, setLocalFromDate] = useState(customFrom);
+    const [localToDate, setLocalToDate] = useState(customTo);
+    const hasValue = value !== undefined && !!(value.from || value.to);
+    const formatDisplay = () => {
+        if (!value || typeof value !== 'object')
+            return '';
+        const from = value.from;
+        const to = value.to;
+        if (from && to)
+            return `${from} – ${to}`;
+        if (from)
+            return translate('core:filters.from_value', { date: from });
+        if (to)
+            return translate('core:filters.until_value', { date: to });
+        return '';
+    };
+    const handleOpen = () => {
+        setLocalPreset(inferredPreset);
+        setLocalFromDate(customFrom);
+        setLocalToDate(customTo);
+        setIsOpen(embedded ? !isOpen : true);
+    };
+    const clearFilter = () => {
+        setLocalPreset('custom');
+        setLocalFromDate('');
+        setLocalToDate('');
+        onChange(undefined);
+        setIsOpen(false);
+    };
+    const applyChanges = () => {
+        if (localPreset !== 'custom') {
+            const range = getDateRangeForPreset(localPreset);
+            onChange(range ? { from: range.from, to: range.to } : undefined);
+        }
+        else {
+            const from = localFromDate || undefined;
+            const to = localToDate || undefined;
+            onChange(from || to ? { from, to } : undefined);
+        }
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-sm font-medium text-fg", children: filter.label || filter.name }), _jsxs("div", { className: "relative", children: [_jsx("button", { onClick: handleOpen, type: "button", className: cn('w-full h-10 px-3 pr-10 text-sm text-left rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent', hasValue && 'ring-2 ring-ring border-accent'), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "truncate", children: hasValue
+                                        ? inferredPreset !== 'custom'
+                                            ? getPresetLabel(inferredPreset)
+                                            : formatDisplay()
+                                        : filter.placeholder || translate('core:filters.select_range') }), _jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [hasValue && (_jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold text-white bg-accent rounded-full", children: "1" })), _jsx("svg", { className: "w-4 h-4 text-fg-secondary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] })] }) }), isOpen && (_jsxs(_Fragment, { children: [!embedded && _jsx("div", { className: "fixed inset-0 z-[60]", onClick: () => setIsOpen(false) }), _jsxs("div", { className: cn('flex flex-col overflow-hidden border border-border bg-surface', embedded
+                                    ? 'mt-2 rounded-xl'
+                                    : 'fixed inset-x-4 top-1/2 z-[70] mx-auto max-w-sm -translate-y-1/2 sm:absolute sm:inset-x-0 sm:top-full sm:mt-2 sm:max-w-none sm:translate-y-0 rounded-lg shadow-xl'), children: [_jsxs("div", { className: "p-4 space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-fg-secondary mb-1.5", children: translate('core:filters.range') }), _jsx("select", { value: localPreset, onChange: e => setLocalPreset(e.target.value), className: cn('w-full h-10 px-3 text-sm rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent'), children: PRESET_OPTIONS.map(opt => (_jsx("option", { value: opt.value, children: translate(opt.labelKey) }, opt.value))) })] }), localPreset === 'custom' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [_jsx("label", { className: "block text-xs font-medium text-fg-secondary mb-1.5", children: translate('core:filters.label_from') }), _jsx("input", { type: "date", value: localFromDate, onChange: e => setLocalFromDate(e.target.value), className: cn('w-full h-10 px-3 text-sm rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent') })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { className: "block text-xs font-medium text-fg-secondary mb-1.5", children: translate('core:filters.label_to') }), _jsx("input", { type: "date", value: localToDate, onChange: e => setLocalToDate(e.target.value), className: cn('w-full h-10 px-3 text-sm rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent') })] })] }))] }), _jsxs("div", { className: "flex items-center justify-between p-4 border-t border-border shrink-0", children: [_jsx("button", { onClick: clearFilter, type: "button", className: "text-sm font-medium text-fg-secondary hover:text-fg", children: translate('core:common.clear') }), _jsx(PillButton, { type: "button", variant: "primary", onClick: applyChanges, children: translate('core:common.apply') })] })] })] }))] })] }));
+}

package/dist/components/filters/QueryBuilderFilterComponent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SerializedFilter } from '@maxal_studio/kratosjs';
+interface QueryBuilderFilterProps {
+    filter: SerializedFilter;
+    value?: any[];
+    onChange: (value: any[] | undefined) => void;
+    /** Expand inline instead of a nested popover (for filters dropdown panel). */
+    embedded?: boolean;
+}
+export declare function QueryBuilderFilterComponent({ filter, value, onChange, embedded }: QueryBuilderFilterProps): React.JSX.Element;
+export {};

package/dist/components/filters/QueryBuilderFilterComponent.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { cn } from '../../utils/classNames';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+export function QueryBuilderFilterComponent({ filter, value, onChange, embedded = false }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [localRules, setLocalRules] = useState(value || []);
+    const appliedRules = value || [];
+    // Sync local rules when value prop changes (e.g., when defaults are applied)
+    // Only sync when dropdown is closed to avoid interrupting user edits
+    useEffect(() => {
+        if (!isOpen) {
+            setLocalRules(value || []);
+        }
+    }, [value, isOpen]);
+    const addRule = () => {
+        const firstConstraint = filter.constraints?.[0];
+        const newRule = {
+            type: firstConstraint?.name || '',
+            dataType: firstConstraint?.dataType || 'text',
+            data: {
+                operator: firstConstraint?.operators?.[0]?.name || '',
+                settings: {
+                    field: firstConstraint?.name || '',
+                    value: '',
+                },
+            },
+        };
+        setLocalRules([...localRules, newRule]);
+    };
+    const updateRule = (index, updates) => {
+        const newRules = localRules.map((rule, i) => (i === index ? { ...rule, ...updates } : rule));
+        setLocalRules(newRules);
+    };
+    const removeRule = (index) => {
+        setLocalRules(localRules.filter((_, i) => i !== index));
+    };
+    const clearAll = () => {
+        setLocalRules([]);
+        onChange(undefined);
+        setIsOpen(false);
+    };
+    const applyChanges = () => {
+        onChange(localRules.length > 0 ? localRules : undefined);
+        setIsOpen(false);
+    };
+    const handleOpen = () => {
+        setLocalRules(appliedRules);
+        setIsOpen(embedded ? !isOpen : true);
+    };
+    const getConstraint = (name) => {
+        return filter.constraints?.find(c => c.name === name);
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("button", { onClick: handleOpen, type: "button", className: cn('w-full h-10 px-3 pr-10 text-sm text-left rounded-lg border transition-colors', 'bg-input text-fg border-border', 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent', appliedRules.length > 0 && 'ring-2 ring-ring border-accent'), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: appliedRules.length > 0 ? `${appliedRules.length} rule(s) active` : 'Add rules...' }), _jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [appliedRules.length > 0 && (_jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold text-white bg-accent rounded-full", children: appliedRules.length })), _jsx("svg", { className: "w-4 h-4 text-fg-secondary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] })] }) }), isOpen && (_jsxs(_Fragment, { children: [!embedded && _jsx("div", { className: "fixed inset-0 z-[60]", onClick: () => setIsOpen(false) }), _jsxs("div", { className: cn('flex flex-col overflow-hidden border border-border bg-surface', embedded
+                            ? 'mt-2 rounded-xl'
+                            : 'absolute left-0 right-0 top-full z-[70] mt-2 max-h-[500px] rounded-lg shadow-xl'), children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border shrink-0", children: [_jsx("h3", { className: "text-base font-semibold text-fg", children: translate('core:filters.query_builder') }), _jsx("button", { onClick: () => setIsOpen(false), type: "button", className: "p-1 rounded-md text-fg-secondary hover:text-fg hover:bg-hover", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsxs("div", { className: "p-4 space-y-3 overflow-y-auto flex-1", children: [localRules.map((rule, index) => {
+                                        const constraint = getConstraint(rule.type);
+                                        const operators = constraint?.operators || [];
+                                        return (_jsxs("div", { className: "p-3 rounded-lg border border-border bg-muted space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-medium text-fg-secondary uppercase tracking-wide", children: ["Rule ", index + 1] }), _jsx("button", { onClick: () => removeRule(index), type: "button", className: "p-1 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] }), (() => {
+                                                    const isBetweenOperator = rule.data?.operator === 'between' ||
+                                                        rule.data?.operator === 'notBetween';
+                                                    const isDateType = rule.dataType === 'date';
+                                                    const isNumberType = rule.dataType === 'number';
+                                                    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx("select", { value: rule.type, onChange: e => {
+                                                                                    const newConstraint = getConstraint(e.target.value);
+                                                                                    updateRule(index, {
+                                                                                        type: e.target.value,
+                                                                                        dataType: newConstraint?.dataType || 'text',
+                                                                                        data: {
+                                                                                            ...rule.data,
+                                                                                            operator: newConstraint?.operators?.[0]?.name ||
+                                                                                                '',
+                                                                                            settings: {
+                                                                                                ...rule.data.settings,
+                                                                                                field: e.target.value,
+                                                                                            },
+                                                                                        },
+                                                                                    });
+                                                                                }, className: "w-full h-9 px-2 pr-8 text-sm rounded-md border appearance-none bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring", children: filter.constraints?.map(c => (_jsx("option", { value: c.name, children: c.label || c.name }, c.name))) }), _jsx("svg", { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fg-secondary pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), _jsxs("div", { className: "relative", children: [_jsx("select", { value: rule.data?.operator || '', onChange: e => updateRule(index, {
+                                                                                    data: {
+                                                                                        ...rule.data,
+                                                                                        operator: e.target.value,
+                                                                                    },
+                                                                                }), className: "w-full h-9 px-2 pr-8 text-sm rounded-md border appearance-none bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring", children: operators.map((op) => (_jsx("option", { value: op.name, children: op.label || op.name }, op.name))) }), _jsx("svg", { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fg-secondary pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] })] }), isBetweenOperator && isDateType ? (
+                                                            // For "between" operator with date type, show two date inputs
+                                                            _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: (() => {
+                                                                    const fromValue = Array.isArray(rule.data?.settings?.value)
+                                                                        ? rule.data.settings.value[0]
+                                                                        : typeof rule.data?.settings?.value === 'object' &&
+                                                                            rule.data?.settings?.value?.from
+                                                                            ? rule.data.settings.value.from
+                                                                            : '';
+                                                                    const toValue = Array.isArray(rule.data?.settings?.value)
+                                                                        ? rule.data.settings.value[1]
+                                                                        : typeof rule.data?.settings?.value === 'object' &&
+                                                                            rule.data?.settings?.value?.to
+                                                                            ? rule.data.settings.value.to
+                                                                            : '';
+                                                                    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "date", value: fromValue, onChange: e => {
+                                                                                    const newValue = {
+                                                                                        from: e.target.value,
+                                                                                        to: toValue,
+                                                                                    };
+                                                                                    updateRule(index, {
+                                                                                        data: {
+                                                                                            ...rule.data,
+                                                                                            settings: {
+                                                                                                ...rule.data.settings,
+                                                                                                value: newValue,
+                                                                                            },
+                                                                                        },
+                                                                                    });
+                                                                                }, placeholder: translate('core:filters.from_date'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" }), _jsx("input", { type: "date", value: toValue, onChange: e => {
+                                                                                    const newValue = {
+                                                                                        from: fromValue,
+                                                                                        to: e.target.value,
+                                                                                    };
+                                                                                    updateRule(index, {
+                                                                                        data: {
+                                                                                            ...rule.data,
+                                                                                            settings: {
+                                                                                                ...rule.data.settings,
+                                                                                                value: newValue,
+                                                                                            },
+                                                                                        },
+                                                                                    });
+                                                                                }, placeholder: translate('core:filters.to_date'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" })] }));
+                                                                })() })) : isBetweenOperator && isNumberType ? (
+                                                            // For "between" operator with number type, show two number inputs
+                                                            _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: (() => {
+                                                                    const fromValue = Array.isArray(rule.data?.settings?.value)
+                                                                        ? rule.data.settings.value[0]
+                                                                        : '';
+                                                                    const toValue = Array.isArray(rule.data?.settings?.value)
+                                                                        ? rule.data.settings.value[1]
+                                                                        : '';
+                                                                    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "number", value: fromValue, onChange: e => {
+                                                                                    const newValue = [
+                                                                                        e.target.value || '',
+                                                                                        toValue,
+                                                                                    ];
+                                                                                    updateRule(index, {
+                                                                                        data: {
+                                                                                            ...rule.data,
+                                                                                            settings: {
+                                                                                                ...rule.data.settings,
+                                                                                                value: newValue,
+                                                                                            },
+                                                                                        },
+                                                                                    });
+                                                                                }, placeholder: translate('core:filters.from'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" }), _jsx("input", { type: "number", value: toValue, onChange: e => {
+                                                                                    const newValue = [
+                                                                                        fromValue,
+                                                                                        e.target.value || '',
+                                                                                    ];
+                                                                                    updateRule(index, {
+                                                                                        data: {
+                                                                                            ...rule.data,
+                                                                                            settings: {
+                                                                                                ...rule.data.settings,
+                                                                                                value: newValue,
+                                                                                            },
+                                                                                        },
+                                                                                    });
+                                                                                }, placeholder: translate('core:filters.to'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" })] }));
+                                                                })() })) : isDateType ? (
+                                                            // Single date input for date type
+                                                            _jsx("input", { type: "date", value: rule.data?.settings?.value || '', onChange: e => updateRule(index, {
+                                                                    data: {
+                                                                        ...rule.data,
+                                                                        settings: {
+                                                                            ...rule.data.settings,
+                                                                            value: e.target.value,
+                                                                        },
+                                                                    },
+                                                                }), placeholder: translate('core:filters.date'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" })) : rule.dataType === 'number' ? (
+                                                            // Number input for number type
+                                                            _jsx("input", { type: "number", value: rule.data?.settings?.value || '', onChange: e => updateRule(index, {
+                                                                    data: {
+                                                                        ...rule.data,
+                                                                        settings: {
+                                                                            ...rule.data.settings,
+                                                                            value: e.target.value,
+                                                                        },
+                                                                    },
+                                                                }), placeholder: translate('core:filters.value'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" })) : (
+                                                            // Regular text input for text, select, and other types
+                                                            _jsx("input", { type: "text", value: rule.data?.settings?.value || '', onChange: e => updateRule(index, {
+                                                                    data: {
+                                                                        ...rule.data,
+                                                                        settings: {
+                                                                            ...rule.data.settings,
+                                                                            value: e.target.value,
+                                                                        },
+                                                                    },
+                                                                }), placeholder: translate('core:filters.value'), className: "w-full h-9 px-2 text-sm rounded-md border bg-input text-fg border-border focus:outline-none focus:ring-2 focus:ring-ring" }))] }));
+                                                })()] }, index));
+                                    }), localRules.length === 0 && (_jsxs("div", { className: "text-center py-8 text-fg-secondary", children: [_jsx("svg", { className: "w-12 h-12 mx-auto mb-3 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) }), _jsx("p", { className: "text-sm mb-1", children: translate('core:filters.no_rules') }), _jsx("p", { className: "text-xs", children: translate('core:filters.add_rule_hint') })] })), _jsx(PillButton, { type: "button", onClick: addRule, className: "w-full border-dashed border-accent/40 bg-transparent text-accent hover:bg-accent-soft", children: "+ Add Rule" })] }), _jsxs("div", { className: "flex items-center justify-between p-4 border-t border-border shrink-0", children: [_jsx("button", { onClick: clearAll, type: "button", className: "text-sm font-medium text-fg-secondary hover:text-fg", disabled: localRules.length === 0, children: translate('core:common.clear_all') }), _jsxs("div", { className: "flex gap-2", children: [_jsx(PillButton, { type: "button", onClick: () => setIsOpen(false), children: translate('core:common.cancel') }), _jsx(PillButton, { type: "button", variant: "primary", onClick: applyChanges, children: translate('core:common.apply') })] })] })] })] }))] }));
+}

package/dist/components/layout/Header.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HeaderProps {
+    panelId?: string;
+    darkMode: boolean;
+    onDarkModeToggle: () => void;
+    onMobileMenuToggle?: () => void;
+    apiBaseUrl?: string;
+    globalSearchAvailable?: boolean;
+}
+export declare function Header({ darkMode, onDarkModeToggle, onMobileMenuToggle, apiBaseUrl, globalSearchAvailable, }: HeaderProps): React.JSX.Element;

package/dist/components/layout/Header.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Moon, Sun, Menu, User, LogOut, ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { GlobalSearch } from '../GlobalSearch';
+import { useAuth } from '../../auth/AuthContext';
+import { usePanelMetadata } from '../../contexts/PanelMetadataContext';
+import { IconButton } from '../ui';
+import { useTranslation } from '../../i18n/useTranslation';
+import { LocaleSwitcher } from '../../i18n/LocaleSwitcher';
+import { useLocale } from '../../i18n/useLocale';
+import { Slot } from '../../slots/Slot';
+import { SlotCluster } from '../../slots/SlotCluster';
+/** Language row in the account menu — hidden when the panel has a single locale. */
+function LocaleSwitcherRow() {
+    const { t } = useTranslation();
+    const { locales } = useLocale();
+    if (locales.length <= 1)
+        return null;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2", children: [_jsx("span", { className: "text-xs font-medium text-fg-muted", children: t('core:panel.language') }), _jsx(LocaleSwitcher, {})] }));
+}
+function useCurrentPageTitle() {
+    const location = useLocation();
+    const { resources, pages } = usePanelMetadata();
+    return useMemo(() => {
+        if (location.pathname.startsWith('/page/')) {
+            const slug = location.pathname.replace('/page/', '').split('/')[0];
+            return pages.find(page => page.slug === slug)?.label;
+        }
+        const slug = location.pathname.split('/').filter(Boolean)[0];
+        if (!slug)
+            return undefined;
+        const resource = resources.find(item => item.slug === slug);
+        return resource?.pluralLabel ?? resource?.label;
+    }, [location.pathname, resources, pages]);
+}
+export function Header({ darkMode, onDarkModeToggle, onMobileMenuToggle, apiBaseUrl, globalSearchAvailable = false, }) {
+    const { user, logout } = useAuth();
+    const { t } = useTranslation();
+    const pageTitle = useCurrentPageTitle();
+    const [userMenuOpen, setUserMenuOpen] = useState(false);
+    const userMenuRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+                setUserMenuOpen(false);
+            }
+        };
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                setUserMenuOpen(false);
+            }
+        };
+        if (userMenuOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [userMenuOpen]);
+    const handleLogout = async () => {
+        await logout();
+        setUserMenuOpen(false);
+    };
+    const userInitial = (user?.name || user?.email || '?').charAt(0).toUpperCase();
+    return (_jsxs("header", { className: "sticky top-0 z-40 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-base px-4 sm:px-6", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [onMobileMenuToggle && (_jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": t('core:panel.open_menu'), onClick: onMobileMenuToggle, className: "lg:hidden", children: _jsx(Menu, { className: "h-5 w-5" }) })), pageTitle && (_jsx("h1", { className: "truncate text-lg font-semibold tracking-tight text-fg sm:text-xl", children: pageTitle })), _jsx(Slot, { name: "header.left", context: { user }, as: "div", className: "flex min-w-0 items-center gap-2" })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 sm:gap-2", children: [_jsx(SlotCluster, { name: "header.right", context: { user } }), apiBaseUrl && globalSearchAvailable && _jsx(GlobalSearch, { apiBaseUrl: apiBaseUrl }), _jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark'), title: darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark'), onClick: onDarkModeToggle, className: "h-9 w-9 shrink-0", children: _jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: darkMode ? (_jsx(Sun, { className: "h-4 w-4 text-warning" })) : (_jsx(Moon, { className: "h-4 w-4 text-fg-secondary" })) }) }), user && (_jsxs("div", { className: "relative", ref: userMenuRef, children: [_jsxs("button", { type: "button", onClick: () => setUserMenuOpen(open => !open), "aria-expanded": userMenuOpen, "aria-haspopup": "menu", className: cn('flex items-center gap-2 rounded-full border border-transparent py-1 pl-1 pr-2 transition-colors', 'hover:border-border hover:bg-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', userMenuOpen && 'border-border bg-hover'), children: [user.avatarUrl ? (_jsx("img", { src: user.avatarUrl, alt: "", className: "h-8 w-8 rounded-full object-cover ring-1 ring-border" })) : (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-raised text-xs font-semibold text-fg ring-1 ring-border", children: userInitial })), _jsx("div", { className: "hidden min-w-0 text-left md:block", children: _jsx("div", { className: "max-w-[140px] truncate text-sm font-medium text-fg", children: user.name || user.email }) }), _jsx(ChevronDown, { className: cn('hidden h-4 w-4 text-fg-muted transition-transform md:block', userMenuOpen && 'rotate-180') })] }), userMenuOpen && (_jsxs("div", { role: "menu", className: "absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-xl border border-border bg-raised shadow-soft-lg", children: [_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("div", { className: "truncate text-sm font-medium text-fg", children: user.name || user.email }), user.email && user.name && (_jsx("div", { className: "mt-0.5 truncate text-xs text-fg-muted", children: user.email }))] }), _jsx(LocaleSwitcherRow, {}), _jsx(Slot, { name: "header.userMenu", context: { user }, as: "div", className: "p-1" }), _jsx("div", { className: "p-1", children: _jsxs("button", { type: "button", role: "menuitem", onClick: handleLogout, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-fg transition-colors hover:bg-hover", children: [_jsx(LogOut, { className: "h-4 w-4 text-fg-secondary" }), t('core:panel.sign_out')] }) })] }))] })), !user && (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-muted", children: _jsx(User, { className: "h-4 w-4 text-fg-muted" }) }))] })] }));
+}

package/dist/components/layout/PanelBrandMark.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PanelBrandMarkProps {
+    icon?: string;
+    favicon?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PanelBrandMark({ icon, favicon, size, className }: PanelBrandMarkProps): React.JSX.Element;

package/dist/components/layout/PanelBrandMark.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LayoutDashboard } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+const SIZE_CLASSES = {
+    sm: {
+        box: 'h-8 w-8 rounded-lg',
+        lucide: 'h-4 w-4',
+        image: 'h-5 w-5',
+    },
+    md: {
+        box: 'h-10 w-10 rounded-xl',
+        lucide: 'h-5 w-5',
+        image: 'h-6 w-6',
+    },
+    lg: {
+        box: 'h-12 w-12 rounded-xl',
+        lucide: 'h-6 w-6',
+        image: 'h-7 w-7',
+    },
+};
+export function PanelBrandMark({ icon, favicon, size = 'md', className }) {
+    const sizes = SIZE_CLASSES[size];
+    if (favicon) {
+        return (_jsx("div", { className: cn('flex shrink-0 items-center justify-center overflow-hidden bg-surface ring-1 ring-border', sizes.box, className), children: _jsx("img", { src: favicon, alt: "", className: cn('object-contain', sizes.image) }) }));
+    }
+    return (_jsx("div", { className: cn('flex shrink-0 items-center justify-center bg-accent-soft ring-1 ring-accent/10', sizes.box, className), children: icon ? (_jsx(Icon, { name: icon, className: cn('text-accent', sizes.lucide) })) : (_jsx(LayoutDashboard, { className: cn('text-accent', sizes.lucide) })) }));
+}