@freighttech/ui 0.13.18

package/dist/backend/devtools/index.js

@@ -0,0 +1,7 @@
+import { UmesDevToolsPanel } from "./UmesDevToolsPanel.js";
+import { useUmesDevTools } from "./useUmesDevTools.js";
+export {
+  UmesDevToolsPanel,
+  useUmesDevTools
+};
+//# sourceMappingURL=index.js.map

package/dist/backend/devtools/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/devtools/index.ts"],
+  "sourcesContent": ["export { UmesDevToolsPanel } from './UmesDevToolsPanel'\nexport { useUmesDevTools } from './useUmesDevTools'\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;",
+  "names": []
+}

package/dist/backend/devtools/useUmesDevTools.js

@@ -0,0 +1,125 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { getEnricherTimingEntries } from "@open-mercato/shared/lib/umes/enricher-timing";
+import { getInterceptorActivityEntries } from "@open-mercato/shared/lib/umes/interceptor-activity";
+const EMPTY_DATA = {
+  extensions: [],
+  conflicts: [],
+  enricherTimings: [],
+  interceptorActivity: [],
+  eventFlow: [],
+  componentReplacements: []
+};
+const isDev = process.env.NODE_ENV === "development";
+function useUmesDevTools(isActive = true) {
+  const [data, setData] = useState(EMPTY_DATA);
+  const refresh = useCallback(() => {
+    if (!isDev) return;
+    setData(collectDevToolsData());
+  }, []);
+  useEffect(() => {
+    if (!isDev || !isActive) return;
+    refresh();
+    const interval = setInterval(refresh, 3e3);
+    return () => clearInterval(interval);
+  }, [refresh, isActive]);
+  return { ...isDev ? data : EMPTY_DATA, refresh };
+}
+function collectDevToolsData() {
+  const extensions = [];
+  const componentReplacements = [];
+  try {
+    const enricherEntries = globalThis.__openMercatoResponseEnrichers__ ?? [];
+    for (const entry of enricherEntries) {
+      extensions.push({
+        type: "enricher",
+        id: entry.enricher.id,
+        moduleId: entry.moduleId,
+        target: entry.enricher.targetEntity,
+        priority: entry.enricher.priority ?? 0,
+        features: entry.enricher.features,
+        targetEntity: entry.enricher.targetEntity,
+        timeout: entry.enricher.timeout,
+        critical: entry.enricher.critical,
+        hasCacheConfig: !!entry.enricher.cache,
+        hasQueryEngineConfig: !!entry.enricher.queryEngine
+      });
+    }
+  } catch {
+  }
+  try {
+    const interceptorEntries = globalThis.__openMercatoApiInterceptors__ ?? [];
+    for (const entry of interceptorEntries) {
+      extensions.push({
+        type: "interceptor",
+        id: entry.interceptor.id,
+        moduleId: entry.moduleId,
+        target: entry.interceptor.targetRoute,
+        priority: entry.interceptor.priority ?? 0,
+        features: entry.interceptor.features,
+        targetRoute: entry.interceptor.targetRoute,
+        methods: entry.interceptor.methods,
+        hasBefore: !!entry.interceptor.before,
+        hasAfter: !!entry.interceptor.after
+      });
+    }
+  } catch {
+  }
+  try {
+    const globalState = globalThis.__openMercatoComponentRegistry__;
+    if (globalState?.overrides) {
+      for (const override of globalState.overrides) {
+        const kind = override.replacement ? "replacement" : override.wrapper ? "wrapper" : "propsTransform";
+        const info = {
+          type: "component-override",
+          id: `${override.metadata?.module ?? "unknown"}.${override.target.componentId}`,
+          moduleId: override.metadata?.module ?? "unknown",
+          target: override.target.componentId,
+          priority: override.priority,
+          features: override.features,
+          componentId: override.target.componentId,
+          overrideKind: kind
+        };
+        extensions.push(info);
+        componentReplacements.push(info);
+      }
+    }
+  } catch {
+  }
+  try {
+    const tables = globalThis.__openMercatoCoreInjectionTables__ ?? [];
+    for (const tableEntry of tables) {
+      for (const [spotId, value] of Object.entries(tableEntry.table)) {
+        const slots = Array.isArray(value) ? value : [value];
+        for (const slot of slots) {
+          const widgetId = typeof slot === "string" ? slot : slot?.widgetId;
+          const priority = typeof slot === "object" ? slot?.priority ?? 0 : 0;
+          if (widgetId) {
+            extensions.push({
+              type: "injection-widget",
+              id: widgetId,
+              moduleId: tableEntry.moduleId,
+              target: spotId,
+              priority,
+              spotId,
+              hasEventHandlers: false
+            });
+          }
+        }
+      }
+    }
+  } catch {
+  }
+  return {
+    extensions,
+    conflicts: [],
+    enricherTimings: getEnricherTimingEntries(),
+    interceptorActivity: getInterceptorActivityEntries(),
+    eventFlow: [],
+    componentReplacements
+  };
+}
+export {
+  useUmesDevTools
+};
+//# sourceMappingURL=useUmesDevTools.js.map

