@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/DynamicTable.stories.js

@@ -0,0 +1,233 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import DynamicTable from "./DynamicTable.js";
+import { TableEvents } from "./types/index.js";
+import { dispatch, useEventHandlers } from "./events/events.js";
+import { I18nProvider } from "@open-mercato/shared/lib/i18n/context";
+const meta = {
+  title: "Components/DynamicTable",
+  component: DynamicTable,
+  parameters: {
+    layout: "padded"
+  },
+  // Some sub-components (e.g. the Configure-View sheet) call `useT()`, which
+  // requires an I18nProvider. Storybook has no app shell, so supply one here.
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx(I18nProvider, { locale: "en", dict: {}, children: /* @__PURE__ */ jsx(Story, {}) })
+  ]
+};
+var DynamicTable_stories_default = meta;
+const generateData = (count) => {
+  const departments = ["Engineering", "Marketing", "Sales", "HR", "Finance", "Operations", "Legal"];
+  const statuses = ["Active", "Inactive", "Pending", "On Leave"];
+  const countries = ["USA", "UK", "Canada", "Germany", "France", "Japan", "Australia"];
+  const roles = ["Junior", "Mid", "Senior", "Lead", "Manager", "Director"];
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Person ${i + 1}`,
+    email: `person${i + 1}@company.com`,
+    age: 22 + Math.floor(Math.random() * 40),
+    department: departments[Math.floor(Math.random() * departments.length)],
+    country: countries[Math.floor(Math.random() * countries.length)],
+    role: roles[Math.floor(Math.random() * roles.length)],
+    startDate: `202${Math.floor(Math.random() * 5)}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, "0")}`,
+    salary: 45e3 + Math.floor(Math.random() * 8e4),
+    active: Math.random() > 0.25,
+    status: statuses[Math.floor(Math.random() * statuses.length)]
+  }));
+};
+const getColumnActions = (column, colIndex) => [
+  { id: "sort-asc", label: "Sort Ascending", icon: "\u2191" },
+  { id: "sort-desc", label: "Sort Descending", icon: "\u2193" },
+  { id: "separator-1", label: "", separator: true },
+  { id: "hide", label: "Hide Column", icon: "\u{1F441}\uFE0F" },
+  { id: "freeze", label: "Freeze Column", icon: "\u{1F4CC}" }
+];
+const getRowActions = (rowData, rowIndex) => [
+  { id: "edit", label: "Edit Row", icon: "\u270F\uFE0F" },
+  { id: "duplicate", label: "Duplicate", icon: "\u{1F4CB}" },
+  { id: "separator-1", label: "", separator: true },
+  { id: "delete", label: "Delete Row", icon: "\u{1F5D1}\uFE0F" }
+];
+const getV2Columns = () => [
+  { data: "name", width: 180, title: "Name" },
+  { data: "email", width: 220, title: "Email", mono: true },
+  {
+    data: "department",
+    width: 130,
+    title: "Department",
+    badge: true,
+    badgeMap: { Engineering: "info", Marketing: "purple", Sales: "teal", HR: "orange", Finance: "primary", Operations: "sky", Legal: "rose" }
+  },
+  // Dropdown cell — the value is picked from a fixed list of options.
+  {
+    data: "country",
+    width: 150,
+    title: "Country",
+    type: "dropdown",
+    source: ["USA", "UK", "Canada", "Germany", "France", "Japan", "Australia"]
+  },
+  { data: "startDate", width: 120, title: "Start Date", type: "date", mono: true },
+  { data: "salary", width: 130, title: "Salary", type: "numeric", mono: true, align: "right" },
+  {
+    data: "status",
+    width: 120,
+    title: "Status",
+    badge: true,
+    badgeMap: { Active: "success", Inactive: "neutral", Pending: "warning", "On Leave": "info" }
+  }
+];
+const v2Columns = getV2Columns().map((c) => c.data);
+const getV2Perspectives = () => [
+  {
+    id: "default",
+    name: "Widok domy\u015Blny",
+    columns: { visible: v2Columns, hidden: [] },
+    filters: [],
+    sorting: []
+  },
+  {
+    id: "active-only",
+    name: "Tylko aktywni",
+    color: "green",
+    columns: {
+      visible: ["name", "department", "salary", "status"],
+      hidden: ["email", "country", "startDate"]
+    },
+    filters: [{ id: "f-status", field: "status", operator: "equals", values: ["Active"] }],
+    sorting: []
+  },
+  {
+    id: "by-department",
+    name: "Wg dzia\u0142u",
+    color: "blue",
+    columns: {
+      visible: ["name", "department", "country", "salary", "status"],
+      hidden: ["email", "startDate"]
+    },
+    filters: [],
+    sorting: [{ id: "s-dept", field: "department", direction: "asc" }]
+  }
+];
+const V2Demo = () => {
+  const tableRef = useRef(null);
+  const [allData, setAllData] = useState(() => generateData(50).map((r) => ({
+    ...r,
+    country: r.id % 4 === 0 ? "" : r.country,
+    email: r.id % 5 === 0 ? "" : r.email
+  })));
+  const [currentPage, setCurrentPage] = useState(1);
+  const [limit, setLimit] = useState(25);
+  const [perspectives, setPerspectives] = useState(() => getV2Perspectives());
+  const [activePerspectiveId, setActivePerspectiveId] = useState("default");
+  useEventHandlers({
+    // Inline cell edit (e.g. the Country dropdown) — persist the picked
+    // value back into the data set and acknowledge the save.
+    [TableEvents.CELL_EDIT_SAVE]: (payload) => {
+      const absolute = (currentPage - 1) * limit + payload.rowIndex;
+      setAllData(
+        (prev) => prev.map((r, i) => i === absolute ? { ...r, [payload.prop]: payload.newValue } : r)
+      );
+      if (tableRef.current) {
+        dispatch(tableRef.current, TableEvents.CELL_SAVE_SUCCESS, {
+          rowIndex: payload.rowIndex,
+          colIndex: payload.colIndex
+        });
+      }
+    },
+    [TableEvents.PERSPECTIVE_SELECT]: (payload) => {
+      setActivePerspectiveId(payload.id);
+    },
+    [TableEvents.PERSPECTIVE_RENAME]: (payload) => {
+      setPerspectives(
+        (prev) => prev.map((p) => p.id === payload.id ? { ...p, name: payload.newName } : p)
+      );
+    },
+    [TableEvents.PERSPECTIVE_DELETE]: (payload) => {
+      setPerspectives((prev) => prev.filter((p) => p.id !== payload.id));
+      setActivePerspectiveId((cur) => cur === payload.id ? null : cur);
+    }
+  }, tableRef);
+  const totalPages = Math.ceil(allData.length / limit);
+  const startIndex = (currentPage - 1) * limit;
+  const data = allData.slice(startIndex, startIndex + limit);
+  return /* @__PURE__ */ jsx(
+    DynamicTable,
+    {
+      tableRef,
+      striped: true,
+      data,
+      columns: getV2Columns(),
+      colHeaders: true,
+      rowHeaders: true,
+      height: 500,
+      tableName: "Folders",
+      idColumnName: "id",
+      columnActions: getColumnActions,
+      rowActions: getRowActions,
+      savedPerspectives: perspectives,
+      activePerspectiveId,
+      pagination: {
+        currentPage,
+        totalPages,
+        limit,
+        total: allData.length,
+        limitOptions: [10, 25, 50, 100],
+        onPageChange: (p) => setCurrentPage(Math.max(1, Math.min(p, totalPages))),
+        onLimitChange: (l) => {
+          setLimit(l);
+          setCurrentPage(1);
+        }
+      }
+    }
+  );
+};
+const DynamicTableStory = {
+  name: "DynamicTable",
+  parameters: { backgrounds: { default: "figma-surface" } },
+  render: () => /* @__PURE__ */ jsx(V2Demo, {})
+};
+const hedge119Columns = [
+  { data: "invoiceNumber", title: "Invoice no." },
+  { data: "counterparty", title: "Counterparty" },
+  { data: "grossAmount", title: "Gross", type: "numeric" }
+];
+const EmptyBecauseThereIsNothing = {
+  render: () => {
+    const tableRef = useRef(null);
+    return /* @__PURE__ */ jsx(
+      DynamicTable,
+      {
+        data: [],
+        columns: hedge119Columns,
+        tableRef,
+        tableName: "Invoices",
+        height: 420
+      }
+    );
+  }
+};
+const EmptyBecauseTheRequestFailed = {
+  render: () => {
+    const tableRef = useRef(null);
+    return /* @__PURE__ */ jsx(
+      DynamicTable,
+      {
+        data: [],
+        columns: hedge119Columns,
+        tableRef,
+        tableName: "Invoices",
+        height: 420,
+        loadError: true,
+        onRetryLoad: () => window.alert("retry fired")
+      }
+    );
+  }
+};
+export {
+  DynamicTableStory,
+  EmptyBecauseTheRequestFailed,
+  EmptyBecauseThereIsNothing,
+  DynamicTable_stories_default as default
+};
+//# sourceMappingURL=DynamicTable.stories.js.map

package/dist/backend/dynamic-table/DynamicTable.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/dynamic-table/DynamicTable.stories.tsx"],
+  "sourcesContent": ["// DynamicTable.stories.tsx\n\nimport React, { useState, useCallback, useRef } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport DynamicTable from './DynamicTable';\nimport { TableEvents } from './types/index';\nimport { dispatch, useEventHandlers } from './events/events';\nimport { I18nProvider } from '@open-mercato/shared/lib/i18n/context';\nimport type {\n    ContextMenuAction,\n    ColumnDef,\n    SavedFilter,\n    PerspectiveConfig,\n} from './types/index';\n\nconst meta: Meta<typeof DynamicTable> = {\n    title: 'Components/DynamicTable',\n    component: DynamicTable,\n    parameters: {\n        layout: 'padded',\n    },\n    // Some sub-components (e.g. the Configure-View sheet) call `useT()`, which\n    // requires an I18nProvider. Storybook has no app shell, so supply one here.\n    decorators: [\n        (Story) => (\n            <I18nProvider locale=\"en\" dict={{}}>\n                <Story />\n            </I18nProvider>\n        ),\n    ],\n};\n\nexport default meta;\n\n// ============================================================================\n// DATA GENERATOR\n// ============================================================================\n\nconst generateData = (count: number) => {\n    const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations', 'Legal'];\n    const statuses = ['Active', 'Inactive', 'Pending', 'On Leave'];\n    const countries = ['USA', 'UK', 'Canada', 'Germany', 'France', 'Japan', 'Australia'];\n    const roles = ['Junior', 'Mid', 'Senior', 'Lead', 'Manager', 'Director'];\n\n    return Array.from({ length: count }, (_, i) => ({\n        id: i + 1,\n        name: `Person ${i + 1}`,\n        email: `person${i + 1}@company.com`,\n        age: 22 + Math.floor(Math.random() * 40),\n        department: departments[Math.floor(Math.random() * departments.length)],\n        country: countries[Math.floor(Math.random() * countries.length)],\n        role: roles[Math.floor(Math.random() * roles.length)],\n        startDate: `202${Math.floor(Math.random() * 5)}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,\n        salary: 45000 + Math.floor(Math.random() * 80000),\n        active: Math.random() > 0.25,\n        status: statuses[Math.floor(Math.random() * statuses.length)],\n    }));\n};\n\n// ============================================================================\n// CONTEXT MENU ACTIONS\n// ============================================================================\n\nconst getColumnActions = (column: ColumnDef, colIndex: number): ContextMenuAction[] => [\n    { id: 'sort-asc', label: 'Sort Ascending', icon: '\u2191' },\n    { id: 'sort-desc', label: 'Sort Descending', icon: '\u2193' },\n    { id: 'separator-1', label: '', separator: true },\n    { id: 'hide', label: 'Hide Column', icon: '\uD83D\uDC41\uFE0F' },\n    { id: 'freeze', label: 'Freeze Column', icon: '\uD83D\uDCCC' },\n];\n\nconst getRowActions = (rowData: any, rowIndex: number): ContextMenuAction[] => [\n    { id: 'edit', label: 'Edit Row', icon: '\u270F\uFE0F' },\n    { id: 'duplicate', label: 'Duplicate', icon: '\uD83D\uDCCB' },\n    { id: 'separator-1', label: '', separator: true },\n    { id: 'delete', label: 'Delete Row', icon: '\uD83D\uDDD1\uFE0F' },\n];\n\n// ============================================================================\n// STORY 2: V2 APPEARANCE (Figma parity \u2014 phase 1 re-skin)\n// ============================================================================\n// Exercises appearance=\"v2\": maps --hot-* onto the -v2 design tokens (navy/teal,\n// Geist). Phase 1 is re-skin only \u2014 status badges / mono cells / left accent\n// rail / density land in later phases, so badge columns here still render as\n// plain text. Compare against .ai/figma-snapshots/data-table/ANALYSIS.md.\n\n// v2 column set \u2014 exercises the phase-2 cell types: mono (id/email/date),\n// right-aligned numbers, status badges (department/status), and em-dash for\n// the blanked-out cells below.\nconst getV2Columns = (): ColumnDef[] => [\n    { data: 'name', width: 180, title: 'Name' },\n    { data: 'email', width: 220, title: 'Email', mono: true },\n    {\n        data: 'department', width: 130, title: 'Department', badge: true,\n        badgeMap: { Engineering: 'info', Marketing: 'purple', Sales: 'teal', HR: 'orange', Finance: 'primary', Operations: 'sky', Legal: 'rose' },\n    },\n    // Dropdown cell \u2014 the value is picked from a fixed list of options.\n    {\n        data: 'country', width: 150, title: 'Country', type: 'dropdown',\n        source: ['USA', 'UK', 'Canada', 'Germany', 'France', 'Japan', 'Australia'],\n    },\n    { data: 'startDate', width: 120, title: 'Start Date', type: 'date', mono: true },\n    { data: 'salary', width: 130, title: 'Salary', type: 'numeric', mono: true, align: 'right' },\n    {\n        data: 'status', width: 120, title: 'Status', badge: true,\n        badgeMap: { Active: 'success', Inactive: 'neutral', Pending: 'warning', 'On Leave': 'info' },\n    },\n];\n\n// Saved views (perspectives) \u2014 exercises the top-tabs perspective bar.\n// Polish copy mirrors the Figma frame (\"Widok domy\u015Blny\", \"Dodaj widok +\").\nconst v2Columns = getV2Columns().map((c) => c.data);\nconst getV2Perspectives = (): PerspectiveConfig[] => [\n    {\n        id: 'default',\n        name: 'Widok domy\u015Blny',\n        columns: { visible: v2Columns, hidden: [] },\n        filters: [],\n        sorting: [],\n    },\n    {\n        id: 'active-only',\n        name: 'Tylko aktywni',\n        color: 'green',\n        columns: {\n            visible: ['name', 'department', 'salary', 'status'],\n            hidden: ['email', 'country', 'startDate'],\n        },\n        filters: [{ id: 'f-status', field: 'status', operator: 'equals', values: ['Active'] }],\n        sorting: [],\n    },\n    {\n        id: 'by-department',\n        name: 'Wg dzia\u0142u',\n        color: 'blue',\n        columns: {\n            visible: ['name', 'department', 'country', 'salary', 'status'],\n            hidden: ['email', 'startDate'],\n        },\n        filters: [],\n        sorting: [{ id: 's-dept', field: 'department', direction: 'asc' }],\n    },\n];\n\nconst V2Demo = () => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    // Blank a few cells to show the em-dash empty treatment.\n    const [allData, setAllData] = useState(() => generateData(50).map((r) => ({\n        ...r,\n        country: r.id % 4 === 0 ? '' : r.country,\n        email: r.id % 5 === 0 ? '' : r.email,\n    })));\n    const [currentPage, setCurrentPage] = useState(1);\n    const [limit, setLimit] = useState(25);\n\n    // Perspectives (saved views) \u2014 controlled via the PERSPECTIVE_* events.\n    const [perspectives, setPerspectives] = useState<PerspectiveConfig[]>(() => getV2Perspectives());\n    const [activePerspectiveId, setActivePerspectiveId] = useState<string | null>('default');\n\n    useEventHandlers({\n        // Inline cell edit (e.g. the Country dropdown) \u2014 persist the picked\n        // value back into the data set and acknowledge the save.\n        [TableEvents.CELL_EDIT_SAVE]: (payload) => {\n            const absolute = (currentPage - 1) * limit + payload.rowIndex;\n            setAllData((prev) =>\n                prev.map((r, i) => (i === absolute ? { ...r, [payload.prop]: payload.newValue } : r))\n            );\n            if (tableRef.current) {\n                dispatch(tableRef.current, TableEvents.CELL_SAVE_SUCCESS, {\n                    rowIndex: payload.rowIndex,\n                    colIndex: payload.colIndex,\n                });\n            }\n        },\n        [TableEvents.PERSPECTIVE_SELECT]: (payload) => {\n            setActivePerspectiveId(payload.id);\n        },\n        [TableEvents.PERSPECTIVE_RENAME]: (payload) => {\n            setPerspectives((prev) =>\n                prev.map((p) => (p.id === payload.id ? { ...p, name: payload.newName } : p))\n            );\n        },\n        [TableEvents.PERSPECTIVE_DELETE]: (payload) => {\n            setPerspectives((prev) => prev.filter((p) => p.id !== payload.id));\n            setActivePerspectiveId((cur) => (cur === payload.id ? null : cur));\n        },\n    }, tableRef);\n\n    const totalPages = Math.ceil(allData.length / limit);\n    const startIndex = (currentPage - 1) * limit;\n    const data = allData.slice(startIndex, startIndex + limit);\n\n    return (\n        <DynamicTable\n            tableRef={tableRef}\n            striped\n            data={data}\n            columns={getV2Columns()}\n            colHeaders\n            rowHeaders\n            height={500}\n            tableName=\"Folders\"\n            idColumnName=\"id\"\n            columnActions={getColumnActions}\n            rowActions={getRowActions}\n            savedPerspectives={perspectives}\n            activePerspectiveId={activePerspectiveId}\n            pagination={{\n                currentPage,\n                totalPages,\n                limit,\n                total: allData.length,\n                limitOptions: [10, 25, 50, 100],\n                onPageChange: (p) => setCurrentPage(Math.max(1, Math.min(p, totalPages))),\n                onLimitChange: (l) => { setLimit(l); setCurrentPage(1); },\n            }}\n        />\n    );\n};\n\nexport const DynamicTableStory: StoryObj = {\n    name: 'DynamicTable',\n    parameters: { backgrounds: { default: 'figma-surface' } },\n    render: () => <V2Demo />,\n};\n\n// ============================================================================\n// HEDGE-119 \u2014 failed load vs empty table\n// ============================================================================\n//\n// The two stories below carry IDENTICAL empty data. Only `loadError` differs.\n// Before this fix both rendered the same thing \u2014 an Inbox icon and \"Nothing\n// here yet\" \u2014 which is how a 500 on the invoice queue reached an accountant as\n// \"there are no invoices to work on\".\n\nconst hedge119Columns: ColumnDef[] = [\n    { data: 'invoiceNumber', title: 'Invoice no.' },\n    { data: 'counterparty', title: 'Counterparty' },\n    { data: 'grossAmount', title: 'Gross', type: 'numeric' },\n];\n\n/** The server truthfully returned zero rows. */\nexport const EmptyBecauseThereIsNothing: StoryObj = {\n    render: () => {\n        const tableRef = useRef<HTMLDivElement | null>(null);\n        return (\n            <DynamicTable\n                data={[]}\n                columns={hedge119Columns}\n                tableRef={tableRef}\n                tableName=\"Invoices\"\n                height={420}\n            />\n        );\n    },\n};\n\n/** The list request FAILED. Same empty data, different truth. */\nexport const EmptyBecauseTheRequestFailed: StoryObj = {\n    render: () => {\n        const tableRef = useRef<HTMLDivElement | null>(null);\n        return (\n            <DynamicTable\n                data={[]}\n                columns={hedge119Columns}\n                tableRef={tableRef}\n                tableName=\"Invoices\"\n                height={420}\n                loadError\n                onRetryLoad={() => window.alert('retry fired')}\n            />\n        );\n    },\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ActiveFilterChips.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { getOperatorsForType, needsValueInput } from "../types/filters.js";
+const OPERATOR_FALLBACKS = (() => {
+  const out = {};
+  for (const type of ["text", "numeric", "boolean", "date"]) {
+    for (const op of getOperatorsForType(type)) out[op.value] = op.label;
+  }
+  return out;
+})();
+function ruleSummary(t, rule) {
+  const operatorLabel = t(
+    `dynamicTable.filter.operator.${rule.operator}`,
+    OPERATOR_FALLBACKS[rule.operator] ?? rule.operator
+  );
+  if (!needsValueInput(rule.operator)) return operatorLabel;
+  const values = (rule.values ?? []).map((v) => String(v ?? "")).filter(Boolean);
+  if (values.length === 0) return t("dynamicTable.filter.anyValue", "any");
+  return values.join(", ");
+}
+const ActiveFilterChips = ({ filters, columns, onRemove }) => {
+  const t = useT();
+  if (!filters.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "hot-filter-chips", role: "list", "data-filter-chips": "", children: filters.map((rule) => {
+    const label = columns.find((c) => c.data === rule.field)?.title ?? rule.field;
+    const summary = ruleSummary(t, rule);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "hot-filter-chip",
+        role: "listitem",
+        "data-filter-chip": rule.field,
+        title: `${label}: ${summary}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "hot-filter-chip-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "hot-filter-chip-value", children: summary }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hot-filter-chip-remove",
+              "data-filter-chip-remove": rule.field,
+              "aria-label": t("dynamicTable.filter.removeFilter", "Remove filter: {label}", { label }),
+              onClick: () => onRemove(rule.id),
+              children: /* @__PURE__ */ jsx(X, { size: 11, strokeWidth: 2.25, "aria-hidden": "true" })
+            }
+          )
+        ]
+      },
+      rule.id
+    );
+  }) });
+};
+var ActiveFilterChips_default = ActiveFilterChips;
+export {
+  ActiveFilterChips,
+  ActiveFilterChips_default as default
+};
+//# sourceMappingURL=ActiveFilterChips.js.map

package/dist/backend/dynamic-table/components/ActiveFilterChips.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ActiveFilterChips.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { X } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { getOperatorsForType, needsValueInput, type FilterOperator } from '../types/filters';\nimport type { ColumnDef, FilterRow } from '../types/index';\n\n/**\n * The live quick filters, named \u2014 one chip each, in the toolbar row that is\n * already there.\n *\n * WHY IT EXISTS: before this, \"Clear all filters (3)\" was the ONLY toolbar\n * evidence that the grid was narrowed, and it says how MANY rules are running,\n * never which. Answering \"why am I not seeing that shipment?\" meant opening the\n * Configure View drawer. The chips answer it in place, and each one removes its\n * own rule without touching the others \u2014 which \"Clear all\" cannot do.\n *\n * WHY IT ADDS NO ROW: the strip renders INSIDE `.hot-toolbar-actions`,\n * immediately before the clear-all button, and scrolls horizontally when the\n * rules outgrow it (`.hot-filter-chips` in `styles/SearchBar.css`). The grid's\n * height math is a density budget \u2014 a second row of chrome would spend rows per\n * screen, which is the thing these tables exist to maximise.\n *\n * ONE CHIP FORM. Every filter that reaches here is ad-hoc and TEMPORARY: quick\n * filters are never written to the saved view (A2/D6), so there is no\n * \"saved filter\" chip to distinguish. A second variant would be a state the\n * product cannot produce.\n */\n\nexport type ActiveFilterChipsProps = {\n  /** The grid's live filter rows \u2014 the same array `Clear all` empties. */\n  filters: FilterRow[];\n  /**\n   * Columns used only to name a field. Pass the BASE column set, not the\n   * visible one: a filter on a column the user has since hidden is exactly the\n   * filter that most needs naming.\n   */\n  columns: ColumnDef[];\n  /** Remove one rule, by `FilterRow.id`. */\n  onRemove: (filterId: string) => void;\n};\n\n/**\n * Operator \u2192 English fallback, flattened once from the same source the filter\n * editors read, so a chip can never disagree with the popover that wrote the\n * rule about what an operator is called.\n */\nconst OPERATOR_FALLBACKS: Record<string, string> = (() => {\n  const out: Record<string, string> = {};\n  for (const type of ['text', 'numeric', 'boolean', 'date'] as const) {\n    for (const op of getOperatorsForType(type)) out[op.value] = op.label;\n  }\n  return out;\n})();\n\ntype Translate = ReturnType<typeof useT>;\n\n/** What the chip says after the field name. Never longer than the chip. */\nfunction ruleSummary(t: Translate, rule: FilterRow): string {\n  const operatorLabel = t(\n    `dynamicTable.filter.operator.${rule.operator}`,\n    OPERATOR_FALLBACKS[rule.operator] ?? rule.operator,\n  );\n  // Value-less operators (\"is empty\", \"overdue\") ARE the summary.\n  if (!needsValueInput(rule.operator as FilterOperator)) return operatorLabel;\n  const values = (rule.values ?? []).map((v) => String(v ?? '')).filter(Boolean);\n  // A rule the user opened but never filled still narrows nothing \u2014 say so\n  // rather than showing an empty chip that looks like a rendering bug.\n  if (values.length === 0) return t('dynamicTable.filter.anyValue', 'any');\n  return values.join(', ');\n}\n\nexport const ActiveFilterChips: React.FC<ActiveFilterChipsProps> = ({ filters, columns, onRemove }) => {\n  const t = useT();\n  if (!filters.length) return null;\n\n  return (\n    <div className=\"hot-filter-chips\" role=\"list\" data-filter-chips=\"\">\n      {filters.map((rule) => {\n        const label = columns.find((c) => c.data === rule.field)?.title ?? rule.field;\n        const summary = ruleSummary(t, rule);\n        return (\n          <span\n            key={rule.id}\n            className=\"hot-filter-chip\"\n            role=\"listitem\"\n            data-filter-chip={rule.field}\n            title={`${label}: ${summary}`}\n          >\n            <span className=\"hot-filter-chip-label\">{label}</span>\n            <span className=\"hot-filter-chip-value\">{summary}</span>\n            {/* The trailing \"\u00D7\" lives INSIDE the chip \u2014 an M3 input chip, not a\n                chip plus a second bordered button beside it. */}\n            <button\n              type=\"button\"\n              className=\"hot-filter-chip-remove\"\n              data-filter-chip-remove={rule.field}\n              aria-label={t('dynamicTable.filter.removeFilter', 'Remove filter: {label}', { label })}\n              onClick={() => onRemove(rule.id)}\n            >\n              <X size={11} strokeWidth={2.25} aria-hidden=\"true\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ActiveFilterChips;\n"],
+  "mappings": "AAiFU,SAOE,KAPF;AAhFV,SAAS,SAAS;AAClB,SAAS,YAAY;AACrB,SAAS,qBAAqB,uBAA4C;AA2C1E,MAAM,sBAA8C,MAAM;AACxD,QAAM,MAA8B,CAAC;AACrC,aAAW,QAAQ,CAAC,QAAQ,WAAW,WAAW,MAAM,GAAY;AAClE,eAAW,MAAM,oBAAoB,IAAI,EAAG,KAAI,GAAG,KAAK,IAAI,GAAG;AAAA,EACjE;AACA,SAAO;AACT,GAAG;AAKH,SAAS,YAAY,GAAc,MAAyB;AAC1D,QAAM,gBAAgB;AAAA,IACpB,gCAAgC,KAAK,QAAQ;AAAA,IAC7C,mBAAmB,KAAK,QAAQ,KAAK,KAAK;AAAA,EAC5C;AAEA,MAAI,CAAC,gBAAgB,KAAK,QAA0B,EAAG,QAAO;AAC9D,QAAM,UAAU,KAAK,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,OAAO,KAAK,EAAE,CAAC,EAAE,OAAO,OAAO;AAG7E,MAAI,OAAO,WAAW,EAAG,QAAO,EAAE,gCAAgC,KAAK;AACvE,SAAO,OAAO,KAAK,IAAI;AACzB;AAEO,MAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,SAAS,MAAM;AACrG,QAAM,IAAI,KAAK;AACf,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACE,oBAAC,SAAI,WAAU,oBAAmB,MAAK,QAAO,qBAAkB,IAC7D,kBAAQ,IAAI,CAAC,SAAS;AACrB,UAAM,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK,KAAK,GAAG,SAAS,KAAK;AACxE,UAAM,UAAU,YAAY,GAAG,IAAI;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,oBAAkB,KAAK;AAAA,QACvB,OAAO,GAAG,KAAK,KAAK,OAAO;AAAA,QAE3B;AAAA,8BAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,UAC/C,oBAAC,UAAK,WAAU,yBAAyB,mBAAQ;AAAA,UAGjD;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,2BAAyB,KAAK;AAAA,cAC9B,cAAY,EAAE,oCAAoC,0BAA0B,EAAE,MAAM,CAAC;AAAA,cACrF,SAAS,MAAM,SAAS,KAAK,EAAE;AAAA,cAE/B,8BAAC,KAAE,MAAM,IAAI,aAAa,MAAM,eAAY,QAAO;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,MAlBK,KAAK;AAAA,IAmBZ;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,IAAO,4BAAQ;",
+  "names": []
+}

package/dist/backend/dynamic-table/components/BulkActionsBar.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trash2, Copy } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import ExportMenu from "./ExportMenu.js";
+const BulkActionsBar = ({ count, busy, onCopy, onDelete, onExport, onClear, actions, selectedIds }) => {
+  const t = useT();
+  const ids = selectedIds ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "hot-bulk-bar", role: "toolbar", "aria-label": t("dynamicTable.bulk.ariaLabel", "Bulk actions"), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "hot-row-select hot-bulk-bar-checkbox",
+        checked: true,
+        readOnly: true,
+        onClick: onClear,
+        "aria-label": t("dynamicTable.bulk.clear", "Deselect all")
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "hot-bulk-bar-count", children: [
+      count,
+      " ",
+      t("dynamicTable.bulk.selected", "selected")
+    ] }),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "hot-bulk-bar-action", onClick: onCopy, disabled: busy, children: [
+      /* @__PURE__ */ jsx(Copy, { size: 12, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: t("dynamicTable.bulk.copy", "Copy") })
+    ] }),
+    onExport && /* @__PURE__ */ jsx(ExportMenu, { variant: "bulk", onExport, disabled: busy }),
+    onDelete && /* @__PURE__ */ jsxs("button", { type: "button", className: "hot-bulk-bar-action", onClick: onDelete, disabled: busy, children: [
+      /* @__PURE__ */ jsx(Trash2, { size: 12, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: t("dynamicTable.bulk.delete", "Delete") })
+    ] }),
+    actions?.map((action) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "hot-bulk-bar-action",
+        onClick: () => action.onClick(ids),
+        disabled: busy || action.disabled?.(ids),
+        children: [
+          action.icon,
+          /* @__PURE__ */ jsx("span", { children: action.label })
+        ]
+      },
+      action.id
+    )),
+    /* @__PURE__ */ jsx("div", { className: "hot-bulk-bar-spacer" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "hot-bulk-bar-clear", onClick: onClear, disabled: busy, children: t("dynamicTable.bulk.clear", "Deselect all") })
+  ] });
+};
+BulkActionsBar.displayName = "BulkActionsBar";
+var BulkActionsBar_default = BulkActionsBar;
+export {
+  BulkActionsBar_default as default
+};
+//# sourceMappingURL=BulkActionsBar.js.map

package/dist/backend/dynamic-table/components/BulkActionsBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/BulkActionsBar.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React from 'react';\nimport { Trash2, Copy } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport type { BulkActionConfig } from '../types/index';\nimport type { ExportFormat } from '../utils/exportTable';\nimport ExportMenu from './ExportMenu';\n\nexport interface BulkActionsBarProps {\n  /** Number of currently selected rows. */\n  count: number;\n  /** Disables the actions while a bulk operation is in flight. */\n  busy?: boolean;\n  /** Copy the selected rows to the clipboard (TSV). Available for every table. */\n  onCopy: () => void;\n  /**\n   * Run the batch delete over the selected rows. Optional \u2014 some tables don't\n   * support deletion, in which case the Delete action is hidden (Copy stays).\n   */\n  onDelete?: () => void;\n  /**\n   * Export the selected rows to CSV/Excel. Optional \u2014 omitted when the table\n   * disables export, in which case the Export action is hidden.\n   */\n  onExport?: (format: ExportFormat) => void;\n  /** Clear the whole selection (deselect all). */\n  onClear: () => void;\n  /** Per-table custom batch actions, appended after Copy/Delete. */\n  actions?: BulkActionConfig[];\n  /** The currently-selected row ids \u2014 passed to each custom action's callbacks. */\n  selectedIds?: string[];\n}\n\n/**\n * Grouped-actions bar (Figma Frame 546:12289). Sits below the perspective tabs\n * and above the column headers; shown whenever \u22651 row is selected. Carries Copy\n * (always) and Delete (when supported), plus the count + deselect-all.\n */\nconst BulkActionsBar: React.FC<BulkActionsBarProps> = ({ count, busy, onCopy, onDelete, onExport, onClear, actions, selectedIds }) => {\n  const t = useT();\n  const ids = selectedIds ?? [];\n  return (\n    <div className=\"hot-bulk-bar\" role=\"toolbar\" aria-label={t('dynamicTable.bulk.ariaLabel', 'Bulk actions')}>\n      <input\n        type=\"checkbox\"\n        className=\"hot-row-select hot-bulk-bar-checkbox\"\n        checked\n        readOnly\n        onClick={onClear}\n        aria-label={t('dynamicTable.bulk.clear', 'Deselect all')}\n      />\n      <span className=\"hot-bulk-bar-count\">\n        {count} {t('dynamicTable.bulk.selected', 'selected')}\n      </span>\n      <button type=\"button\" className=\"hot-bulk-bar-action\" onClick={onCopy} disabled={busy}>\n        <Copy size={12} aria-hidden=\"true\" />\n        <span>{t('dynamicTable.bulk.copy', 'Copy')}</span>\n      </button>\n      {onExport && <ExportMenu variant=\"bulk\" onExport={onExport} disabled={busy} />}\n      {onDelete && (\n        <button type=\"button\" className=\"hot-bulk-bar-action\" onClick={onDelete} disabled={busy}>\n          <Trash2 size={12} aria-hidden=\"true\" />\n          <span>{t('dynamicTable.bulk.delete', 'Delete')}</span>\n        </button>\n      )}\n      {actions?.map((action) => (\n        <button\n          key={action.id}\n          type=\"button\"\n          className=\"hot-bulk-bar-action\"\n          onClick={() => action.onClick(ids)}\n          disabled={busy || action.disabled?.(ids)}\n        >\n          {action.icon}\n          <span>{action.label}</span>\n        </button>\n      ))}\n      <div className=\"hot-bulk-bar-spacer\" />\n      <button type=\"button\" className=\"hot-bulk-bar-clear\" onClick={onClear} disabled={busy}>\n        {t('dynamicTable.bulk.clear', 'Deselect all')}\n      </button>\n    </div>\n  );\n};\n\nBulkActionsBar.displayName = 'BulkActionsBar';\n\nexport default BulkActionsBar;\n"],
+  "mappings": ";AA4CM,cAQA,YARA;AAzCN,SAAS,QAAQ,YAAY;AAC7B,SAAS,YAAY;AAGrB,OAAO,gBAAgB;AAgCvB,MAAM,iBAAgD,CAAC,EAAE,OAAO,MAAM,QAAQ,UAAU,UAAU,SAAS,SAAS,YAAY,MAAM;AACpI,QAAM,IAAI,KAAK;AACf,QAAM,MAAM,eAAe,CAAC;AAC5B,SACE,qBAAC,SAAI,WAAU,gBAAe,MAAK,WAAU,cAAY,EAAE,+BAA+B,cAAc,GACtG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAO;AAAA,QACP,UAAQ;AAAA,QACR,SAAS;AAAA,QACT,cAAY,EAAE,2BAA2B,cAAc;AAAA;AAAA,IACzD;AAAA,IACA,qBAAC,UAAK,WAAU,sBACb;AAAA;AAAA,MAAM;AAAA,MAAE,EAAE,8BAA8B,UAAU;AAAA,OACrD;AAAA,IACA,qBAAC,YAAO,MAAK,UAAS,WAAU,uBAAsB,SAAS,QAAQ,UAAU,MAC/E;AAAA,0BAAC,QAAK,MAAM,IAAI,eAAY,QAAO;AAAA,MACnC,oBAAC,UAAM,YAAE,0BAA0B,MAAM,GAAE;AAAA,OAC7C;AAAA,IACC,YAAY,oBAAC,cAAW,SAAQ,QAAO,UAAoB,UAAU,MAAM;AAAA,IAC3E,YACC,qBAAC,YAAO,MAAK,UAAS,WAAU,uBAAsB,SAAS,UAAU,UAAU,MACjF;AAAA,0BAAC,UAAO,MAAM,IAAI,eAAY,QAAO;AAAA,MACrC,oBAAC,UAAM,YAAE,4BAA4B,QAAQ,GAAE;AAAA,OACjD;AAAA,IAED,SAAS,IAAI,CAAC,WACb;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM,OAAO,QAAQ,GAAG;AAAA,QACjC,UAAU,QAAQ,OAAO,WAAW,GAAG;AAAA,QAEtC;AAAA,iBAAO;AAAA,UACR,oBAAC,UAAM,iBAAO,OAAM;AAAA;AAAA;AAAA,MAPf,OAAO;AAAA,IAQd,CACD;AAAA,IACD,oBAAC,SAAI,WAAU,uBAAsB;AAAA,IACrC,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,SAAS,UAAU,MAC9E,YAAE,2BAA2B,cAAc,GAC9C;AAAA,KACF;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/backend/dynamic-table/components/Cell.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useCallback } from "react";
+import { useCellStore, useCellState } from "../hooks/index.js";
+import { getCellRenderer } from "./renderers.js";
+import { getCellEditor } from "./editors.js";
+import { conditionalFormatClassName } from "../utils/conditionalFormat.js";
+const Cell = memo(({ row, col, colConfig, ariaColIndex, stickyLeft, stickyRight, frozenRightEdge, onCellSave, onCellContextMenu, annotationColor, commentCount, commentsEnabled, colorAbove, colorBelow, colorLeft, colorRight, compiledFormats }) => {
+  const store = useCellStore();
+  const state = useCellState(row, col);
+  const inputRef = useRef(null);
+  const rowData = store.getRowData(row);
+  const cellValue = rowData?.[colConfig.data];
+  const handleSave = useCallback(
+    (value, clearEditing = true) => {
+      const newValue = value !== void 0 ? value : cellValue;
+      onCellSave(row, col, newValue, clearEditing);
+    },
+    [cellValue, row, col, onCellSave]
+  );
+  const handleCancel = useCallback(() => {
+    store.clearEditing();
+    store.focusTable();
+  }, [store]);
+  const handleChange = useCallback(
+    (value) => {
+    },
+    []
+  );
+  useEffect(() => {
+    if (state.isEditing && inputRef.current) {
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          const supportsSelection = inputRef.current.type === void 0 || // textarea
+          ["text", "password", "search", "tel", "url", "number"].includes(inputRef.current.type);
+          if (supportsSelection && inputRef.current.setSelectionRange) {
+            const length = inputRef.current.value?.length || 0;
+            try {
+              inputRef.current.setSelectionRange(length, length);
+            } catch {
+            }
+          }
+        }
+      }, 0);
+    }
+  }, [state.isEditing]);
+  const minColWidth = colConfig.width || 100;
+  const style = {
+    width: colConfig.width || 100,
+    flexBasis: colConfig.width || 100,
+    minWidth: minColWidth,
+    flexShrink: 0,
+    flexGrow: 0,
+    position: "relative"
+  };
+  if (stickyLeft !== void 0) {
+    style.position = "sticky";
+    style.left = stickyLeft;
+    style.zIndex = 2;
+  } else if (stickyRight !== void 0) {
+    style.position = "sticky";
+    style.right = stickyRight;
+    style.zIndex = 2;
+  }
+  const renderer = getCellRenderer(colConfig);
+  const renderedValue = renderer(cellValue, rowData, colConfig, row, col);
+  const hasCustomRenderer = typeof colConfig.renderer === "function";
+  const conditionalClassName = colConfig.cellClassName?.(cellValue, rowData, row, col) || (compiledFormats ? conditionalFormatClassName(compiledFormats, colConfig.data, cellValue, rowData) : void 0) || "";
+  const alignClass = colConfig.align ? `cell-align-${colConfig.align}` : "";
+  const monoClass = colConfig.mono ? "cell-mono" : "";
+  const selectClass = colConfig.type === "dropdown" || colConfig.type === "multiselect" ? "cell-select" : "";
+  const showFillHandle = state.isFillOrigin;
+  const isSoleSelectedCell = state.isSelected || state.isInRange && !!state.rangeEdges.top && !!state.rangeEdges.bottom && !!state.rangeEdges.left && !!state.rangeEdges.right;
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      className: `hot-cell ${colConfig.readOnly ? "read-only" : ""} ${conditionalClassName} ${annotationColor ? `cell-color-${annotationColor}` : ""} ${alignClass} ${monoClass} ${selectClass}`.replace(/\s+/g, " ").trim(),
+      style,
+      "data-row": row,
+      "data-col": col,
+      "aria-colindex": ariaColIndex,
+      "data-cell-selected": state.isSelected,
+      "data-in-range": state.isInRange,
+      "data-range-top": state.rangeEdges.top,
+      "data-range-bottom": state.rangeEdges.bottom,
+      "data-range-left": state.rangeEdges.left,
+      "data-range-right": state.rangeEdges.right,
+      "data-fill-preview": state.isFillPreview || void 0,
+      "data-fill-top": state.fillEdges.top || void 0,
+      "data-fill-bottom": state.fillEdges.bottom || void 0,
+      "data-fill-left": state.fillEdges.left || void 0,
+      "data-fill-right": state.fillEdges.right || void 0,
+      "data-fill-target": state.isFillTarget || void 0,
+      "data-fill-clear": state.isFillClearing || void 0,
+      "data-save-state": state.saveState,
+      "data-sticky-left": stickyLeft !== void 0,
+      "data-sticky-right": stickyRight !== void 0,
+      "data-frozen-edge": frozenRightEdge || void 0,
+      "data-custom-renderer": hasCustomRenderer || void 0,
+      "data-has-comment": commentCount && commentCount > 0 ? "true" : void 0,
+      "data-cb-above": colorAbove ? "true" : void 0,
+      "data-cb-below": colorBelow ? "true" : void 0,
+      "data-cb-left": colorLeft ? "true" : void 0,
+      "data-cb-right": colorRight ? "true" : void 0,
+      onContextMenu: onCellContextMenu ? (e) => {
+        e.preventDefault();
+        onCellContextMenu(e, row, col);
+      } : void 0,
+      children: [
+        state.isEditing ? getCellEditor(
+          colConfig,
+          cellValue,
+          handleChange,
+          handleSave,
+          handleCancel,
+          rowData,
+          row,
+          col,
+          inputRef
+        ) : hasCustomRenderer ? renderedValue : /* @__PURE__ */ jsx("span", { className: "cell-content", title: typeof cellValue === "string" ? cellValue : void 0, children: renderedValue }),
+        commentsEnabled && !commentCount && (isSoleSelectedCell || state.isHovered) && !state.isEditing && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `cell-comment-indicator cell-comment-indicator-ghost${isSoleSelectedCell ? "" : " cell-comment-indicator-hover"}`,
+            "data-no-row-click": true,
+            "data-comment-add": "true",
+            title: "Add a comment (Shift+F2)",
+            "aria-label": "Add a comment",
+            children: /* @__PURE__ */ jsx("svg", { width: "15", height: "14", viewBox: "0 0 15 14", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7.29167 5.95833H7.29833M9.95833 5.95833H9.965M4.625 5.95833H4.63167M13.9583 9.95833C13.9583 10.312 13.8179 10.6511 13.5678 10.9011C13.3178 11.1512 12.9786 11.2917 12.625 11.2917H3.84367C3.49007 11.2917 3.15099 11.4323 2.901 11.6823L1.433 13.1503C1.3668 13.2165 1.28247 13.2616 1.19066 13.2798C1.09885 13.2981 1.00369 13.2887 0.917205 13.2529C0.830722 13.2171 0.756802 13.1564 0.70479 13.0786C0.652779 13.0008 0.625012 12.9093 0.625 12.8157V1.95833C0.625 1.60471 0.765476 1.26557 1.01552 1.01552C1.26557 0.765476 1.60471 0.625 1.95833 0.625H12.625C12.9786 0.625 13.3178 0.765476 13.5678 1.01552C13.8179 1.26557 13.9583 1.60471 13.9583 1.95833V9.95833Z" }) })
+          }
+        ),
+        commentCount != null && commentCount > 0 && /* @__PURE__ */ jsx("span", { className: "cell-comment-indicator", "data-no-row-click": true, title: `${commentCount} comment${commentCount > 1 ? "s" : ""}`, children: /* @__PURE__ */ jsx("svg", { width: "15", height: "14", viewBox: "0 0 15 14", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7.29167 5.95833H7.29833M9.95833 5.95833H9.965M4.625 5.95833H4.63167M13.9583 9.95833C13.9583 10.312 13.8179 10.6511 13.5678 10.9011C13.3178 11.1512 12.9786 11.2917 12.625 11.2917H3.84367C3.49007 11.2917 3.15099 11.4323 2.901 11.6823L1.433 13.1503C1.3668 13.2165 1.28247 13.2616 1.19066 13.2798C1.09885 13.2981 1.00369 13.2887 0.917205 13.2529C0.830722 13.2171 0.756802 13.1564 0.70479 13.0786C0.652779 13.0008 0.625012 12.9093 0.625 12.8157V1.95833C0.625 1.60471 0.765476 1.26557 1.01552 1.01552C1.26557 0.765476 1.60471 0.625 1.95833 0.625H12.625C12.9786 0.625 13.3178 0.765476 13.5678 1.01552C13.8179 1.26557 13.9583 1.60471 13.9583 1.95833V9.95833Z" }) }) }),
+        state.isClipboardSource && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "hot-clip-ants",
+            "data-clip-mode": state.clipboardMode ?? void 0,
+            "data-clip-top": state.clipboardEdges.top || void 0,
+            "data-clip-bottom": state.clipboardEdges.bottom || void 0,
+            "data-clip-left": state.clipboardEdges.left || void 0,
+            "data-clip-right": state.clipboardEdges.right || void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        showFillHandle && /* @__PURE__ */ jsx("div", { className: "fill-handle", "data-fill-handle": "true", "data-no-row-click": true, "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+Cell.displayName = "Cell";
+var Cell_default = Cell;
+export {
+  Cell_default as default
+};
+//# sourceMappingURL=Cell.js.map