design-zystem 1.0.403 → 1.0.405

package/dist/ui/index.d.mts

@@ -1957,8 +1957,8 @@ interface TourStep {
     id: string;
     /** Identifiant(s) de `TourTarget` : le premier présent dans la page est mis en lumière. Absent : bulle centrée. */
     target?: string | string[];
-    title?: ReactNode;
-    content: ReactNode;
+    title?: string;
+    content: string;
     placement?: TourPlacement;
     /** La zone éclairée reste cliquable (défaut). `false` : elle est seulement montrée. */
     interactive?: boolean;
@@ -1987,6 +1987,6 @@ interface TourTargetProps {
 }
 /** Enveloppe sans boîte (`display: contents`) : marque une cible sans toucher à la mise en page. */
 declare const TourTarget: ({ id, children }: TourTargetProps) => react.JSX.Element;
-declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => react.ReactPortal | null;
+declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => null;
 
 export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectOption, type SelectProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };

package/dist/ui/index.d.ts

@@ -1957,8 +1957,8 @@ interface TourStep {
     id: string;
     /** Identifiant(s) de `TourTarget` : le premier présent dans la page est mis en lumière. Absent : bulle centrée. */
     target?: string | string[];
-    title?: ReactNode;
-    content: ReactNode;
+    title?: string;
+    content: string;
     placement?: TourPlacement;
     /** La zone éclairée reste cliquable (défaut). `false` : elle est seulement montrée. */
     interactive?: boolean;
@@ -1987,6 +1987,6 @@ interface TourTargetProps {
 }
 /** Enveloppe sans boîte (`display: contents`) : marque une cible sans toucher à la mise en page. */
 declare const TourTarget: ({ id, children }: TourTargetProps) => react.JSX.Element;
-declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => react.ReactPortal | null;
+declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => null;
 
 export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectOption, type SelectProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };

package/dist/ui/index.js