package/dist/backend/devtools/useUmesDevTools.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/devtools/useUmesDevTools.ts"],
+  "sourcesContent": ["'use client'\n\nimport { useState, useEffect, useCallback } from 'react'\nimport type {\n  UmesDevToolsData,\n  UmesExtensionInfo,\n  UmesComponentOverrideInfo,\n} from '@open-mercato/shared/lib/umes/devtools-types'\nimport { getEnricherTimingEntries } from '@open-mercato/shared/lib/umes/enricher-timing'\nimport { getInterceptorActivityEntries } from '@open-mercato/shared/lib/umes/interceptor-activity'\n\nconst EMPTY_DATA: UmesDevToolsData = {\n  extensions: [],\n  conflicts: [],\n  enricherTimings: [],\n  interceptorActivity: [],\n  eventFlow: [],\n  componentReplacements: [],\n}\n\nconst isDev = process.env.NODE_ENV === 'development'\n\nexport function useUmesDevTools(isActive = true): UmesDevToolsData & { refresh: () => void } {\n  const [data, setData] = useState<UmesDevToolsData>(EMPTY_DATA)\n\n  const refresh = useCallback(() => {\n    if (!isDev) return\n    setData(collectDevToolsData())\n  }, [])\n\n  useEffect(() => {\n    if (!isDev || !isActive) return\n    refresh()\n\n    const interval = setInterval(refresh, 3000)\n    return () => clearInterval(interval)\n  }, [refresh, isActive])\n\n  return { ...(isDev ? data : EMPTY_DATA), refresh }\n}\n\nfunction collectDevToolsData(): UmesDevToolsData {\n  const extensions: UmesExtensionInfo[] = []\n  const componentReplacements: UmesComponentOverrideInfo[] = []\n\n  // Collect enricher data from global registry\n  try {\n    const enricherEntries = ((globalThis as Record<string, unknown>).__openMercatoResponseEnrichers__ ?? []) as Array<{\n      moduleId: string\n      enricher: {\n        id: string\n        targetEntity: string\n        priority?: number\n        timeout?: number\n        critical?: boolean\n        cache?: unknown\n        queryEngine?: unknown\n        features?: string[]\n      }\n    }>\n    for (const entry of enricherEntries) {\n      extensions.push({\n        type: 'enricher',\n        id: entry.enricher.id,\n        moduleId: entry.moduleId,\n        target: entry.enricher.targetEntity,\n        priority: entry.enricher.priority ?? 0,\n        features: entry.enricher.features,\n        targetEntity: entry.enricher.targetEntity,\n        timeout: entry.enricher.timeout,\n        critical: entry.enricher.critical,\n        hasCacheConfig: !!entry.enricher.cache,\n        hasQueryEngineConfig: !!entry.enricher.queryEngine,\n      })\n    }\n  } catch {\n    // enricher registry not available on client\n  }\n\n  // Collect interceptor data from global registry\n  try {\n    const interceptorEntries = ((globalThis as Record<string, unknown>).__openMercatoApiInterceptors__ ?? []) as Array<{\n      moduleId: string\n      interceptor: {\n        id: string\n        targetRoute: string\n        methods: string[]\n        priority?: number\n        features?: string[]\n        before?: unknown\n        after?: unknown\n      }\n    }>\n    for (const entry of interceptorEntries) {\n      extensions.push({\n        type: 'interceptor',\n        id: entry.interceptor.id,\n        moduleId: entry.moduleId,\n        target: entry.interceptor.targetRoute,\n        priority: entry.interceptor.priority ?? 0,\n        features: entry.interceptor.features,\n        targetRoute: entry.interceptor.targetRoute,\n        methods: entry.interceptor.methods,\n        hasBefore: !!entry.interceptor.before,\n        hasAfter: !!entry.interceptor.after,\n      })\n    }\n  } catch {\n    // interceptor registry not available on client\n  }\n\n  // Collect component overrides from global registry\n  try {\n    const globalState = (globalThis as Record<string, unknown>).__openMercatoComponentRegistry__ as {\n      overrides?: Array<{\n        target: { componentId: string }\n        priority: number\n        features?: string[]\n        metadata?: { module?: string }\n        replacement?: unknown\n        wrapper?: unknown\n        propsTransform?: unknown\n      }>\n    } | undefined\n    if (globalState?.overrides) {\n      for (const override of globalState.overrides) {\n        const kind = override.replacement\n          ? 'replacement' as const\n          : override.wrapper\n            ? 'wrapper' as const\n            : 'propsTransform' as const\n        const info: UmesComponentOverrideInfo = {\n          type: 'component-override',\n          id: `${override.metadata?.module ?? 'unknown'}.${override.target.componentId}`,\n          moduleId: override.metadata?.module ?? 'unknown',\n          target: override.target.componentId,\n          priority: override.priority,\n          features: override.features,\n          componentId: override.target.componentId,\n          overrideKind: kind,\n        }\n        extensions.push(info)\n        componentReplacements.push(info)\n      }\n    }\n  } catch {\n    // component registry not available\n  }\n\n  // Collect injection widgets from global registry\n  try {\n    const tables = ((globalThis as Record<string, unknown>).__openMercatoCoreInjectionTables__ ?? []) as Array<{\n      moduleId: string\n      table: Record<string, unknown>\n    }>\n    for (const tableEntry of tables) {\n      for (const [spotId, value] of Object.entries(tableEntry.table)) {\n        const slots = Array.isArray(value) ? value : [value]\n        for (const slot of slots) {\n          const widgetId = typeof slot === 'string' ? slot : (slot as Record<string, unknown>)?.widgetId\n          const priority = typeof slot === 'object' ? ((slot as Record<string, unknown>)?.priority as number) ?? 0 : 0\n          if (widgetId) {\n            extensions.push({\n              type: 'injection-widget',\n              id: widgetId as string,\n              moduleId: tableEntry.moduleId,\n              target: spotId,\n              priority,\n              spotId,\n              hasEventHandlers: false,\n            })\n          }\n        }\n      }\n    }\n  } catch {\n    // injection tables not available\n  }\n\n  return {\n    extensions,\n    conflicts: [],\n    enricherTimings: getEnricherTimingEntries(),\n    interceptorActivity: getInterceptorActivityEntries(),\n    eventFlow: [],\n    componentReplacements,\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/document-viewer/RegionOverlay.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+const PAD_X = 3;
+const PAD_Y = 2;
+const RegionOverlay = ({
+  regions,
+  width,
+  height,
+  activeKey,
+  showLabels = false,
+  onRegionClick,
+  className
+}) => {
+  if (!width || !height || regions.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-testid": "region-overlay",
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: regions.map((region, index) => {
+        const [x0, y0, x1, y1] = region.box;
+        const left = x0 * width - PAD_X;
+        const top = y0 * height - PAD_Y;
+        const w = (x1 - x0) * width + PAD_X * 2;
+        const h = (y1 - y0) * height + PAD_Y * 2;
+        const isActive = activeKey != null && region.key === activeKey;
+        const isDimmed = activeKey != null && !isActive;
+        const dashed = region.precision === "region";
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "region-overlay-box",
+            "data-active": isActive ? "true" : void 0,
+            "data-precision": region.precision ?? "measured",
+            onClick: onRegionClick ? () => onRegionClick(region.key, index) : void 0,
+            style: {
+              position: "absolute",
+              left,
+              top,
+              width: w,
+              height: h,
+              borderRadius: 3,
+              border: `2px ${dashed ? "dashed" : "solid"} ${isActive ? "rgb(214 122 0)" : "rgb(255 193 7)"}`,
+              backgroundColor: isActive ? "rgb(255 193 7 / 0.42)" : "rgb(255 193 7 / 0.22)",
+              // The white ring must hug the box, so it comes first.
+              boxShadow: "0 0 0 1.5px rgb(255 255 255 / 0.95), 0 1px 4px rgb(0 0 0 / 0.28)",
+              opacity: isDimmed ? 0.45 : 1,
+              transition: "opacity 150ms ease, background-color 150ms ease",
+              pointerEvents: onRegionClick ? "auto" : "none",
+              cursor: onRegionClick ? "pointer" : void 0
+            },
+            children: showLabels && region.label ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "region-overlay-label",
+                style: {
+                  position: "absolute",
+                  // ABOVE the box, not inside it: a label inside covers the
+                  // words the frame exists to point at.
+                  bottom: "100%",
+                  left: -1,
+                  marginBottom: 2,
+                  maxWidth: 220,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  padding: "1px 4px",
+                  borderRadius: 3,
+                  backgroundColor: isActive ? "rgb(120 66 0)" : "rgb(64 51 20 / 0.92)",
+                  color: "#fff",
+                  fontSize: 10,
+                  lineHeight: "14px",
+                  fontWeight: 600,
+                  pointerEvents: "none"
+                },
+                children: region.label
+              }
+            ) : null
+          },
+          `${region.key ?? "r"}-${index}`
+        );
+      })
+    }
+  );
+};
+var RegionOverlay_default = RegionOverlay;
+export {
+  RegionOverlay,
+  RegionOverlay_default as default
+};
+//# sourceMappingURL=RegionOverlay.js.map

