design-zystem 1.0.432 → 1.0.434

package/dist/ui/index.js

@@ -2264,8 +2264,9 @@ var Tabs = ({
 };
 
 // src/ui/components/ui/Modal.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
+var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
 
 // src/ui/lib/layers.ts
 var MODAL_LAYER = "z-[1000]";
@@ -2293,9 +2294,62 @@ var useAllowPortalScroll = (active, contentRef, overlayRef) => {
   }, [active, contentRef, overlayRef]);
 };
 
+// src/ui/lib/layerAbove/bodyChildContaining.ts
+var bodyChildContaining = (node) => {
+  let current = node;
+  while (current && current.parentNode !== document.body)
+    current = current.parentNode;
+  return current;
+};
+
+// src/ui/lib/layerAbove/isMountedAbove.ts
+var isMountedAbove = (target, panel) => {
+  const targetLayer = target instanceof Node && bodyChildContaining(target);
+  const panelLayer = panel && bodyChildContaining(panel);
+  if (!targetLayer || !panelLayer || targetLayer === panelLayer) return false;
+  return Boolean(
+    panelLayer.compareDocumentPosition(targetLayer) & Node.DOCUMENT_POSITION_FOLLOWING
+  );
+};
+
+// src/ui/lib/layerAbove/useKeepLayersAboveUsable.ts
+var import_react22 = require("react");
+var useKeepLayersAboveUsable = (active, contentRef) => {
+  (0, import_react22.useEffect)(() => {
+    if (!active) return;
+    const isThirdPartyLayerAbove = (node) => node instanceof Element && !node.closest(SELF_FOCUS_MANAGING_LAYER) && isMountedAbove(node, contentRef.current);
+    const keepFocusAbove = (event) => {
+      const focusDestination = event.type === "focusin" ? event.target : event.relatedTarget;
+      if (isThirdPartyLayerAbove(focusDestination)) event.stopPropagation();
+    };
+    const releasedLayers = /* @__PURE__ */ new Set();
+    const releasePointerOnLayersAbove = () => Array.from(document.body.children).forEach((layer) => {
+      const isUntouchedLayerAbove = layer instanceof HTMLElement && !layer.style.pointerEvents && isMountedAbove(layer, contentRef.current);
+      if (!isUntouchedLayerAbove) return;
+      layer.style.pointerEvents = "auto";
+      releasedLayers.add(layer);
+    });
+    releasePointerOnLayersAbove();
+    const observer = new MutationObserver(releasePointerOnLayersAbove);
+    observer.observe(document.body, { childList: true });
+    FOCUS_EVENTS.forEach(
+      (type) => document.body.addEventListener(type, keepFocusAbove)
+    );
+    return () => {
+      observer.disconnect();
+      releasedLayers.forEach((layer) => layer.style.pointerEvents = "");
+      FOCUS_EVENTS.forEach(
+        (type) => document.body.removeEventListener(type, keepFocusAbove)
+      );
+    };
+  }, [active, contentRef]);
+};
+var FOCUS_EVENTS = ["focusin", "focusout"];
+var SELF_FOCUS_MANAGING_LAYER = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"]';
+
 // src/ui/components/ui/Modal.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var ModalDragContext = (0, import_react22.createContext)({
