@haneinfo/frontend-instances 0.6.0 → 0.7.0

package/dist/labels.d.ts

@@ -0,0 +1,10 @@
+import { type Labels, type Translation } from './contracts.js';
+import { type DisplayLocale } from './format.js';
+/** The package's complete English or Traditional Chinese catalog for every label key. */
+export declare function defaultLabels(locale?: DisplayLocale | string): Labels;
+/**
+ * The host's translations with the package defaults behind them: a key the host does not translate
+ * (missing, empty or echoed back as the key itself) uses the default for the locale.
+ */
+export declare function resolveLabels(t: Translation, locale?: DisplayLocale | string): Labels;
+//# sourceMappingURL=labels.d.ts.map

package/dist/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,MAAM,EAAa,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzF,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,aAAa,CAAC;AAgBhE,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,MAAM,GAAE,aAAa,GAAG,MAAgB,GAAG,MAAM,CAG9E;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAarF"}

package/dist/labels.js

@@ -0,0 +1,40 @@
+import { attachmentMessages } from './attachment-messages.js';
+import { labelKeys } from './contracts.js';
+import { documentMessages } from './document-messages.js';
+import { displayLocale } from './format.js';
+import { instanceManagementMessages } from './instance-management-messages.js';
+import { errorMessages, managementMessages } from './messages.js';
+import { coreMessages, uiMessages } from './ui-messages.js';
+const sources = [
+    coreMessages,
+    uiMessages,
+    instanceManagementMessages,
+    documentMessages,
+    attachmentMessages,
+    errorMessages,
+    managementMessages,
+];
+const tuples = Object.assign({}, ...sources);
+/** The package's complete English or Traditional Chinese catalog for every label key. */
+export function defaultLabels(locale = 'zh-TW') {
+    const index = displayLocale(locale) === 'en' ? 0 : 1;
+    return Object.fromEntries(labelKeys.map((key) => [key, tuples[key]?.[index] ?? key]));
+}
+/**
+ * The host's translations with the package defaults behind them: a key the host does not translate
+ * (missing, empty or echoed back as the key itself) uses the default for the locale.
+ */
+export function resolveLabels(t, locale) {
+    const defaults = defaultLabels(locale);
+    return Object.fromEntries(labelKeys.map((key) => {
+        let value;
+        try {
+            value = t(key);
+        }
+        catch {
+            value = undefined;
+        }
+        return [key, typeof value === 'string' && value && value !== key ? value : defaults[key]];
+    }));
+}
+//# sourceMappingURL=labels.js.map

package/dist/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAA8B,SAAS,EAAoB,MAAM,gBAAgB,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,OAAO,GAAG;IACd,YAAY;IACZ,UAAU;IACV,0BAA0B;IAC1B,gBAAgB;IAChB,kBAAkB;IAClB,aAAa;IACb,kBAAkB;CACV,CAAC;AACX,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,OAAO,CAAgD,CAAC;AAE5F,yFAAyF;AACzF,MAAM,UAAU,aAAa,CAAC,SAAiC,OAAO;IACpE,MAAM,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,OAAO,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAW,CAAC;AAClG,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,CAAc,EAAE,MAA+B;IAC3E,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,OAAO,MAAM,CAAC,WAAW,CACvB,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;QACpB,IAAI,KAAc,CAAC;QACnB,IAAI,CAAC;YACH,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;QAAC,MAAM,CAAC;YACP,KAAK,GAAG,SAAS,CAAC;QACpB,CAAC;QACD,OAAO,CAAC,GAAG,EAAE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5F,CAAC,CAAC,CACO,CAAC;AACd,CAAC"}

package/dist/list-client.d.ts

@@ -0,0 +1,39 @@
+import { type FormField, type InstanceAction, type InstanceQuery, type Labels, type LinkComponent, type ListResult, type QueryField, type SavedView, type StateOption } from './contracts.js';
+export interface ListClientProps {
+    fields: QueryField[];
+    initial: ListResult;
+    initialQuery: InstanceQuery;
+    initialTagsAvailable?: boolean;
+    views: SavedView[];
+    machineCode: string;
+    basePath: string;
+    labels: Labels;
+    action: InstanceAction;
+    locale?: string;
+    timeZone?: string;
+    /** All states of the machine (label, tone) for the state chips; may be empty. */
+    states?: StateOption[];
+    /** The subject Form's fields, to render option labels in cells. */
+    formFields?: FormField[];
+    personField?: string;
+    showCreate?: boolean;
+    LinkComponent?: LinkComponent;
+}
+export declare function ListClient(props: ListClientProps): import("react").JSX.Element;
+/** Starts a draft and opens it; the backend decides whether the caller may create one. */
+export declare function CreateRecordButton({ machineCode, basePath, labels: t, action, variant, initialData, }: {
+    machineCode: string;
+    /** Initial draft data, e.g. from blankDraftData. */
+    initialData?: Record<string, unknown>;
+    basePath: string;
+    labels: Labels;
+    action: InstanceAction;
+    variant?: 'default' | 'outline';
+}): import("react").JSX.Element;
+export declare function ShareForm({ view, labels: t, disabled, onShare, }: {
+    view: SavedView;
+    labels: Labels;
+    disabled: boolean;
+    onShare: (visibility: SavedView['visibility'], roles: string[]) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=list-client.d.ts.map

package/dist/list-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-client.d.ts","sourceRoot":"","sources":["../src/list-client.tsx"],"names":[],"mappings":"AAqDA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,aAAa,EAElB,KAAK,MAAM,EACX,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAqCxB,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,UAAU,CAAC;IACpB,YAAY,EAAE,aAAa,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mEAAmE;IACnE,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA4xBhD;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,QAAQ,EACR,MAAM,EAAE,CAAC,EACT,MAAM,EACN,OAAmB,EACnB,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,+BAyBA;AAyhBD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,MAAM,EAAE,CAAC,EACT,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzE,+BAgDA"}

package/dist/list-client.js

@@ -0,0 +1,402 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The record list (draft 202610-a8d3 point 7): toolbar with exact-match search, state chips, saved
+ * views and a filter drawer; removable applied-filter chips; a table on wide screens and cards on
+ * narrow ones; skeleton rows while loading, two empty states, pagination and a "More" menu.
+ */
+import { Button, Checkbox, cn, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@haneinfo/frontend-shell';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronLeft, ChevronRight, FileDown, FileSpreadsheet, FileUp, Inbox, MoreHorizontal, Plus, Search, SearchX, SlidersHorizontal, Trash2, X, } from 'lucide-react';
+import NextLink from 'next/link';
+import { useId, useMemo, useRef, useState } from 'react';
+import { call, ErrorMessage, useTask } from './action-client.js';
+import { FilterEditor, labelOf, prepareFilter } from './filter-editor.js';
+import { formatDateTime, formatFieldValue, formatNumber, fromZonedInput } from './format.js';
+import { JobStatus } from './import-client.js';
+import { queryWithTagsFallback, TagPicker } from './instance-management-client.js';
+import { blankDraftData, composeFilter, conditionCount, defaultColumns, emptyGroup, personFieldOf, queryIdentity, searchFieldsOf, splitFilter, } from './list-query.js';
+import { dateRange, listHref } from './query.js';
+import { Chip, DateTimeText, EmptyState, ErrorState, fillText, NativeSelect, Skeleton, StateBadge, Tag, ToneDot, touch, } from './ui.js';
+const LIMITS = [10, 25, 50, 100, 200, 500];
+const inaccessible = (error) => error &&
+    ['unauthorized', 'forbidden', 'notFound', 'FORBIDDEN', 'INSTANCE_NOT_FOUND'].includes(error.key);
+export function ListClient(props) {
+    const { fields, initial, initialQuery, initialTagsAvailable = true, machineCode, basePath, labels: t, action, locale = 'zh-TW', timeZone = 'Asia/Taipei', states = [], formFields = [], showCreate = false, LinkComponent = NextLink, } = props;
+    const task = useTask();
+    const searchId = useId();
+    // The numbered data field repeats $number, so the search box names it only once.
+    const searchFields = useMemo(() => searchFieldsOf(fields).filter((field) => !formFields.some((form) => form.numbered && (form.id ?? form.key) === field.dataKey)), [fields, formFields]);
+    const columnsDefault = useMemo(() => defaultColumns(fields, props.personField), [fields, props.personField]);
+    const person = personFieldOf(fields, props.personField);
+    const [query, setQuery] = useState(initialQuery);
+    const [result, setResult] = useState(initial);
+    const [tagsAvailable, setTagsAvailable] = useState(initialTagsAvailable);
+    const [views, setViews] = useState(props.views);
+    const parts = splitFilter(query.filter, searchFields);
+    const [searchText, setSearchText] = useState(parts.search);
+    const [drawer, setDrawer] = useState(false);
+    const [saveOpen, setSaveOpen] = useState(false);
+    const [job, setJob] = useState();
+    const [announcement, setAnnouncement] = useState('');
+    const knownStates = useMemo(() => {
+        const map = new Map(states.map((state) => [state.key, state]));
+        for (const item of result.items)
+            if (!map.has(item.state) && item.stateLabel)
+                map.set(item.state, {
+                    key: item.state,
+                    label: item.stateLabel,
+                    tone: item.stateTone ?? 'neutral',
+                });
+        return map;
+    }, [states, result.items]);
+    if (inaccessible(task.error))
+        return (_jsx(ErrorState, { title: task.error?.key === 'unauthorized' ? t.signInTitle : t.forbiddenTitle, description: t[task.error?.key ?? 'requestFailed'] }));
+    const apply = (next, message = t.listUpdated) => task.run(async () => {
+        const prepared = {
+            ...next,
+            columns: next.columns ?? columnsDefault,
+            filter: next.filter ? prepareFilter(next.filter, fields) : undefined,
+        };
+        if (!prepared.filter)
+            delete prepared.filter;
+        const response = await queryWithTagsFallback(action, machineCode, prepared);
+        const applied = { ...response, query: { ...response.query, columns: next.columns } };
+        if (!applied.query.columns)
+            delete applied.query.columns;
+        if (!applied.available)
+            setTagsAvailable(false);
+        setResult(applied.result);
+        setQuery(applied.query);
+        setSearchText(splitFilter(applied.query.filter, searchFields).search);
+        setAnnouncement(`${message} ${fillText(t.resultCount, { count: formatNumber(applied.result.total, locale) })}`);
+        try {
+            window.history.replaceState(window.history.state, '', listHref(basePath, applied.query));
+        }
+        catch {
+            /* URL sync is a convenience only. */
+        }
+    });
+    const withParts = (change, base = query) => {
+        const filter = composeFilter({ ...splitFilter(base.filter, searchFields), ...change }, searchFields);
+        const { filter: _old, ...rest } = base;
+        return { ...rest, ...(filter ? { filter } : {}), offset: 0 };
+    };
+    const columns = (query.columns ?? columnsDefault).filter((id) => id !== '$number');
+    const visibleColumns = result.columns.filter((id) => id !== '$number');
+    const limit = result.limit || query.limit || 50;
+    const page = Math.floor(result.offset / limit) + 1;
+    const pages = Math.max(1, Math.ceil(result.total / limit));
+    const archived = query.archived ?? 'EXCLUDE';
+    const filtered = !!query.filter || !!query.tags?.length || archived !== 'EXCLUDE';
+    const currentView = views.find((view) => queryIdentity(view.query) === queryIdentity(query));
+    const fieldById = (id) => fields.find((field) => field.id === id);
+    const formFieldOf = (id) => {
+        const key = fieldById(id)?.dataKey;
+        return key ? formFields.find((field) => (field.id ?? field.key) === key) : undefined;
+    };
+    const stateOf = (item) => {
+        const known = knownStates.get(item.state);
+        return {
+            label: item.stateLabel ?? known?.label ?? item.state,
+            tone: item.stateTone ?? known?.tone,
+        };
+    };
+    const cell = (item, id) => {
+        if (id === '$state') {
+            const state = stateOf(item);
+            return _jsx(StateBadge, { label: state.label, tone: state.tone });
+        }
+        if (id === '$submitterId')
+            return item.submitterName ?? (item.submitterId ? t.unknownPerson : '—');
+        if (id === '$createdAt') {
+            const text = formatDateTime(item.createdAt, { locale, timeZone });
+            return text ? (_jsx(DateTimeText, { iso: new Date(item.createdAt).toISOString(), text: text, full: formatDateTime(item.createdAt, { locale, timeZone, full: true }) ?? text })) : ('—');
+        }
+        const field = fieldById(id);
+        const display = formatFieldValue(formFieldOf(id) ?? { type: field?.type ?? 'text' }, item.values[id], { locale, timeZone });
+        if (display.kind === 'empty')
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        if (display.kind === 'date' || display.kind === 'datetime')
+            return _jsx(DateTimeText, { iso: display.iso, text: display.text, full: display.full });
+        return (_jsx("span", { className: "line-clamp-2 [overflow-wrap:anywhere]", title: display.text, children: display.text }));
+    };
+    const title = (item) => item.number ?? t.untitledDraft;
+    const href = (item) => `${basePath}/${encodeURIComponent(item.id)}`;
+    const tags = (item) => item.tags?.length ? (_jsxs("span", { className: "flex flex-wrap gap-1", children: [item.tags.slice(0, 2).map((tag) => (_jsx(Tag, { children: tag }, tag))), item.tags.length > 2 && (_jsx("span", { className: "text-muted-foreground text-xs leading-5", title: item.tags.slice(2).join('、'), children: fillText(t.moreTags, { count: item.tags.length - 2 }) }))] })) : null;
+    const sortOf = (id) => query.sort?.find((entry) => entry.fieldId === id)?.direction;
+    const toggleSort = (id) => {
+        const current = query.sort?.[0]?.fieldId === id ? query.sort[0].direction : undefined;
+        const sort = current === 'asc'
+            ? [{ fieldId: id, direction: 'desc' }]
+            : current === 'desc'
+                ? []
+                : [{ fieldId: id, direction: 'asc' }];
+        void apply({ ...query, sort, offset: 0 });
+    };
+    const toggleState = (key) => void apply(withParts({
+        states: parts.states.includes(key)
+            ? parts.states.filter((state) => state !== key)
+            : [...parts.states, key],
+    }));
+    const exportAs = (format) => void task.run(async () => {
+        setJob(await call(action, { kind: 'export', machineCode, query, format }));
+        setAnnouncement(t.exportStarted);
+    });
+    const chips = [];
+    if (parts.search)
+        chips.push({
+            key: 'search',
+            label: fillText(t.chipSearch, { value: parts.search }),
+            remove: () => void apply(withParts({ search: '' })),
+        });
+    if (parts.mine)
+        chips.push({
+            key: 'mine',
+            label: t.chipMine,
+            remove: () => void apply(withParts({ mine: false })),
+        });
+    for (const key of parts.states)
+        chips.push({
+            key: `state:${key}`,
+            label: fillText(t.chipState, { value: knownStates.get(key)?.label ?? t.unknownState }),
+            remove: () => toggleState(key),
+        });
+    for (const tag of query.tags ?? [])
+        chips.push({
+            key: `tag:${tag}`,
+            label: fillText(t.chipTag, { value: tag }),
+            remove: () => {
+                const rest = (query.tags ?? []).filter((value) => value !== tag);
+                void apply({ ...query, tags: rest.length ? rest : undefined, offset: 0 });
+            },
+        });
+    if (archived !== 'EXCLUDE')
+        chips.push({
+            key: 'archived',
+            label: t[archived],
+            remove: () => void apply({ ...query, archived: 'EXCLUDE', offset: 0 }),
+        });
+    if (parts.advanced.expressions.length)
+        chips.push({
+            key: 'advanced',
+            label: fillText(t.chipConditions, { count: conditionCount(parts.advanced) }),
+            remove: () => void apply(withParts({ advanced: emptyGroup() })),
+        });
+    const drawerCount = (parts.advanced.expressions.length ? 1 : 0) +
+        (query.tags?.length ? 1 : 0) +
+        (archived !== 'EXCLUDE' ? 1 : 0);
+    const clearAll = () => {
+        const { filter: _f, tags: _t, tagMatch: _m, ...rest } = query;
+        setSearchText('');
+        void apply({ ...rest, archived: 'EXCLUDE', offset: 0 });
+    };
+    const searchPlaceholder = fillText(t.searchPlaceholder, {
+        fields: searchFields
+            .map((field) => labelOf(field, t))
+            .join(locale.startsWith('en') ? ', ' : '、'),
+    });
+    const columnLabel = (id) => labelOf(fieldById(id) ?? { id, label: id }, t);
+    const from = result.total ? result.offset + 1 : 0;
+    const to = Math.min(result.offset + result.items.length, result.total);
+    return (
+    // Table or cards follow the width of the list itself (sidebar open or not), not the viewport.
+    _jsxs("div", { className: "@container flex min-w-0 flex-col gap-4", "aria-busy": task.pending, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h1", { className: "font-bold text-2xl tracking-tight", children: t.listTitle }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showCreate && (_jsx(CreateRecordButton, { initialData: blankDraftData(formFields), machineCode: machineCode, basePath: basePath, labels: t, action: action })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: touch, children: [_jsx(MoreHorizontal, { "aria-hidden": "true", "data-icon": "inline-start" }), t.moreMenu, _jsx(ChevronDown, { "aria-hidden": "true", "data-icon": "inline-end" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuItem, { asChild: true, className: "max-md:min-h-11", children: _jsxs(LinkComponent, { href: `${basePath}/import`, children: [_jsx(FileUp, { "aria-hidden": "true" }), t.importTitle] }) }), _jsxs(DropdownMenuItem, { className: "max-md:min-h-11", disabled: task.pending, onSelect: () => exportAs('csv'), children: [_jsx(FileDown, { "aria-hidden": "true" }), t.exportCsv] }), _jsxs(DropdownMenuItem, { className: "max-md:min-h-11", disabled: task.pending, onSelect: () => exportAs('xlsx'), children: [_jsx(FileSpreadsheet, { "aria-hidden": "true" }), t.exportXlsx] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, className: "max-md:min-h-11", children: _jsxs(LinkComponent, { href: `${basePath}/deleted`, children: [_jsx(Trash2, { "aria-hidden": "true" }), t.deletedLink] }) })] })] })] })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2 @3xl:flex-row @3xl:items-center", children: [searchFields.length > 0 && (
+                            // biome-ignore lint/a11y/useSemanticElements: <search> is not yet a React DOM element.
+                            _jsxs("form", { role: "search", className: "relative min-w-0 flex-1", onSubmit: (event) => {
+                                    event.preventDefault();
+                                    void apply(withParts({ search: searchText }));
+                                }, children: [_jsx("label", { htmlFor: searchId, className: "sr-only", children: t.searchLabel }), _jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: searchId, type: "search", value: searchText, placeholder: searchPlaceholder, maxLength: 200, enterKeyHint: "search", onChange: (event) => setSearchText(event.target.value), className: "h-9 pl-9 max-md:h-11 sm:pr-20" }), _jsx(Button, { type: "submit", size: "sm", variant: "secondary", disabled: task.pending, className: "absolute top-1/2 right-1 -translate-y-1/2 max-sm:hidden max-md:h-9", children: t.searchSubmit })] })), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: cn('max-w-64 justify-between', touch), children: [_jsx("span", { className: "truncate", children: fillText(t.currentView, { name: currentView?.name ?? t.defaultView }) }), _jsx(ChevronDown, { "aria-hidden": "true", "data-icon": "inline-end" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [_jsx(DropdownMenuLabel, { children: t.savedViews }), _jsxs(DropdownMenuRadioGroup, { value: currentView?.id ?? (filtered ? '' : '__default'), onValueChange: (value) => {
+                                                            if (value === '__default') {
+                                                                setSearchText('');
+                                                                void apply({ columns: query.columns, limit: query.limit, offset: 0 });
+                                                                return;
+                                                            }
+                                                            const view = views.find((candidate) => candidate.id === value);
+                                                            if (view)
+                                                                void apply({ ...view.query, offset: 0 });
+                                                        }, children: [_jsx(DropdownMenuRadioItem, { value: "__default", className: "max-md:min-h-11", children: t.defaultView }), views.map((view) => (_jsx(DropdownMenuRadioItem, { value: view.id, className: "max-md:min-h-11", children: _jsx("span", { className: "min-w-0 truncate", children: view.name }) }, view.id)))] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "max-md:min-h-11", onSelect: () => setSaveOpen(true), children: [_jsx(Plus, { "aria-hidden": "true" }), t.saveCurrentView] })] })] }), _jsxs(Button, { variant: "outline", className: touch, onClick: () => setDrawer(true), "aria-haspopup": "dialog", children: [_jsx(SlidersHorizontal, { "aria-hidden": "true", "data-icon": "inline-start" }), t.filters, drawerCount > 0 && (_jsx("span", { className: "ml-1 rounded-full bg-primary px-1.5 text-primary-foreground text-xs tabular-nums leading-5", children: drawerCount }))] })] })] }), knownStates.size > 0 && (_jsxs("fieldset", { className: "min-w-0", children: [_jsx("legend", { className: "sr-only", children: t.stateFilterLabel }), _jsx("div", { className: "-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:thin] sm:flex-wrap sm:overflow-visible", children: [...knownStates.values()].map((state) => {
+                                    const pressed = parts.states.includes(state.key);
+                                    return (_jsxs("button", { type: "button", "aria-pressed": pressed, disabled: task.pending, onClick: () => toggleState(state.key), className: cn('inline-flex h-8 shrink-0 items-center gap-2 rounded-full border px-3 text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 max-md:h-11 motion-safe:transition-colors', pressed
+                                            ? 'border-foreground bg-foreground text-background'
+                                            : 'bg-background text-foreground hover:bg-muted'), children: [_jsx(ToneDot, { tone: state.tone }), state.label] }, state.key));
+                                }) })] })), chips.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [chips.map((chip) => (_jsx(Chip, { removeLabel: fillText(t.removeFilter, { name: chip.label }), disabled: task.pending, onRemove: chip.remove, children: chip.label }, chip.key))), _jsx(Button, { variant: "link", size: "sm", className: touch, disabled: task.pending, onClick: clearAll, children: t.clearAll })] }))] }), _jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: task.pending ? t.loading : announcement }), _jsx(ErrorMessage, { error: task.error, labels: t }), job && (_jsx(JobStatus, { initial: job, labels: t, action: action, downloadBase: `${basePath}/download` }, job.id)), _jsxs("section", { "aria-label": t.listTitle, className: "flex min-w-0 flex-col gap-3", children: [_jsx("div", { className: "flex flex-wrap items-center justify-between gap-2 text-muted-foreground text-sm", children: _jsx("span", { children: result.total
+                                ? fillText(t.resultRange, {
+                                    from: formatNumber(from, locale),
+                                    to: formatNumber(to, locale),
+                                    total: formatNumber(result.total, locale),
+                                })
+                                : fillText(t.resultCount, { count: 0 }) }) }), !task.pending && !result.items.length ? (filtered ? (_jsx(EmptyState, { icon: _jsx(SearchX, {}), title: t.noMatchTitle, description: t.noMatchHint, action: _jsx(Button, { variant: "outline", className: touch, onClick: clearAll, children: t.clearAll }) })) : (_jsx(EmptyState, { icon: _jsx(Inbox, {}), title: t.emptyTitle, description: t.emptyHint, action: showCreate ? (_jsx(CreateRecordButton, { initialData: blankDraftData(formFields), machineCode: machineCode, basePath: basePath, labels: t, action: action })) : undefined }))) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden max-h-[calc(100dvh-14rem)] min-h-64 overflow-auto rounded-xl ring-1 ring-foreground/10 @3xl:block", children: _jsxs("table", { className: "w-full border-separate border-spacing-0 text-left text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [['$number', ...visibleColumns].map((id) => {
+                                                        const field = fieldById(id);
+                                                        const direction = sortOf(id);
+                                                        return (_jsx("th", { scope: "col", "aria-sort": direction === 'asc'
+                                                                ? 'ascending'
+                                                                : direction === 'desc'
+                                                                    ? 'descending'
+                                                                    : undefined, className: "sticky top-0 z-10 whitespace-nowrap border-b bg-muted px-3 py-2 font-medium", children: field?.sortable ? (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-sm outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", disabled: task.pending, onClick: () => toggleSort(id), "aria-label": fillText(t.sortBy, { field: columnLabel(id) }), children: [columnLabel(id), direction === 'asc' ? (_jsx(ArrowUp, { "aria-hidden": "true", className: "size-3.5" })) : direction === 'desc' ? (_jsx(ArrowDown, { "aria-hidden": "true", className: "size-3.5" })) : (_jsx(ArrowUpDown, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground" }))] })) : (columnLabel(id)) }, id));
+                                                    }), tagsAvailable && (_jsx("th", { scope: "col", className: "sticky top-0 z-10 border-b bg-muted px-3 py-2 font-medium", children: t.tags }))] }) }), _jsx("tbody", { children: task.pending
+                                                ? Array.from({ length: Math.min(8, Math.max(3, result.items.length)) }, (_, row) => (
+                                                // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows.
+                                                _jsx("tr", { children: ['$number', ...visibleColumns, ...(tagsAvailable ? ['tags'] : [])].map((id) => (_jsx("td", { className: "border-b px-3 py-3", children: _jsx(Skeleton, { className: "h-4 w-24" }) }, id))) }, row)))
+                                                : result.items.map((item) => (_jsxs("tr", { className: "group cursor-pointer align-middle outline-ring hover:bg-muted/50 has-[a:focus-visible]:bg-muted/50 has-[a:focus-visible]:outline-2", onClick: (event) => {
+                                                        if (event.target.closest('a,button'))
+                                                            return;
+                                                        event.currentTarget.querySelector('a')?.click();
+                                                    }, children: [_jsx("td", { className: "whitespace-nowrap border-b px-3 py-3", children: _jsxs("span", { className: "flex flex-col items-start gap-1", children: [_jsx(LinkComponent, { href: href(item), className: cn('font-medium underline-offset-4 outline-none hover:underline focus-visible:underline', !item.number && 'text-muted-foreground'), children: title(item) }), item.archived && _jsx(Tag, { children: t.archived })] }) }), visibleColumns.map((id) => (_jsx("td", { className: cn('max-w-72 border-b px-3 py-3', (id === '$createdAt' || id === '$state') && 'whitespace-nowrap'), children: cell(item, id) }, id))), tagsAvailable && (_jsx("td", { className: "min-w-40 max-w-56 border-b px-3 py-3", children: tags(item) }))] }, item.id))) })] }) }), _jsx("ul", { className: "flex flex-col gap-2 @3xl:hidden", children: task.pending
+                                    ? [0, 1, 2].map((row) => (_jsxs("li", { className: "flex flex-col gap-2 rounded-xl p-4 ring-1 ring-foreground/10", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-4 w-48" })] }, row)))
+                                    : result.items.map((item) => {
+                                        const state = stateOf(item);
+                                        const secondary = visibleColumns.filter((id) => id !== '$state').slice(0, 3);
+                                        return (_jsx("li", { children: _jsxs(LinkComponent, { href: href(item), className: "flex min-w-0 flex-col gap-2 rounded-xl bg-card p-4 text-card-foreground outline-none ring-1 ring-foreground/10 hover:bg-muted/40 focus-visible:ring-3 focus-visible:ring-ring/50", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-start justify-between gap-2", children: [_jsx("span", { className: cn('min-w-0 font-medium [overflow-wrap:anywhere]', !item.number && 'text-muted-foreground'), children: title(item) }), _jsx(StateBadge, { label: state.label, tone: state.tone, className: "shrink-0" })] }), secondary.length > 0 && (_jsx("span", { className: "flex min-w-0 flex-col gap-1 text-sm", children: secondary.map((id) => (_jsxs("span", { className: "flex min-w-0 gap-2", children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: columnLabel(id) }), _jsx("span", { className: "min-w-0", children: cell(item, id) })] }, id))) })), (!!item.archived || !!item.tags?.length) && (_jsxs("span", { className: "flex flex-wrap items-center gap-1", children: [item.archived && _jsx(Tag, { children: t.archived }), tags(item)] }))] }) }, item.id));
+                                    }) })] })), result.total > 0 && (_jsxs("nav", { "aria-label": t.pagination, className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: t.limit }), _jsx(NativeSelect, { "aria-label": t.limit, value: String(limit), disabled: task.pending, onChange: (event) => void apply({ ...query, limit: Number(event.target.value), offset: 0 }), children: [...new Set([...LIMITS, limit])]
+                                            .sort((a, b) => a - b)
+                                            .map((value) => (_jsx("option", { value: value, children: value }, value))) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", className: touch, disabled: task.pending || page <= 1, onClick: () => void apply({ ...query, offset: Math.max(0, result.offset - limit) }), children: [_jsx(ChevronLeft, { "aria-hidden": "true", "data-icon": "inline-start" }), t.previous] }), _jsx("span", { className: "text-sm tabular-nums", children: fillText(t.pageOf, { page, pages }) }), _jsxs(Button, { variant: "outline", className: touch, disabled: task.pending || page >= pages, onClick: () => void apply({ ...query, offset: result.offset + limit }), children: [t.next, _jsx(ChevronRight, { "aria-hidden": "true", "data-icon": "inline-end" })] })] })] }))] }), _jsx(FilterDrawer, { open: drawer, onOpenChange: setDrawer, fields: fields, query: query, parts: parts, columnsDefault: columnsDefault, columns: columns, tagsAvailable: tagsAvailable, views: views, labels: t, action: action, timeZone: timeZone, pending: task.pending, person: person, onApply: (next) => {
+                    setDrawer(false);
+                    void apply(next);
+                }, onShare: (view, visibility, roles) => void task.run(async () => {
+                    await call(action, { kind: 'shareView', id: view.id, visibility, roles });
+                    setViews(views.map((v) => (v.id === view.id ? { ...v, visibility, roles } : v)));
+                    setAnnouncement(t.sharingSaved);
+                }), searchFields: searchFields }), _jsx(SaveViewDialog, { open: saveOpen, onOpenChange: setSaveOpen, labels: t, pending: task.pending, onSave: (name) => void task.run(async () => {
+                    const view = await call(action, {
+                        kind: 'saveView',
+                        machineCode,
+                        name,
+                        query,
+                    });
+                    setViews([...views, view]);
+                    setSaveOpen(false);
+                    setAnnouncement(t.viewSaved);
+                }) })] }));
+}
+/** Starts a draft and opens it; the backend decides whether the caller may create one. */
+export function CreateRecordButton({ machineCode, basePath, labels: t, action, variant = 'default', initialData, }) {
+    const task = useTask();
+    return (_jsxs("span", { className: "inline-flex flex-col items-start gap-1", children: [_jsxs(Button, { variant: variant, className: touch, disabled: task.pending, onClick: () => void task.run(async () => {
+                    const created = await call(action, {
+                        kind: 'create',
+                        machineCode,
+                        ...(initialData && Object.keys(initialData).length ? { data: initialData } : {}),
+                    });
+                    window.location.assign(`${basePath}/${encodeURIComponent(created.id)}`);
+                }), children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), task.pending ? t.creating : t.createRecord] }), _jsx(ErrorMessage, { error: task.error, labels: t })] }));
+}
+function SaveViewDialog({ open, onOpenChange, labels: t, pending, onSave, }) {
+    const [name, setName] = useState('');
+    const id = useId();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { closeLabel: t.dialogClose, className: "sm:max-w-md", children: _jsxs("form", { className: "grid gap-4", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (name.trim())
+                        onSave(name.trim());
+                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t.saveView }), _jsx(DialogDescription, { children: t.groupViewsHint })] }), _jsxs("label", { htmlFor: id, className: "grid gap-1.5 text-sm", children: [_jsx("span", { className: "font-medium", children: t.viewName }), _jsx(Input, { id: id, required: true, maxLength: 200, value: name, onChange: (e) => setName(e.target.value), className: "h-9 max-md:h-11" })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", className: touch, onClick: () => onOpenChange(false), children: t.cancel }), _jsx(Button, { type: "submit", className: touch, disabled: pending || !name.trim(), children: t.saveView })] })] }) }) }));
+}
+function DrawerGroup({ title, hint, children, }) {
+    const id = useId();
+    return (_jsxs("section", { "aria-labelledby": id, className: "flex min-w-0 flex-col gap-3 border-b px-4 py-4 last:border-b-0 sm:px-5", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("h3", { id: id, className: "font-medium text-sm", children: title }), hint && _jsx("p", { className: "text-muted-foreground text-xs", children: hint })] }), children] }));
+}
+function FilterDrawer({ open, onOpenChange, fields, query, parts, columnsDefault, columns, tagsAvailable, views, labels: t, action, timeZone, pending, person, searchFields, onApply, onShare, }) {
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsx(SheetContent, { side: "right", showCloseButton: false, className: "gap-0 p-0 data-[side=right]:w-full data-[side=right]:sm:max-w-lg", children: open && (_jsx(DrawerBody, { fields,
+                query,
+                parts,
+                columnsDefault,
+                columns,
+                tagsAvailable,
+                views,
+                labels: t,
+                action,
+                timeZone,
+                pending,
+                person,
+                searchFields,
+                onApply,
+                onShare, onClose: () => onOpenChange(false) }, JSON.stringify(query))) }) }));
+}
+function DrawerBody({ fields, query, parts, columnsDefault, columns: initialColumns, tagsAvailable, views, labels: t, action, timeZone, pending, searchFields, onApply, onShare, onClose, }) {
+    const [archived, setArchived] = useState(query.archived ?? 'EXCLUDE');
+    const [tags, setTags] = useState(query.tags ?? []);
+    const [tagMatch, setTagMatch] = useState(query.tagMatch ?? 'ALL');
+    const [advanced, setAdvanced] = useState(parts.advanced);
+    const [sort, setSort] = useState(query.sort ?? []);
+    const [columns, setColumns] = useState(initialColumns);
+    const [error, setError] = useState();
+    const dateFields = fields.filter((f) => f.filterable && ['date', 'datetime'].includes(f.type));
+    const [rangeField, setRangeField] = useState(dateFields[0]?.id ?? '');
+    const [from, setFrom] = useState('');
+    const [to, setTo] = useState('');
+    const rangeId = useId();
+    const sortable = fields.filter((f) => f.sortable);
+    const filterable = fields.filter((f) => f.filterable);
+    const rangeType = fields.find((f) => f.id === rangeField)?.type === 'datetime' ? 'datetime-local' : 'date';
+    const toggleable = fields.filter((field) => field.id !== '$number');
+    const submit = () => {
+        if (!columns.length) {
+            setError({ key: 'invalidInput' });
+            return;
+        }
+        try {
+            const group = advanced;
+            prepareFilter(group, fields);
+            const filter = composeFilter({ ...parts, advanced: group }, searchFields);
+            const { filter: _f, tags: _t, tagMatch: _m, ...rest } = query;
+            const sameColumns = columns.length === columnsDefault.filter((id) => id !== '$number').length &&
+                columns.every((id) => columnsDefault.includes(id));
+            onApply({
+                ...rest,
+                ...(filter ? { filter } : {}),
+                archived,
+                sort,
+                columns: sameColumns ? undefined : ['$number', ...columns],
+                offset: 0,
+                ...(tagsAvailable && tags.length ? { tags, tagMatch } : {}),
+            });
+        }
+        catch {
+            setError({ key: 'invalidInput' });
+        }
+    };
+    return (_jsxs("form", { className: "flex h-full min-h-0 flex-col", onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, children: [_jsxs(SheetHeader, { className: "flex-row items-start justify-between gap-2 border-b px-4 py-4 sm:px-5", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { children: t.filtersTitle }), _jsx(SheetDescription, { children: t.filtersDescription })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: touch, "aria-label": t.filterDrawerClose, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsx(DrawerGroup, { title: t.groupArchive, hint: t.groupArchiveHint, children: _jsx("div", { role: "radiogroup", "aria-label": t.groupArchive, className: "grid gap-1 sm:grid-cols-3", children: ['EXCLUDE', 'INCLUDE', 'ONLY'].map((value) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm has-[:checked]:border-foreground has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50 max-md:min-h-11", children: [_jsx("input", { type: "radio", name: "archived", value: value, checked: archived === value, onChange: () => setArchived(value), className: "size-4 accent-primary" }), t[value]] }, value))) }) }), tagsAvailable && (_jsxs(DrawerGroup, { title: t.groupTags, hint: t.groupTagsHint, children: [_jsx(TagPicker, { hideLabel: true, label: t.tagFilter, labels: t, action: action, disabled: pending || tags.length >= 10, onPick: (added) => setTags([...new Set([...tags, ...added])].slice(0, 10)) }), tags.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => (_jsx(Chip, { removeLabel: fillText(t.removeFilter, { name: tag }), onRemove: () => setTags(tags.filter((v) => v !== tag)), children: tag }, tag))) })), tags.length > 1 && (_jsxs(NativeSelect, { "aria-label": t.tagFilter, value: tagMatch, onChange: (e) => setTagMatch(e.target.value), children: [_jsx("option", { value: "ALL", children: t.tagAll }), _jsx("option", { value: "ANY", children: t.tagAny })] }))] })), _jsx(DrawerGroup, { title: t.groupConditions, hint: t.groupConditionsHint, children: _jsx(FilterEditor, { condition: advanced, fields: filterable, labels: t, timeZone: timeZone, onChange: setAdvanced }) }), dateFields.length > 0 && (_jsxs(DrawerGroup, { title: t.groupDates, hint: t.groupDatesHint, children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1 text-sm sm:col-span-2", children: [_jsx("label", { htmlFor: `${rangeId}-field`, className: "text-muted-foreground", children: t.field }), _jsx(NativeSelect, { id: `${rangeId}-field`, value: rangeField, onChange: (e) => {
+                                                    setRangeField(e.target.value);
+                                                    setFrom('');
+                                                    setTo('');
+                                                }, children: dateFields.map((f) => (_jsx("option", { value: f.id, children: labelOf(f, t) }, f.id))) })] }), _jsxs("label", { htmlFor: `${rangeId}-from`, className: "grid gap-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t.rangeFrom }), _jsx(Input, { id: `${rangeId}-from`, type: rangeType, value: from, className: "h-9 max-md:h-11", onChange: (e) => setFrom(e.target.value) })] }), _jsxs("label", { htmlFor: `${rangeId}-to`, className: "grid gap-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t.rangeTo }), _jsx(Input, { id: `${rangeId}-to`, type: rangeType, value: to, min: from, className: "h-9 max-md:h-11", onChange: (e) => setTo(e.target.value) })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn('self-start', touch), disabled: !from || !to || from > to, onClick: () => {
+                                    const field = fields.find((f) => f.id === rangeField);
+                                    if (!field)
+                                        return;
+                                    const zoned = (value) => rangeType === 'datetime-local'
+                                        ? (fromZonedInput(value, timeZone) ?? value)
+                                        : value;
+                                    const range = dateRange(field, zoned(from), zoned(to));
+                                    const group = advanced;
+                                    setAdvanced({
+                                        ...group,
+                                        operator: group.expressions.length ? group.operator : 'AND',
+                                        expressions: [...group.expressions, range],
+                                    });
+                                    setFrom('');
+                                    setTo('');
+                                }, children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), t.addRange] })] })), _jsxs(DrawerGroup, { title: t.groupSort, hint: t.groupSortHint, children: [sort.map((entry, index) => (_jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,10rem)_auto]", children: [_jsx(NativeSelect, { "aria-label": `${t.sort}: ${t.field}`, value: entry.fieldId, onChange: (e) => setSort(sort.map((s, i) => (i === index ? { ...s, fieldId: e.target.value } : s))), children: sortable.map((f) => (_jsx("option", { value: f.id, disabled: f.id !== entry.fieldId && sort.some((s) => s.fieldId === f.id), children: labelOf(f, t) }, f.id))) }), _jsxs(NativeSelect, { "aria-label": t.sort, value: entry.direction, onChange: (e) => setSort(sort.map((s, i) => i === index ? { ...s, direction: e.target.value } : s)), children: [_jsx("option", { value: "asc", children: t.asc }), _jsx("option", { value: "desc", children: t.desc })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: touch, "aria-label": t.remove, onClick: () => setSort(sort.filter((_, i) => i !== index)), children: _jsx(Trash2, { "aria-hidden": "true" }) })] }, entry.fieldId))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn('self-start', touch), disabled: sort.length >= 8 || !sortable.some((f) => !sort.some((s) => s.fieldId === f.id)), onClick: () => {
+                                    const f = sortable.find((f) => !sort.some((s) => s.fieldId === f.id));
+                                    if (f)
+                                        setSort([...sort, { fieldId: f.id, direction: 'asc' }]);
+                                }, children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), t.addSort] })] }), _jsxs(DrawerGroup, { title: t.groupColumns, hint: t.groupColumnsHint, children: [_jsx("div", { className: "grid gap-1 sm:grid-cols-2", children: toggleable.map((f) => (_jsxs("span", { className: "flex items-center gap-2 rounded-md px-1 py-1.5 text-sm max-md:min-h-11", children: [_jsx(Checkbox, { id: `${rangeId}-column-${f.id}`, checked: columns.includes(f.id), onCheckedChange: (checked) => setColumns(checked === true ? [...columns, f.id] : columns.filter((c) => c !== f.id)) }), _jsx("label", { htmlFor: `${rangeId}-column-${f.id}`, className: "cursor-pointer", children: labelOf(f, t) })] }, f.id))) }), !columns.length && _jsx("p", { className: "text-destructive text-sm", children: t.columnsRequired })] }), views.some((view) => view.canShare) && (_jsx(DrawerGroup, { title: t.groupViews, hint: t.groupViewsHint, children: _jsx("ul", { className: "flex flex-col gap-3", children: views
+                                .filter((view) => view.canShare)
+                                .map((view) => (_jsxs("li", { className: "flex flex-col gap-2 rounded-lg border p-3", children: [_jsx("span", { className: "font-medium text-sm [overflow-wrap:anywhere]", children: view.name }), _jsx(ShareForm, { view: view, labels: t, disabled: pending, onShare: (visibility, roles) => onShare(view, visibility, roles) })] }, view.id))) }) }))] }), _jsxs("div", { className: "flex flex-col gap-2 border-t bg-muted/30 px-4 py-3 sm:px-5", children: [_jsx(ErrorMessage, { error: error, labels: t }), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", className: touch, onClick: () => {
+                                    setArchived('EXCLUDE');
+                                    setTags([]);
+                                    setAdvanced(emptyGroup());
+                                    setSort([]);
+                                    setColumns(columnsDefault.filter((id) => id !== '$number'));
+                                }, children: t.resetFilters }), _jsx(Button, { type: "submit", className: touch, disabled: pending || !columns.length, children: t.apply })] })] })] }));
+}
+export function ShareForm({ view, labels: t, disabled, onShare, }) {
+    const [visibility, setVisibility] = useState(view.visibility);
+    const [roles, setRoles] = useState(view.roles.join(', '));
+    const ref = useRef(null);
+    return (_jsxs("div", { ref: ref, className: "flex flex-wrap items-end gap-2", children: [_jsx(NativeSelect, { "aria-label": t.share, disabled: disabled, value: visibility, onChange: (e) => setVisibility(e.target.value), className: "w-full sm:w-auto", children: ['PRIVATE', 'ALL', 'ROLES'].map((value) => (_jsx("option", { value: value, children: t[value] }, value))) }), visibility === 'ROLES' && (_jsx(Input, { "aria-label": t.roles, placeholder: t.roles, value: roles, onChange: (e) => setRoles(e.target.value), className: "h-9 min-w-0 flex-1 max-md:h-11" })), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: touch, disabled: disabled || (visibility === 'ROLES' && !roles.trim()), onClick: () => onShare(visibility, roles
+                    .split(',')
+                    .map((r) => r.trim())
+                    .filter(Boolean)), children: t.share })] }));
+}
+//# sourceMappingURL=list-client.js.map