package/dist/backend/document-viewer/RegionOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/document-viewer/RegionOverlay.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * Rectangles drawn ON a rendered page \u2014 \"this value was read HERE\".\n *\n * PURE GEOMETRY. It takes normalised boxes, the size the page is currently\n * rendered at, and which one is active. It knows nothing about PDFs, documents\n * or provenance, so it works over an `<img>` the day somebody wires it up.\n *\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * THE RULES ENCODED HERE WERE EACH PAID FOR WITH A SHIPPED DEFECT\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n *\n * **Frame the text, do not clip it.** 3px horizontal and 2px vertical padding.\n * A box drawn at exactly the measured extent sits on the glyphs and reads as a\n * strikethrough.\n *\n * **The fill is real alpha, never `mix-blend-mode`.** `multiply` is the nicer\n * mechanism and cannot be used: the box carries an entrance animation, a\n * transform creates a stacking context, and the blend then isolates from the\n * page behind it and degrades to a flat opaque fill that hides the very line it\n * points at.\n *\n * **A double stroke.** One coloured border vanishes when it lands on dark ink or\n * a table rule. The outer white ring separates the box from whatever it crosses.\n *\n * **`measured` is solid, `region` is dashed.** A word-level rectangle from the\n * text layer and an OCR block covering a paragraph are different claims, and\n * drawing them identically tells the reader the coarse one is exact.\n *\n * **Dark mode changes nothing.** The page is white paper either way.\n */\n\nimport * as React from 'react'\n\nexport type OverlayRegion = {\n  /** Normalised to the page, top-left origin: `[x0, y0, x1, y1]`, each 0..1. */\n  box: [number, number, number, number]\n  /** `measured` \u2014 from the text layer. `region` \u2014 an OCR block, visibly coarser. */\n  precision?: 'measured' | 'region'\n  /** Free-form grouping key; the overlay only compares it with `activeKey`. */\n  key?: string\n  /** Drawn beside the frame when `showLabels` is on. */\n  label?: string\n}\n\nexport type RegionOverlayProps = {\n  regions: OverlayRegion[]\n  /** The size the page is CURRENTLY rendered at, in CSS pixels. */\n  width: number\n  height: number\n  /** Which region group is selected. Others dim rather than disappear. */\n  activeKey?: string | null\n  /** Draw each frame's label. The \"sweep the document\" view. */\n  showLabels?: boolean\n  onRegionClick?: (key: string | undefined, index: number) => void\n  className?: string\n}\n\n/** Frame the text, do not clip it. */\nconst PAD_X = 3\nconst PAD_Y = 2\n\nexport const RegionOverlay: React.FC<RegionOverlayProps> = ({\n  regions,\n  width,\n  height,\n  activeKey,\n  showLabels = false,\n  onRegionClick,\n  className,\n}) => {\n  // Nothing to anchor to yet \u2014 a page that has not been measured would put every\n  // box at 0\u00D70 in the corner, which reads as a rendering bug.\n  if (!width || !height || regions.length === 0) return null\n\n  return (\n    <div\n      className={className}\n      data-testid=\"region-overlay\"\n      style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}\n    >\n      {regions.map((region, index) => {\n        const [x0, y0, x1, y1] = region.box\n        const left = x0 * width - PAD_X\n        const top = y0 * height - PAD_Y\n        const w = (x1 - x0) * width + PAD_X * 2\n        const h = (y1 - y0) * height + PAD_Y * 2\n        const isActive = activeKey != null && region.key === activeKey\n        // Something is selected and it is not this one. Dimmed, not hidden: the\n        // point of drawing them all is to see the shape of what was read.\n        const isDimmed = activeKey != null && !isActive\n        const dashed = region.precision === 'region'\n\n        return (\n          <div\n            key={`${region.key ?? 'r'}-${index}`}\n            data-testid=\"region-overlay-box\"\n            data-active={isActive ? 'true' : undefined}\n            data-precision={region.precision ?? 'measured'}\n            onClick={onRegionClick ? () => onRegionClick(region.key, index) : undefined}\n            style={{\n              position: 'absolute',\n              left, top, width: w, height: h,\n              borderRadius: 3,\n              border: `2px ${dashed ? 'dashed' : 'solid'} ${isActive ? 'rgb(214 122 0)' : 'rgb(255 193 7)'}`,\n              backgroundColor: isActive ? 'rgb(255 193 7 / 0.42)' : 'rgb(255 193 7 / 0.22)',\n              // The white ring must hug the box, so it comes first.\n              boxShadow: '0 0 0 1.5px rgb(255 255 255 / 0.95), 0 1px 4px rgb(0 0 0 / 0.28)',\n              opacity: isDimmed ? 0.45 : 1,\n              transition: 'opacity 150ms ease, background-color 150ms ease',\n              pointerEvents: onRegionClick ? 'auto' : 'none',\n              cursor: onRegionClick ? 'pointer' : undefined,\n            }}\n          >\n            {showLabels && region.label ? (\n              <span\n                data-testid=\"region-overlay-label\"\n                style={{\n                  position: 'absolute',\n                  // ABOVE the box, not inside it: a label inside covers the\n                  // words the frame exists to point at.\n                  bottom: '100%',\n                  left: -1,\n                  marginBottom: 2,\n                  maxWidth: 220,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  padding: '1px 4px',\n                  borderRadius: 3,\n                  backgroundColor: isActive ? 'rgb(120 66 0)' : 'rgb(64 51 20 / 0.92)',\n                  color: '#fff',\n                  fontSize: 10,\n                  lineHeight: '14px',\n                  fontWeight: 600,\n                  pointerEvents: 'none',\n                }}\n              >\n                {region.label}\n              </span>\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default RegionOverlay\n"],
+  "mappings": ";AAoHc;AAxDd,MAAM,QAAQ;AACd,MAAM,QAAQ;AAEP,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,MAAM;AAGJ,MAAI,CAAC,SAAS,CAAC,UAAU,QAAQ,WAAW,EAAG,QAAO;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,eAAe,OAAO;AAAA,MAE9D,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,OAAO;AAChC,cAAM,OAAO,KAAK,QAAQ;AAC1B,cAAM,MAAM,KAAK,SAAS;AAC1B,cAAM,KAAK,KAAK,MAAM,QAAQ,QAAQ;AACtC,cAAM,KAAK,KAAK,MAAM,SAAS,QAAQ;AACvC,cAAM,WAAW,aAAa,QAAQ,OAAO,QAAQ;AAGrD,cAAM,WAAW,aAAa,QAAQ,CAAC;AACvC,cAAM,SAAS,OAAO,cAAc;AAEpC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,eAAY;AAAA,YACZ,eAAa,WAAW,SAAS;AAAA,YACjC,kBAAgB,OAAO,aAAa;AAAA,YACpC,SAAS,gBAAgB,MAAM,cAAc,OAAO,KAAK,KAAK,IAAI;AAAA,YAClE,OAAO;AAAA,cACL,UAAU;AAAA,cACV;AAAA,cAAM;AAAA,cAAK,OAAO;AAAA,cAAG,QAAQ;AAAA,cAC7B,cAAc;AAAA,cACd,QAAQ,OAAO,SAAS,WAAW,OAAO,IAAI,WAAW,mBAAmB,gBAAgB;AAAA,cAC5F,iBAAiB,WAAW,0BAA0B;AAAA;AAAA,cAEtD,WAAW;AAAA,cACX,SAAS,WAAW,OAAO;AAAA,cAC3B,YAAY;AAAA,cACZ,eAAe,gBAAgB,SAAS;AAAA,cACxC,QAAQ,gBAAgB,YAAY;AAAA,YACtC;AAAA,YAEC,wBAAc,OAAO,QACpB;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,UAAU;AAAA;AAAA;AAAA,kBAGV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,cAAc;AAAA,kBACd,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc;AAAA,kBACd,YAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,iBAAiB,WAAW,kBAAkB;AAAA,kBAC9C,OAAO;AAAA,kBACP,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,YAAY;AAAA,kBACZ,eAAe;AAAA,gBACjB;AAAA,gBAEC,iBAAO;AAAA;AAAA,YACV,IACE;AAAA;AAAA,UA7CC,GAAG,OAAO,OAAO,GAAG,IAAI,KAAK;AAAA,QA8CpC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,wBAAQ;",
+  "names": []
+}