+var ModalDragContext = (0, import_react23.createContext)({
   draggable: false,
   isDragging: false,
   startDrag: () => {
@@ -2311,16 +2365,19 @@ var Modal = ({
   className,
   overlayClassName
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
-  const [offset, setOffset] = (0, import_react22.useState)({ x: 0, y: 0 });
-  const lastPointRef = (0, import_react22.useRef)({ x: 0, y: 0 });
-  const contentRef = (0, import_react22.useRef)(null);
-  const overlayRef = (0, import_react22.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
+  const [offset, setOffset] = (0, import_react23.useState)({ x: 0, y: 0 });
+  const lastPointRef = (0, import_react23.useRef)({ x: 0, y: 0 });
+  const contentRef = (0, import_react23.useRef)(null);
+  const overlayRef = (0, import_react23.useRef)(null);
+  const markOverlaySurface = (0, import_react_dismissable_layer.useDismissableLayerSurface)();
+  const markContentSurface = (0, import_react_dismissable_layer.useDismissableLayerSurface)();
   useAllowPortalScroll(open, contentRef, overlayRef);
-  (0, import_react22.useEffect)(() => {
+  useKeepLayersAboveUsable(open, contentRef);
+  (0, import_react23.useEffect)(() => {
     if (open) setOffset({ x: 0, y: 0 });
   }, [open]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -2352,7 +2409,10 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       RadixDialog.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
@@ -2366,8 +2426,15 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       RadixDialog.Content,
       {
-        ref: contentRef,
+        ref: (node) => {
+          contentRef.current = node;
+          markContentSurface(node);
+        },
         onOpenAutoFocus,
+        onInteractOutside: (event) => {
+          if (isMountedAbove(event.target, contentRef.current))
+            event.preventDefault();
+        },
         onClick: (event) => event.stopPropagation(),
         className: cn(
           MODAL_LAYER,
@@ -2400,7 +2467,7 @@ var ModalHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  const { draggable, isDragging, startDrag } = (0, import_react22.useContext)(ModalDragContext);
+  const { draggable, isDragging, startDrag } = (0, import_react23.useContext)(ModalDragContext);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     __spreadValues({
@@ -2460,7 +2527,7 @@ var ModalFooter = (_a) => {
 var ModalClose = RadixDialog.Close;
 
 // src/ui/components/ui/Select.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var RadixSelect2 = __toESM(require("@radix-ui/react-select"));
 var RadixPopover = __toESM(require("@radix-ui/react-popover"));
 
@@ -2622,12 +2689,12 @@ var SelectField = (props) => {
     hideSearchBar = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react23.useState)("");
-  const searchInputRef = (0, import_react23.useRef)(null);
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react24.useState)("");
+  const searchInputRef = (0, import_react24.useRef)(null);
   const sections = filterSelectItems(options, searchTerm);
   const isEmpty = sections.length === 0;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (open && !hideSearchBar) {
       const id = requestAnimationFrame(() => {
         var _a;
@@ -2851,7 +2918,7 @@ var Select = (props) => {
 };
 
 // src/ui/components/ui/TagSelect.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var RadixPopover2 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var TagSelect = ({
@@ -2864,9 +2931,9 @@ var TagSelect = ({
   width,
   className
 }) => {
-  const [open, setOpen] = (0, import_react24.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react24.useState)("");
-  const inputRef = (0, import_react24.useRef)(null);
+  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react25.useState)("");
+  const inputRef = (0, import_react25.useRef)(null);
   const selectedValues = new Set(value.map((v) => v.value));
   const filteredOptions = options.filter(
     (o) => !selectedValues.has(o.value) && o.label.toLowerCase().includes(searchTerm.toLowerCase())
@@ -2977,7 +3044,7 @@ var TagSelect = ({
 };
 
 // src/ui/components/ui/TagLevelPicker.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var RadixPopover3 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var TEXT_COLOR = "#15303B";
@@ -3087,7 +3154,7 @@ var TagChip = ({
   const sizeStyle = SIZE_STYLES[size];
   const hasLevel = tag.level != null;
   const current = hasLevel ? getLevelStyle(tag.level, levelCount) : NO_LEVEL_STYLE;
-  const levels = (0, import_react25.useMemo)(
+  const levels = (0, import_react26.useMemo)(
     () => Array.from({ length: levelCount }, (_, i) => i + 1),
     [levelCount]
   );
@@ -3217,11 +3284,11 @@ var TagLevelPicker = ({
   className
 }) => {
   const sizeStyle = SIZE_STYLES[size];
-  const [query, setQuery] = (0, import_react25.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react25.useState)(false);
-  const [isDismissed, setIsDismissed] = (0, import_react25.useState)(false);
-  const boxRef = (0, import_react25.useRef)(null);
-  const [openTagValue, setOpenTagValue] = (0, import_react25.useState)(null);
+  const [query, setQuery] = (0, import_react26.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react26.useState)(false);
+  const [isDismissed, setIsDismissed] = (0, import_react26.useState)(false);
+  const boxRef = (0, import_react26.useRef)(null);
+  const [openTagValue, setOpenTagValue] = (0, import_react26.useState)(null);
   const trimmed = query.trim().toLowerCase();
   const matching = trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options;
   const suggestions = maxSuggestions != null ? matching.slice(0, maxSuggestions) : matching;
@@ -3379,7 +3446,7 @@ var warnDeprecatedTableProp = (component, prop, replacement) => {
 };
 
 // src/ui/components/ui/Pagination.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
@@ -3397,7 +3464,7 @@ var Pagination = ({
   summaryLabel
 }) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  const pages = (0, import_react26.useMemo)(
+  const pages = (0, import_react27.useMemo)(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
@@ -4031,7 +4098,7 @@ var import_jsx_runtime44 = require("react/jsx-runtime");
 var TableHeaderRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children });
 
 // src/ui/components/ui/table/TableHeaderCell.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var SURFACE_CLASS = {
   white: "bg-white",
@@ -4051,7 +4118,7 @@ var TableHeaderCell = ({
   sortOrder = null,
   onClick
 }) => {
-  const [hovered, setHovered] = (0, import_react27.useState)(false);
+  const [hovered, setHovered] = (0, import_react28.useState)(false);
   const showArrow = useSort && (isSort || hovered);
   const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -4107,9 +4174,9 @@ var TableHeaderCell = ({
 };
 
 // src/ui/components/ui/table/TableRow.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var TableRow = (0, import_react28.forwardRef)(
+var TableRow = (0, import_react29.forwardRef)(
   ({
     children,
     onClick,
@@ -4488,11 +4555,11 @@ var formatNameWithInitial = (firstname, lastname) => {
 };
 
 // src/ui/components/ui/Avatar.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var AvatarSizeContext = (0, import_react29.createContext)(40);
-var useAvatarSize = () => (0, import_react29.useContext)(AvatarSizeContext);
+var AvatarSizeContext = (0, import_react30.createContext)(40);
+var useAvatarSize = () => (0, import_react30.useContext)(AvatarSizeContext);
 var BADGE_BG_CLASS = {
   "blue-700": "bg-blue-700",
   "blue-900": "bg-blue-900",
@@ -4523,7 +4590,7 @@ var BADGE_ICON_COLOR_CLASS = {
   "orange-600": "text-orange-600",
   "purple-700": "text-purple-700"
 };
-var Avatar = (0, import_react29.forwardRef)(
+var Avatar = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = 40,
@@ -4588,7 +4655,7 @@ var Avatar = (0, import_react29.forwardRef)(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = (0, import_react29.forwardRef)((_a, ref) => {
+var AvatarImage = (0, import_react30.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     RadixAvatar.Image,
@@ -4614,7 +4681,7 @@ var FALLBACK_COLOR_CLASS = {
   "orange-600": "bg-orange-600 text-white",
   "purple-700": "bg-purple-700 text-white"
 };
-var AvatarFallback = (0, import_react29.forwardRef)(
+var AvatarFallback = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       color = "grey-600",
@@ -4649,7 +4716,7 @@ var AvatarFallback = (0, import_react29.forwardRef)(
   }
 );
 AvatarFallback.displayName = "AvatarFallback";
-var AvatarBadge = (0, import_react29.forwardRef)(
+var AvatarBadge = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size, className, style } = _b, props = __objRest(_b, ["size", "className", "style"]);
     const avatarSize = useAvatarSize();
@@ -4680,14 +4747,14 @@ var AvatarGroup = (_a) => {
     "className",
     "children"
   ]);
-  const items = import_react29.Children.toArray(children).filter(
-    import_react29.isValidElement
+  const items = import_react30.Children.toArray(children).filter(
+    import_react30.isValidElement
   );
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Layout, __spreadProps(__spreadValues({ className: cn("-space-x-2", className) }, props), { children: [
     visible.map(
-      (child, index) => (0, import_react29.cloneElement)(child, {
+      (child, index) => (0, import_react30.cloneElement)(child, {
         key: index,
         size,
         className: cn("ring-2 ring-white", child.props.className)
@@ -4856,7 +4923,7 @@ var TableActionsCell = ({ actions, width }) => {
 };
 
 // src/ui/components/ui/table/TableSelectCell.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var TableSelectCell = ({
   isSelected,
@@ -4864,7 +4931,7 @@ var TableSelectCell = ({
   label,
   width = "40px"
 }) => {
-  const isRange = (0, import_react30.useRef)(false);
+  const isRange = (0, import_react31.useRef)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TableCell, { width, centerContent: true, className: "table-select-cell", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Checkbox,
     {
@@ -4894,20 +4961,20 @@ var TableSelectHeaderCell = ({
 ) }) }) });
 
 // src/ui/hooks/useRowSelection.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 var useRowSelection = ({
   rowIds,
   totalCount
 }) => {
-  const [selectedIds, setSelectedIds] = (0, import_react31.useState)(/* @__PURE__ */ new Set());
-  const [isAllResultsSelected, setIsAllResultsSelected] = (0, import_react31.useState)(false);
-  const anchorId = (0, import_react31.useRef)(null);
+  const [selectedIds, setSelectedIds] = (0, import_react32.useState)(/* @__PURE__ */ new Set());
+  const [isAllResultsSelected, setIsAllResultsSelected] = (0, import_react32.useState)(false);
+  const anchorId = (0, import_react32.useRef)(null);
   const resolvedTotal = totalCount != null ? totalCount : rowIds.length;
   const selectedOnPage = rowIds.filter((id) => selectedIds.has(id)).length;
   const isPageFullySelected = rowIds.length > 0 && selectedOnPage === rowIds.length;
   const canSelectAllResults = isPageFullySelected && !isAllResultsSelected && resolvedTotal > rowIds.length;
   const headerState = isAllResultsSelected || isPageFullySelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
-  const clear = (0, import_react31.useCallback)(() => {
+  const clear = (0, import_react32.useCallback)(() => {
     setSelectedIds(/* @__PURE__ */ new Set());
     setIsAllResultsSelected(false);
     anchorId.current = null;
@@ -5262,9 +5329,10 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_vaul = require("vaul");
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_react_dismissable_layer2 = require("@radix-ui/react-dismissable-layer");
 
 // src/ui/lib/drawer/nestedDrawerAttributes.ts
 var NESTED_DRAWER_ATTRIBUTES = {
@@ -5352,11 +5420,14 @@ var Drawer = ({
   overlayClassName
 }) => {
   const isVertical = direction === "left" || direction === "right";
-  const contentRef = (0, import_react32.useRef)(null);
-  const [panel, setPanel] = (0, import_react32.useState)(null);
-  const overlayRef = (0, import_react32.useRef)(null);
+  const contentRef = (0, import_react33.useRef)(null);
+  const [panel, setPanel] = (0, import_react33.useState)(null);
+  const overlayRef = (0, import_react33.useRef)(null);
+  const markOverlaySurface = (0, import_react_dismissable_layer2.useDismissableLayerSurface)();
+  const markContentSurface = (0, import_react_dismissable_layer2.useDismissableLayerSurface)();
   useAllowPortalScroll(modal && open, contentRef, overlayRef);
-  (0, import_react32.useEffect)(() => {
+  useKeepLayersAboveUsable(modal && open, contentRef);
+  (0, import_react33.useEffect)(() => {
     if (!open || !panel) return;
     return registerOpenDrawer(panel, overlayRef.current);
   }, [open, panel]);
@@ -5369,9 +5440,9 @@ var Drawer = ({
   };
   const belongsToLayerAbove = (target) => {
     const overlay = target.closest("[data-vaul-overlay]");
-    return Boolean(target.closest(KEEP_OPEN_SELECTOR)) || overlay !== null && isOverlayOfDrawerAbove(overlay, contentRef.current);
+    return Boolean(target.closest(KEEP_OPEN_SELECTOR)) || isMountedAbove(target, contentRef.current) || overlay !== null && isOverlayOfDrawerAbove(overlay, contentRef.current);
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (modal || !open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -5390,7 +5461,7 @@ var Drawer = ({
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () => document.removeEventListener("pointerdown", handlePointerDown, true);
   }, [modal, open, onClose]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (modal || !open) return;
     const frame = requestAnimationFrame(() => {
       document.body.style.pointerEvents = "auto";
@@ -5402,7 +5473,10 @@ var Drawer = ({
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       import_vaul.Drawer.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         onClick: (event) => event.stopPropagation(),
         className: cn(
           MODAL_LAYER,
@@ -5417,6 +5491,7 @@ var Drawer = ({
         ref: (node) => {
           contentRef.current = node;
           setPanel(node);
+          markContentSurface(node);
         }
       }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
         onPointerDownOutside: (event) => {
@@ -5520,17 +5595,17 @@ var DrawerFooter = (_a) => {
 var DrawerClose = import_vaul.Drawer.Close;
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/ui/components/ui/sidebar/SidebarContext.ts
-var import_react33 = require("react");
-var SidebarCollapsedContext = (0, import_react33.createContext)(false);
+var import_react34 = require("react");
+var SidebarCollapsedContext = (0, import_react34.createContext)(false);
 var SidebarCollapsedProvider = SidebarCollapsedContext.Provider;
-var useSidebarCollapsed = () => (0, import_react33.useContext)(SidebarCollapsedContext);
+var useSidebarCollapsed = () => (0, import_react34.useContext)(SidebarCollapsedContext);
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var Sidebar = (0, import_react34.forwardRef)(
+var Sidebar = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { collapsed = false, className, children } = _b, props = __objRest(_b, ["collapsed", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SidebarCollapsedProvider, { value: collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -5551,9 +5626,9 @@ var Sidebar = (0, import_react34.forwardRef)(
 Sidebar.displayName = "Sidebar";
 
 // src/ui/components/ui/sidebar/SidebarTrigger.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var SidebarTrigger = (0, import_react35.forwardRef)((_a, ref) => {
+var SidebarTrigger = (0, import_react36.forwardRef)((_a, ref) => {
   var _b = _a, { collapsed, className } = _b, props = __objRest(_b, ["collapsed", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "button",
@@ -5580,9 +5655,9 @@ var SidebarTrigger = (0, import_react35.forwardRef)((_a, ref) => {
 SidebarTrigger.displayName = "SidebarTrigger";
 
 // src/ui/components/ui/sidebar/SidebarHeader.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var SidebarHeader = (0, import_react36.forwardRef)(
+var SidebarHeader = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
@@ -5597,9 +5672,9 @@ var SidebarHeader = (0, import_react36.forwardRef)(
 SidebarHeader.displayName = "SidebarHeader";
 
 // src/ui/components/ui/sidebar/SidebarContent.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
-var SidebarContent = (0, import_react37.forwardRef)(
+var SidebarContent = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
@@ -5618,9 +5693,9 @@ var SidebarContent = (0, import_react37.forwardRef)(
 SidebarContent.displayName = "SidebarContent";
 
 // src/ui/components/ui/sidebar/SidebarGroup.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime72 = require("react/jsx-runtime");
-var SidebarGroup = (0, import_react38.forwardRef)(
+var SidebarGroup = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { label, className, children } = _b, props = __objRest(_b, ["label", "className", "children"]);
     const collapsed = useSidebarCollapsed();
@@ -5641,9 +5716,9 @@ var SidebarGroup = (0, import_react38.forwardRef)(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/ui/components/ui/sidebar/SidebarMenuButton.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var SidebarMenuButton = (0, import_react39.forwardRef)(
+var SidebarMenuButton = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       icon,
@@ -5723,9 +5798,9 @@ var SidebarMenuButton = (0, import_react39.forwardRef)(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 
 // src/ui/components/ui/sidebar/SidebarActionCard.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var SidebarActionCard = (0, import_react40.forwardRef)(
+var SidebarActionCard = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       icon,
@@ -5789,9 +5864,9 @@ var SidebarActionCard = (0, import_react40.forwardRef)(
 SidebarActionCard.displayName = "SidebarActionCard";
 
 // src/ui/components/ui/sidebar/SidebarMenuSub.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var SidebarMenuSub = (0, import_react41.forwardRef)(
+var SidebarMenuSub = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -5809,22 +5884,22 @@ var SidebarMenuSub = (0, import_react41.forwardRef)(
 SidebarMenuSub.displayName = "SidebarMenuSub";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubItem.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
-var SidebarMenuSubItem = (0, import_react42.forwardRef)((_a, ref) => {
+var SidebarMenuSubItem = (0, import_react43.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("li", __spreadValues({ ref, className: cn("relative", className) }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubButton.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var SIZE_CLASS = {
   default: "h-10",
   lg: "h-14"
 };
-var SidebarMenuSubButton = (0, import_react43.forwardRef)((_a, ref) => {
+var SidebarMenuSubButton = (0, import_react44.forwardRef)((_a, ref) => {
   var _b = _a, { active, size = "default", className } = _b, props = __objRest(_b, ["active", "size", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     "button",
@@ -5845,9 +5920,9 @@ var SidebarMenuSubButton = (0, import_react43.forwardRef)((_a, ref) => {
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 // src/ui/components/ui/sidebar/SidebarFooter.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var SidebarFooter = (0, import_react44.forwardRef)(
+var SidebarFooter = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -5885,9 +5960,9 @@ var SidebarSupportInfo = ({
 };
 
 // src/ui/components/ui/sidebar/SidebarMenuSearchInput.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var SidebarMenuSearchInput = (0, import_react45.forwardRef)((_a, ref) => {
+var SidebarMenuSearchInput = (0, import_react46.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(InputGroup, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FaIcon, { name: "magnifying-glass", size: 14, className: "text-white/50" }) }),
@@ -5906,7 +5981,7 @@ var SidebarMenuSearchInput = (0, import_react45.forwardRef)((_a, ref) => {
 SidebarMenuSearchInput.displayName = "SidebarMenuSearchInput";
 
 // src/ui/components/ui/sidebar/SidebarUserMenu.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var RadixPopover5 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var panelClassName = cn(
@@ -5925,7 +6000,7 @@ var SidebarUserMenu = ({
   className
 }) => {
   const collapsed = useSidebarCollapsed();
-  const [open, setOpen] = (0, import_react46.useState)(false);
+  const [open, setOpen] = (0, import_react47.useState)(false);
   const runAndClose = (action) => {
     action();
     setOpen(false);
@@ -6244,7 +6319,7 @@ var toast = {
 };
 
 // src/ui/components/ui/PageContainer.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_class_variance_authority14 = require("class-variance-authority");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var pageContainerVariants = (0, import_class_variance_authority14.cva)(
@@ -6261,7 +6336,7 @@ var pageContainerVariants = (0, import_class_variance_authority14.cva)(
     defaultVariants: { padding: "md" }
   }
 );
-var PageContainer = (0, import_react47.forwardRef)(
+var PageContainer = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { padding, className } = _b, props = __objRest(_b, ["padding", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -6276,7 +6351,7 @@ var PageContainer = (0, import_react47.forwardRef)(
 PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var IconTabs = ({
   items,
@@ -6286,10 +6361,10 @@ var IconTabs = ({
   className
 }) => {
   var _a;
-  const listRef = (0, import_react48.useRef)(null);
-  const tabRefs = (0, import_react48.useRef)([]);
-  const [bar, setBar] = (0, import_react48.useState)({ left: 0, top: 0, width: 0, height: 0 });
-  const updateBar = (0, import_react48.useCallback)(() => {
+  const listRef = (0, import_react49.useRef)(null);
+  const tabRefs = (0, import_react49.useRef)([]);
+  const [bar, setBar] = (0, import_react49.useState)({ left: 0, top: 0, width: 0, height: 0 });
+  const updateBar = (0, import_react49.useCallback)(() => {
     const root = listRef.current;
     const activeEl = tabRefs.current[value];
     if (!root || !activeEl) return;
@@ -6302,7 +6377,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -6484,7 +6559,7 @@ var Banner = ({
 };
 
 // src/ui/components/ui/FloatingButton.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/ui/lib/floatingArc.ts
 var MAX_STEP = 65;
@@ -6638,20 +6713,20 @@ var FloatingButton = ({
   safeArea,
   onOffsetChange
 }) => {
-  const containerRef = (0, import_react49.useRef)(null);
-  const [placement, setPlacement] = (0, import_react49.useState)(() => ({
+  const containerRef = (0, import_react50.useRef)(null);
+  const [placement, setPlacement] = (0, import_react50.useState)(() => ({
     geometry: __spreadValues({ base: 90 }, arcLayout(actions.length, ARC_RADIUS, SUB_SIZE)),
     shift: { x: 0, y: 0 }
   }));
-  const [isDragging, setIsDragging] = (0, import_react49.useState)(false);
-  const [offset, setOffset] = (0, import_react49.useState)(() => readStoredOffset(persistKey));
-  const offsetRef = (0, import_react49.useRef)(offset);
-  const lastPointRef = (0, import_react49.useRef)({ x: 0, y: 0 });
-  const dragDistanceRef = (0, import_react49.useRef)(0);
-  (0, import_react49.useEffect)(() => {
+  const [isDragging, setIsDragging] = (0, import_react50.useState)(false);
+  const [offset, setOffset] = (0, import_react50.useState)(() => readStoredOffset(persistKey));
+  const offsetRef = (0, import_react50.useRef)(offset);
+  const lastPointRef = (0, import_react50.useRef)({ x: 0, y: 0 });
+  const dragDistanceRef = (0, import_react50.useRef)(0);
+  (0, import_react50.useEffect)(() => {
     onOffsetChange == null ? void 0 : onOffsetChange(offset);
   }, [offset, onOffsetChange]);
-  const clampOffset = (0, import_react49.useCallback)(
+  const clampOffset = (0, import_react50.useCallback)(
     (next) => {
       var _a, _b, _c, _d;
       const el = containerRef.current;
@@ -6671,14 +6746,14 @@ var FloatingButton = ({
     },
     [safeArea == null ? void 0 : safeArea.left, safeArea == null ? void 0 : safeArea.top, safeArea == null ? void 0 : safeArea.right, safeArea == null ? void 0 : safeArea.bottom]
   );
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     const corrected = clampOffset(offsetRef.current);
     if (corrected.x === offsetRef.current.x && corrected.y === offsetRef.current.y)
       return;
     offsetRef.current = corrected;
     setOffset(corrected);
   }, [clampOffset]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -6714,7 +6789,7 @@ var FloatingButton = ({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [draggable, isDragging, persistKey, clampOffset]);
-  const resolvePlacement = (0, import_react49.useCallback)(() => {
+  const resolvePlacement = (0, import_react50.useCallback)(() => {
     var _a, _b, _c, _d;
     const el = containerRef.current;
     if (!el || typeof window === "undefined") return;
@@ -6743,13 +6818,13 @@ var FloatingButton = ({
     safeArea == null ? void 0 : safeArea.right,
     safeArea == null ? void 0 : safeArea.bottom
   ]);
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     if (isOpen) resolvePlacement();
   }, [isOpen, offset, resolvePlacement]);
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -6845,7 +6920,7 @@ var FloatingButton = ({
 };
 
 // src/ui/components/ui/ActivityFeedPanel.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var PANEL_WIDTH = 500;
 var PANEL_MAX_HEIGHT = 750;
@@ -6880,15 +6955,15 @@ var ActivityFeedPanel = ({
   emptyMessage = "Rien de neuf pour l\u2019instant.",
   items
 }) => {
-  const panelRef = (0, import_react50.useRef)(null);
-  const [placement, setPlacement] = (0, import_react50.useState)(
+  const panelRef = (0, import_react51.useRef)(null);
+  const [placement, setPlacement] = (0, import_react51.useState)(
     () => typeof window === "undefined" ? {} : resolveFloatingPanelPlacement(
       offset,
       window.innerWidth,
       window.innerHeight
     )
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -6899,7 +6974,7 @@ var ActivityFeedPanel = ({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [open, onClose]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!open || typeof window === "undefined") return;
     const recompute = () => setPlacement(
       resolveFloatingPanelPlacement(
@@ -7403,7 +7478,7 @@ var HistoryDrawer = (_a) => {
 };
 
 // src/ui/components/ui/history/HistoryButton.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var LABEL = "Historique";
 var SHORT_TOOLTIP = "Voir l\u2019historique des actions";
@@ -7419,7 +7494,7 @@ var HistoryButton = (_a) => {
     "tooltip",
     "onOpenChange"
   ]);
-  const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
   const changeOpen = (nextIsOpen) => {
     setIsOpen(nextIsOpen);
     onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
@@ -7643,7 +7718,7 @@ var Timeline = ({
 };
 
 // src/ui/components/ui/ColorPicker.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var swatchVariants = (0, import_class_variance_authority16.cva)(
@@ -7672,7 +7747,7 @@ var inputVariants = (0, import_class_variance_authority16.cva)(
     defaultVariants: { size: "m" }
   }
 );
-var ColorPicker = (0, import_react52.forwardRef)(
+var ColorPicker = (0, import_react53.forwardRef)(
   ({
     label,
     value,
@@ -7682,7 +7757,7 @@ var ColorPicker = (0, import_react52.forwardRef)(
     size,
     className
   }, ref) => {
-    const [internalColor, setInternalColor] = (0, import_react52.useState)(defaultValue);
+    const [internalColor, setInternalColor] = (0, import_react53.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const handleChange = (e) => {
       const next = e.target.value;
@@ -7746,7 +7821,7 @@ var ColorPicker = (0, import_react52.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/ColorTokenPicker.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/ui/lib/tokens.ts
 var COLOR_TOKENS = [
@@ -7787,7 +7862,7 @@ var ColorTokenPicker = ({
   onChange,
   disabled = false
 }) => {
-  const [open, setOpen] = (0, import_react53.useState)(false);
+  const [open, setOpen] = (0, import_react54.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     Popover,
     {
@@ -7839,7 +7914,7 @@ var ColorTokenPicker = ({
 };
 
 // src/ui/components/ui/FileUploadZone.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
@@ -7872,23 +7947,23 @@ var FileUploadZone = ({
   showFileName = false,
   className
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react54.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react54.useState)(
+  const [isDragging, setIsDragging] = (0, import_react55.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react55.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react54.useState)(null);
-  const [fileName, setFileName] = (0, import_react54.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react54.useState)(null);
-  const inputRef = (0, import_react54.useRef)(null);
+  const [fileType, setFileType] = (0, import_react55.useState)(null);
+  const [fileName, setFileName] = (0, import_react55.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react55.useState)(null);
+  const inputRef = (0, import_react55.useRef)(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
   const previewUrl = multiple ? null : controlledPreviewUrl || (showPreview ? internalPreviewUrl : null);
-  const emitError = (0, import_react54.useCallback)(
+  const emitError = (0, import_react55.useCallback)(
     (message) => onError ? onError(message) : setInlineError(message),
     [onError]
   );
-  const validateFile = (0, import_react54.useCallback)(
+  const validateFile = (0, import_react55.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type))
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -7902,7 +7977,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react54.useCallback)(
+  const processFile = (0, import_react55.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -7917,7 +7992,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react54.useCallback)(
+  const processFiles = (0, import_react55.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {
@@ -8076,7 +8151,7 @@ var FileUploadZone = ({
 };
 
 // src/ui/components/ui/FilePicker.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var FilePicker = ({
   label,
@@ -8091,7 +8166,7 @@ var FilePicker = ({
   variant = "icon",
   className
 }) => {
-  const inputRef = (0, import_react55.useRef)(null);
+  const inputRef = (0, import_react56.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       "input",
@@ -8142,7 +8217,7 @@ var FilePicker = ({
 };
 
 // src/ui/components/ui/Item.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_class_variance_authority17 = require("class-variance-authority");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var itemVariants = (0, import_class_variance_authority17.cva)(
@@ -8162,7 +8237,7 @@ var itemVariants = (0, import_class_variance_authority17.cva)(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Item4 = (0, import_react56.forwardRef)(
+var Item4 = (0, import_react57.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant, size, className } = _b, props = __objRest(_b, ["variant", "size", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
@@ -8321,7 +8396,7 @@ var Attachment = ({
 };
 
 // src/ui/components/ui/PdfPreview.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_pdf = require("react-pdf");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 import_react_pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${import_react_pdf.pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -8331,8 +8406,8 @@ var PdfPreview = ({
   maxHeight = "600px",
   className
 }) => {
-  const [hasError, setHasError] = (0, import_react57.useState)(false);
-  const [numPages, setNumPages] = (0, import_react57.useState)(0);
+  const [hasError, setHasError] = (0, import_react58.useState)(false);
+  const [numPages, setNumPages] = (0, import_react58.useState)(0);
   const height = Math.round(width * 1.3);
   const thumbnailSkeleton = /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Skeleton, { width, height });
   if (hasError) {
@@ -8388,10 +8463,10 @@ var PdfPreview = ({
 };
 
 // src/ui/components/ui/AudioPlayer.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/ui/components/ui/VideoPlayer.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var formatVideoDuration = (seconds) => {
   if (seconds === void 0 || !Number.isFinite(seconds) || seconds < 0)
@@ -8431,20 +8506,20 @@ var VideoPlayer = ({
   defaultVolume = DEFAULT_VOLUME,
   className
 }) => {
-  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react58.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, import_react58.useState)(false);
-  const [hasPosterError, setHasPosterError] = (0, import_react58.useState)(false);
-  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react58.useState)(false);
-  const inlineVideoRef = (0, import_react58.useRef)(null);
-  const expandedVideoRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react59.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react59.useState)(false);
+  const [hasPosterError, setHasPosterError] = (0, import_react59.useState)(false);
+  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react59.useState)(false);
+  const inlineVideoRef = (0, import_react59.useRef)(null);
+  const expandedVideoRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     setHasPosterError(false);
   }, [poster]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     setHasFramePreviewError(false);
   }, [src]);
   const visiblePoster = hasPosterError ? void 0 : poster;
-  const attachExpandedVideo = (0, import_react58.useCallback)(
+  const attachExpandedVideo = (0, import_react59.useCallback)(
     (video) => {
       expandedVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -8456,7 +8531,7 @@ var VideoPlayer = ({
     e.preventDefault();
     (_a = expandedVideoRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
   };
-  const attachInlineVideo = (0, import_react58.useCallback)(
+  const attachInlineVideo = (0, import_react59.useCallback)(
     (video) => {
       inlineVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -8675,11 +8750,11 @@ var AudioPlayer = ({
   title = "Audio",
   className
 }) => {
-  const audioRef = (0, import_react59.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react59.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react59.useState)(0);
-  const [duration, setDuration] = (0, import_react59.useState)(0);
-  const attachAudio = (0, import_react59.useCallback)(
+  const audioRef = (0, import_react60.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react60.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react60.useState)(0);
+  const [duration, setDuration] = (0, import_react60.useState)(0);
+  const attachAudio = (0, import_react60.useCallback)(
     (audio) => {
       audioRef.current = audio;
       if (audio) audio.volume = clampVolume2(defaultVolume);
@@ -8827,7 +8902,7 @@ var ScrollArea = (_a) => {
 };
 
 // src/ui/components/ui/Message.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var BUBBLE_BACKGROUND = {
   own: { solid: "bg-blue-700", pale: "bg-blue-50" },
@@ -8839,7 +8914,7 @@ var BUBBLE_TAIL = {
   teammate: "rounded-br-none",
   other: "rounded-bl-none"
 };
-var Message = (0, import_react60.forwardRef)(
+var Message = (0, import_react61.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isOwn = false,
@@ -8981,7 +9056,7 @@ var Message = (0, import_react60.forwardRef)(
 Message.displayName = "Message";
 
 // src/ui/components/ui/MessageScroller.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var SEPARATOR_LINE = {
   neutral: "",
@@ -9033,9 +9108,9 @@ var MessageScroller = ({
   viewportRef,
   className
 }) => {
-  const fallbackRef = (0, import_react61.useRef)(null);
+  const fallbackRef = (0, import_react62.useRef)(null);
   const scrollerRef = viewportRef != null ? viewportRef : fallbackRef;
-  (0, import_react61.useLayoutEffect)(() => {
+  (0, import_react62.useLayoutEffect)(() => {
     if (!autoScroll) return;
     const viewport = scrollerRef.current;
     if (!viewport) return;
@@ -9089,7 +9164,7 @@ var MessageScroller = ({
 };
 
 // src/ui/components/ui/Stepper.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var Stepper = ({
   numberOfSteps,
@@ -9107,7 +9182,7 @@ var Stepper = ({
     children: Array.from({ length: numberOfSteps }, (_, i) => {
       const isActive = i === current;
       const isCompleted = i < current;
-      return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_react62.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_react63.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
           "div",
           {
@@ -9127,7 +9202,7 @@ var Stepper = ({
 );
 
 // src/ui/components/ui/DatePicker.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_react_day_picker = require("react-day-picker");
 var import_locale = require("react-day-picker/locale");
 var import_style2 = require("react-day-picker/style.css");
@@ -9221,12 +9296,12 @@ var DatePicker = ({
   className
 }) => {
   const isRange = mode === "range";
-  const [open, setOpen] = (0, import_react63.useState)(false);
-  const [isEditing, setIsEditing] = (0, import_react63.useState)(false);
-  const [draftValue, setDraftValue] = (0, import_react63.useState)("");
-  const [isDirty, setIsDirty] = (0, import_react63.useState)(false);
+  const [open, setOpen] = (0, import_react64.useState)(false);
+  const [isEditing, setIsEditing] = (0, import_react64.useState)(false);
+  const [draftValue, setDraftValue] = (0, import_react64.useState)("");
+  const [isDirty, setIsDirty] = (0, import_react64.useState)(false);
   const resolvedPresets = presets != null ? presets : isRange ? RANGE_PRESETS : SINGLE_PRESETS;
-  const activePreset = (0, import_react63.useMemo)(() => {
+  const activePreset = (0, import_react64.useMemo)(() => {
     var _a;
     const match = resolvedPresets.find((preset) => {
       const result = preset.getValue();
@@ -9894,7 +9969,7 @@ var optimizeImage = async (file, desiredBaseName, opts = {}) => {
 };
 
 // src/ui/components/ui/Tour.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_driver = require("driver.js");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var TOUR_TARGET_ATTRIBUTE = "data-tour-target";
@@ -9949,9 +10024,9 @@ var Tour = ({
   const current = steps[step];
   const total = steps.length;
   const isLast = step === total - 1;
-  const driverRef = (0, import_react64.useRef)(null);
-  const ghostRef = (0, import_react64.useRef)(null);
-  const actions = (0, import_react64.useRef)({
+  const driverRef = (0, import_react65.useRef)(null);
+  const ghostRef = (0, import_react65.useRef)(null);
+  const actions = (0, import_react65.useRef)({
     next: () => {
     },
     previous: () => {
@@ -9966,7 +10041,7 @@ var Tour = ({
     },
     close: () => onClose("close")
   };
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!open) return;
     const ghost = document.createElement("div");
     ghost.className = "dz-tour-target";
@@ -9992,7 +10067,7 @@ var Tour = ({
       ghostRef.current = null;
     };
   }, [open]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -10004,7 +10079,7 @@ var Tour = ({
     window.addEventListener("keydown", onKeyDown, true);
     return () => window.removeEventListener("keydown", onKeyDown, true);
   }, [open]);
-  const view = (0, import_react64.useRef)({ current, text, step, total, isLast });
+  const view = (0, import_react65.useRef)({ current, text, step, total, isLast });
   view.current = { current, text, step, total, isLast };
   const targetKey = [(_a = current == null ? void 0 : current.target) != null ? _a : []].flat().join("|");
   const popoverKey = [
@@ -10017,7 +10092,7 @@ var Tour = ({
     isLast ? text.finish : text.next,
     text.close
   ].join("|");
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     const instance = driverRef.current;
     const ghost = ghostRef.current;
     const { current: current2, text: text2, step: step2, total: total2, isLast: isLast2 } = view.current;