impact-ui 4.0.12 → 4.0.13

package/dist/hooks/useDraggableResizable.d.ts

@@ -0,0 +1,104 @@
+import { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';
+
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export declare const BOTTOM_VIEWPORT_MARGIN = 24;
+export interface ViewportMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Accepts a single number (all sides) or per-side overrides. */
+export type ViewportMarginInput = number | Partial<ViewportMargin>;
+export interface UseDraggableResizableOptions {
+    /** Starting position/size. Only read once on mount (use `setRect`/`collapseTo` to change later). */
+    initialRect: Rect;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /**
+     * Gap kept clear between the panel and the viewport edges while dragging/resizing, so it
+     * stops short of the edge instead of touching it. Pass a number for a uniform margin, or
+     * per-side values (e.g. `{ top: 56, bottom: 24 }` to also clear a fixed app header).
+     * Pass `0` for docked panels that should sit flush with the viewport.
+     * @default 0
+     */
+    viewportMargin?: ViewportMarginInput;
+    /** Disables both dragging and resizing (e.g. while in a "full width" mode). */
+    disabled?: boolean;
+    onChange?: (rect: Rect) => void;
+    onDragEnd?: (rect: Rect) => void;
+    onResizeEnd?: (rect: Rect) => void;
+}
+export interface HandleProps {
+    onPointerDown: (e: ReactPointerEvent) => void;
+    onKeyDown: (e: ReactKeyboardEvent) => void;
+}
+/** Viewport corner the collapsed panel is pinned to. */
+export type CollapseAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface CollapseOptions {
+    /** @default 'bottom-right' */
+    anchor?: CollapseAnchor;
+    /**
+     * Margin to inset the collapsed panel from the viewport edges. Pass this when the margin
+     * changes in the same event that triggers the collapse - the `viewportMargin` *prop* is
+     * still the pre-update value at that point (React batches state), so relying on it would
+     * anchor against the wrong gap.
+     */
+    viewportMargin?: ViewportMarginInput;
+}
+export interface UseDraggableResizableResult {
+    rect: Rect;
+    isDragging: boolean;
+    isResizing: boolean;
+    isCollapsed: boolean;
+    setRect: (updater: Rect | ((prev: Rect) => Rect)) => void;
+    /** Spread onto the element that should act as the "title bar" drag handle. */
+    dragHandleProps: HandleProps;
+    /** Spread onto one of the 8 resize handle elements. */
+    getResizeHandleProps: (direction: ResizeDirection) => HandleProps & {
+        role: 'separator';
+        tabIndex: 0;
+        'aria-orientation': 'horizontal' | 'vertical';
+    };
+    /**
+     * Shrink to a fixed compact size pinned to a viewport corner (default: bottom-right),
+     * remembering the current rect so `restore()` can bring it back.
+     */
+    collapseTo: (size: {
+        width: number;
+        height: number;
+    }, options?: CollapseOptions) => void;
+    /** Restore the rect that was active before the last `collapseTo` call. */
+    restore: () => void;
+}
+/**
+ * Headless drag + 8-direction resize behavior for a floating panel (think: Google Meet's
+ * pop-out mini window). Framework-agnostic logic lives here so any component (chatbot,
+ * modal, side panel, etc.) can opt in just by spreading `dragHandleProps` /
+ * `getResizeHandleProps(direction)` onto its own markup.
+ *
+ * Implementation notes (see chat discussion for rationale):
+ * - Uses Pointer Events + `setPointerCapture` (works for mouse, touch, and pen) instead of
+ *   plain `mousedown`/`mousemove`, and keeps receiving events on the same element even if the
+ *   pointer moves faster than layout, so there is no need for `document`-level listeners.
+ * - Batches state updates via `requestAnimationFrame` so dragging/resizing doesn't trigger a
+ *   React re-render on every single pixel of pointer movement.
+ * - Clamps the rect to the viewport (recomputed on every move, not just drag-start) so the
+ *   panel can never be dragged/resized off-screen on any edge, and always keeps a small margin
+ *   clear at the bottom of the viewport.
+ * - Toggles a `no-select`/`col-resize`-style class on `<body>` while interacting, and always
+ *   cleans up listeners + that class on `pointerup`/`pointercancel` and on unmount, even if the
+ *   consumer unmounts mid-drag.
+ * - Resize handles expose `role="separator"` + keyboard nudging (arrow keys, Shift for a
+ *   larger step) for accessibility.
+ */
+export declare function useDraggableResizable({ initialRect, minWidth, minHeight, maxWidth, maxHeight, viewportMargin, disabled, onChange, onDragEnd, onResizeEnd, }: UseDraggableResizableOptions): UseDraggableResizableResult;
+//# sourceMappingURL=useDraggableResizable.d.ts.map

package/dist/hooks/useDraggableResizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggableResizable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggableResizable.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useDraggableResizable.js

@@ -0,0 +1,323 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const RESIZE_STEP = 8;
+const RESIZE_STEP_LARGE = 32;
+const BOTTOM_VIEWPORT_MARGIN = 24;
+function resolveViewportMargin(input) {
+  if (typeof input === "number") {
+    return { top: input, right: input, bottom: input, left: input };
+  }
+  return {
+    top: (input == null ? void 0 : input.top) ?? 0,
+    right: (input == null ? void 0 : input.right) ?? 0,
+    bottom: (input == null ? void 0 : input.bottom) ?? 0,
+    left: (input == null ? void 0 : input.left) ?? 0
+  };
+}
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function safeCapturePointer(target, pointerId) {
+  if (typeof target.setPointerCapture !== "function") return;
+  try {
+    target.setPointerCapture(pointerId);
+  } catch {
+  }
+}
+function safeReleasePointer(target, pointerId) {
+  if (typeof target.releasePointerCapture !== "function") return;
+  try {
+    target.releasePointerCapture(pointerId);
+  } catch {
+  }
+}
+function clampRect(rect, opts) {
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : Infinity;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : Infinity;
+  const { margin } = opts;
+  const boundsWidth = viewportWidth - margin.left - margin.right;
+  const boundsHeight = viewportHeight - margin.top - margin.bottom;
+  const width = clampNumber(rect.width, opts.minWidth, Math.min(opts.maxWidth, boundsWidth));
+  const height = clampNumber(rect.height, opts.minHeight, Math.min(opts.maxHeight, boundsHeight));
+  const x = clampNumber(
+    rect.x,
+    margin.left,
+    Math.max(margin.left, viewportWidth - margin.right - width)
+  );
+  const y = clampNumber(
+    rect.y,
+    margin.top,
+    Math.max(margin.top, viewportHeight - margin.bottom - height)
+  );
+  return { x, y, width, height };
+}
+function useDraggableResizable({
+  initialRect,
+  minWidth = 320,
+  minHeight = 320,
+  maxWidth = Infinity,
+  maxHeight = Infinity,
+  viewportMargin,
+  disabled = false,
+  onChange,
+  onDragEnd,
+  onResizeEnd
+}) {
+  const [rect, setRectState] = useState(initialRect);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const rectRef = useRef(rect);
+  rectRef.current = rect;
+  const savedRectRef = useRef(null);
+  const rafRef = useRef(null);
+  const pendingRectRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const margin = resolveViewportMargin(viewportMargin);
+  const limits = { minWidth, minHeight, maxWidth, maxHeight, margin };
+  const { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } = margin;
+  const commitRect = useCallback(
+    (next) => {
+      const clamped = clampRect(next, limits);
+      pendingRectRef.current = clamped;
+      if (rafRef.current == null) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          if (pendingRectRef.current) {
+            setRectState(pendingRectRef.current);
+            onChange == null ? void 0 : onChange(pendingRectRef.current);
+          }
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      onChange
+    ]
+  );
+  const setRect = useCallback(
+    (updater) => {
+      const next = typeof updater === "function" ? updater(rectRef.current) : updater;
+      const clamped = clampRect(next, limits);
+      rectRef.current = clamped;
+      setRectState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      onChange
+    ]
+  );
+  const endInteraction = useCallback(() => {
+    document.body.classList.remove("no-select");
+    const cleanup = cleanupRef.current;
+    cleanupRef.current = null;
+    cleanup == null ? void 0 : cleanup();
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (pendingRectRef.current) {
+      setRectState(pendingRectRef.current);
+      onChange == null ? void 0 : onChange(pendingRectRef.current);
+    }
+  }, [onChange]);
+  useEffect(
+    () => () => {
+      var _a;
+      document.body.classList.remove("no-select");
+      (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+  const startDrag = useCallback(
+    (e) => {
+      if (disabled) return;
+      const target = e.currentTarget;
+      const pointerId = e.pointerId;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startRect = rectRef.current;
+      safeCapturePointer(target, pointerId);
+      document.body.classList.add("no-select");
+      setIsDragging(true);
+      const onMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        commitRect({ ...startRect, x: startRect.x - 24 + dx, y: startRect.y - 24 + dy });
+      };
+      const onUp = () => {
+        safeReleasePointer(target, pointerId);
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+        target.removeEventListener("pointercancel", onUp);
+        setIsDragging(false);
+        endInteraction();
+        onDragEnd == null ? void 0 : onDragEnd(rectRef.current);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+      target.addEventListener("pointercancel", onUp);
+      cleanupRef.current = onUp;
+    },
+    [disabled, commitRect, endInteraction, onDragEnd]
+  );
+  const startResize = useCallback(
+    (direction) => (e) => {
+      if (disabled) return;
+      e.stopPropagation();
+      const target = e.currentTarget;
+      const pointerId = e.pointerId;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startRect = rectRef.current;
+      safeCapturePointer(target, pointerId);
+      document.body.classList.add("no-select");
+      setIsResizing(true);
+      const onMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        let { x, y, width, height } = startRect;
+        if (direction.includes("e")) width = startRect.width + dx;
+        if (direction.includes("s")) height = startRect.height + dy;
+        if (direction.includes("w")) {
+          width = startRect.width - dx;
+          x = startRect.x + dx;
+        }
+        if (direction.includes("n")) {
+          height = startRect.height - dy;
+          y = startRect.y + dy;
+        }
+        commitRect({ x, y, width, height });
+      };
+      const onUp = () => {
+        safeReleasePointer(target, pointerId);
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+        target.removeEventListener("pointercancel", onUp);
+        setIsResizing(false);
+        endInteraction();
+        onResizeEnd == null ? void 0 : onResizeEnd(rectRef.current);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+      target.addEventListener("pointercancel", onUp);
+      cleanupRef.current = onUp;
+    },
+    [disabled, commitRect, endInteraction, onResizeEnd]
+  );
+  const handleResizeKeyDown = useCallback(
+    (direction) => (e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowLeft") dx = -step;
+      else if (e.key === "ArrowRight") dx = step;
+      else if (e.key === "ArrowUp") dy = -step;
+      else if (e.key === "ArrowDown") dy = step;
+      else return;
+      e.preventDefault();
+      const startRect = rectRef.current;
+      let { x, y, width, height } = startRect;
+      if (direction.includes("e")) width += dx;
+      if (direction.includes("s")) height += dy;
+      if (direction.includes("w")) {
+        width -= dx;
+        x += dx;
+      }
+      if (direction.includes("n")) {
+        height -= dy;
+        y += dy;
+      }
+      setRect({ x, y, width, height });
+      onResizeEnd == null ? void 0 : onResizeEnd(rectRef.current);
+    },
+    [disabled, setRect, onResizeEnd]
+  );
+  const dragHandleProps = {
+    onPointerDown: startDrag,
+    onKeyDown: (e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowLeft") dx = -step;
+      else if (e.key === "ArrowRight") dx = step;
+      else if (e.key === "ArrowUp") dy = -step;
+      else if (e.key === "ArrowDown") dy = step;
+      else return;
+      e.preventDefault();
+      setRect((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }));
+    }
+  };
+  const getResizeHandleProps = useCallback(
+    (direction) => ({
+      onPointerDown: startResize(direction),
+      onKeyDown: handleResizeKeyDown(direction),
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": direction === "n" || direction === "s" ? "horizontal" : "vertical"
+    }),
+    [startResize, handleResizeKeyDown]
+  );
+  const collapseTo = useCallback(
+    (size, options) => {
+      savedRectRef.current = rectRef.current;
+      setIsCollapsed(true);
+      const m = (options == null ? void 0 : options.viewportMargin) === void 0 ? { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } : resolveViewportMargin(options.viewportMargin);
+      const viewportWidth = typeof window !== "undefined" ? window.innerWidth : size.width;
+      const viewportHeight = typeof window !== "undefined" ? window.innerHeight : size.height;
+      const anchor = (options == null ? void 0 : options.anchor) ?? "bottom-right";
+      const x = anchor.endsWith("right") ? viewportWidth - size.width - m.right : m.left;
+      const y = anchor.startsWith("bottom") ? viewportHeight - size.height - m.bottom : m.top;
+      const clamped = clampRect(
+        { x, y, width: size.width, height: size.height },
+        { minWidth: size.width, minHeight: size.height, maxWidth, maxHeight, margin: m }
+      );
+      rectRef.current = clamped;
+      setRectState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [maxWidth, maxHeight, marginTop, marginRight, marginBottom, marginLeft, onChange]
+  );
+  const restore = useCallback(() => {
+    if (savedRectRef.current) {
+      setRect(savedRectRef.current);
+      savedRectRef.current = null;
+    }
+    setIsCollapsed(false);
+  }, [setRect]);
+  return {
+    rect,
+    isDragging,
+    isResizing,
+    isCollapsed,
+    setRect,
+    dragHandleProps,
+    getResizeHandleProps,
+    collapseTo,
+    restore
+  };
+}
+export {
+  BOTTOM_VIEWPORT_MARGIN,
+  useDraggableResizable
+};

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscribes to a CSS media query via `window.matchMedia` and returns whether it currently
+ * matches. Re-renders when the match state changes (e.g. the viewport crosses the threshold).
+ *
+ * @param query - A valid CSS media query string, e.g. `'(max-width: 768px)'`.
+ * @param defaultMatches - Value returned during SSR / before `window` is available. Defaults to `false`.
+ */
+export declare function useMediaQuery(query: string, defaultMatches?: boolean): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,UAAQ,GAAG,OAAO,CA+B5E"}

package/dist/mcp-component-registry.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-09-07T14:26:01.055Z",
+  "generatedAt": "2026-09-08T12:21:32.564Z",
   "components": {
     "Menu": {
       "title": "Components/Menu",

package/dist/node_modules/@mui/system/colorManipulator.js

@@ -1,7 +1,7 @@
 import { __exports as colorManipulator } from "../../../_virtual/colorManipulator.js";
 import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import require$$1 from "../../../_virtual/index3.js";
-import require$$2 from "../../../_virtual/index4.js";
+import require$$1 from "../../../_virtual/index4.js";
+import require$$2 from "../../../_virtual/index5.js";
 var _interopRequireDefault = require$$0;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true

package/dist/node_modules/call-bind/index.js

@@ -1,4 +1,4 @@
-import { __module as callBind } from "../../_virtual/index14.js";
+import { __module as callBind } from "../../_virtual/index15.js";
 import { __require as requireSetFunctionLength } from "../set-function-length/index.js";
 import { __require as requireEsDefineProperty } from "../es-define-property/index.js";
 import { __require as requireCallBindApplyHelpers } from "../call-bind-apply-helpers/index.js";

package/dist/node_modules/hoist-non-react-statics/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../../../_virtual/index16.js";
+import { __module as reactIs } from "../../../../_virtual/index13.js";
 import { __require as requireReactIs_production_min } from "./cjs/react-is.production.min.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 if (process.env.NODE_ENV === "production") {

package/dist/node_modules/is-symbol/index.js

@@ -1,4 +1,4 @@
-import { __module as isSymbol } from "../../_virtual/index15.js";
+import { __module as isSymbol } from "../../_virtual/index16.js";
 import { __require as requireCallBound } from "../call-bound/index.js";
 import { __require as requireHasSymbols } from "../has-symbols/index.js";
 import { __require as requireSafeRegexTest } from "../safe-regex-test/index.js";

package/dist/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../_virtual/index5.js";
+import { __module as reactIs } from "../../_virtual/index3.js";
 import { __require as requireReactIs_production } from "./cjs/react-is.production.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 if (process.env.NODE_ENV === "production") {

package/dist/node_modules/react-with-styles-interface-css/dist/index.js

@@ -1,4 +1,4 @@
-import { __exports as dist } from "../../../_virtual/index13.js";
+import { __exports as dist } from "../../../_virtual/index14.js";
 import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
 import { __require as requireArray_prototype_flat } from "../../array.prototype.flat/index.js";
 import { __require as requireGlobalCache } from "../../global-cache/index.js";

package/dist/utils/index.d.ts

@@ -10,6 +10,7 @@
  */
 export { getUserAvatarColor, DEFAULT_AVATAR_COLORS } from './avatarColor';
 export { debounce } from './debounce';
+export { getSize, onResize, type ElementSize } from './onResize';
 export { toInnerHTML, type InnerHTML } from './html';
 export { TEXT_FILTER_OPTIONS, NON_TEXT_FILTER_OPTIONS, DATE_FILTER_OPTIONS, getTextFilterOptions, getNonTextFilterOptions, getDateFilterOptions, convertToOptions, getAllowedColumns, hasDuplicateColumns, isColumnSelectionDuplicate, isViewNameUnique, toSentenceCase, type FilterOption, type ColumnOption, type ColumnDefinition, type FormFilter, type FormValues, type FilterField, type SavedView, } from './helper';
 export { useTextOverflow } from './useTextOverflow';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAGjE,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGrD,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/utils/onResize.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Thin ResizeObserver helper for watching an element's size.
+ * Prefer this over viewport breakpoints when the thing that changes
+ * size is a specific div (e.g. the resizable chatbot panel).
+ */
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/** Current width/height of an element. */
+export declare function getSize(el: Element): ElementSize;
+/**
+ * Watch an element with ResizeObserver.
+ * Fires immediately with the current size, then on every resize.
+ * Returns an unsubscribe function.
+ *
+ * @example
+ * const stop = onResize(panelEl, ({ width, height }) => {
+ *   console.log(width, height);
+ * });
+ * // later: stop();
+ */
+export declare function onResize(el: Element, callback: (size: ElementSize) => void): () => void;
+//# sourceMappingURL=onResize.d.ts.map

package/dist/utils/onResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onResize.d.ts","sourceRoot":"","sources":["../../src/utils/onResize.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,wBAAgB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAGhD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,GAAG,MAAM,IAAI,CAyBvF"}

package/dist/utils/onResize.js

@@ -0,0 +1,28 @@
+function getSize(el) {
+  const { width, height } = el.getBoundingClientRect();
+  return { width, height };
+}
+function onResize(el, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    callback(getSize(el));
+    return () => {
+    };
+  }
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const box = entry.borderBoxSize[0];
+    callback(
+      box ? { width: box.inlineSize, height: box.blockSize } : { width: entry.contentRect.width, height: entry.contentRect.height }
+    );
+  });
+  observer.observe(el);
+  callback(getSize(el));
+  return () => {
+    observer.disconnect();
+  };
+}
+export {
+  getSize,
+  onResize
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "Impact Analytics UI library",
   "type": "module",
   "main": "./dist/components/index.js",