package/dist/backend/document-viewer/index.js

@@ -0,0 +1,6 @@
+import { RegionOverlay, default as default2 } from "./RegionOverlay.js";
+export {
+  RegionOverlay,
+  default2 as RegionOverlayDefault
+};
+//# sourceMappingURL=index.js.map

package/dist/backend/document-viewer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/document-viewer/index.ts"],
+  "sourcesContent": ["export { RegionOverlay, default as RegionOverlayDefault } from './RegionOverlay'\nexport type { OverlayRegion, RegionOverlayProps } from './RegionOverlay'\n"],
+  "mappings": "AAAA,SAAS,eAA0B,WAAXA,gBAAuC;",
+  "names": ["default"]
+}

package/dist/backend/dynamic-grid/DynamicGrid.js

@@ -0,0 +1,130 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useEffect, useCallback, useRef } from "react";
+import { createCellStore } from "../dynamic-table/store/index.js";
+import { CellStoreContext } from "../dynamic-table/hooks/index.js";
+import { useEventHandlers } from "../dynamic-table/events/events.js";
+import { TableEvents } from "../dynamic-table/types/index.js";
+import { gridCellDefToColumnDef, buildStoreData } from "./adapters.js";
+import { useGridKeyboardNav } from "./hooks/useGridKeyboardNav.js";
+import GridRow from "./components/GridRow.js";
+const DynamicGrid = ({
+  data,
+  rows,
+  gridRef,
+  idField = "id",
+  columns,
+  className,
+  enableKeyboardNav = true
+}) => {
+  const gridColumns = columns ?? Math.max(...rows.map((r) => r.cells.length));
+  const columnDefsByRow = useMemo(
+    () => rows.map((row) => row.cells.map(gridCellDefToColumnDef)),
+    [rows]
+  );
+  const storeColumns = useMemo(() => {
+    const widestRowIndex = rows.reduce(
+      (maxIdx, row, idx, arr) => row.cells.length > arr[maxIdx].cells.length ? idx : maxIdx,
+      0
+    );
+    return columnDefsByRow[widestRowIndex] ?? [];
+  }, [rows, columnDefsByRow]);
+  const storeData = useMemo(() => buildStoreData(data, rows), [data, rows]);
+  const storeRef = useRef(createCellStore(storeData, storeColumns));
+  const store = storeRef.current;
+  useEffect(() => {
+    store.setTableRef(gridRef);
+  }, [store, gridRef]);
+  useEffect(() => {
+    store.setData(storeData);
+  }, [store, storeData]);
+  useEffect(() => {
+    store.setColumns(storeColumns);
+  }, [store, storeColumns]);
+  const saveTimeouts = useRef(/* @__PURE__ */ new Map());
+  const clearSaveTimeout = useCallback((key) => {
+    const existing = saveTimeouts.current.get(key);
+    if (existing) {
+      clearTimeout(existing);
+      saveTimeouts.current.delete(key);
+    }
+  }, []);
+  useEventHandlers(
+    {
+      [TableEvents.CELL_SAVE_START]: (payload) => {
+        const key = `${payload.rowIndex}:${payload.colIndex}`;
+        clearSaveTimeout(key);
+        store.setSaveState(payload.rowIndex, payload.colIndex, "saving");
+      },
+      [TableEvents.CELL_SAVE_SUCCESS]: (payload) => {
+        const key = `${payload.rowIndex}:${payload.colIndex}`;
+        clearSaveTimeout(key);
+        store.setSaveState(payload.rowIndex, payload.colIndex, "success");
+        saveTimeouts.current.set(
+          key,
+          setTimeout(() => {
+            store.setSaveState(payload.rowIndex, payload.colIndex, null);
+            saveTimeouts.current.delete(key);
+          }, 2e3)
+        );
+      },
+      [TableEvents.CELL_SAVE_ERROR]: (payload) => {
+        const key = `${payload.rowIndex}:${payload.colIndex}`;
+        clearSaveTimeout(key);
+        store.setSaveState(payload.rowIndex, payload.colIndex, "error");
+        saveTimeouts.current.set(
+          key,
+          setTimeout(() => {
+            store.setSaveState(payload.rowIndex, payload.colIndex, null);
+            saveTimeouts.current.delete(key);
+          }, 3e3)
+        );
+      }
+    },
+    gridRef,
+    { stopPropagation: false }
+  );
+  useEffect(() => {
+    const timeouts = saveTimeouts.current;
+    return () => {
+      timeouts.forEach((timeout) => clearTimeout(timeout));
+      timeouts.clear();
+    };
+  }, []);
+  const handleKeyDown = useGridKeyboardNav(store, rows);
+  const handleBlur = useCallback(
+    (e) => {
+      if (gridRef.current?.contains(e.relatedTarget)) return;
+      store.clearEditing();
+      store.setSelection({ type: null, anchor: null, focus: null });
+    },
+    [store, gridRef]
+  );
+  return /* @__PURE__ */ jsx(CellStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: gridRef,
+      className: ["dynamic-grid outline-none", className].filter(Boolean).join(" "),
+      tabIndex: enableKeyboardNav ? 0 : void 0,
+      onKeyDown: enableKeyboardNav ? handleKeyDown : void 0,
+      onBlur: handleBlur,
+      children: rows.map((rowDef, rowIndex) => /* @__PURE__ */ jsx(
+        GridRow,
+        {
+          rowIndex,
+          rowDef,
+          columnDefs: columnDefsByRow[rowIndex],
+          gridColumns,
+          gridRef,
+          idField
+        },
+        rowIndex
+      ))
+    }
+  ) });
+};
+DynamicGrid.displayName = "DynamicGrid";
+var DynamicGrid_default = DynamicGrid;
+export {
+  DynamicGrid_default as default
+};
+//# sourceMappingURL=DynamicGrid.js.map