@@ -2155,6 +2155,9 @@ var Tabs = ({
 var import_react21 = require("react");
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
 
+// src/ui/lib/layers.ts
+var MODAL_LAYER = "z-[1000]";
+
 // src/ui/lib/portalScroll.ts
 var import_react20 = require("react");
 var SCROLL_EVENTS = ["wheel", "touchmove"];
@@ -2241,7 +2244,8 @@ var Modal = ({
         "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
-          "fixed inset-0 z-40",
+          MODAL_LAYER,
+          "fixed inset-0",
           draggable ? "bg-transparent" : "bg-black/50",
           overlayClassName
         )
@@ -2254,7 +2258,8 @@ var Modal = ({
         onOpenAutoFocus,
         onClick: (event) => event.stopPropagation(),
         className: cn(
-          "fixed left-1/2 top-1/2 z-50 flex max-h-[90vh] -translate-x-1/2 -translate-y-1/2 flex-col gap-4",
+          MODAL_LAYER,
+          "fixed left-1/2 top-1/2 flex max-h-[90vh] -translate-x-1/2 -translate-y-1/2 flex-col gap-4",
           "rounded-xl bg-white p-6 shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)] outline-none",
           className
         ),
@@ -4312,7 +4317,8 @@ var Drawer = ({
         ref: overlayRef,
         onClick: (event) => event.stopPropagation(),
         className: cn(
-          "fixed inset-0 z-40 bg-black/35 data-[stacked]:bg-transparent",
+          MODAL_LAYER,
+          "fixed inset-0 bg-black/35 data-[stacked]:bg-transparent",
           overlayClassName
         )
       }
@@ -4331,7 +4337,8 @@ var Drawer = ({
         },
         onClick: (event) => event.stopPropagation(),
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",
+          MODAL_LAYER,
+          "fixed flex flex-col gap-4 bg-white p-6 outline-none",
           // vaul prolonge le panneau d'un ::after opaque de 200% (effet
           // élastique d'un panneau collé au bord) : sur un panneau qui flotte,
           // il déborde dans la marge et forme une barre blanche jusqu'au bord
@@ -8676,7 +8683,7 @@ var optimizeImage = async (file, desiredBaseName, opts = {}) => {
 
 // src/ui/components/ui/Tour.tsx
 var import_react57 = require("react");
-var import_react_dom = require("react-dom");
+var import_driver = require("driver.js");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var TOUR_TARGET_ATTRIBUTE = "data-tour-target";
 var DEFAULT_LABELS = {
@@ -8686,23 +8693,13 @@ var DEFAULT_LABELS = {
   close: "Quitter le tutoriel",
   counter: (current, total) => `${current} / ${total}`
 };
-var CARD_WIDTH = 340;
-var HOLE_PADDING = 6;
-var GAP2 = 14;
-var MARGIN = 12;
+var STAGE_PADDING = 6;
+var GHOST_TRANSITION_MS = 200;
+var HIGHLIGHT_DURATION_MS = 400;
 var TourTarget = ({ id, children }) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", __spreadProps(__spreadValues({}, { [TOUR_TARGET_ATTRIBUTE]: id }), { className: "contents", children }));
-var findTarget = (target) => {
-  const ids = Array.isArray(target) ? target : target ? [target] : [];
-  for (const id of ids) {
-    const element = document.querySelector(
-      `[${TOUR_TARGET_ATTRIBUTE}="${id.replace(/"/g, '\\"')}"]`
-    );
-    if (element && measure(element)) return element;
-  }
-  return null;
-};
+var isContents = (element) => getComputedStyle(element).display === "contents";
 var measure = (element) => {
-  if (getComputedStyle(element).display !== "contents") {
+  if (!isContents(element)) {
     const { top: top2, left: left2, width, height } = element.getBoundingClientRect();
     return width || height ? { top: top2, left: left2, width, height } : null;
   }
@@ -8714,47 +8711,18 @@ var measure = (element) => {
   const right = Math.max(...rects.map((r) => r.left + r.width));
   return { top, left, width: right - left, height: bottom - top };
 };
-var sameRect = (a, b) => a === b || !!a && !!b && Math.abs(a.top - b.top) < 0.5 && Math.abs(a.left - b.left) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
-var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
-var firstBox = (element) => getComputedStyle(element).display === "contents" && element.firstElementChild ? firstBox(element.firstElementChild) : element;
-var placeCard = (hole, cardHeight, preferred) => {
-  var _a;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const fits = {
-    bottom: vh - (hole.top + hole.height) >= cardHeight + GAP2 + MARGIN,
-    top: hole.top >= cardHeight + GAP2 + MARGIN,
-    right: vw - (hole.left + hole.width) >= CARD_WIDTH + GAP2 + MARGIN,
-    left: hole.left >= CARD_WIDTH + GAP2 + MARGIN
-  };
-  const order = ["bottom", "top", "left", "right"];
-  const side = (_a = preferred && fits[preferred] ? preferred : order.find((p) => fits[p])) != null ? _a : "bottom";
-  const centerX = hole.left + hole.width / 2;
-  const centerY = hole.top + hole.height / 2;
-  if (side === "bottom" || side === "top") {
-    const left2 = clamp(
-      centerX - CARD_WIDTH / 2,
-      MARGIN,
-      vw - CARD_WIDTH - MARGIN
+var boxesOf = (element) => isContents(element) ? Array.from(element.children).flatMap(boxesOf) : [element];
+var findTarget = (ids) => {
+  for (const id of ids) {
+    const element = document.querySelector(
+      `[${TOUR_TARGET_ATTRIBUTE}="${id.replace(/"/g, '\\"')}"]`
     );
-    const top2 = side === "bottom" ? Math.min(hole.top + hole.height + GAP2, vh - cardHeight - MARGIN) : Math.max(hole.top - GAP2 - cardHeight, MARGIN);
-    return {
-      side,
-      top: top2,
-      left: left2,
-      arrow: clamp(centerX - left2, 18, CARD_WIDTH - 18)
-    };
+    if (element && measure(element)) return element;
   }
-  const top = clamp(centerY - cardHeight / 2, MARGIN, vh - cardHeight - MARGIN);
-  const left = side === "right" ? hole.left + hole.width + GAP2 : hole.left - GAP2 - CARD_WIDTH;
-  return { side, top, left, arrow: clamp(centerY - top, 18, cardHeight - 18) };
-};
-var ARROW_CLASS = {
-  bottom: "-top-[7px] -translate-x-1/2",
-  top: "-bottom-[7px] -translate-x-1/2",
-  right: "-left-[7px] -translate-y-1/2",
-  left: "-right-[7px] -translate-y-1/2"
+  return null;
 };
+var sameRect = (a, b) => a === b || !!a && !!b && Math.abs(a.top - b.top) < 0.5 && Math.abs(a.left - b.left) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+var isOutOfView = (rect) => rect.top < 0 || rect.left < 0 || rect.top + rect.height > window.innerHeight || rect.left + rect.width > window.innerWidth;
 var Tour = ({
   steps,
   open,
@@ -8767,234 +8735,168 @@ var Tour = ({
   var _a;
   const text = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
   const current = steps[step];
-  const hasStep = Boolean(current);
-  const targetKey = [(_a = current == null ? void 0 : current.target) != null ? _a : []].flat().join("|");
   const total = steps.length;
   const isLast = step === total - 1;
-  const titleId = (0, import_react57.useId)();
-  const [rect, setRect] = (0, import_react57.useState)(null);
-  const [status, setStatus] = (0, import_react57.useState)("pending");
-  const [cardHeight, setCardHeight] = (0, import_react57.useState)(0);
-  const cardRef = (0, import_react57.useRef)(null);
-  const nextRef = (0, import_react57.useRef)(null);
+  const driverRef = (0, import_react57.useRef)(null);
+  const ghostRef = (0, import_react57.useRef)(null);
+  const actions = (0, import_react57.useRef)({
+    next: () => {
+    },
+    previous: () => {
+    },
+    close: () => {
+    }
+  });
+  actions.current = {
+    next: () => isLast ? onClose("finish") : onStepChange(step + 1),
+    previous: () => {
+      if (step > 0) onStepChange(step - 1);
+    },
+    close: () => onClose("close")
+  };
   (0, import_react57.useEffect)(() => {
-    if (!open || !hasStep) return;
-    const targets = targetKey ? targetKey.split("|") : void 0;
+    if (!open) return;
+    const ghost = document.createElement("div");
+    ghost.className = "dz-tour-target";
+    document.body.appendChild(ghost);
+    const instance = (0, import_driver.driver)({
+      duration: HIGHLIGHT_DURATION_MS,
+      allowKeyboardControl: false,
+      overlayClickBehavior: () => {
+      },
+      overlayColor: "rgb(15, 23, 42)",
+      overlayOpacity: 0.6,
+      stagePadding: STAGE_PADDING,
+      stageRadius: 8,
+      popoverOffset: 8,
+      popoverClass: "dz-tour"
+    });
+    driverRef.current = instance;
+    ghostRef.current = ghost;
+    return () => {
+      instance.destroy();
+      ghost.remove();
+      driverRef.current = null;
+      ghostRef.current = null;
+    };
+  }, [open]);
+  (0, import_react57.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        actions.current.close();
+      } else if (event.key === "ArrowRight") actions.current.next();
+      else if (event.key === "ArrowLeft") actions.current.previous();
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [open]);
+  const view = (0, import_react57.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 = [
+    current == null ? void 0 : current.title,
+    current == null ? void 0 : current.content,
+    current == null ? void 0 : current.placement,
+    current == null ? void 0 : current.interactive,
+    text.counter(step + 1, total),
+    text.previous,
+    isLast ? text.finish : text.next,
+    text.close
+  ].join("|");
+  (0, import_react57.useEffect)(() => {
+    const instance = driverRef.current;
+    const ghost = ghostRef.current;
+    const { current: current2, text: text2, step: step2, total: total2, isLast: isLast2 } = view.current;
+    if (!open || !current2 || !instance || !ghost) return;
+    const targets = targetKey ? targetKey.split("|") : [];
+    const interactive = current2.interactive !== false;
+    const popover = {
+      title: current2.title,
+      description: current2.content,
+      side: current2.placement,
+      showButtons: step2 > 0 ? ["next", "previous", "close"] : ["next", "close"],
+      showProgress: true,
+      progressText: text2.counter(step2 + 1, total2),
+      nextBtnText: isLast2 ? text2.finish : text2.next,
+      prevBtnText: text2.previous,
+      onNextClick: () => actions.current.next(),
+      onPrevClick: () => actions.current.previous(),
+      onCloseClick: () => actions.current.close(),
+      onPopoverRender: (dom) => {
+        var _a2;
+        dom.closeButton.setAttribute("aria-label", text2.close);
+        dom.wrapper.setAttribute("aria-label", (_a2 = current2.title) != null ? _a2 : current2.content);
+        dom.nextButton.focus({ preventScroll: true });
+      }
+    };
     const startedAt = performance.now();
+    let shown = "none";
     let scrolled = false;
+    let lastRect = null;
+    let refreshUntil = 0;
+    let animatingUntil = 0;
+    let clickable = [];
     let frame = 0;
-    setStatus("pending");
-    setRect(null);
+    const setClickable = (elements) => {
+      clickable.forEach((el) => el.classList.remove("driver-active-element"));
+      clickable = elements;
+      clickable.forEach((el) => el.classList.add("driver-active-element"));
+    };
     const track = () => {
+      var _a2;
       const element = findTarget(targets);
-      const box = element ? measure(element) : null;
-      if (element && box) {
+      const rect = element ? measure(element) : null;
+      if (element && rect) {
         if (!scrolled) {
           scrolled = true;
-          const outOfView = box.top < 0 || box.left < 0 || box.top + box.height > window.innerHeight || box.left + box.width > window.innerWidth;
-          if (outOfView) {
-            firstBox(element).scrollIntoView({
+          if (isOutOfView(rect)) {
+            (_a2 = boxesOf(element)[0]) == null ? void 0 : _a2.scrollIntoView({
               block: "center",
               inline: "nearest"
             });
           }
         }
-        setRect((previous) => sameRect(previous, box) ? previous : box);
-        setStatus("found");
-      } else {
-        setRect(null);
-        setStatus(
-          !targets || performance.now() - startedAt > targetTimeout ? "missing" : "pending"
-        );
+        if (!sameRect(lastRect, rect)) {
+          lastRect = rect;
+          refreshUntil = Math.max(
+            refreshUntil,
+            performance.now() + GHOST_TRANSITION_MS + 50
+          );
+          Object.assign(ghost.style, {
+            top: `${rect.top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`
+          });
+        }
+        if (shown !== "target") {
+          shown = "target";
+          ghost.style.pointerEvents = interactive ? "none" : "auto";
+          ghost.style.display = "block";
+          instance.highlight({ element: ghost, popover });
+          animatingUntil = performance.now() + HIGHLIGHT_DURATION_MS;
+          refreshUntil = animatingUntil + GHOST_TRANSITION_MS;
+          setClickable(interactive ? boxesOf(element) : []);
+        } else if (performance.now() >= animatingUntil && performance.now() < refreshUntil) {
+          instance.refresh();
+        }
+      } else if (shown !== "center" && (!targets.length || performance.now() - startedAt > targetTimeout)) {
+        shown = "center";
+        ghost.style.display = "none";
+        setClickable([]);
+        instance.highlight({ popover });
       }
       frame = requestAnimationFrame(track);
     };
     track();
-    return () => cancelAnimationFrame(frame);
-  }, [open, step, hasStep, targetKey, targetTimeout]);
-  (0, import_react57.useLayoutEffect)(() => {
-    if (cardRef.current) setCardHeight(cardRef.current.offsetHeight);
-  });
-  (0, import_react57.useEffect)(() => {
-    var _a2;
-    if (open && status !== "pending")
-      (_a2 = nextRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
-  }, [open, step, status]);
-  const goNext = (0, import_react57.useCallback)(() => {
-    if (isLast) onClose("finish");
-    else onStepChange(step + 1);
-  }, [isLast, onClose, onStepChange, step]);
-  const goPrevious = (0, import_react57.useCallback)(() => {
-    if (step > 0) onStepChange(step - 1);
-  }, [onStepChange, step]);
-  (0, import_react57.useEffect)(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        onClose("close");
-      } else if (event.key === "ArrowRight") goNext();
-      else if (event.key === "ArrowLeft") goPrevious();
+    return () => {
+      cancelAnimationFrame(frame);
+      setClickable([]);
     };
-    window.addEventListener("keydown", onKeyDown, true);
-    return () => window.removeEventListener("keydown", onKeyDown, true);
-  }, [open, goNext, goPrevious, onClose]);
-  if (!open || !current) return null;
-  const hole = rect && {
-    top: rect.top - HOLE_PADDING,
-    left: rect.left - HOLE_PADDING,
-    width: rect.width + HOLE_PADDING * 2,
-    height: rect.height + HOLE_PADDING * 2
-  };
-  const placement = hole && placeCard(hole, cardHeight, current.placement);
-  const blockClick = (event) => event.stopPropagation();
-  const blocker = "fixed z-[10000]";
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-      hole ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none fixed z-[10000] rounded-[8px] shadow-[0_0_0_9999px_rgba(15,23,42,0.6)] ring-[3px] ring-yellow-300 transition-all duration-200 ease-out",
-            style: hole
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "inset-x-0 top-0"),
-            style: { height: Math.max(hole.top, 0) },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "inset-x-0 bottom-0"),
-            style: { top: hole.top + hole.height },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "left-0"),
-            style: {
-              top: hole.top,
-              height: hole.height,
-              width: Math.max(hole.left, 0)
-            },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-          "div",
-          {
-            className: cn(blocker, "right-0"),
-            style: {
-              top: hole.top,
-              height: hole.height,
-              left: hole.left + hole.width
-            },
-            onMouseDown: blockClick,
-            onClick: blockClick
-          }
-        ),
-        current.interactive === false && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: blocker, style: hole, onClick: blockClick })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-        "div",
-        {
-          className: cn(blocker, "inset-0 bg-[rgba(15,23,42,0.6)]"),
-          onMouseDown: blockClick,
-          onClick: blockClick
-        }
-      ),
-      status !== "pending" && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
-        "div",
-        {
-          ref: cardRef,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          className: cn(
-            "fixed z-[10001] rounded-[12px] bg-yellow-300 p-5 shadow-[0_10px_30px_rgba(0,0,0,0.25)]",
-            !placement && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-            placement && "transition-[top,left] duration-200 ease-out"
-          ),
-          style: __spreadValues({
-            width: CARD_WIDTH
-          }, placement && { top: placement.top, left: placement.left }),
-          children: [
-            placement && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-              "span",
-              {
-                "aria-hidden": true,
-                className: cn(
-                  "absolute h-3 w-3 rotate-45 bg-yellow-300",
-                  ARROW_CLASS[placement.side]
-                ),
-                style: placement.side === "bottom" || placement.side === "top" ? { left: placement.arrow } : { top: placement.arrow }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { column: true, gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { row: true, justify: "between", align: "center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Text, { size: "xs", weight: "semibold", color: "white", children: text.counter(step + 1, total) }),
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Icon,
-                  {
-                    name: "xmark",
-                    size: "s",
-                    color: "white",
-                    onClick: () => onClose("close"),
-                    "aria-label": text.close
-                  }
-                )
-              ] }),
-              current.title && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Text, { id: titleId, size: "m", weight: "bold", color: "white", children: current.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                Text,
-                {
-                  id: current.title ? void 0 : titleId,
-                  size: "m",
-                  weight: "medium",
-                  color: "white",
-                  className: "leading-relaxed",
-                  children: current.content
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Layout, { row: true, justify: "end", gap: 2, children: [
-                step > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Button,
-                  {
-                    label: text.previous,
-                    variant: "outline",
-                    size: "s",
-                    className: "border-white text-white",
-                    onClick: goPrevious
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                  Button,
-                  {
-                    ref: nextRef,
-                    label: isLast ? text.finish : text.next,
-                    size: "s",
-                    className: "bg-white text-yellow-500",
-                    onClick: goNext
-                  }
-                )
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
+  }, [open, step, targetKey, popoverKey, targetTimeout]);
+  return null;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {