@keenaioc/data-view 0.0.0-poc.1 → 0.2.0-alpha.11

package/dist/data-view.js

@@ -0,0 +1,883 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, Children, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { columnMovePeers, moveColumnSetting } from "./field-order.js";
+import { ColumnMenu } from "./column-menu.js";
+import { headerItems, changeHeaderView, FieldActionForm, ColumnFilterForm, FilterValueInput } from "./column-actions.js";
+import { GroupSettings } from "./group-settings.js";
+import { DataViewToolbar } from "./toolbar.js";
+import { buildGroupTree, DataViewConflictError, filterRows, getFieldValue, getPinnedOffsets, getRightPinnedOffsets, moveColumn, normalizeColumnWidth, normalizeViewConfig, retainViewReferences, searchRows, sortRows, validateValue, visibleFields, } from "./engine.js";
+import { FILTER_OPERATOR_LABELS, RelationSelect, getFieldTypeDefinition, renderFieldValue, formatClipboardValue, formatReadableValue, formatReadableRow } from "./registry.js";
+import { canWriteField, createPasteChanges, encodeTSV, newOperationId, validateChanges, validateFieldChange } from "./operations.js";
+import { createDataViewQuery, dataViewQueryKey, resolveMetrics, mergeViewState, splitViewState, createWriteQueue, virtualWindow } from "./contracts.js";
+import { VirtualList } from "./virtual-list.js";
+import { useRowMove } from "./use-row-move.js";
+import { createSnapshotWriter } from "./view-state.js";
+import { ScheduleView } from "./schedule-view.js";
+import { applyGanttDependencyChange, ganttHistoryGuard, validateGanttScheduleGuard } from "./gantt-dependencies.js";
+import { BatchEditor, ColorSettings, DataViewDialog, FieldCreator, FieldManager, ViewSettings } from "./v2-panels.js";
+export function DataView(props) {
+    return _jsx(DataViewInner, { ...props }, props.identityKey ?? "default");
+}
+function DataViewInner(props) {
+    const { fields, rows, getRowId, title = "資料表格", loading = false, error = null, access = "granted", emptyMessage = "目前沒有資料", onViewChange, onCellCommit, onBatchCommit, onFieldChange, ganttDependencies, onGanttDependencyChange, onRequestAttachment, permissions, selectedRowIds, onSelectionChange, searchPlaceholder = "搜尋目前資料", } = props;
+    const [internalView, setInternalView] = useState(() => mergeViewState(normalizeViewConfig(fields, props.view ?? props.initialView), props.runtimeState));
+    const activeView = internalView;
+    const search = activeView.location?.search ?? "";
+    const [panel, setPanel] = useState(null);
+    const [draggedColumn, setDraggedColumn] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const [viewSaveState, setViewSaveState] = useState(onViewChange ? "idle" : "readonly");
+    const [cellStatuses, setCellStatuses] = useState({});
+    const [localSelected, setLocalSelected] = useState([]);
+    const viewRef = useRef(activeView);
+    const layoutRef = useRef(normalizeViewConfig(fields, props.view ?? props.initialView));
+    const saveCallback = useRef(onViewChange);
+    useEffect(() => { saveCallback.current = onViewChange; }, [onViewChange]);
+    const writer = useRef(null);
+    const latestSave = useRef(0);
+    const pendingViewWrite = useRef(false);
+    const rootRef = useRef(null);
+    const scrollRef = useRef(null);
+    const mobileRef = useRef(null);
+    useEffect(() => { setEditing(null); }, [props.presentation]);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [focus, setFocus] = useState(null);
+    const [anchor, setAnchor] = useState(null);
+    const [detailId, setDetailId] = useState(null);
+    const [dialog, setDialog] = useState(null);
+    const menuId = useId();
+    const [headerMenu, setHeaderMenu] = useState(null);
+    const [fieldAction, setFieldAction] = useState(null);
+    const [pending, setPending] = useState(null);
+    const [operation, setOperation] = useState({ state: "idle" });
+    const [undoStack, setUndoStack] = useState([]);
+    const [redoStack, setRedoStack] = useState([]);
+    const busyRef = useRef(false);
+    const pendingCells = useRef(new Set());
+    const writes = useRef(createWriteQueue());
+    useEffect(() => { const queue = createWriteQueue(); writes.current = queue; return () => queue.dispose(); }, []);
+    const [quick, setQuick] = useState(null);
+    const bottomRef = useRef(null);
+    const [viewportHeight, setViewportHeight] = useState(560);
+    const [viewportWidth, setViewportWidth] = useState(0);
+    const metrics = resolveMetrics(activeView.density, props.metrics);
+    const runtimeCallback = useRef(props.onRuntimeChange);
+    runtimeCallback.current = props.onRuntimeChange;
+    const detailCallback = useRef(props.onViewChangeDetail);
+    detailCallback.current = props.onViewChangeDetail;
+    const runtimeWriter = useRef(createSnapshotWriter((v) => runtimeCallback.current?.(v)));
+    const detailWriter = useRef(createSnapshotWriter((v) => detailCallback.current?.(v)));
+    const features = props.features ?? {};
+    const availableFields = useMemo(() => fields.filter((f) => !f.internal), [fields]);
+    useEffect(() => {
+        setHeaderMenu(null);
+        setFieldAction(null);
+    }, [props.presentation, activeView.viewType]);
+    useEffect(() => {
+        setHeaderMenu((current) => current && (!current.anchor.isConnected || !availableFields.some((field) => field.id === current.fieldId)) ? null : current);
+        setFieldAction((current) => current && !availableFields.some((field) => field.id === current.fieldId) ? null : current);
+    }, [availableFields]);
+    const latest = useRef({ rows, fields, permissions, access, ganttDependencies, mapping: activeView.gantt });
+    useEffect(() => { latest.current = { rows, fields, permissions, access, ganttDependencies, mapping: activeView.gantt }; }, [rows, fields, permissions, access, ganttDependencies, activeView.gantt]);
+    useEffect(() => {
+        if (props.view)
+            layoutRef.current = normalizeViewConfig(fields, props.view);
+        setInternalView((current) => mergeViewState(normalizeViewConfig(fields, !pendingViewWrite.current && props.view ? props.view : current), props.runtimeState));
+    }, [fields, props.view, props.runtimeState]);
+    useEffect(() => { viewRef.current = activeView; }, [activeView]);
+    useEffect(() => {
+        if (mobileRef.current)
+            mobileRef.current.scrollTop = viewRef.current.location?.mobileTop ?? 0;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollTop = viewRef.current.location?.tableTop ?? 0;
+        el.scrollLeft = viewRef.current.location?.tableLeft ?? 0;
+        setScrollTop(el.scrollTop);
+    }, [activeView.viewType]);
+    useEffect(() => { const leave = (e) => { if (pendingViewWrite.current) {
+        e.preventDefault();
+        e.returnValue = "";
+    } }; window.addEventListener("beforeunload", leave); return () => window.removeEventListener("beforeunload", leave); }, []);
+    const selected = selectedRowIds ?? localSelected;
+    const selectable = permissions?.canSelectRows !== false;
+    const controlColumn = selectable || !!props.rowMove || features.rowOpen === true;
+    const controlWidth = (selectable ? 32 : 0) + (props.rowMove ? 24 : 0) + (features.rowOpen === true ? 28 : 0);
+    const move = useRowMove(props, activeView, rootRef, (id, action) => writes.current.run([id], action));
+    const configurable = permissions?.canConfigureView !== false;
+    const canManageFields = Boolean(onFieldChange && permissions?.canManageFields === true && access === "granted");
+    const addColumnWidth = canManageFields ? 56 : 0;
+    const busy = operation.state === "saving";
+    const selectedSet = useMemo(() => new Set(selected), [selected]);
+    const selectedRows = useMemo(() => rows.filter((row) => selectedSet.has(getRowId(row))), [rows, selectedSet, getRowId]);
+    const detailRow = detailId ? rows.find((row) => getRowId(row) === detailId) : undefined;
+    function setView(next, scope = "layout") {
+        if (scope === "layout" && !configurable)
+            return;
+        const normalized = retainViewReferences(viewRef.current, normalizeViewConfig(fields, next));
+        viewRef.current = normalized;
+        setInternalView(normalized);
+        const runtime = { viewType: normalized.viewType, location: normalized.location, collapsedGroups: normalized.collapsedGroups, ...(props.runtimeState?.filters || scope === "query" ? { filters: normalized.filters, sorts: normalized.sorts } : {}) };
+        const callbacks = [];
+        if (detailCallback.current)
+            callbacks.push(detailWriter.current({ scope, view: normalized, runtime }));
+        if (scope !== "layout" && runtimeCallback.current)
+            callbacks.push(runtimeWriter.current(runtime));
+        else if (saveCallback.current) {
+            if (!writer.current)
+                writer.current = createSnapshotWriter((value) => saveCallback.current?.(value));
+            const savedLayout = runtimeCallback.current ? { ...splitViewState(normalized).layout, filters: layoutRef.current.filters, sorts: layoutRef.current.sorts } : normalized;
+            layoutRef.current = savedLayout;
+            callbacks.push(writer.current(savedLayout));
+        }
+        if (!callbacks.length)
+            return;
+        setViewSaveState("saving");
+        pendingViewWrite.current = true;
+        const saveNumber = ++latestSave.current;
+        void Promise.all(callbacks).then(() => {
+            if (latestSave.current === saveNumber) {
+                setViewSaveState("saved");
+                pendingViewWrite.current = false;
+            }
+        }, (e) => { if (latestSave.current === saveNumber)
+            setViewSaveState(e instanceof DataViewConflictError ? "conflict" : "failed"); });
+    }
+    function patchView(patch, scope = "layout") { setView({ ...viewRef.current, ...patch }, scope); }
+    function patchLocation(patch) { patchView({ location: { ...viewRef.current.location, ...patch } }, "navigation"); }
+    const query = useMemo(() => createDataViewQuery(activeView), [activeView.filters, activeView.sorts, activeView.groups, search]);
+    const queryKey = dataViewQueryKey(query);
+    const remoteStale = !!props.remote && props.remote.queryKey !== queryKey;
+    const queryCallback = useRef(props.onQueryChange);
+    queryCallback.current = props.onQueryChange;
+    const previousQuery = useRef(queryKey);
+    useEffect(() => { if (access === "granted" && !loading && !error)
+        queryCallback.current?.(query); }, [queryKey, props.onQueryChange, access, loading, error]);
+    useEffect(() => { if (previousQuery.current === queryKey)
+        return; previousQuery.current = queryKey; setLocalSelected([]); onSelectionChange?.([]); setFocus(null); setAnchor(null); setEditing(null); setUndoStack([]); setRedoStack([]); }, [queryKey]);
+    const canFilter = permissions?.canFilter ?? configurable;
+    const canSort = permissions?.canSort ?? configurable;
+    const processedRows = useMemo(() => {
+        if (props.remote)
+            return remoteStale ? [] : rows;
+        const searched = searchRows(rows, fields, search);
+        const filtered = filterRows(searched, fields, activeView.filters.rules, activeView.filters.conjunction);
+        return sortRows(filtered, fields, activeView.sorts);
+    }, [activeView.filters, activeView.sorts, fields, rows, search, Boolean(props.remote), remoteStale]);
+    const fullGroups = useMemo(() => buildGroupTree(processedRows, fields, activeView.groups), [processedRows, fields, activeView.groups]);
+    const groups = fullGroups;
+    const visible = useMemo(() => visibleFields(fields, activeView), [activeView, fields]);
+    const tableColumnCount = visible.length + (controlColumn ? 1 : 0) + (canManageFields ? 1 : 0);
+    const pinnedOffsets = useMemo(() => getPinnedOffsets(activeView.columns, controlWidth), [activeView.columns, selectable]);
+    const ganttLeftOffsets = useMemo(() => getPinnedOffsets(activeView.columns, 44), [activeView.columns]);
+    const ganttRightOffsets = useMemo(() => getRightPinnedOffsets(activeView.columns), [activeView.columns]);
+    const tableWidth = visible.reduce((total, item) => total + item.column.width, (controlWidth) + addColumnWidth);
+    const collapsed = useMemo(() => new Set(activeView.collapsedGroups), [activeView.collapsedGroups]);
+    const allGroupKeys = useMemo(() => collectGroupKeys(fullGroups), [fullGroups]);
+    const rightOffsets = useMemo(() => new Map([...getRightPinnedOffsets(activeView.columns)].map(([id, offset]) => [id, offset + addColumnWidth])), [activeView.columns, addColumnWidth]);
+    const virtual = activeView.virtualize !== false || processedRows.length > 200;
+    const rowHeight = metrics.rowHeight;
+    const flatEntries = useMemo(() => flattenGroups(fullGroups, collapsed), [fullGroups, collapsed]);
+    const desktopRows = useMemo(() => flatEntries.flatMap((entry) => entry.kind === "row" ? [entry.row] : []), [flatEntries]);
+    const entryHeights = useMemo(() => flatEntries.map((e) => e.kind === "group" ? metrics.groupHeight + (e.node.depth ? metrics.nestedGroupGap : metrics.groupGap) : rowHeight), [flatEntries, rowHeight, metrics.groupHeight, metrics.groupGap, metrics.nestedGroupGap]);
+    const windowed = useMemo(() => virtualWindow(entryHeights, scrollTop, viewportHeight), [entryHeights, scrollTop, viewportHeight]);
+    const virtualStart = virtual ? windowed.start : 0;
+    const virtualEnd = virtual ? windowed.end : flatEntries.length;
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(() => { setViewportHeight(el.clientHeight); setViewportWidth(el.clientWidth); });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [activeView.viewType, loading, error, access, processedRows.length === 0]);
+    const mobileFields = useMemo(() => activeView.mobile ? activeView.mobile.fieldIds.flatMap((id) => { const field = availableFields.find((f) => f.id === id); return field ? [field] : []; }) : visible.slice(0, 5).map((v) => v.field), [activeView.mobile, availableFields, visible]);
+    function readableLabel(row) {
+        const id = activeView.viewType === "gantt" ? activeView.gantt?.titleFieldId : activeView.viewType === "calendar" ? activeView.calendar?.titleFieldId : activeView.mobile?.summaryFieldId;
+        const field = fields.find((f) => f.id === id) ?? availableFields.find((f) => !f.renderAction && canRead(row, f));
+        if (field && (field.internal || !canRead(row, field)))
+            return "無權限";
+        return props.getRowLabel?.(row)?.trim() || (field ? formatReadableValue(getFieldValue(row, field), { ...field, internal: false }, row) : "") || "未命名工作";
+    }
+    function openRow(row) { if (features.rowOpen === false)
+        return; if (props.onRowOpen)
+        props.onRowOpen(row);
+    else
+        setDetailId(getRowId(row)); }
+    function groupLabel(node) {
+        const field = fields.find((f) => f.id === node.fieldId);
+        return _jsxs(_Fragment, { children: [_jsx("strong", { className: "hy-dv-group-label", style: { backgroundColor: node.color, color: node.textColor }, children: node.valueKey === "__restricted__" ? "無權限" : field?.renderGroup?.(node) ?? node.label }), _jsxs("span", { children: [props.remote?.groupCounts?.[node.key] ?? node.rows.length, props.remote && !props.remote.complete && props.remote.groupCounts?.[node.key] === undefined ? " 已載入" : ""] })] });
+    }
+    function detailContext(row) { return { row, fields: availableFields.filter((f) => canRead(row, f)), close: () => { setDetailId(null); setEditing(null); }, renderCell: (field) => renderCell(row, field, "detail") }; }
+    function loadNearEnd(el) { if (el.scrollHeight - el.scrollTop - el.clientHeight < 200 && props.remote && !remoteStale && !props.remote.complete && !props.remote.loading && !props.remote.error)
+        props.remote.onLoadMore?.(); }
+    const colorMap = useMemo(() => {
+        const result = new Map();
+        for (const row of rows) {
+            const colors = new Map();
+            for (const rule of activeView.colorRules ?? []) {
+                const field = fields.find((f) => f.id === rule.condition.fieldId);
+                if (!field || field.canRead?.({ row, field }) === false || colors.has(rule.target))
+                    continue;
+                if (getFieldTypeDefinition(field.type).filter(getFieldValue(row, field), rule.condition, field))
+                    colors.set(rule.target, rule.color);
+            }
+            if (colors.size)
+                result.set(getRowId(row), colors);
+        }
+        return result;
+    }, [rows, fields, getRowId, activeView.colorRules]);
+    function changeSelection(next) {
+        const unique = [...new Set(next)];
+        if (!selectedRowIds)
+            setLocalSelected(unique);
+        onSelectionChange?.(unique);
+    }
+    function toggleRow(rowId) {
+        changeSelection(selected.includes(rowId) ? selected.filter((id) => id !== rowId) : [...selected, rowId]);
+    }
+    const pageIds = processedRows.map(getRowId);
+    const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selected.includes(id));
+    function togglePageSelection() {
+        if (allPageSelected)
+            changeSelection(selected.filter((id) => !pageIds.includes(id)));
+        else
+            changeSelection([...selected, ...pageIds]);
+    }
+    function toggleGroup(key) {
+        if (permissions?.canCollapseGroups === false)
+            return;
+        const next = new Set(activeView.collapsedGroups);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        patchView({ collapsedGroups: [...next] }, "navigation");
+    }
+    function setAllGroups(close) {
+        if (permissions?.canCollapseGroups !== false)
+            patchView({ collapsedGroups: close ? allGroupKeys : [] }, "navigation");
+    }
+    function resizeColumn(fieldId, startWidth, event) {
+        event.preventDefault();
+        const startX = event.clientX;
+        function move(pointer) {
+            const width = normalizeColumnWidth(startWidth + pointer.clientX - startX);
+            setView({
+                ...viewRef.current,
+                columns: viewRef.current.columns.map((column) => column.fieldId === fieldId ? { ...column, width } : column),
+            });
+        }
+        function up() {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+        }
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+    }
+    function dropColumn(targetId) {
+        if (!draggedColumn)
+            return;
+        patchView({ columns: moveColumn(activeView.columns, draggedColumn, targetId) });
+        setDraggedColumn(null);
+    }
+    function canRead(row, field) {
+        return field.canRead?.({ row, field }) !== false;
+    }
+    function canEdit(row, field) {
+        const spec = getFieldTypeDefinition(field.type);
+        return Boolean(!busyRef.current && !pendingCells.current.has(`${getRowId(row)}:${field.id}`) && access === "granted" && !remoteStale && (field.Editor || spec.Editor) && canWriteField(row, field, permissions) &&
+            (field.type === "attachment" ? onRequestAttachment : onBatchCommit ?? onCellCommit));
+    }
+    async function commitCell(row, field, nextValue) {
+        if (!canEdit(row, field))
+            return;
+        const rowId = getRowId(row);
+        const key = `${rowId}:${field.id}`;
+        const previousValue = getFieldValue(row, field);
+        if (JSON.stringify(previousValue) === JSON.stringify(nextValue)) {
+            setEditing(null);
+            return;
+        }
+        const validation = validateValue(nextValue, field, row);
+        if (validation) {
+            setEditing(null);
+            setCellStatuses((current) => ({ ...current, [key]: { state: "failed", message: validation } }));
+            return;
+        }
+        setEditing(null);
+        if (onBatchCommit && !onCellCommit) {
+            await execute({ id: newOperationId(), reason: "edit", changes: [{ row, rowId, field, previousValue, nextValue }] });
+            return;
+        }
+        pendingCells.current.add(key);
+        setCellStatuses((current) => ({ ...current, [key]: { state: "saving" } }));
+        try {
+            await writes.current.run([rowId], async () => {
+                const fresh = latest.current.rows.find((r) => getRowId(r) === rowId);
+                const definition = latest.current.fields.find((f) => f.id === field.id);
+                if (!fresh || !definition || latest.current.access !== "granted" || !canWriteField(fresh, definition, latest.current.permissions))
+                    throw new Error("資料不存在或無修改權限");
+                if (JSON.stringify(getFieldValue(fresh, definition)) !== JSON.stringify(previousValue))
+                    throw new DataViewConflictError();
+                await onCellCommit?.({ row: fresh, rowId, field: definition, previousValue, nextValue });
+            });
+            setCellStatuses((current) => ({ ...current, [key]: { state: "saved" } }));
+            setTimeout(() => setCellStatuses((current) => {
+                if (current[key]?.state !== "saved")
+                    return current;
+                const next = { ...current };
+                delete next[key];
+                return next;
+            }), 1400);
+        }
+        catch (commitError) {
+            setCellStatuses((current) => ({
+                ...current,
+                [key]: {
+                    state: commitError instanceof DataViewConflictError ? "conflict" : "failed",
+                    message: commitError instanceof Error ? commitError.message : "儲存失敗",
+                },
+            }));
+        }
+        finally {
+            pendingCells.current.delete(key);
+        }
+    }
+    function renderCell(row, field, surface) {
+        if (field.internal)
+            return null;
+        if (!canRead(row, field))
+            return _jsx("span", { className: "hy-dv-no-access", children: "\u7121\u6B0A\u9650" });
+        const rowId = getRowId(row);
+        const key = `${rowId}:${field.id}`;
+        const value = getFieldValue(row, field);
+        const status = cellStatuses[key];
+        const isEditing = editing?.rowId === rowId && editing.fieldId === field.id && editing.surface === surface;
+        const spec = getFieldTypeDefinition(field.type);
+        if (field.renderAction)
+            return _jsxs("fieldset", { className: "hy-dv-action-cell", disabled: field.canAct?.(row) === false || status?.state === "saving" || access !== "granted", children: [field.renderAction({ row, field, value, close: () => setEditing(null), openRow: () => openRow(row), disabled: field.canAct?.(row) === false || status?.state === "saving", pending: status?.state === "saving", run: async (action) => { if (field.canAct?.(row) === false || pendingCells.current.has(key))
+                            return; pendingCells.current.add(key); setCellStatuses((s) => ({ ...s, [key]: { state: "saving" } })); try {
+                            await writes.current.run([rowId], () => { const fresh = latest.current.rows.find((r) => getRowId(r) === rowId); const f = latest.current.fields.find((f) => f.id === field.id); if (!fresh || !f || latest.current.access !== "granted" || f.canRead?.({ row: fresh, field: f }) === false || f.canAct?.(fresh) === false)
+                                throw new Error("無操作權限"); return action(); });
+                            setCellStatuses((s) => ({ ...s, [key]: { state: "saved" } }));
+                        }
+                        catch (e) {
+                            setCellStatuses((s) => ({ ...s, [key]: { state: e instanceof DataViewConflictError ? "conflict" : "failed", message: e instanceof Error ? e.message : "操作失敗" } }));
+                        }
+                        finally {
+                            pendingCells.current.delete(key);
+                        } } }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+        if (isEditing && !spec.toggleValue && (field.Editor || spec.Editor) && canEdit(row, field)) {
+            const Editor = field.Editor ?? spec.Editor;
+            return _jsx("div", { className: "hy-dv-editor-wrap", children: _jsx(Editor, { value: value, row: row, field: field, onCommit: (next) => void commitCell(row, field, next), onCancel: () => setEditing(null), onRequestAttachment: onRequestAttachment ? async (files) => {
+                        if (pendingCells.current.has(key))
+                            return;
+                        pendingCells.current.add(key);
+                        setEditing(null);
+                        setCellStatuses((current) => ({ ...current, [key]: { state: "saving" } }));
+                        try {
+                            await writes.current.run([rowId], () => onRequestAttachment({ row, rowId, field, files }));
+                            setCellStatuses((current) => ({ ...current, [key]: { state: "saved" } }));
+                        }
+                        catch (uploadError) {
+                            setCellStatuses((current) => ({ ...current, [key]: { state: "failed", message: uploadError instanceof Error ? uploadError.message : "附件儲存失敗" } }));
+                        }
+                        finally {
+                            pendingCells.current.delete(key);
+                        }
+                    } : undefined }) });
+        }
+        if (field.type === "relation" && !field.Editor && !field.renderQuickView && !field.render && canWriteField(row, field, permissions) && (onBatchCommit || onCellCommit))
+            return _jsxs("div", { className: "hy-dv-relation-cell", children: [_jsx(RelationSelect, { value: value, row: row, field: field, disabled: !canEdit(row, field), onCommit: (next) => void commitCell(row, field, next), onCancel: () => setEditing(null) }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+        if (field.type === "attachment")
+            return _jsxs("div", { className: "hy-dv-attachment-cell", children: [(!spec.isEmpty(value) || !canEdit(row, field) || field.render) && renderFieldValue(value, field, row), canEdit(row, field) && _jsx("button", { className: "hy-dv-attachment-add", type: "button", "aria-label": "\u65B0\u589E\u9644\u4EF6", title: "\u65B0\u589E\u9644\u4EF6", onClick: () => setEditing({ rowId, fieldId: field.id, surface }), children: _jsx("svg", { "aria-hidden": "true", focusable: "false", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) }) }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+        return _jsxs("button", { type: "button", className: `hy-dv-cell-button ${canEdit(row, field) ? "is-editable" : ""} ${spec.toggleValue ? "is-toggle" : ""}`, role: spec.toggleValue ? "checkbox" : undefined, "aria-checked": spec.toggleValue ? Boolean(value) : undefined, "aria-label": spec.toggleValue ? `${rowId} ${field.label}` : undefined, "aria-busy": status?.state === "saving", tabIndex: surface === "desktop" ? -1 : undefined, onClick: (event) => {
+                if (event.shiftKey && surface === "desktop")
+                    return;
+                setFocus({ rowId, fieldId: field.id });
+                setAnchor(null);
+                if (spec.toggleValue) {
+                    void commitCell(row, field, spec.toggleValue(value));
+                    return;
+                }
+                if (field.renderQuickView) {
+                    setQuick({ rowId, fieldId: field.id });
+                    return;
+                }
+                if (!canEdit(row, field)) {
+                    openRow(row);
+                    return;
+                }
+                if (surface !== "detail" && (field.Editor || ["multiLineText", "multiSelect", "attachment", "relation", "person"].includes(field.type))) {
+                    setDetailId(rowId);
+                    setEditing({ rowId, fieldId: field.id, surface: "detail" });
+                    return;
+                }
+                if (canEdit(row, field))
+                    setEditing({ rowId, fieldId: field.id, surface });
+            }, disabled: status?.state === "saving" || (!!spec.toggleValue && !canEdit(row, field)), title: status?.message, children: [_jsx("span", { className: "hy-dv-cell-value", title: formatReadableValue(value, field, row), children: renderFieldValue(value, field, row) }), field.appearance?.arrow === true && !spec.toggleValue && _jsx("span", { className: "hy-dv-cell-arrow", "aria-hidden": true, children: "\u2304" }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+    }
+    function reportFailure(error) {
+        setOperation({ state: error instanceof DataViewConflictError ? "conflict" : "failed", message: error instanceof Error ? error.message : String(error) });
+    }
+    async function execute(request) {
+        if (!onBatchCommit || busyRef.current || latest.current.access !== "granted" || remoteStale)
+            return false;
+        const keys = request.changes.map((c) => `${c.rowId}:${c.field.id}`);
+        keys.forEach((k) => pendingCells.current.add(k));
+        setCellStatuses((s) => ({ ...s, ...Object.fromEntries(keys.map((k) => [k, { state: "saving" }])) }));
+        return writes.current.run(request.changes.map((c) => c.rowId), async () => {
+            const currentRows = new Map(latest.current.rows.map((row) => [getRowId(row), row]));
+            try {
+                if (request.scheduleGuard) {
+                    const guard = request.scheduleGuard;
+                    const mapping = latest.current.mapping;
+                    if (!mapping || mapping.startFieldId !== guard.startFieldId || mapping.endFieldId !== guard.endFieldId || (mapping.workdaysOnly === true) !== guard.workdaysOnly)
+                        throw new DataViewConflictError("日期設定已變更，請重新預覽");
+                    validateGanttScheduleGuard(guard, latest.current.rows, latest.current.fields, getRowId, latest.current.ganttDependencies);
+                    for (const c of request.changes) {
+                        const row = currentRows.get(c.rowId);
+                        if (row && latest.current.ganttDependencies?.isDateLocked?.(row))
+                            throw new DataViewConflictError("排程已確認或鎖定，請重新協調日期");
+                    }
+                }
+                const changes = request.changes.map((change) => {
+                    const row = currentRows.get(change.rowId);
+                    const field = latest.current.fields.find((f) => f.id === change.field.id);
+                    if (!row || !field)
+                        throw new DataViewConflictError("資料列或欄位已不存在，請重新選取");
+                    if (JSON.stringify(getFieldValue(row, field)) !== JSON.stringify(change.previousValue))
+                        throw new DataViewConflictError("預覽後資料已更新，請重新檢查修改內容");
+                    return { ...change, row, field };
+                });
+                const validation = validateChanges(changes, latest.current.permissions);
+                if (validation)
+                    throw new Error(validation);
+                setOperation({ state: "saving", message: `正在儲存 ${changes.length} 格` });
+                await onBatchCommit({ ...request, changes });
+                if (features.undo !== false && request.reason !== "undo" && request.reason !== "redo") {
+                    setUndoStack((stack) => [...stack.slice(-19), { changes: changes.map((c) => ({ ...c, previousValue: structuredClone(c.previousValue), nextValue: structuredClone(c.nextValue) })), scheduleGuard: request.scheduleGuard ? structuredClone(request.scheduleGuard) : undefined }]);
+                    setRedoStack([]);
+                }
+                setCellStatuses((s) => ({ ...s, ...Object.fromEntries(keys.map((k) => [k, { state: "saved" }])) }));
+                setOperation({ state: "saved", message: `已儲存 ${changes.length} 格` });
+                return true;
+            }
+            catch (error) {
+                setCellStatuses((s) => ({ ...s, ...Object.fromEntries(keys.map((k) => [k, { state: error instanceof DataViewConflictError ? "conflict" : "failed", message: error instanceof Error ? error.message : "儲存失敗" }])) }));
+                reportFailure(error);
+                return false;
+            }
+            finally {
+                keys.forEach((k) => pendingCells.current.delete(k));
+            }
+        });
+    }
+    function reviewChanges(changes, reason) {
+        const validation = validateChanges(changes, permissions);
+        if (validation) {
+            reportFailure(new Error(validation));
+            return;
+        }
+        setPending({ id: newOperationId(), reason, changes });
+        setDialog("review");
+        setEditing(null);
+    }
+    async function applyFieldChange(change) {
+        if (!onFieldChange || busyRef.current || latest.current.access !== "granted")
+            return false;
+        const validation = validateFieldChange(latest.current.fields, change, latest.current.permissions);
+        if (validation) {
+            reportFailure(new Error(validation));
+            return false;
+        }
+        busyRef.current = true;
+        setOperation({ state: "saving", message: "正在儲存欄位結構" });
+        try {
+            await writes.current.run(["*"], () => onFieldChange(change));
+            setUndoStack([]);
+            setRedoStack([]);
+            setFocus(null);
+            setAnchor(null);
+            setEditing(null);
+            setOperation({ state: "saved", message: "欄位結構已儲存" });
+            return true;
+        }
+        catch (error) {
+            reportFailure(error);
+            return false;
+        }
+        finally {
+            busyRef.current = false;
+        }
+    }
+    async function changeDependency(change) {
+        const current = latest.current;
+        if (!onGanttDependencyChange || !current.ganttDependencies || busyRef.current || current.access !== "granted" || current.permissions?.canManageDependencies !== true)
+            return false;
+        try {
+            applyGanttDependencyChange(current.ganttDependencies, change);
+            const link = change.action === "add" ? change.link : current.ganttDependencies.links.find((l) => l.id === change.linkId);
+            if (!link || ![link.predecessorId, link.successorId].every((id) => {
+                const row = current.rows.find((r) => getRowId(r) === id);
+                return row && [current.mapping?.titleFieldId, current.mapping?.startFieldId, current.mapping?.endFieldId].every((fieldId) => { const field = current.fields.find((f) => f.id === fieldId); return field && field.canRead?.({ row, field }) !== false; });
+            }))
+                throw new Error("相關資料不存在或無權限");
+            busyRef.current = true;
+            setOperation({ state: "saving", message: "正在儲存依賴" });
+            await writes.current.run(["*"], () => onGanttDependencyChange(change));
+            setUndoStack([]);
+            setRedoStack([]);
+            setOperation({ state: "saved", message: "依賴已儲存，日期保持原值" });
+            return true;
+        }
+        catch (error) {
+            reportFailure(error);
+            return false;
+        }
+        finally {
+            busyRef.current = false;
+        }
+    }
+    async function historyAction(direction) {
+        if (features[direction] === false)
+            return;
+        const stack = direction === "undo" ? undoStack : redoStack;
+        const entry = stack.at(-1);
+        if (!entry)
+            return;
+        const changes = direction === "undo" ? entry.changes.map((c) => ({ ...c, previousValue: c.nextValue, nextValue: c.previousValue })) : entry.changes;
+        if (await execute({ id: newOperationId(), reason: direction, changes, scheduleGuard: ganttHistoryGuard(entry.scheduleGuard, entry.changes, direction === "undo") })) {
+            if (direction === "undo") {
+                setUndoStack((s) => s.slice(0, -1));
+                setRedoStack((s) => [...s, entry]);
+            }
+            else {
+                setRedoStack((s) => s.slice(0, -1));
+                setUndoStack((s) => [...s, entry]);
+            }
+        }
+    }
+    function gridRange() {
+        if (!focus)
+            return null;
+        const row = desktopRows.findIndex((r) => getRowId(r) === focus.rowId);
+        const col = visible.findIndex((v) => v.field.id === focus.fieldId);
+        if (row < 0 || col < 0)
+            return null;
+        const anchorRow = anchor ? desktopRows.findIndex((r) => getRowId(r) === anchor.rowId) : row;
+        const anchorCol = anchor ? visible.findIndex((v) => v.field.id === anchor.fieldId) : col;
+        return { row, col, fromRow: Math.min(row, anchorRow < 0 ? row : anchorRow), toRow: Math.max(row, anchorRow), fromCol: Math.min(col, anchorCol < 0 ? col : anchorCol), toCol: Math.max(col, anchorCol) };
+    }
+    function inputTarget(target) { return target instanceof HTMLElement && (target.matches("input,textarea,select,a") || !!target.closest(".hy-dv-action-cell") || target.isContentEditable); }
+    function handleCopy(event) {
+        if (features.copy === false || inputTarget(event.target) || !event.target || !isGridTarget(event.target))
+            return;
+        const range = gridRange();
+        if (!range)
+            return;
+        const values = desktopRows.slice(range.fromRow, range.toRow + 1).map((row) => visible.slice(range.fromCol, range.toCol + 1).map(({ field }) => !field.internal && !field.renderAction && canRead(row, field) ? formatClipboardValue(getFieldValue(row, field), field) : ""));
+        event.preventDefault();
+        event.clipboardData.setData("text/plain", encodeTSV(values));
+        setOperation({ state: "saved", message: `已複製 ${values.length} 列（未讀取無權限值）` });
+    }
+    function handlePaste(event) {
+        if (features.paste === false || inputTarget(event.target) || !isGridTarget(event.target) || !onBatchCommit || busy)
+            return;
+        const range = gridRange();
+        if (!range)
+            return;
+        event.preventDefault();
+        try {
+            reviewChanges(createPasteChanges(event.clipboardData.getData("text/plain"), desktopRows, visible.map((v) => v.field), getRowId, range.fromRow, range.fromCol), "paste");
+        }
+        catch (error) {
+            reportFailure(error);
+        }
+    }
+    function isGridTarget(target) { return target instanceof Element && !!target.closest("td[data-hy-cell]"); }
+    function handleKey(event) {
+        if (inputTarget(event.target) || !isGridTarget(event.target) || editing)
+            return;
+        const modifier = event.ctrlKey || event.metaKey;
+        if (modifier && (event.key.toLowerCase() === "z" || event.key.toLowerCase() === "y")) {
+            if (onBatchCommit) {
+                event.preventDefault();
+                void historyAction(event.shiftKey || event.key.toLowerCase() === "y" ? "redo" : "undo");
+            }
+            return;
+        }
+        const range = gridRange();
+        if (!range)
+            return;
+        if (event.key === "Escape") {
+            setAnchor(null);
+            setEditing(null);
+            return;
+        }
+        if (event.key === " " && modifier && selectable) {
+            event.preventDefault();
+            toggleRow(getRowId(desktopRows[range.row]));
+            return;
+        }
+        if (event.key === "Enter" || event.key === "F2" || (event.key === " " && !modifier && !event.shiftKey && getFieldTypeDefinition(visible[range.col].field.type).toggleValue)) {
+            event.preventDefault();
+            const row = desktopRows[range.row];
+            const field = visible[range.col].field;
+            const relationSelect = event.target.closest("td")?.querySelector(".hy-dv-relation-select");
+            if (relationSelect && !relationSelect.disabled) {
+                relationSelect.focus();
+                try {
+                    relationSelect.showPicker?.();
+                }
+                catch { /* Focus still permits native keyboard selection. */ }
+                return;
+            }
+            const toggleValue = getFieldTypeDefinition(field.type).toggleValue;
+            if (toggleValue)
+                void commitCell(row, field, toggleValue(getFieldValue(row, field)));
+            else if (!canEdit(row, field))
+                openRow(row);
+            else if (field.Editor || ["person", "relation", "multiLineText", "multiSelect"].includes(field.type)) {
+                setDetailId(getRowId(row));
+                setEditing({ rowId: getRowId(row), fieldId: field.id, surface: "detail" });
+            }
+            else if (canEdit(row, field))
+                setEditing({ rowId: getRowId(row), fieldId: field.id, surface: "desktop" });
+            return;
+        }
+        if ((event.key === "Delete" || event.key === "Backspace") && onBatchCommit && features.clear !== false) {
+            event.preventDefault();
+            reviewChanges(desktopRows.slice(range.fromRow, range.toRow + 1).flatMap((row) => visible.slice(range.fromCol, range.toCol + 1).map(({ field }) => ({ row, rowId: getRowId(row), field, previousValue: getFieldValue(row, field), nextValue: field.type === "checkbox" ? false : null }))), "clear");
+            return;
+        }
+        let row = range.row;
+        let col = range.col;
+        if (event.key === "ArrowDown")
+            row++;
+        else if (event.key === "ArrowUp")
+            row--;
+        else if (event.key === "PageDown")
+            row += Math.max(1, Math.floor(viewportHeight / rowHeight));
+        else if (event.key === "PageUp")
+            row -= Math.max(1, Math.floor(viewportHeight / rowHeight));
+        else if (event.key === "ArrowLeft")
+            col--;
+        else if (event.key === "ArrowRight")
+            col++;
+        else if (event.key === "Home") {
+            col = 0;
+            if (modifier)
+                row = 0;
+        }
+        else if (event.key === "End") {
+            col = visible.length - 1;
+            if (modifier)
+                row = desktopRows.length - 1;
+        }
+        else if (event.key === "Tab") {
+            const next = row * visible.length + col + (event.shiftKey ? -1 : 1);
+            if (next < 0 || next >= desktopRows.length * visible.length)
+                return;
+            row = Math.floor(next / visible.length);
+            col = next % visible.length;
+        }
+        else
+            return;
+        event.preventDefault();
+        row = Math.max(0, Math.min(desktopRows.length - 1, row));
+        col = Math.max(0, Math.min(visible.length - 1, col));
+        const next = { rowId: getRowId(desktopRows[row]), fieldId: visible[col].field.id };
+        setAnchor(event.shiftKey && event.key !== "Tab" ? anchor ?? focus : null);
+        setFocus(next);
+        if (virtual) {
+            const index = flatEntries.findIndex((e) => e.kind === "row" && getRowId(e.row) === next.rowId);
+            if (index < virtualStart || index >= virtualEnd) {
+                if (scrollRef.current)
+                    scrollRef.current.scrollTop = windowed.offsets[index];
+                setScrollTop(windowed.offsets[index]);
+            }
+        }
+        requestAnimationFrame(() => {
+            const cell = rootRef.current?.querySelector(`td[data-row-id="${CSS.escape(next.rowId)}"][data-field-id="${CSS.escape(next.fieldId)}"]`);
+            cell?.focus({ preventScroll: true });
+            cell?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        });
+    }
+    if (access === "denied" || loading || error) {
+        const state = access === "denied" ? _jsx(StateCard, { title: "\u7121\u6B0A\u9650", message: "\u4F60\u6C92\u6709\u67E5\u770B\u9019\u4EFD\u8CC7\u6599\u7684\u6B0A\u9650\u3002", tone: "warning" }) : loading ? _jsx(LoadingState, {}) : _jsx(StateCard, { title: "\u8F09\u5165\u5931\u6557", message: error, tone: "error" });
+        return props.height === undefined ? state : _jsx("section", { className: "hy-dv", style: { height: props.height, overflow: "auto" }, "aria-label": title, children: state });
+    }
+    const range = gridRange();
+    const desktopRowIndices = new Map(desktopRows.map((row, index) => [getRowId(row), index]));
+    return _jsxs("section", { ref: rootRef, className: `hy-dv density-${activeView.density ?? "standard"} presentation-${props.presentation ?? "auto"} chrome-${props.chrome ?? "standard"} ${props.height !== undefined ? "has-total-height" : ""}`, style: { height: props.height, "--hy-row-height": `${rowHeight}px`, "--hy-header-height": `${metrics.headerHeight}px`, "--hy-group-height": `${metrics.groupHeight}px`, "--hy-cell-font": `${metrics.cellFontSize}px`, "--hy-cell-line": `${metrics.cellLineHeight}px`, "--hy-header-font": `${metrics.headerFontSize}px`, "--hy-cell-padding": `${metrics.cellPadding}px`, "--hy-header-left": `${metrics.headerPaddingLeft}px`, "--hy-header-right": `${metrics.headerPaddingRight}px`, "--hy-control-height": `${metrics.controlHeight}px`, "--hy-action-height": `${metrics.actionHeight}px`, "--hy-badge-height": `${metrics.badgeHeight}px`, "--hy-badge-font": `${metrics.badgeFontSize}px`, "--hy-badge-padding": `${metrics.badgePadding}px`, "--hy-viewport-height": typeof props.viewportHeight === "number" ? `${props.viewportHeight}px` : props.viewportHeight ?? "560px", "--hy-scrollbar-height": `${metrics.scrollbarHeight}px`, "--hy-scrollbar-thumb": `${metrics.scrollbarThumb}px` }, "aria-label": title, onKeyDown: handleKey, onCopy: handleCopy, onPaste: handlePaste, children: [_jsxs("div", { className: "hy-dv-heading", children: [_jsxs("header", { className: "hy-dv-titlebar", children: [props.headerStart, _jsxs("div", { children: [_jsx("h2", { children: title }), _jsx("span", { children: props.remote ? `符合 ${remoteStale ? "…" : props.remote.total ?? "…"} 筆，已載入 ${processedRows.length} 筆${props.remote.complete && !remoteStale ? "（完整）" : "（尚未完整）"}` : `${processedRows.length} / ${rows.length} 筆` })] }), _jsxs("div", { className: "hy-dv-title-status", children: [selected.length > 0 && _jsxs("span", { children: ["\u5DF2\u9078 ", selected.length, " \u7B46"] }), !props.hideViewSaveStatus && _jsx(SaveBadge, { state: viewSaveState, prefix: "\u6AA2\u8996" }), !props.hideViewSaveStatus && (viewSaveState === "failed" || viewSaveState === "conflict") && _jsx("button", { onClick: () => setView(viewRef.current), children: "\u91CD\u8A66\u5132\u5B58" })] }), props.headerEnd] }), features.viewTabs !== false && _jsxs("nav", { className: "hy-dv-view-tabs", "aria-label": "\u8CC7\u6599\u8996\u5716", children: [[["table", "資料表格"], ["gantt", "甘特圖"], ["calendar", "行事曆"]].map(([type, label]) => _jsx("button", { "aria-pressed": activeView.viewType === type, disabled: permissions?.canSwitchView === false, onClick: () => { patchView({ viewType: type }, configurable ? "layout" : "navigation"); setEditing(null); setPanel(null); }, children: label }, type)), configurable && features.viewSettings !== false && _jsx("button", { onClick: () => setPanel(panel === "settings" ? null : "settings"), children: activeView.viewType === "gantt" ? "甘特圖設定" : activeView.viewType === "calendar" ? "行事曆設定" : "視圖設定" })] })] }), _jsxs(DataViewToolbar, { compact: props.chrome === "compact", start: props.toolbarStart, end: props.toolbarEnd, secondary: _jsxs(_Fragment, { children: [configurable && features.columns !== false && _jsx(ToolbarButton, { active: panel === "columns", onClick: () => setPanel(panel === "columns" ? null : "columns"), children: "\u96FB\u8166\u8868\u683C\u6B04\u4F4D" }), configurable && features.colors !== false && _jsx(ToolbarButton, { active: panel === "colors", onClick: () => setPanel(panel === "colors" ? null : "colors"), children: "\u586B\u8272" }), canManageFields && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("add-field"); }, children: "\uFF0B \u65B0\u589E\u6B04\u4F4D" }), _jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("fields"); }, children: "\u7BA1\u7406\u6B04\u4F4D" })] }), onBatchCommit && _jsxs(_Fragment, { children: [features.batch !== false && _jsxs("button", { disabled: !selectedRows.length || busy, onClick: () => { setPanel(null); setDialog("batch"); }, children: ["\u6279\u6B21\u4FEE\u6539 ", selectedRows.length || ""] }), features.undo !== false && _jsx("button", { disabled: !undoStack.length || busy, onClick: () => void historyAction("undo"), children: "\u5FA9\u539F" }), features.redo !== false && _jsx("button", { disabled: !redoStack.length || busy, onClick: () => void historyAction("redo"), children: "\u91CD\u505A" })] }), selected.length > 0 && _jsx(ToolbarButton, { onClick: () => changeSelection([]), children: "\u6E05\u9664\u9078\u53D6" }), activeView.groups.length > 0 && permissions?.canCollapseGroups !== false && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => setAllGroups(true), children: "\u5168\u90E8\u6536\u5408" }), _jsx(ToolbarButton, { onClick: () => setAllGroups(false), children: "\u5168\u90E8\u5C55\u958B" })] })] }), children: [features.search !== false && permissions?.canSearch !== false && _jsxs("label", { className: "hy-dv-search", children: [_jsx("span", { "aria-hidden": true, children: "\u2315" }), _jsx("input", { "aria-label": searchPlaceholder, value: search, onChange: (event) => patchLocation({ search: event.target.value, tableTop: 0, ganttTop: 0 }), placeholder: searchPlaceholder })] }), canFilter && features.filter !== false && _jsxs(ToolbarButton, { active: panel === "filter" || activeView.filters.rules.length > 0, onClick: () => setPanel(panel === "filter" ? null : "filter"), children: ["\u7BE9\u9078 ", activeView.filters.rules.length || ""] }), canSort && features.sort !== false && _jsxs(ToolbarButton, { active: panel === "sort" || activeView.sorts.length > 0, onClick: () => setPanel(panel === "sort" ? null : "sort"), children: ["\u6392\u5E8F ", activeView.sorts.length || ""] }), configurable && features.group !== false && _jsxs(ToolbarButton, { active: panel === "group" || activeView.groups.length > 0, onClick: () => setPanel(panel === "group" ? null : "group"), children: ["\u5206\u7D44 ", activeView.groups.length || ""] }), props.onPresentationChange && _jsxs("select", { "aria-label": "\u5448\u73FE\u65B9\u5F0F", value: props.presentation ?? "auto", onChange: (e) => props.onPresentationChange?.(e.target.value), children: [_jsx("option", { value: "auto", children: "\u81EA\u52D5" }), _jsx("option", { value: "table", children: "\u8868\u683C" }), _jsx("option", { value: "cards", children: "\u5361\u7247" })] })] }), move.message && _jsx("p", { role: "status", children: move.message }), operation.state !== "idle" && _jsxs("div", { className: `hy-dv-operation is-${operation.state}`, role: operation.state === "failed" || operation.state === "conflict" ? "alert" : "status", children: [_jsx(SaveBadge, { state: operation.state }), _jsx("span", { children: operation.message })] }), panel && (configurable || panel === "filter" && canFilter || panel === "sort" && canSort) && _jsxs("div", { className: "hy-dv-panel-wrap", children: [panel === "filter" && _jsx(FilterPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "sort" && _jsx(SortPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "group" && _jsx(PanelShell, { title: "\u5206\u7D44\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(GroupSettings, { fields: fields, rows: remoteStale ? [] : rows, view: activeView, onChange: setView }) }), panel === "columns" && _jsx(ColumnPanel, { fields: availableFields, view: { ...activeView, columns: activeView.columns.filter((c) => availableFields.some((f) => f.id === c.fieldId)) }, onChange: setView, onClose: () => setPanel(null), dragged: draggedColumn, setDragged: setDraggedColumn, drop: dropColumn }), panel === "settings" && _jsx(PanelShell, { title: "\u8996\u5716\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(ViewSettings, { fields: availableFields, view: activeView, onChange: setView }) }), panel === "colors" && _jsx(PanelShell, { title: "\u586B\u8272\u898F\u5247", onClose: () => setPanel(null), children: _jsx(ColorSettings, { fields: availableFields, view: activeView, onChange: setView }) })] }), _jsx("div", { className: "hy-dv-body", children: remoteStale || props.remote?.loading && !processedRows.length ? _jsx(LoadingState, {}) : processedRows.length === 0 && props.remote?.error ? _jsx(StateCard, { title: "\u67E5\u8A62\u5931\u6557", message: props.remote.error, tone: "error" }) : processedRows.length === 0 ? _jsx(StateCard, { title: "\u6C92\u6709\u7B26\u5408\u689D\u4EF6\u7684\u8CC7\u6599", message: rows.length === 0 ? emptyMessage : "請調整搜尋或篩選條件。" }) : activeView.viewType !== "table" ? _jsx(ScheduleView, { metrics: metrics, getRowLabel: readableLabel, groupLabel: groupLabel, onLoadNearEnd: loadNearEnd, allRows: rows, dependencies: ganttDependencies, onDependencyChange: onGanttDependencyChange && permissions?.canManageDependencies === true ? changeDependency : undefined, onScheduleCommit: onBatchCommit ? execute : undefined, rows: processedRows, renderMobileRow: (row) => _jsx("dl", { className: "hy-dv-schedule-fields", children: mobileFields.filter((field) => canRead(row, field)).map((field) => _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { children: renderCell(row, field, "mobile") })] }, field.id)) }), onLocationChange: patchLocation, onToggleGroup: toggleGroup, renderLeftHeader: () => _jsxs("tr", { children: [_jsx("th", { className: "hy-dv-open-header is-pinned", style: { left: 0 }, children: "\u8A73\u60C5" }), visible.map((v) => renderColumnHeader(v.field, v.column, true))] }), renderLeftRow: (row) => _jsxs("tr", { children: [_jsx("td", { className: "is-pinned", style: { left: 0 }, children: _jsx("button", { "aria-label": `開啟 ${getRowId(row)} 詳情`, onClick: () => openRow(row), children: "\u2197" }) }), visible.map(({ field }) => _jsx("td", { className: ganttLeftOffsets.has(field.id) || ganttRightOffsets.has(field.id) ? "is-pinned" : "", style: { left: ganttLeftOffsets.get(field.id), right: ganttRightOffsets.get(field.id), backgroundColor: colorMap.get(getRowId(row))?.get(field.id) ?? colorMap.get(getRowId(row))?.get("row") }, children: _jsx("div", { className: "hy-dv-gantt-cell", children: renderCell(row, field, "gantt") }) }, field.id))] }, getRowId(row)), fields: fields, getRowId: getRowId, view: activeView, permissions: permissions, busy: busy, onCommit: onBatchCommit ? (changes) => execute({ id: newOperationId(), reason: "edit", changes }) : undefined, onOpen: openRow }, activeView.viewType) : _jsxs(_Fragment, { children: [_jsx("div", { className: "hy-dv-desktop", children: _jsx("div", { ref: scrollRef, className: `hy-dv-table-scroll ${virtual ? "is-virtual" : ""}`, onScroll: (event) => { setScrollTop(event.currentTarget.scrollTop); loadNearEnd(event.currentTarget); if (bottomRef.current)
+                                    bottomRef.current.scrollLeft = event.currentTarget.scrollLeft; patchLocation({ tableTop: event.currentTarget.scrollTop, tableLeft: event.currentTarget.scrollLeft }); }, children: _jsxs("table", { className: "hy-dv-table", style: { width: tableWidth }, "aria-label": "\u8CC7\u6599\u5132\u5B58\u683C", "aria-rowcount": desktopRows.length + 1, children: [_jsxs("colgroup", { children: [controlColumn && _jsx("col", { style: { width: controlWidth } }), visible.map(({ field, column }) => _jsx("col", { style: { width: column.width } }, field.id)), canManageFields && _jsx("col", { style: { width: addColumnWidth } })] }), _jsx("thead", { children: _jsxs("tr", { children: [controlColumn && _jsx("th", { className: "hy-dv-selection is-pinned", style: { left: 0 }, children: selectable && _jsx("input", { type: "checkbox", checked: allPageSelected, onChange: togglePageSelection, "aria-label": props.remote && !props.remote.complete ? "選取目前已載入資料" : "選取全部符合條件資料" }) }), visible.map(({ field, column }) => renderColumnHeader(field, column)), canManageFields && _jsx("th", { className: "hy-dv-add-column is-pinned", style: { right: 0 }, children: _jsx("button", { type: "button", disabled: busy, "aria-label": "\u65B0\u589E\u6B04\u4F4D", title: "\u65B0\u589E\u6B04\u4F4D", onClick: () => { setPanel(null); setDialog("add-field"); }, children: "\uFF0B" }) })] }) }), _jsxs("tbody", { children: [virtual && virtualStart > 0 && _jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, style: { height: windowed.before, padding: 0, border: 0 } }) }), flatEntries.slice(virtualStart, virtualEnd).map((entry) => entry.kind === "row" ? renderDesktopRow(entry.row) : _jsx("tr", { "data-group-key": entry.node.key, className: `hy-dv-group depth-${entry.node.depth} ${move.target?.position === "groupEnd" && move.target.targetGroupPath.at(-1)?.key === entry.node.key ? "is-drop-after" : ""}`, style: { height: entryHeights[flatEntries.indexOf(entry)] }, children: _jsx("td", { colSpan: tableColumnCount, children: _jsxs("button", { type: "button", onClick: () => toggleGroup(entry.node.key), "aria-expanded": !collapsed.has(entry.node.key), children: [collapsed.has(entry.node.key) ? "›" : "⌄", groupLabel(entry.node)] }) }) }, `group:${entry.node.key}`)), virtual && virtualEnd < flatEntries.length && _jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, style: { height: windowed.after, padding: 0, border: 0 } }) })] })] }) }) }), _jsx(VirtualList, { items: flatEntries, itemKey: (e) => e.kind === "group" ? `g:${e.node.key}` : getRowId(e.row), estimate: (e) => e.kind === "group" ? 40 : activeView.mobile?.presentation === "compact" ? 80 + mobileFields.length * 28 : 100 + mobileFields.length * 36, className: `hy-dv-mobile mobile-${activeView.mobile?.presentation ?? "cards"}`, initialTop: activeView.location?.mobileTop, onScroll: (el) => { loadNearEnd(el); patchLocation({ mobileTop: el.scrollTop }); }, renderItem: (entry) => entry.kind === "group" ? _jsxs("button", { "data-group-key": entry.node.key, className: "hy-dv-mobile-group-title", "aria-expanded": !collapsed.has(entry.node.key), onClick: () => toggleGroup(entry.node.key), children: [collapsed.has(entry.node.key) ? "›" : "⌄", groupLabel(entry.node)] }) : renderMobileCard(entry.row) }), _jsxs("p", { className: "hy-dv-keyboard-help", children: ["\u65B9\u5411\u9375\u79FB\u52D5 \u00B7 Shift\uFF0B\u65B9\u5411\u9375\u9078\u7BC4\u570D \u00B7 Enter \u7DE8\u8F2F \u00B7 Ctrl/Cmd\uFF0BC\uFF0FV \u8907\u88FD\u8CBC\u4E0A \u00B7 Delete \u6E05\u7A7A\u9810\u89BD", virtual ? ` · 連續捲動，共 ${desktopRows.length} 筆` : ""] }), props.bottomScrollbar !== false && tableWidth > viewportWidth && _jsx("div", { ref: bottomRef, className: "hy-dv-bottom-scroll", "aria-label": "\u8868\u683C\u6C34\u5E73\u6372\u52D5", onScroll: (e) => { if (scrollRef.current)
+                                scrollRef.current.scrollLeft = e.currentTarget.scrollLeft; }, children: _jsx("div", { style: { width: tableWidth, height: 1 } }) })] }) }), props.remote && _jsxs("div", { className: "hy-dv-load-status", role: props.remote.error ? "alert" : "status", children: [props.remote.error || (props.remote.loading || remoteStale ? "正在載入符合條件的資料…" : props.remote.complete ? `已完整載入 ${processedRows.length} 筆` : `尚未完整：已載入 ${processedRows.length}／${props.remote.total ?? "…"} 筆`), !props.remote.complete && !props.remote.loading && !remoteStale && _jsx("button", { onClick: props.remote.error ? props.remote.onRetry : props.remote.onLoadMore, children: props.remote.error ? "重新查詢" : "繼續載入" })] }), quick && (() => { const row = rows.find((r) => getRowId(r) === quick.rowId); const field = fields.find((f) => f.id === quick.fieldId); return row && field && !field.internal && canRead(row, field) && _jsxs(DataViewDialog, { title: field.label, onClose: () => setQuick(null), children: [field.renderQuickView?.({ row, field, value: getFieldValue(row, field), close: () => setQuick(null), openRow: () => { setQuick(null); openRow(row); } }), canEdit(row, field) && _jsx("button", { onClick: () => { setQuick(null); setDetailId(getRowId(row)); setEditing({ rowId: getRowId(row), fieldId: field.id, surface: "detail" }); }, children: "\u7DE8\u8F2F" })] }); })(), detailRow && _jsxs(DataViewDialog, { title: readableLabel(detailRow), busy: busy, onClose: () => { setDetailId(null); setEditing(null); }, children: [props.renderDetail ? props.renderDetail(detailContext(detailRow)) : _jsx("div", { className: "hy-dv-detail", children: availableFields.filter((field) => canRead(detailRow, field)).map((field) => _jsxs("label", { children: [_jsx("span", { children: field.label }), renderCell(detailRow, field, "detail")] }, field.id)) }), features.copy !== false && _jsx("button", { onClick: async () => { try {
+                            await navigator.clipboard.writeText(formatReadableRow(detailRow, availableFields));
+                            setOperation({ state: "saved", message: "已複製可讀內容" });
+                        }
+                        catch {
+                            reportFailure(new Error("無法使用剪貼簿，請確認瀏覽器權限"));
+                        } }, children: "\u8907\u88FD\u6587\u5B57" }), props.renderDetailFooter?.(detailContext(detailRow)), operation.state !== "idle" && _jsx("p", { role: "status", children: operation.message })] }), headerMenu && features.columnMenu !== false && (() => {
+                const field = availableFields.find((item) => item.id === headerMenu.fieldId);
+                return field && _jsx(ColumnMenu, { id: menuId, label: field.label, anchor: headerMenu.anchor, items: headerItems({ field, fields, view: activeView, permissions, features, hasFieldCallback: !!onFieldChange, busy }), onChoose: (action) => chooseHeaderAction(field, action), onClose: () => setHeaderMenu(null) });
+            })(), fieldAction && (() => {
+                const field = availableFields.find((item) => item.id === fieldAction.fieldId);
+                if (!field)
+                    return null;
+                const action = fieldAction.action;
+                return _jsxs(DataViewDialog, { title: `${action === "rename" ? "重新命名" : action === "copy" ? "複製欄位與值" : action === "delete" ? "刪除欄位" : "篩選"}：${field.label}`, busy: busy, onClose: () => setFieldAction(null), children: [action === "filter" ? _jsx(ColumnFilterForm, { field: field, filters: activeView.filters, disabled: busy || !canFilter || features.filter === false, onCancel: () => setFieldAction(null), onApply: (rule) => {
+                                if (busyRef.current || !canFilter || features.filter === false)
+                                    return;
+                                const current = viewRef.current.filters;
+                                if (current.rules.length >= 20 && !current.rules.some((item) => item.id === rule.id)) {
+                                    setOperation({ state: "failed", message: "最多二十個篩選條件，請先移除其他條件。" });
+                                    return;
+                                }
+                                const rules = current.rules.some((item) => item.id === rule.id) ? current.rules.map((item) => item.id === rule.id ? rule : item) : [...current.rules, rule];
+                                setView({ ...viewRef.current, filters: { ...current, rules } }, "query");
+                                setFieldAction(null);
+                            } }, field.id) : _jsx(FieldActionForm, { action: action, field: field, fields: fields, permissions: permissions, busy: busy, onApply: applyFieldChange, onCancel: () => setFieldAction(null) }, `${field.id}:${action}`), (operation.state === "failed" || operation.state === "conflict") && _jsx("p", { role: "alert", children: operation.message })] });
+            })(), dialog && _jsxs(DataViewDialog, { title: dialog === "add-field" ? "新增欄位" : dialog === "fields" ? "管理欄位" : dialog === "batch" ? "批次修改" : "確認資料修改", busy: busy, onClose: () => { setDialog(null); setPending(null); }, children: [dialog === "add-field" && _jsx(FieldCreator, { fields: fields, permissions: permissions, onApply: async (change) => { const saved = await applyFieldChange(change); if (saved)
+                            setDialog(null); return saved; }, busy: busy, onCancel: () => setDialog(null) }), dialog === "fields" && _jsx(FieldManager, { fields: availableFields, permissions: permissions, onApply: applyFieldChange, busy: busy }), dialog === "batch" && _jsx(BatchEditor, { fields: availableFields, rows: selectedRows, getRowId: getRowId, permissions: permissions, onReview: reviewChanges }), dialog === "review" && pending && _jsxs("div", { className: "hy-dv-form", children: [_jsxs("p", { children: ["\u5171 ", pending.changes.length, " \u683C\u3002\u6240\u6709\u6B04\u4F4D\u9A57\u8B49\u901A\u904E\u5F8C\uFF0C\u7531\u5C08\u6848\u4E00\u6B21\u5BEB\u5165\uFF1B\u5931\u6557\u6216\u885D\u7A81\u6642\u4FDD\u7559\u539F\u8CC7\u6599\u3002"] }), _jsx("div", { className: "hy-dv-review-list", children: pending.changes.slice(0, 30).map((change) => _jsxs("div", { children: [_jsxs("strong", { children: [change.rowId, "\uFF0F", change.field.label] }), _jsxs("span", { children: [formatClipboardValue(change.previousValue, change.field) || "空白", " \u2192 ", formatClipboardValue(change.nextValue, change.field) || "空白"] })] }, `${change.rowId}:${change.field.id}`)) }), pending.changes.length > 30 && _jsxs("p", { children: ["\u9810\u89BD\u524D 30 \u683C\uFF0C\u5168\u90E8 ", pending.changes.length, " \u683C\u90FD\u6703\u9A57\u8B49\u3002"] }), _jsxs("button", { disabled: busy, onClick: async () => { if (await execute(pending)) {
+                                    setDialog(null);
+                                    setPending(null);
+                                } }, children: ["\u78BA\u8A8D\u5957\u7528 ", pending.changes.length, " \u683C"] })] }), operation.state !== "idle" && _jsx("p", { role: operation.state === "failed" || operation.state === "conflict" ? "alert" : "status", children: operation.message })] })] });
+    function renderDesktopRow(row) {
+        const rowId = getRowId(row);
+        const index = desktopRowIndices.get(rowId) ?? 0;
+        const colors = colorMap.get(rowId);
+        return _jsxs("tr", { "data-move-row": rowId, "aria-rowindex": index + 2, className: `${selectedSet.has(rowId) ? "is-selected" : ""} ${move.sourceId === rowId ? "is-moving" : ""} ${move.target?.targetRowId === rowId ? `is-drop-${move.target.position}` : ""}`, style: { height: rowHeight }, children: [controlColumn && _jsx("td", { className: "hy-dv-selection is-pinned", style: { left: 0 }, children: _jsxs("div", { className: "hy-dv-row-controls", children: [props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), selectable && _jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId), "aria-label": `選取資料 ${readableLabel(row)}` }), features.rowOpen === true && _jsx("button", { "aria-label": `開啟 ${readableLabel(row)}`, onClick: () => openRow(row), children: "\u2197" })] }) }), visible.map(({ field }, col) => {
+                    const left = pinnedOffsets.get(field.id);
+                    const right = rightOffsets.get(field.id);
+                    const inRange = range && index >= range.fromRow && index <= range.toRow && col >= range.fromCol && col <= range.toCol;
+                    return _jsx("td", { "data-hy-cell": true, "data-row-id": rowId, "data-field-id": field.id, tabIndex: range && focus ? focus.rowId === rowId && focus.fieldId === field.id ? 0 : -1 : index === 0 && col === 0 ? 0 : -1, "aria-label": `${rowId} ${field.label}`, onFocus: () => setFocus({ rowId, fieldId: field.id }), onClick: (event) => { if (event.shiftKey) {
+                            setAnchor(anchor ?? focus);
+                            setFocus({ rowId, fieldId: field.id });
+                        } }, className: `${left === undefined && right === undefined ? "" : "is-pinned"} ${inRange ? "is-range" : ""}`, style: { left, right, backgroundColor: colors?.get(field.id) ?? colors?.get("row") }, children: _jsx("div", { className: "hy-dv-cell-content", children: renderCell(row, field, "desktop") }) }, field.id);
+                }), canManageFields && _jsx("td", { className: "hy-dv-add-column is-pinned", style: { right: 0 } })] }, rowId);
+    }
+    function chooseHeaderAction(field, action) {
+        const allowed = headerItems({ field, fields, view: viewRef.current, permissions, features, hasFieldCallback: !!onFieldChange, busy: busyRef.current }).find((item) => item.action === action);
+        if (!allowed || allowed.disabled)
+            return;
+        setHeaderMenu(null);
+        if (["rename", "copy", "delete", "filter"].includes(action)) {
+            setFieldAction({ fieldId: field.id, action: action });
+            return;
+        }
+        if (action === "columns") {
+            setPanel("columns");
+            return;
+        }
+        const next = changeHeaderView(viewRef.current, field.id, action);
+        if (next !== viewRef.current)
+            setView(next, action === "sort-asc" || action === "sort-desc" || action === "clear-sort" ? "query" : "layout");
+        if (action === "group")
+            setPanel("group");
+    }
+    function renderColumnHeader(field, column, gantt = false) {
+        const left = (gantt ? ganttLeftOffsets : pinnedOffsets).get(field.id);
+        const right = (gantt ? ganttRightOffsets : rightOffsets).get(field.id);
+        return _jsxs("th", { draggable: configurable, onDragStart: () => setDraggedColumn(field.id), onDragOver: (event) => event.preventDefault(), onDrop: () => dropColumn(field.id), className: left === undefined && right === undefined ? "" : "is-pinned", style: { left, right }, children: [_jsxs("div", { className: "hy-dv-column-heading", children: [_jsx("span", { className: "hy-dv-column-title", children: field.label }), activeView.sorts.findIndex((rule) => rule.fieldId === field.id) >= 0 && _jsxs("small", { children: [activeView.sorts.findIndex((rule) => rule.fieldId === field.id) + 1, activeView.sorts.find((rule) => rule.fieldId === field.id)?.direction === "asc" ? "↑" : "↓"] }), features.columnMenu !== false && (configurable || canManageFields || canFilter || canSort) && _jsx("button", { type: "button", className: "hy-dv-header-menu-trigger", "aria-label": `${field.label}欄位操作`, title: `${field.label}欄位操作`, "aria-haspopup": "menu", "aria-expanded": headerMenu?.fieldId === field.id, "aria-controls": headerMenu?.fieldId === field.id ? menuId : undefined, draggable: false, onDragStart: (event) => { event.preventDefault(); event.stopPropagation(); }, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => { event.stopPropagation(); setHeaderMenu(headerMenu?.fieldId === field.id ? null : { fieldId: field.id, anchor: event.currentTarget }); }, onKeyDown: (event) => { if (event.key === "ArrowDown") {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setHeaderMenu({ fieldId: field.id, anchor: event.currentTarget });
+                            } }, children: "\u2304" })] }), configurable && _jsx("span", { className: "hy-dv-resize", onPointerDown: (event) => resizeColumn(field.id, column.width, event), "aria-hidden": true })] }, field.id);
+    }
+    function renderMobileCard(row) {
+        const rowId = getRowId(row);
+        return _jsxs("article", { "data-move-row": rowId, className: `hy-dv-card ${selected.includes(rowId) ? "is-selected" : ""}`, style: { backgroundColor: colorMap.get(rowId)?.get("row") }, children: [selectable && _jsxs("label", { className: "hy-dv-card-select", children: [_jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId) }), " \u9078\u53D6"] }), activeView.mobile?.summaryFieldId && _jsx("button", { className: "hy-dv-mobile-summary", onClick: () => openRow(row), children: readableLabel(row) }), props.renderMobileRow ? props.renderMobileRow(detailContext(row)) : _jsx("dl", { children: mobileFields.map((field) => canRead(row, field) && _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { style: { backgroundColor: colorMap.get(rowId)?.get(field.id) }, children: renderCell(row, field, "mobile") })] }, field.id)) }), props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), _jsx("button", { className: "hy-dv-detail-button", onClick: () => openRow(row), children: "\u67E5\u770B\u8A73\u60C5" })] }, rowId);
+    }
+}
+function ToolbarButton({ children, active = false, onClick }) {
+    const label = Children.toArray(children).filter((v) => typeof v === "string" || typeof v === "number").join("").trim();
+    const icon = label.startsWith("篩選") ? "▽" : label.startsWith("排序") ? "↕" : label.startsWith("分組") ? "▤" : null;
+    const count = label.match(/\d+$/)?.[0];
+    return _jsxs("button", { type: "button", title: label, "aria-label": label, "aria-pressed": active, className: `${active ? "is-active" : ""} ${icon ? "hy-dv-tool" : ""}`, onClick: onClick, children: [icon && _jsxs("span", { className: "hy-dv-tool-icon", "aria-hidden": true, children: [icon, count && _jsx("small", { children: count })] }), _jsx("span", { className: "hy-dv-tool-label", children: children })] });
+}
+function PanelShell({ title, children, onClose }) {
+    return _jsxs("aside", { className: "hy-dv-panel", children: [_jsxs("header", { children: [_jsx("h3", { children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": `關閉${title}`, children: "\u00D7" })] }), children] });
+}
+function SortPanel({ fields, view, onChange, onClose }) {
+    function update(index, patch) {
+        onChange({ ...view, sorts: view.sorts.map((rule, ruleIndex) => ruleIndex === index ? { ...rule, ...patch } : rule) });
+    }
+    return _jsxs(PanelShell, { title: "\u591A\u6B04\u6392\u5E8F", onClose: onClose, children: [_jsx("p", { children: "\u7531\u4E0A\u5230\u4E0B\u5957\u7528\uFF0C\u7B2C\u4E00\u5217\u512A\u5148\u3002" }), _jsxs("div", { className: "hy-dv-rules", children: [view.sorts.map((rule, index) => _jsxs("div", { className: "hy-dv-rule", children: [_jsx("span", { children: index + 1 }), _jsx("select", { value: rule.fieldId, onChange: (event) => update(index, { fieldId: event.target.value }), children: fields.map((field) => _jsx("option", { value: field.id, disabled: view.sorts.some((item, i) => i !== index && item.fieldId === field.id), children: field.label }, field.id)) }), _jsxs("select", { value: rule.direction, onChange: (event) => update(index, { direction: event.target.value }), children: [_jsx("option", { value: "asc", children: "\u5C0F \u2192 \u5927" }), _jsx("option", { value: "desc", children: "\u5927 \u2192 \u5C0F" })] }), _jsx("button", { type: "button", onClick: () => onChange({ ...view, sorts: view.sorts.filter((_, i) => i !== index) }), children: "\u79FB\u9664" })] }, `${rule.fieldId}-${index}`)), _jsx("button", { type: "button", className: "hy-dv-add", disabled: view.sorts.length >= fields.length, onClick: () => {
+                            const field = fields.find((item) => !view.sorts.some((rule) => rule.fieldId === item.id));
+                            if (field)
+                                onChange({ ...view, sorts: [...view.sorts, { fieldId: field.id, direction: "asc" }] });
+                        }, children: "\uFF0B \u589E\u52A0\u6392\u5E8F" })] })] });
+}
+function FilterPanel({ fields, view, onChange, onClose }) {
+    function update(index, patch) {
+        onChange({ ...view, filters: { ...view.filters, rules: view.filters.rules.map((rule, i) => i === index ? { ...rule, ...patch } : rule) } });
+    }
+    return _jsxs(PanelShell, { title: "\u7BE9\u9078\u689D\u4EF6", onClose: onClose, children: [_jsxs("div", { className: "hy-dv-conjunction", children: [_jsx("span", { children: "\u689D\u4EF6\u95DC\u4FC2" }), _jsxs("select", { value: view.filters.conjunction, onChange: (event) => onChange({ ...view, filters: { ...view.filters, conjunction: event.target.value } }), children: [_jsx("option", { value: "and", children: "\u5168\u90E8\u7B26\u5408\uFF08AND\uFF09" }), _jsx("option", { value: "or", children: "\u4EFB\u4E00\u7B26\u5408\uFF08OR\uFF09" })] })] }), _jsxs("div", { className: "hy-dv-rules", children: [view.filters.rules.map((rule, index) => {
+                        const field = fields.find((item) => item.id === rule.fieldId) ?? fields[0];
+                        const operators = getFieldTypeDefinition(field.type).operators;
+                        return _jsxs("div", { className: "hy-dv-rule hy-dv-filter-rule", children: [_jsx("select", { value: rule.fieldId, onChange: (event) => {
+                                        const nextField = fields.find((item) => item.id === event.target.value);
+                                        update(index, { fieldId: nextField.id, operator: getFieldTypeDefinition(nextField.type).operators[0], value: undefined });
+                                    }, children: fields.map((item) => _jsx("option", { value: item.id, children: item.label }, item.id)) }), _jsx("select", { value: rule.operator, onChange: (event) => update(index, { operator: event.target.value }), children: operators.map((operator) => _jsx("option", { value: operator, children: FILTER_OPERATOR_LABELS[operator] }, operator)) }), _jsx(FilterValueInput, { field: field, rule: rule, onChange: (value) => update(index, { value }) }), _jsx("button", { type: "button", onClick: () => onChange({ ...view, filters: { ...view.filters, rules: view.filters.rules.filter((_, i) => i !== index) } }), children: "\u79FB\u9664" })] }, rule.id);
+                    }), _jsx("button", { type: "button", className: "hy-dv-add", disabled: fields.length === 0 || view.filters.rules.length >= 20, onClick: () => {
+                            const field = fields[0];
+                            if (!field)
+                                return;
+                            onChange({ ...view, filters: { ...view.filters, rules: [...view.filters.rules, { id: createRuleId(), fieldId: field.id, operator: getFieldTypeDefinition(field.type).operators[0] }] } });
+                        }, children: "\uFF0B \u589E\u52A0\u689D\u4EF6" })] })] });
+}
+function ColumnPanel({ fields, view, onChange, onClose, dragged, setDragged, drop }) {
+    const definitions = new Map(fields.map((field) => [field.id, field]));
+    const visibleCount = view.columns.filter((column) => column.visible).length;
+    function update(fieldId, patch) { onChange({ ...view, columns: view.columns.map((column) => column.fieldId === fieldId ? { ...column, ...patch } : column) }); }
+    function move(fieldId, direction) {
+        const columns = moveColumnSetting(view.columns, fieldId, direction);
+        if (columns !== view.columns)
+            onChange({ ...view, columns });
+    }
+    return _jsxs(PanelShell, { title: "\u96FB\u8166\u8868\u683C\u6B04\u4F4D", onClose: onClose, children: [_jsx("p", { children: "\u8ABF\u6574\u672C\u8996\u5716\u96FB\u8166\u8868\u683C\u8207\u7518\u7279\u5DE6\u8868\u7684\u6B04\u4F4D\uFF1B\u4E0D\u6703\u8986\u84CB\u624B\u6A5F\u986F\u793A\u6B04\u4F4D\u3002\u53EF\u62D6\u66F3\u6216\u7528\u6309\u9215\u6392\u5E8F\uFF1B\u56FA\u5B9A\u6B04\u4F4D\u7DAD\u6301\u5DE6\u53F3\u5340\u57DF\uFF0C\u79FB\u52D5\u9650\u540C\u4E00\u56FA\u5B9A\u5340\u57DF\u3002\u5BEC\u5EA6 56\u2013600px\u3002" }), _jsx("div", { className: "hy-dv-column-list", children: view.columns.map((column) => {
+                    const label = definitions.get(column.fieldId)?.label ?? "未命名欄位";
+                    const peers = columnMovePeers(view.columns, column.fieldId);
+                    const index = peers.findIndex((peer) => peer.fieldId === column.fieldId);
+                    return _jsxs("div", { draggable: true, onDragStart: () => setDragged(column.fieldId), onDragEnd: () => setDragged(null), onDragOver: (event) => event.preventDefault(), onDrop: () => drop(column.fieldId), className: dragged === column.fieldId ? "is-dragging" : "", children: [_jsx("span", { className: "hy-dv-drag", "aria-hidden": true, children: "\u283F" }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: column.visible, disabled: column.visible && visibleCount === 1, onChange: (event) => update(column.fieldId, { visible: event.target.checked }) }), _jsx("span", { children: label })] }), _jsxs("select", { "aria-label": `${label}固定位置`, value: column.pinned ?? "none", onChange: (event) => update(column.fieldId, { pinned: event.target.value === "none" ? null : event.target.value }), children: [_jsx("option", { value: "none", children: "\u4E0D\u56FA\u5B9A" }), _jsx("option", { value: "left", children: "\u56FA\u5B9A\u5DE6\u5074" }), _jsx("option", { value: "right", children: "\u56FA\u5B9A\u53F3\u5074" })] }), _jsx("input", { "aria-label": `${label}欄寬`, type: "number", min: 56, max: 600, value: column.width, onChange: (event) => update(column.fieldId, { width: normalizeColumnWidth(Number(event.target.value)) }) }), _jsxs("div", { className: "hy-dv-field-order-actions", children: [_jsx("button", { type: "button", title: "\u79FB\u5230\u6700\u4E0A", "aria-label": `移到最上 ${label}`, disabled: index <= 0, onClick: () => move(column.fieldId, "first"), children: "\u21C8" }), _jsx("button", { type: "button", title: "\u4E0A\u79FB", "aria-label": `上移 ${label}`, disabled: index <= 0, onClick: () => move(column.fieldId, "previous"), children: "\u2191" }), _jsx("button", { type: "button", title: "\u4E0B\u79FB", "aria-label": `下移 ${label}`, disabled: index < 0 || index === peers.length - 1, onClick: () => move(column.fieldId, "next"), children: "\u2193" }), _jsx("button", { type: "button", title: "\u79FB\u5230\u6700\u4E0B", "aria-label": `移到最下 ${label}`, disabled: index < 0 || index === peers.length - 1, onClick: () => move(column.fieldId, "last"), children: "\u21CA" })] })] }, column.fieldId);
+                }) })] });
+}
+function SaveBadge({ state, prefix, message }) {
+    if (state === "idle")
+        return null;
+    const labels = { saving: "儲存中…", saved: "已儲存", failed: "儲存失敗", conflict: "版本衝突", readonly: "唯讀" };
+    return _jsxs("small", { className: `hy-dv-save is-${state}`, role: "status", title: message, children: [prefix ? `${prefix}：` : "", labels[state]] });
+}
+function StateCard({ title, message, tone = "normal" }) {
+    return _jsxs("div", { className: `hy-dv-state is-${tone}`, role: tone === "error" ? "alert" : "status", children: [_jsx("strong", { children: title }), _jsx("p", { children: message })] });
+}
+function LoadingState() {
+    return _jsxs("div", { className: "hy-dv-loading", "aria-label": "\u8F09\u5165\u4E2D", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] });
+}
+function collectGroupKeys(nodes) {
+    return nodes.flatMap((node) => node.fieldId ? [node.key, ...collectGroupKeys(node.children)] : collectGroupKeys(node.children));
+}
+function createRuleId() {
+    return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `filter-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function flattenGroups(nodes, collapsed) {
+    const result = [];
+    for (const node of nodes) {
+        if (node.fieldId)
+            result.push({ kind: "group", node });
+        if (collapsed.has(node.key))
+            continue;
+        if (node.children.length)
+            result.push(...flattenGroups(node.children, collapsed));
+        else
+            for (const row of node.rows)
+                result.push({ kind: "row", row });
+    }
+    return result;
+}
+//# sourceMappingURL=data-view.js.map