package/dist/backend/dynamic-grid/DynamicGrid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/dynamic-grid/DynamicGrid.tsx"],
+  "sourcesContent": ["import React, { useMemo, useEffect, useCallback, useRef } from 'react';\nimport { createCellStore } from '../dynamic-table/store/index';\nimport { CellStoreContext } from '../dynamic-table/hooks/index';\nimport { useEventHandlers } from '../dynamic-table/events/events';\nimport { TableEvents } from '../dynamic-table/types/index';\nimport type {\n  CellSaveStartEvent,\n  CellSaveSuccessEvent,\n  CellSaveErrorEvent,\n} from '../dynamic-table/types/index';\nimport { gridCellDefToColumnDef, buildStoreData } from './adapters';\nimport { useGridKeyboardNav } from './hooks/useGridKeyboardNav';\nimport type { DynamicGridProps } from './types';\nimport GridRow from './components/GridRow';\n\nconst DynamicGrid: React.FC<DynamicGridProps> = ({\n  data,\n  rows,\n  gridRef,\n  idField = 'id',\n  columns,\n  className,\n  enableKeyboardNav = true,\n}) => {\n  const gridColumns = columns ?? Math.max(...rows.map((r) => r.cells.length));\n\n  // Build per-row ColumnDef arrays for GridCell to use\n  const columnDefsByRow = useMemo(\n    () => rows.map((row) => row.cells.map(gridCellDefToColumnDef)),\n    [rows],\n  );\n\n  // Build a flat columns array for store initialization (use the widest row)\n  const storeColumns = useMemo(() => {\n    const widestRowIndex = rows.reduce(\n      (maxIdx, row, idx, arr) => (row.cells.length > arr[maxIdx].cells.length ? idx : maxIdx),\n      0,\n    );\n    return columnDefsByRow[widestRowIndex] ?? [];\n  }, [rows, columnDefsByRow]);\n\n  // Build store data: each row gets a copy of the full entity\n  const storeData = useMemo(() => buildStoreData(data, rows), [data, rows]);\n\n  // Create cell store once\n  const storeRef = useRef(createCellStore(storeData, storeColumns));\n  const store = storeRef.current;\n\n  // Set the table ref so store.focusTable() works\n  useEffect(() => {\n    store.setTableRef(gridRef);\n  }, [store, gridRef]);\n\n  // Sync data changes into the store\n  useEffect(() => {\n    store.setData(storeData);\n  }, [store, storeData]);\n\n  // Sync column changes into the store\n  useEffect(() => {\n    store.setColumns(storeColumns);\n  }, [store, storeColumns]);\n\n  // Internal save state event handlers\n  const saveTimeouts = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n\n  const clearSaveTimeout = useCallback((key: string) => {\n    const existing = saveTimeouts.current.get(key);\n    if (existing) {\n      clearTimeout(existing);\n      saveTimeouts.current.delete(key);\n    }\n  }, []);\n\n  useEventHandlers(\n    {\n      [TableEvents.CELL_SAVE_START]: (payload: CellSaveStartEvent) => {\n        const key = `${payload.rowIndex}:${payload.colIndex}`;\n        clearSaveTimeout(key);\n        store.setSaveState(payload.rowIndex, payload.colIndex, 'saving');\n      },\n      [TableEvents.CELL_SAVE_SUCCESS]: (payload: CellSaveSuccessEvent) => {\n        const key = `${payload.rowIndex}:${payload.colIndex}`;\n        clearSaveTimeout(key);\n        store.setSaveState(payload.rowIndex, payload.colIndex, 'success');\n        saveTimeouts.current.set(\n          key,\n          setTimeout(() => {\n            store.setSaveState(payload.rowIndex, payload.colIndex, null);\n            saveTimeouts.current.delete(key);\n          }, 2000),\n        );\n      },\n      [TableEvents.CELL_SAVE_ERROR]: (payload: CellSaveErrorEvent) => {\n        const key = `${payload.rowIndex}:${payload.colIndex}`;\n        clearSaveTimeout(key);\n        store.setSaveState(payload.rowIndex, payload.colIndex, 'error');\n        saveTimeouts.current.set(\n          key,\n          setTimeout(() => {\n            store.setSaveState(payload.rowIndex, payload.colIndex, null);\n            saveTimeouts.current.delete(key);\n          }, 3000),\n        );\n      },\n    },\n    gridRef,\n    { stopPropagation: false },\n  );\n\n  // Cleanup timeouts on unmount\n  useEffect(() => {\n    const timeouts = saveTimeouts.current;\n    return () => {\n      timeouts.forEach((timeout) => clearTimeout(timeout));\n      timeouts.clear();\n    };\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = useGridKeyboardNav(store, rows);\n\n  // Clear selection/editing when focus leaves the grid\n  const handleBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // If focus moves to another element inside the grid, ignore\n      if (gridRef.current?.contains(e.relatedTarget as Node)) return;\n      store.clearEditing();\n      store.setSelection({ type: null, anchor: null, focus: null });\n    },\n    [store, gridRef],\n  );\n\n  return (\n    <CellStoreContext.Provider value={store}>\n      <div\n        ref={gridRef}\n        className={['dynamic-grid outline-none', className].filter(Boolean).join(' ')}\n        tabIndex={enableKeyboardNav ? 0 : undefined}\n        onKeyDown={enableKeyboardNav ? handleKeyDown : undefined}\n        onBlur={handleBlur}\n      >\n        {rows.map((rowDef, rowIndex) => (\n          <GridRow\n            key={rowIndex}\n            rowIndex={rowIndex}\n            rowDef={rowDef}\n            columnDefs={columnDefsByRow[rowIndex]}\n            gridColumns={gridColumns}\n            gridRef={gridRef}\n            idField={idField}\n          />\n        ))}\n      </div>\n    </CellStoreContext.Provider>\n  );\n};\n\nDynamicGrid.displayName = 'DynamicGrid';\n\nexport default DynamicGrid;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-grid/adapters.js

@@ -0,0 +1,34 @@
+function gridCellDefToColumnDef(cellDef) {
+  return {
+    data: cellDef.field,
+    title: cellDef.label,
+    type: cellDef.type,
+    readOnly: cellDef.readOnly,
+    source: cellDef.source,
+    renderer: cellDef.renderer ? (value, rowData) => cellDef.renderer(value, rowData, cellDef) : void 0,
+    editor: cellDef.editor ? (value, onChange, onSave, onCancel, rowData) => cellDef.editor(value, onChange, onSave, onCancel, rowData, cellDef) : void 0,
+    cellClassName: cellDef.cellClassName ? (value, rowData) => cellDef.cellClassName(value, rowData) : void 0
+  };
+}
+function buildStoreData(data, rows) {
+  return rows.map(() => ({ ...data }));
+}
+function buildStoreColumns(rows) {
+  const maxCols = Math.max(...rows.map((r) => r.cells.length));
+  const defs = [];
+  for (let i = 0; i < maxCols; i++) {
+    for (const row of rows) {
+      if (row.cells[i]) {
+        defs.push(gridCellDefToColumnDef(row.cells[i]));
+        break;
+      }
+    }
+  }
+  return defs;
+}
+export {
+  buildStoreColumns,
+  buildStoreData,
+  gridCellDefToColumnDef
+};
+//# sourceMappingURL=adapters.js.map

package/dist/backend/dynamic-grid/adapters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/dynamic-grid/adapters.ts"],
+  "sourcesContent": ["import type { ColumnDef } from '../dynamic-table/types/index';\nimport type { GridCellDef, GridRowDef } from './types';\n\n/**\n * Converts a GridCellDef to a DynamicTable ColumnDef so we can reuse\n * getCellEditor / getCellRenderer from the DynamicTable component.\n */\nexport function gridCellDefToColumnDef(cellDef: GridCellDef): ColumnDef {\n  return {\n    data: cellDef.field,\n    title: cellDef.label,\n    type: cellDef.type,\n    readOnly: cellDef.readOnly,\n    source: cellDef.source,\n    renderer: cellDef.renderer\n      ? (value: any, rowData: any) => cellDef.renderer!(value, rowData, cellDef)\n      : undefined,\n    editor: cellDef.editor\n      ? (\n          value: any,\n          onChange: (v: any) => void,\n          onSave: () => void,\n          onCancel: () => void,\n          rowData: any,\n        ) => cellDef.editor!(value, onChange, onSave, onCancel, rowData, cellDef)\n      : undefined,\n    cellClassName: cellDef.cellClassName\n      ? (value: any, rowData: any) => cellDef.cellClassName!(value, rowData)\n      : undefined,\n  };\n}\n\n/**\n * Builds per-row data arrays for the CellStore from a single entity.\n * Each row gets the full entity data so any cell can read any field.\n */\nexport function buildStoreData(data: Record<string, any>, rows: GridRowDef[]): any[] {\n  return rows.map(() => ({ ...data }));\n}\n\n/**\n * Builds a flat ColumnDef array from the row with the most cells.\n * Used to initialize the CellStore (it needs a columns array).\n */\nexport function buildStoreColumns(rows: GridRowDef[]): ColumnDef[] {\n  const maxCols = Math.max(...rows.map((r) => r.cells.length));\n  const defs: ColumnDef[] = [];\n  for (let i = 0; i < maxCols; i++) {\n    for (const row of rows) {\n      if (row.cells[i]) {\n        defs.push(gridCellDefToColumnDef(row.cells[i]));\n        break;\n      }\n    }\n  }\n  return defs;\n}\n"],
+  "mappings": "AAOO,SAAS,uBAAuB,SAAiC;AACtE,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,OAAO,QAAQ;AAAA,IACf,MAAM,QAAQ;AAAA,IACd,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ;AAAA,IAChB,UAAU,QAAQ,WACd,CAAC,OAAY,YAAiB,QAAQ,SAAU,OAAO,SAAS,OAAO,IACvE;AAAA,IACJ,QAAQ,QAAQ,SACZ,CACE,OACA,UACA,QACA,UACA,YACG,QAAQ,OAAQ,OAAO,UAAU,QAAQ,UAAU,SAAS,OAAO,IACxE;AAAA,IACJ,eAAe,QAAQ,gBACnB,CAAC,OAAY,YAAiB,QAAQ,cAAe,OAAO,OAAO,IACnE;AAAA,EACN;AACF;AAMO,SAAS,eAAe,MAA2B,MAA2B;AACnF,SAAO,KAAK,IAAI,OAAO,EAAE,GAAG,KAAK,EAAE;AACrC;AAMO,SAAS,kBAAkB,MAAiC;AACjE,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAC3D,QAAM,OAAoB,CAAC;AAC3B,WAAS,IAAI,GAAG,IAAI,SAAS,KAAK;AAChC,eAAW,OAAO,MAAM;AACtB,UAAI,IAAI,MAAM,CAAC,GAAG;AAChB,aAAK,KAAK,uBAAuB,IAAI,MAAM,CAAC,CAAC,CAAC;AAC9C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/backend/dynamic-grid/components/GridCell.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useCallback } from "react";
+import { useCellStore, useCellState } from "../../dynamic-table/hooks/index.js";
+import { getCellRenderer } from "../../dynamic-table/components/renderers.js";
+import { getCellEditor } from "../../dynamic-table/components/editors.js";
+import { dispatch } from "../../dynamic-table/events/events.js";
+import { TableEvents } from "../../dynamic-table/types/index.js";
+function neutralizeEditorStyles(container) {
+  if (!container) return;
+  const editors = container.querySelectorAll(".hot-cell-editor, .hot-boolean-editor-wrapper");
+  editors.forEach((el) => {
+    el.style.background = "transparent";
+    el.style.boxShadow = "none";
+    el.style.padding = "0";
+    el.style.fontSize = "inherit";
+    el.style.color = "inherit";
+  });
+}
+const GridCell = memo(
+  ({ gridRow, gridCol, cellDef, columnDef, gridRef, idField }) => {
+    const store = useCellStore();
+    const state = useCellState(gridRow, gridCol);
+    const inputRef = useRef(null);
+    const valueRef = useRef(null);
+    const rowData = store.getRowData(gridRow);
+    const cellValue = rowData?.[cellDef.field];
+    const isEmpty = cellValue == null || cellValue === "";
+    const handleSave = useCallback(
+      (value, clearEditing = true) => {
+        const newValue = value !== void 0 ? value : cellValue;
+        const oldValue = rowData?.[cellDef.field];
+        if (String(oldValue ?? "") === String(newValue ?? "")) {
+          if (clearEditing) {
+            store.clearEditing();
+            store.focusTable();
+          }
+          return;
+        }
+        store.setCellValue(gridRow, gridCol, newValue);
+        if (clearEditing) {
+          store.clearEditing();
+          store.focusTable();
+        }
+        if (gridRef.current) {
+          dispatch(gridRef.current, TableEvents.CELL_EDIT_SAVE, {
+            rowIndex: gridRow,
+            colIndex: gridCol,
+            oldValue,
+            newValue,
+            prop: cellDef.field,
+            rowData,
+            id: rowData?.[idField]
+          });
+        }
+      },
+      [cellValue, rowData, cellDef.field, gridRow, gridCol, store, gridRef, idField]
+    );
+    const handleCancel = useCallback(() => {
+      store.clearEditing();
+      store.focusTable();
+    }, [store]);
+    const handleChange = useCallback(() => {
+    }, []);
+    useEffect(() => {
+      if (!state.isEditing) return;
+      neutralizeEditorStyles(valueRef.current);
+      requestAnimationFrame(() => {
+        if (!inputRef.current) return;
+        inputRef.current.focus();
+        const el = inputRef.current;
+        const supportsSelection = el.type === void 0 || ["text", "password", "search", "tel", "url", "number"].includes(el.type);
+        if (supportsSelection && el.setSelectionRange) {
+          const length = el.value?.length || 0;
+          try {
+            el.setSelectionRange(length, length);
+          } catch {
+          }
+        }
+      });
+    }, [state.isEditing]);
+    const handleClick = useCallback(() => {
+      store.setSelection({
+        type: "cell",
+        anchor: { row: gridRow, col: gridCol },
+        focus: { row: gridRow, col: gridCol }
+      });
+    }, [store, gridRow, gridCol]);
+    const handleDoubleClick = useCallback(() => {
+      if (!cellDef.readOnly) {
+        store.setEditingCell(gridRow, gridCol);
+      }
+    }, [store, gridRow, gridCol, cellDef.readOnly]);
+    const renderer = getCellRenderer(columnDef);
+    const renderedValue = renderer(cellValue, rowData, columnDef, gridRow, gridCol);
+    const conditionalClassName = cellDef.cellClassName?.(cellValue, rowData ?? {}) || "";
+    const saveStateBg = state.saveState === "saving" ? "bg-blue-50/50 dark:bg-blue-950/30" : state.saveState === "success" ? "bg-green-50/50 dark:bg-green-950/30" : state.saveState === "error" ? "bg-red-50/50 dark:bg-red-950/30" : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "dynamic-grid-cell",
+          "border border-border px-3 py-2 rounded-sm transition-colors duration-150",
+          cellDef.readOnly ? "bg-muted/30" : "cursor-pointer",
+          state.isSelected ? "ring-2 ring-primary ring-inset" : "",
+          saveStateBg,
+          conditionalClassName
+        ].filter(Boolean).join(" "),
+        style: cellDef.colSpan ? { gridColumn: `span ${cellDef.colSpan}` } : void 0,
+        "data-grid-row": gridRow,
+        "data-grid-col": gridCol,
+        "data-save-state": state.saveState,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: [
+                "text-[10px] uppercase tracking-wider mb-1 select-none",
+                cellDef.required && isEmpty ? "text-destructive font-medium" : "text-muted-foreground"
+              ].join(" "),
+              children: cellDef.label
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { ref: valueRef, className: "relative text-sm min-h-[1.25rem]", children: [
+            /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: renderedValue }),
+            state.isEditing && getCellEditor(
+              columnDef,
+              cellValue,
+              handleChange,
+              handleSave,
+              handleCancel,
+              rowData,
+              gridRow,
+              gridCol,
+              inputRef
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+GridCell.displayName = "GridCell";
+var GridCell_default = GridCell;
+export {
+  GridCell_default as default
+};
+//# sourceMappingURL=GridCell.js.map