@umodeapporg/ui 0.1.0

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationShortcuts.js

@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+const TOOL_KEYS = {
+  v: "select",
+  p: "freehand",
+  e: "eraser",
+  a: "arrow",
+  l: "line",
+  r: "rectangle",
+  o: "ellipse",
+  t: "text"
+};
+const NUDGE_STEP = 1;
+const NUDGE_STEP_FAST = 10;
+const isTypingTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
+const useAnnotationShortcuts = ({
+  active,
+  controller,
+  imageMaxDimension,
+  onToolChange
+}) => {
+  useEffect(() => {
+    if (!active) return;
+    const handleKeyDown = (event) => {
+      if (isTypingTarget(event.target)) return;
+      const isAccelerator = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      if (isAccelerator && key === "z") {
+        event.preventDefault();
+        if (event.shiftKey) controller.redo();
+        else controller.undo();
+        return;
+      }
+      if (isAccelerator && key === "y") {
+        event.preventDefault();
+        controller.redo();
+        return;
+      }
+      if (isAccelerator && key === "d") {
+        event.preventDefault();
+        controller.duplicateSelected();
+        return;
+      }
+      if (isAccelerator) return;
+      if (event.key === "Escape" && controller.selectedId) {
+        event.preventDefault();
+        event.stopPropagation();
+        controller.select(null);
+        return;
+      }
+      if ((event.key === "Delete" || event.key === "Backspace") && controller.selectedId) {
+        event.preventDefault();
+        controller.removeElement(controller.selectedId);
+        return;
+      }
+      if (event.key.startsWith("Arrow") && controller.selectedId) {
+        event.preventDefault();
+        const step = (event.shiftKey ? NUDGE_STEP_FAST : NUDGE_STEP) * Math.max(1, Math.round(imageMaxDimension / 400));
+        const deltaX = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+        const deltaY = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+        controller.nudgeSelected(deltaX, deltaY);
+        return;
+      }
+      const tool = TOOL_KEYS[key];
+      if (tool) {
+        event.preventDefault();
+        onToolChange(tool);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [active, controller, imageMaxDimension, onToolChange]);
+};
+export {
+  useAnnotationShortcuts
+};
+//# sourceMappingURL=useAnnotationShortcuts.js.map

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnotationShortcuts.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useAnnotationShortcuts.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { TAnnotationTool } from '../interfaces/annotationDocument';\n\nimport { IAnnotationDocumentController } from './useAnnotationDocument';\n\nconst TOOL_KEYS: Record<string, TAnnotationTool> = {\n  v: 'select',\n  p: 'freehand',\n  e: 'eraser',\n  a: 'arrow',\n  l: 'line',\n  r: 'rectangle',\n  o: 'ellipse',\n  t: 'text',\n};\n\nconst NUDGE_STEP = 1;\nconst NUDGE_STEP_FAST = 10;\n\nconst isTypingTarget = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  return target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);\n};\n\ninterface IAnnotationShortcutsOptions {\n  active: boolean;\n  controller: IAnnotationDocumentController;\n  imageMaxDimension: number;\n  onToolChange: (tool: TAnnotationTool) => void;\n}\n\n/**\n * Capture phase on purpose: Escape must clear the selection without also reaching the dialog's\n * own dismiss handler, which would close the editor on the first press.\n */\nexport const useAnnotationShortcuts = ({\n  active,\n  controller,\n  imageMaxDimension,\n  onToolChange,\n}: IAnnotationShortcutsOptions): void => {\n  useEffect(() => {\n    if (!active) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (isTypingTarget(event.target)) return;\n\n      const isAccelerator = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      if (isAccelerator && key === 'z') {\n        event.preventDefault();\n        if (event.shiftKey) controller.redo();\n        else controller.undo();\n        return;\n      }\n\n      if (isAccelerator && key === 'y') {\n        event.preventDefault();\n        controller.redo();\n        return;\n      }\n\n      if (isAccelerator && key === 'd') {\n        event.preventDefault();\n        controller.duplicateSelected();\n        return;\n      }\n\n      if (isAccelerator) return;\n\n      if (event.key === 'Escape' && controller.selectedId) {\n        event.preventDefault();\n        event.stopPropagation();\n        controller.select(null);\n        return;\n      }\n\n      if ((event.key === 'Delete' || event.key === 'Backspace') && controller.selectedId) {\n        event.preventDefault();\n        controller.removeElement(controller.selectedId);\n        return;\n      }\n\n      if (event.key.startsWith('Arrow') && controller.selectedId) {\n        event.preventDefault();\n        const step = (event.shiftKey ? NUDGE_STEP_FAST : NUDGE_STEP) * Math.max(1, Math.round(imageMaxDimension / 400));\n        const deltaX = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;\n        const deltaY = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;\n        controller.nudgeSelected(deltaX, deltaY);\n        return;\n      }\n\n      const tool = TOOL_KEYS[key];\n      if (tool) {\n        event.preventDefault();\n        onToolChange(tool);\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown, true);\n    return () => window.removeEventListener('keydown', handleKeyDown, true);\n  }, [active, controller, imageMaxDimension, onToolChange]);\n};\n"],"names":[],"mappings":";AAMA,MAAM,YAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,aAAa;AACnB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB,CAAC,WAAwC;AAC9D,MAAI,EAAE,kBAAkB,aAAc,QAAO;AAC7C,SAAO,OAAO,qBAAqB,CAAC,SAAS,YAAY,QAAQ,EAAE,SAAS,OAAO,OAAO;AAC5F;AAaO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,eAAe,MAAM,MAAM,EAAG;AAElC,YAAM,gBAAgB,MAAM,WAAW,MAAM;AAC7C,YAAM,MAAM,MAAM,IAAI,YAAA;AAEtB,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,YAAI,MAAM,SAAU,YAAW,KAAA;AAAA,wBACf,KAAA;AAChB;AAAA,MACF;AAEA,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,mBAAW,KAAA;AACX;AAAA,MACF;AAEA,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,mBAAW,kBAAA;AACX;AAAA,MACF;AAEA,UAAI,cAAe;AAEnB,UAAI,MAAM,QAAQ,YAAY,WAAW,YAAY;AACnD,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,mBAAW,OAAO,IAAI;AACtB;AAAA,MACF;AAEA,WAAK,MAAM,QAAQ,YAAY,MAAM,QAAQ,gBAAgB,WAAW,YAAY;AAClF,cAAM,eAAA;AACN,mBAAW,cAAc,WAAW,UAAU;AAC9C;AAAA,MACF;AAEA,UAAI,MAAM,IAAI,WAAW,OAAO,KAAK,WAAW,YAAY;AAC1D,cAAM,eAAA;AACN,cAAM,QAAQ,MAAM,WAAW,kBAAkB,cAAc,KAAK,IAAI,GAAG,KAAK,MAAM,oBAAoB,GAAG,CAAC;AAC9G,cAAM,SAAS,MAAM,QAAQ,cAAc,CAAC,OAAO,MAAM,QAAQ,eAAe,OAAO;AACvF,cAAM,SAAS,MAAM,QAAQ,YAAY,CAAC,OAAO,MAAM,QAAQ,cAAc,OAAO;AACpF,mBAAW,cAAc,QAAQ,MAAM;AACvC;AAAA,MACF;AAEA,YAAM,OAAO,UAAU,GAAG;AAC1B,UAAI,MAAM;AACR,cAAM,eAAA;AACN,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,eAAe,IAAI;AACtD,WAAO,MAAM,OAAO,oBAAoB,WAAW,eAAe,IAAI;AAAA,EACxE,GAAG,CAAC,QAAQ,YAAY,mBAAmB,YAAY,CAAC;AAC1D;"}

package/dist/components/UI/ImageAnnotator/hooks/useCoarsePointer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Drives the touch layout: bigger targets and visible captions, because `ControlledTooltip` never
+ * opens on a touch pointer and an icon-only tool would carry no meaning there.
+ */
+export declare const useCoarsePointer: () => boolean;

package/dist/components/UI/ImageAnnotator/hooks/useCoarsePointer.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+const COARSE_POINTER_QUERY = "(pointer: coarse)";
+const readCoarsePointer = () => {
+  try {
+    return window.matchMedia(COARSE_POINTER_QUERY).matches;
+  } catch {
+    return false;
+  }
+};
+const useCoarsePointer = () => {
+  const [isCoarse, setIsCoarse] = useState(readCoarsePointer);
+  useEffect(() => {
+    const query = window.matchMedia(COARSE_POINTER_QUERY);
+    const handleChange = (event) => setIsCoarse(event.matches);
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+  return isCoarse;
+};
+export {
+  useCoarsePointer
+};
+//# sourceMappingURL=useCoarsePointer.js.map

package/dist/components/UI/ImageAnnotator/hooks/useCoarsePointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCoarsePointer.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useCoarsePointer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst COARSE_POINTER_QUERY = '(pointer: coarse)';\n\nconst readCoarsePointer = (): boolean => {\n  try {\n    return window.matchMedia(COARSE_POINTER_QUERY).matches;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Drives the touch layout: bigger targets and visible captions, because `ControlledTooltip` never\n * opens on a touch pointer and an icon-only tool would carry no meaning there.\n */\nexport const useCoarsePointer = (): boolean => {\n  const [isCoarse, setIsCoarse] = useState(readCoarsePointer);\n\n  useEffect(() => {\n    const query = window.matchMedia(COARSE_POINTER_QUERY);\n    const handleChange = (event: MediaQueryListEvent) => setIsCoarse(event.matches);\n\n    query.addEventListener('change', handleChange);\n    return () => query.removeEventListener('change', handleChange);\n  }, []);\n\n  return isCoarse;\n};\n"],"names":[],"mappings":";AAEA,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB,MAAe;AACvC,MAAI;AACF,WAAO,OAAO,WAAW,oBAAoB,EAAE;AAAA,EACjD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAMO,MAAM,mBAAmB,MAAe;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,iBAAiB;AAE1D,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,oBAAoB;AACpD,UAAM,eAAe,CAAC,UAA+B,YAAY,MAAM,OAAO;AAE9E,UAAM,iBAAiB,UAAU,YAAY;AAC7C,WAAO,MAAM,MAAM,oBAAoB,UAAU,YAAY;AAAA,EAC/D,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/dist/components/UI/ImageAnnotator/hooks/useHtmlImage.d.ts

@@ -0,0 +1,2 @@
+/** Konva needs a decoded element, and an inserted image lives as a data URL inside the document. */
+export declare const useHtmlImage: (src: string | null) => HTMLImageElement | null;

package/dist/components/UI/ImageAnnotator/hooks/useHtmlImage.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+const useHtmlImage = (src) => {
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    if (!src) {
+      setImage(null);
+      return;
+    }
+    let cancelled = false;
+    const element = new Image();
+    element.onload = () => {
+      if (!cancelled) setImage(element);
+    };
+    element.onerror = () => {
+      if (!cancelled) setImage(null);
+    };
+    element.src = src;
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return image;
+};
+export {
+  useHtmlImage
+};
+//# sourceMappingURL=useHtmlImage.js.map

package/dist/components/UI/ImageAnnotator/hooks/useHtmlImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHtmlImage.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useHtmlImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** Konva needs a decoded element, and an inserted image lives as a data URL inside the document. */\nexport const useHtmlImage = (src: string | null): HTMLImageElement | null => {\n  const [image, setImage] = useState<HTMLImageElement | null>(null);\n\n  useEffect(() => {\n    if (!src) {\n      setImage(null);\n      return;\n    }\n\n    let cancelled = false;\n    const element = new Image();\n\n    element.onload = () => {\n      if (!cancelled) setImage(element);\n    };\n    element.onerror = () => {\n      if (!cancelled) setImage(null);\n    };\n    element.src = src;\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src]);\n\n  return image;\n};\n"],"names":[],"mappings":";AAGO,MAAM,eAAe,CAAC,QAAgD;AAC3E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkC,IAAI;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,eAAS,IAAI;AACb;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,UAAM,UAAU,IAAI,MAAA;AAEpB,YAAQ,SAAS,MAAM;AACrB,UAAI,CAAC,UAAW,UAAS,OAAO;AAAA,IAClC;AACA,YAAQ,UAAU,MAAM;AACtB,UAAI,CAAC,UAAW,UAAS,IAAI;AAAA,IAC/B;AACA,YAAQ,MAAM;AAEd,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;"}

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.d.ts

@@ -0,0 +1,89 @@
+export type TAnnotationElementType = 'freehand' | 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'text' | 'image';
+export type TAnnotationTool = 'select' | 'freehand' | 'eraser' | TAnnotationElementType;
+export type TAnnotationAlign = 'left' | 'center' | 'right';
+export interface IAnnotationPoint {
+    x: number;
+    y: number;
+}
+export interface IAnnotationSize {
+    width: number;
+    height: number;
+}
+interface IAnnotationElementBase {
+    id: string;
+    rotation: number;
+    opacity: number;
+}
+export interface IAnnotationFreehandElement extends IAnnotationElementBase {
+    type: 'freehand';
+    x: number;
+    y: number;
+    /** Flat `[x0, y0, x1, y1, ...]` in element space, so `x`/`y` stay the drag anchor. */
+    points: Array<number>;
+    stroke: string;
+    strokeWidth: number;
+}
+export interface IAnnotationSegmentElement extends IAnnotationElementBase {
+    type: 'line' | 'arrow';
+    start: IAnnotationPoint;
+    end: IAnnotationPoint;
+    stroke: string;
+    strokeWidth: number;
+}
+export interface IAnnotationShapeElement extends IAnnotationElementBase {
+    type: 'rectangle' | 'ellipse';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: string;
+    strokeWidth: number;
+    fill: string | null;
+    fillOpacity: number;
+    cornerRadius: number;
+}
+export interface IAnnotationTextElement extends IAnnotationElementBase {
+    type: 'text';
+    x: number;
+    y: number;
+    width: number;
+    text: string;
+    fontSize: number;
+    bold: boolean;
+    italic: boolean;
+    align: TAnnotationAlign;
+    color: string;
+    background: string | null;
+    backgroundOpacity: number;
+    padding: number;
+    cornerRadius: number;
+}
+export interface IAnnotationImageElement extends IAnnotationElementBase {
+    type: 'image';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src: string;
+    naturalWidth: number;
+    naturalHeight: number;
+    cornerRadius: number;
+    stroke: string | null;
+    strokeWidth: number;
+    shadow: boolean;
+}
+export type TAnnotationElement = IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement | IAnnotationTextElement | IAnnotationImageElement;
+export declare const ANNOTATION_DOCUMENT_VERSION = 1;
+export interface IAnnotationDocument {
+    version: number;
+    /** Element coordinates live in this space, never in screen pixels. */
+    width: number;
+    height: number;
+    elements: Array<TAnnotationElement>;
+}
+export type TAnnotationElementPatch = Partial<Omit<TAnnotationElement, 'id' | 'type'>>;
+export declare const isStrokeElement: (element: TAnnotationElement) => element is IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement;
+export declare const isFillableElement: (element: TAnnotationElement) => element is IAnnotationShapeElement;
+export declare const isSegmentElement: (element: TAnnotationElement) => element is IAnnotationSegmentElement;
+export declare const isBoxElement: (element: TAnnotationElement) => element is IAnnotationShapeElement | IAnnotationImageElement;
+export {};

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.js

@@ -0,0 +1,13 @@
+const ANNOTATION_DOCUMENT_VERSION = 1;
+const isStrokeElement = (element) => element.type !== "text" && element.type !== "image";
+const isFillableElement = (element) => element.type === "rectangle" || element.type === "ellipse";
+const isSegmentElement = (element) => element.type === "line" || element.type === "arrow";
+const isBoxElement = (element) => element.type === "rectangle" || element.type === "ellipse" || element.type === "image";
+export {
+  ANNOTATION_DOCUMENT_VERSION,
+  isBoxElement,
+  isFillableElement,
+  isSegmentElement,
+  isStrokeElement
+};
+//# sourceMappingURL=annotationDocument.js.map

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationDocument.js","sources":["../../../../../src/components/UI/ImageAnnotator/interfaces/annotationDocument.ts"],"sourcesContent":["export type TAnnotationElementType = 'freehand' | 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'text' | 'image';\n\nexport type TAnnotationTool = 'select' | 'freehand' | 'eraser' | TAnnotationElementType;\n\nexport type TAnnotationAlign = 'left' | 'center' | 'right';\n\nexport interface IAnnotationPoint {\n  x: number;\n  y: number;\n}\n\nexport interface IAnnotationSize {\n  width: number;\n  height: number;\n}\n\ninterface IAnnotationElementBase {\n  id: string;\n  rotation: number;\n  opacity: number;\n}\n\nexport interface IAnnotationFreehandElement extends IAnnotationElementBase {\n  type: 'freehand';\n  x: number;\n  y: number;\n  /** Flat `[x0, y0, x1, y1, ...]` in element space, so `x`/`y` stay the drag anchor. */\n  points: Array<number>;\n  stroke: string;\n  strokeWidth: number;\n}\n\nexport interface IAnnotationSegmentElement extends IAnnotationElementBase {\n  type: 'line' | 'arrow';\n  start: IAnnotationPoint;\n  end: IAnnotationPoint;\n  stroke: string;\n  strokeWidth: number;\n}\n\nexport interface IAnnotationShapeElement extends IAnnotationElementBase {\n  type: 'rectangle' | 'ellipse';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  stroke: string;\n  strokeWidth: number;\n  fill: string | null;\n  fillOpacity: number;\n  cornerRadius: number;\n}\n\nexport interface IAnnotationTextElement extends IAnnotationElementBase {\n  type: 'text';\n  x: number;\n  y: number;\n  width: number;\n  text: string;\n  fontSize: number;\n  bold: boolean;\n  italic: boolean;\n  align: TAnnotationAlign;\n  color: string;\n  background: string | null;\n  backgroundOpacity: number;\n  padding: number;\n  cornerRadius: number;\n}\n\nexport interface IAnnotationImageElement extends IAnnotationElementBase {\n  type: 'image';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  src: string;\n  naturalWidth: number;\n  naturalHeight: number;\n  cornerRadius: number;\n  stroke: string | null;\n  strokeWidth: number;\n  shadow: boolean;\n}\n\nexport type TAnnotationElement =\n  | IAnnotationFreehandElement\n  | IAnnotationSegmentElement\n  | IAnnotationShapeElement\n  | IAnnotationTextElement\n  | IAnnotationImageElement;\n\nexport const ANNOTATION_DOCUMENT_VERSION = 1;\n\nexport interface IAnnotationDocument {\n  version: number;\n  /** Element coordinates live in this space, never in screen pixels. */\n  width: number;\n  height: number;\n  elements: Array<TAnnotationElement>;\n}\n\nexport type TAnnotationElementPatch = Partial<Omit<TAnnotationElement, 'id' | 'type'>>;\n\nexport const isStrokeElement = (\n  element: TAnnotationElement,\n): element is IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement =>\n  element.type !== 'text' && element.type !== 'image';\n\nexport const isFillableElement = (element: TAnnotationElement): element is IAnnotationShapeElement =>\n  element.type === 'rectangle' || element.type === 'ellipse';\n\nexport const isSegmentElement = (element: TAnnotationElement): element is IAnnotationSegmentElement =>\n  element.type === 'line' || element.type === 'arrow';\n\nexport const isBoxElement = (\n  element: TAnnotationElement,\n): element is IAnnotationShapeElement | IAnnotationImageElement =>\n  element.type === 'rectangle' || element.type === 'ellipse' || element.type === 'image';\n"],"names":[],"mappings":"AA4FO,MAAM,8BAA8B;AAYpC,MAAM,kBAAkB,CAC7B,YAEA,QAAQ,SAAS,UAAU,QAAQ,SAAS;AAEvC,MAAM,oBAAoB,CAAC,YAChC,QAAQ,SAAS,eAAe,QAAQ,SAAS;AAE5C,MAAM,mBAAmB,CAAC,YAC/B,QAAQ,SAAS,UAAU,QAAQ,SAAS;AAEvC,MAAM,eAAe,CAC1B,YAEA,QAAQ,SAAS,eAAe,QAAQ,SAAS,aAAa,QAAQ,SAAS;"}

package/dist/components/UI/ImagePlaceholder.d.ts

@@ -0,0 +1,24 @@
+export type TImagePlaceholderVariant = 'empty' | 'broken';
+interface IImagePlaceholderProps {
+    /**
+     * `empty` = there is no image for this record (the normal state).
+     * `broken` = there IS a source but it failed to load (a real problem worth distinguishing).
+     */
+    variant?: TImagePlaceholderVariant;
+    className?: string;
+}
+/**
+ * The single placeholder for "no image here", replacing the fixed missing-image.png.
+ *
+ * A raster asset cannot follow the theme: the old PNG was a dark tile, so it read as a
+ * hole in light mode and as a slightly-wrong-dark square in dark mode. This draws the
+ * same idea from tokens instead, so it is correct in both themes for free.
+ *
+ * It is used at every size in the app, from a 40px table thumbnail to a full datasheet
+ * panel, so the icon is sized in container-query units rather than a fixed rem: it scales
+ * with whatever box it is dropped into, with a floor and a ceiling so it never becomes a
+ * dot or a poster. `MaterialSymbol` receives no `size` prop on purpose, because that prop
+ * writes an inline font-size which would beat this class.
+ */
+declare const ImagePlaceholder: React.FC<IImagePlaceholderProps>;
+export default ImagePlaceholder;

package/dist/components/UI/ImagePlaceholder.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const VARIANT_ICON = {
+  empty: "image",
+  broken: "broken_image"
+};
+const ImagePlaceholder = ({ variant = "empty", className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": true,
+    className: twMerge("flex size-full items-center justify-center overflow-hidden bg-muted @container", className),
+    children: /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon: VARIANT_ICON[variant],
+        weight: 300,
+        className: "!text-[clamp(0.875rem,34cqi,2.75rem)] leading-none text-foreground-faint"
+      }
+    )
+  }
+);
+export {
+  ImagePlaceholder as default
+};
+//# sourceMappingURL=ImagePlaceholder.js.map

package/dist/components/UI/ImagePlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlaceholder.js","sources":["../../../src/components/UI/ImagePlaceholder.tsx"],"sourcesContent":["import { twMerge } from 'tailwind-merge';\n\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nexport type TImagePlaceholderVariant = 'empty' | 'broken';\n\ninterface IImagePlaceholderProps {\n  /**\n   * `empty` = there is no image for this record (the normal state).\n   * `broken` = there IS a source but it failed to load (a real problem worth distinguishing).\n   */\n  variant?: TImagePlaceholderVariant;\n  className?: string;\n}\n\nconst VARIANT_ICON: Record<TImagePlaceholderVariant, SymbolCodepoints> = {\n  empty: 'image',\n  broken: 'broken_image',\n};\n\n/**\n * The single placeholder for \"no image here\", replacing the fixed missing-image.png.\n *\n * A raster asset cannot follow the theme: the old PNG was a dark tile, so it read as a\n * hole in light mode and as a slightly-wrong-dark square in dark mode. This draws the\n * same idea from tokens instead, so it is correct in both themes for free.\n *\n * It is used at every size in the app, from a 40px table thumbnail to a full datasheet\n * panel, so the icon is sized in container-query units rather than a fixed rem: it scales\n * with whatever box it is dropped into, with a floor and a ceiling so it never becomes a\n * dot or a poster. `MaterialSymbol` receives no `size` prop on purpose, because that prop\n * writes an inline font-size which would beat this class.\n */\nconst ImagePlaceholder: React.FC<IImagePlaceholderProps> = ({ variant = 'empty', className }) => (\n  <div\n    aria-hidden\n    className={twMerge('flex size-full items-center justify-center overflow-hidden bg-muted @container', className)}\n  >\n    <MaterialSymbol\n      icon={VARIANT_ICON[variant]}\n      weight={300}\n      /* `!` is required: outlined.css pins `.material-symbols { font-size: 1.5rem }` and,\n         being imported last, it wins the cascade over a plain utility. */\n      className=\"!text-[clamp(0.875rem,34cqi,2.75rem)] leading-none text-foreground-faint\"\n    />\n  </div>\n);\n\nexport default ImagePlaceholder;\n"],"names":[],"mappings":";;;AAeA,MAAM,eAAmE;AAAA,EACvE,OAAO;AAAA,EACP,QAAQ;AACV;AAeA,MAAM,mBAAqD,CAAC,EAAE,UAAU,SAAS,gBAC/E;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAW,QAAQ,kFAAkF,SAAS;AAAA,IAE9G,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,aAAa,OAAO;AAAA,QAC1B,QAAQ;AAAA,QAGR,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ;AACF;"}

package/dist/components/UI/ImageZoomOverlay.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface IImageZoomOverlayProps {
+    src: string;
+    onClose: () => void;
+}
+declare const ImageZoomOverlay: React.FC<IImageZoomOverlayProps>;
+export default ImageZoomOverlay;

package/dist/components/UI/ImageZoomOverlay.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const ImageZoomOverlay = ({ src, onClose }) => {
+  const { t } = useTranslation("ui");
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      onClose();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [onClose]);
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: onClose,
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": t("imageZoom.title"),
+        className: "fixed inset-0 z-[9998] flex items-center justify-center p-6 glass-scrim",
+        children: [
+          /* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageZoom.close"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              onClick: onClose,
+              className: "absolute right-4 top-4 flex items-center justify-center rounded-full bg-glass/10 p-2 text-white transition-interactive duration-base ease-enter hover:bg-glass/20 active:scale-90",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 24 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), className: "flex max-h-full max-w-full", children: /* @__PURE__ */ jsx(ControlledImage, { src, className: "max-h-[90vh] max-w-[90vw] object-contain" }) })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+export {
+  ImageZoomOverlay as default
+};
+//# sourceMappingURL=ImageZoomOverlay.js.map

package/dist/components/UI/ImageZoomOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageZoomOverlay.js","sources":["../../../src/components/UI/ImageZoomOverlay.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IImageZoomOverlayProps {\n  src: string;\n  onClose: () => void;\n}\n\n// Visualização ampliada em tela cheia (portal). Fecha com Esc, clique fora ou\n// no botão de fechar.\nconst ImageZoomOverlay: React.FC<IImageZoomOverlayProps> = ({ src, onClose }) => {\n  const { t } = useTranslation('ui');\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Escape') return;\n      // Na captura e barrando a propagação: o drawer que abriu esta imagem também escuta Esc no\n      // document, e sem isso uma tecla fecharia a imagem E o drawer atrás dela.\n      event.stopPropagation();\n      onClose();\n    };\n    document.addEventListener('keydown', onKeyDown, true);\n    return () => document.removeEventListener('keydown', onKeyDown, true);\n  }, [onClose]);\n\n  return createPortal(\n    <div\n      onClick={onClose}\n      // `role=\"dialog\"` não é enfeite: é como `isPressOnLayeredSurface` reconhece esta camada. Sem\n      // ele, o drawer por baixo lê o clique no X como \"clicou fora de mim\" e se fecha junto.\n      role=\"dialog\"\n      aria-modal={true}\n      aria-label={t('imageZoom.title')}\n      className=\"fixed inset-0 z-[9998] flex items-center justify-center p-6 glass-scrim\"\n    >\n      <ControlledTooltip content={t('imageZoom.close')} className=\"z-[9999]\">\n        <ControlledButton\n          defaultHtmlButton\n          onClick={onClose}\n          className=\"absolute right-4 top-4 flex items-center justify-center rounded-full bg-glass/10 p-2 text-white transition-interactive duration-base ease-enter hover:bg-glass/20 active:scale-90\"\n        >\n          <MaterialSymbol icon=\"close\" size={24} />\n        </ControlledButton>\n      </ControlledTooltip>\n      <div onClick={(event) => event.stopPropagation()} className=\"flex max-h-full max-w-full\">\n        <ControlledImage src={src} className=\"max-h-[90vh] max-w-[90vw] object-contain\" />\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nexport default ImageZoomOverlay;\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,mBAAqD,CAAC,EAAE,KAAK,cAAc;AAC/E,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAA+B;AAChD,UAAI,MAAM,QAAQ,SAAU;AAG5B,YAAM,gBAAA;AACN,cAAA;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW,IAAI;AAAA,EACtE,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QAGT,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,cAAY,EAAE,iBAAiB;AAAA,QAC/B,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,qBAAkB,SAAS,EAAE,iBAAiB,GAAG,WAAU,YAC1D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,GAE3C;AAAA,UACA,oBAAC,OAAA,EAAI,SAAS,CAAC,UAAU,MAAM,mBAAmB,WAAU,8BAC1D,UAAA,oBAAC,iBAAA,EAAgB,KAAU,WAAU,4CAA2C,EAAA,CAClF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}

package/dist/components/UI/InformationCard.d.ts

@@ -0,0 +1,26 @@
+import { SymbolCodepoints } from './MaterialSymbol';
+export interface IInformationCard {
+    title: string;
+    icon?: SymbolCodepoints;
+    value: string;
+    secondaryValue?: string;
+    subValue?: string;
+    subValueLabel?: string;
+    show?: boolean;
+    tooltip?: string;
+    /** When set, the card becomes clickable (e.g. drill down to a filtered list). */
+    onClick?: () => void;
+}
+interface IInformationCardProps {
+    cards: Array<IInformationCard>;
+    loading?: boolean;
+    headerTitle?: string;
+    showHeaderBorder?: boolean;
+    headerActionSlot?: React.ReactNode;
+    /** When false the section stays expanded and the collapse affordance is removed. */
+    collapsible?: boolean;
+    /** When false only the cards render, with no title row above them. */
+    showHeader?: boolean;
+}
+declare const InformationCard: React.FC<IInformationCardProps>;
+export default InformationCard;

package/dist/components/UI/InformationCard.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { ControlledAccordionRoot, ControlledAccordionHeader, ControlledAccordionBody } from "./ControlledAccordion.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { AccordionIcon } from "./AccordionIcon.js";
+import CustomCard from "./CustomCard.js";
+import SkeletonLoading from "./SkeletonLoading.js";
+const CompactStatCard = ({ card, loading, isMobile }) => /* @__PURE__ */ jsx(
+  CustomCard,
+  {
+    itsClickable: !loading && !!card.onClick,
+    onClickHook: card.onClick,
+    className: classNames(
+      "shrink-0 p-3",
+      isMobile ? "basis-[calc(50%_-_4px)] snap-start" : "min-w-[140px] flex-1 basis-[140px]"
+    ),
+    children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        card.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: card.icon, size: 22, color: "rgb(var(--color-primary))" }),
+        /* @__PURE__ */ jsx("div", { className: "text-base font-bold text-foreground", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-5" }) : card.value })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-x-1", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted", children: card.title }),
+        card.tooltip && /* @__PURE__ */ jsx(ControlledTooltip, { content: card.tooltip, className: "max-w-80", children: /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "info",
+            size: 14,
+            color: "rgb(var(--color-foreground-subtle))",
+            className: "cursor-help"
+          }
+        ) })
+      ] }) }),
+      !isMobile && card.secondaryValue && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-foreground-subtle", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : card.secondaryValue }),
+      !isMobile && card.subValue && card.subValueLabel && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-foreground-faint", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : `${card.subValueLabel} ${card.subValue}` })
+    ] })
+  }
+);
+const InformationCard = ({
+  cards,
+  loading,
+  headerTitle,
+  headerActionSlot,
+  collapsible = true,
+  showHeader = true
+}) => {
+  const { t } = useTranslation("ui");
+  const { isMobile } = useBreakpoint();
+  const [open, setOpen] = useState(isMobile ? 0 : 1);
+  useEffect(() => {
+    setOpen(isMobile ? 0 : 1);
+  }, [isMobile]);
+  const handleOpen = (value) => setOpen(open === value ? 0 : value);
+  const visibleCards = (cards ?? []).filter((card) => card.show !== false);
+  return /* @__PURE__ */ jsxs(
+    ControlledAccordionRoot,
+    {
+      open: collapsible ? open === 1 : true,
+      icon: collapsible ? /* @__PURE__ */ jsx(AccordionIcon, { id: 1, open }) : /* @__PURE__ */ jsx(Fragment, {}),
+      children: [
+        showHeader && /* @__PURE__ */ jsx(
+          ControlledAccordionHeader,
+          {
+            onClick: collapsible ? () => handleOpen(1) : void 0,
+            tabIndex: collapsible ? void 0 : -1,
+            className: classNames(
+              "inter-font w-full border-b-0 py-2",
+              isMobile ? "p-0 text-base" : "p-1 text-lg",
+              !collapsible && "cursor-default"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx("span", { children: headerTitle ?? t("informationCard.defaultTitle") }),
+              headerActionSlot && /* @__PURE__ */ jsx(Fragment, { children: headerActionSlot })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(ControlledAccordionBody, { className: "py-2 pl-2 pr-1", children: isMobile ? /* @__PURE__ */ jsx("div", { className: "flex h-[70px] snap-x snap-mandatory flex-nowrap gap-2 overflow-x-auto pb-1", children: visibleCards.map((card, index) => /* @__PURE__ */ jsx(CompactStatCard, { card, loading, isMobile: true }, index)) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: visibleCards.map((card, index) => /* @__PURE__ */ jsx(CompactStatCard, { card, loading }, index)) }) })
+      ]
+    }
+  );
+};
+export {
+  InformationCard as default
+};
+//# sourceMappingURL=InformationCard.js.map

package/dist/components/UI/InformationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationCard.js","sources":["../../../src/components/UI/InformationCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  ControlledAccordionBody,\n  ControlledAccordionHeader,\n  ControlledAccordionRoot,\n} from '@/components/UI/ControlledAccordion';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport { AccordionIcon } from './AccordionIcon';\nimport CustomCard from './CustomCard';\nimport SkeletonLoading from './SkeletonLoading';\n\nexport interface IInformationCard {\n  title: string;\n  icon?: SymbolCodepoints;\n  value: string;\n  secondaryValue?: string;\n  subValue?: string;\n  subValueLabel?: string;\n  show?: boolean;\n  tooltip?: string;\n  /** When set, the card becomes clickable (e.g. drill down to a filtered list). */\n  onClick?: () => void;\n}\n\ninterface IInformationCardProps {\n  cards: Array<IInformationCard>;\n  loading?: boolean;\n  headerTitle?: string;\n  showHeaderBorder?: boolean;\n  headerActionSlot?: React.ReactNode;\n  /** When false the section stays expanded and the collapse affordance is removed. */\n  collapsible?: boolean;\n  /** When false only the cards render, with no title row above them. */\n  showHeader?: boolean;\n}\n\ninterface ICompactStatCardProps {\n  card: IInformationCard;\n  loading?: boolean;\n  isMobile?: boolean;\n}\n\nconst CompactStatCard: React.FC<ICompactStatCardProps> = ({ card, loading, isMobile }) => (\n  <CustomCard\n    itsClickable={!loading && !!card.onClick}\n    onClickHook={card.onClick}\n    className={classNames(\n      'shrink-0 p-3',\n      isMobile ? 'basis-[calc(50%_-_4px)] snap-start' : 'min-w-[140px] flex-1 basis-[140px]',\n    )}\n  >\n    <div>\n      <div className=\"flex items-center gap-x-2\">\n        {card.icon && <MaterialSymbol icon={card.icon} size={22} color=\"rgb(var(--color-primary))\" />}\n        <div className=\"text-base font-bold text-foreground\">\n          {loading ? <SkeletonLoading className=\"!h-5\" /> : card.value}\n        </div>\n      </div>\n      <div className=\"mt-1 flex items-center gap-x-1\">\n        {loading ? (\n          <SkeletonLoading className=\"!h-3.5\" />\n        ) : (\n          <>\n            <span className=\"text-xs text-foreground-muted\">{card.title}</span>\n            {card.tooltip && (\n              <ControlledTooltip content={card.tooltip} className=\"max-w-80\">\n                <MaterialSymbol\n                  icon=\"info\"\n                  size={14}\n                  color=\"rgb(var(--color-foreground-subtle))\"\n                  className=\"cursor-help\"\n                />\n              </ControlledTooltip>\n            )}\n          </>\n        )}\n      </div>\n      {!isMobile && card.secondaryValue && (\n        <div className=\"mt-1 text-xs text-foreground-subtle\">\n          {loading ? <SkeletonLoading className=\"!h-3.5\" /> : card.secondaryValue}\n        </div>\n      )}\n      {!isMobile && card.subValue && card.subValueLabel && (\n        <div className=\"mt-0.5 text-xs text-foreground-faint\">\n          {loading ? <SkeletonLoading className=\"!h-3.5\" /> : `${card.subValueLabel} ${card.subValue}`}\n        </div>\n      )}\n    </div>\n  </CustomCard>\n);\n\nconst InformationCard: React.FC<IInformationCardProps> = ({\n  cards,\n  loading,\n  headerTitle,\n  headerActionSlot,\n  collapsible = true,\n  showHeader = true,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isMobile } = useBreakpoint();\n  const [open, setOpen] = useState(isMobile ? 0 : 1);\n\n  useEffect(() => {\n    setOpen(isMobile ? 0 : 1);\n  }, [isMobile]);\n\n  const handleOpen = (value: number) => setOpen(open === value ? 0 : value);\n\n  const visibleCards = (cards ?? []).filter((card) => card.show !== false);\n\n  return (\n    <ControlledAccordionRoot\n      open={collapsible ? open === 1 : true}\n      icon={collapsible ? <AccordionIcon id={1} open={open} /> : <></>}\n    >\n      {showHeader && (\n        <ControlledAccordionHeader\n          onClick={collapsible ? () => handleOpen(1) : undefined}\n          tabIndex={collapsible ? undefined : -1}\n          className={classNames(\n            'inter-font w-full border-b-0 py-2',\n            isMobile ? 'p-0 text-base' : 'p-1 text-lg',\n            !collapsible && 'cursor-default',\n          )}\n        >\n          <div className=\"flex items-center gap-x-2\">\n            <span>{headerTitle ?? t('informationCard.defaultTitle')}</span>\n            {headerActionSlot && <>{headerActionSlot}</>}\n          </div>\n        </ControlledAccordionHeader>\n      )}\n      <ControlledAccordionBody className=\"py-2 pl-2 pr-1\">\n        {isMobile ? (\n          <div className=\"flex h-[70px] snap-x snap-mandatory flex-nowrap gap-2 overflow-x-auto pb-1\">\n            {visibleCards.map((card, index) => (\n              <CompactStatCard key={index} card={card} loading={loading} isMobile />\n            ))}\n          </div>\n        ) : (\n          <div className=\"flex flex-wrap gap-2\">\n            {visibleCards.map((card, index) => (\n              <CompactStatCard key={index} card={card} loading={loading} />\n            ))}\n          </div>\n        )}\n      </ControlledAccordionBody>\n    </ControlledAccordionRoot>\n  );\n};\n\nexport default InformationCard;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Kanban/KanbanBoard.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+interface IKanbanBoardProps {
+    /** Cartão que acompanha o cursor. O host devolve o conteúdo do que está sendo arrastado. */
+    renderDragOverlay?: (activeId: string) => ReactNode;
+    /**
+     * Ids das colunas na ordem atual. Junto com `onLaneReorder`, liga o arraste de colunas:
+     * a lane ganha uma alça no cabeçalho e o quadro devolve a nova ordem inteira.
+     */
+    laneIds?: Array<string>;
+    onLaneReorder?: (orderedLaneIds: Array<string>) => void;
+    /** Largura do overlay. O padrão casa com a largura útil de uma lane. */
+    overlayClassName?: string;
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragCancel?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Casca de um quadro Kanban: o contexto de arraste, a faixa horizontal de colunas e o
+ * cartão que segue o cursor. É a ÚNICA implementação de quadro do app; um Kanban novo
+ * compõe `KanbanBoard` + `KanbanLane` + `KanbanCard` e traz só o conteúdo do cartão.
+ */
+declare const KanbanBoard: React.FC<IKanbanBoardProps>;
+export default KanbanBoard;