@mks2508/mks-ui 0.8.1 → 0.9.0

package/dist/react-ui/components/MorphingPopover/morphing-popover.module.css

@@ -0,0 +1,154 @@
+/* CSS Variables for anchor positioning */
+.morphingPopoverContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-width: 220px;
+  --target-height: 120px;
+  --transition-duration: 0.2s;
+}
+
+/* Trigger button styles */
+.morphingTrigger {
+  anchor-name: var(--anchor-name);
+  width: 44px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 0.2s;
+}
+
+.morphingTrigger:hover {
+  background-color: hsl(var(--muted) / 0.5);
+}
+
+/* Popover styles - anchored to trigger by default */
+.morphingPopover {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+  transform-origin: center center;
+  opacity: 0;
+}
+
+/* When popover is open - expand to target size */
+.morphingPopover:popover-open {
+  position-anchor: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--target-width);
+  height: var(--target-height);
+  border-radius: 12px;
+  opacity: 1;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+}
+
+/* Starting style for animation - browser support required */
+@starting-style {
+  .morphingPopover:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    transform: none;
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+
+/* Fallback for browsers without anchor positioning */
+@supports not (anchor-name: none) {
+  .morphingPopover {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .morphingPopover:popover-open {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @starting-style {
+    .morphingPopover:popover-open {
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0;
+    }
+  }
+}
+
+/* Variant: Morphing to a specific target element */
+.morphingPopoverTargetContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-anchor-name: morphing-target;
+  --transition-duration: 0.2s;
+}
+
+.morphingPopoverTarget {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+}
+
+.morphingPopoverTarget:popover-open {
+  position-anchor: var(--target-anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  border-radius: 12px;
+  min-width: 200px;
+  min-height: 120px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+  opacity: 1;
+}
+
+@starting-style {
+  .morphingPopoverTarget:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+

package/dist/react-ui/index.d.ts

@@ -18,6 +18,6 @@ export * from './icons';
 export * from './lib';
 export { Sidebar, SidebarNav, SidebarToggle, SidebarContent, SidebarIndicator, SidebarFluidIndicator, SidebarSafeArea, SidebarItem, SidebarSubContent, SidebarSubLink, SidebarTooltip, useSidebarContext, useSidebarKeyboard, useSidebarIndicator, useSubContent, generateSidebarStyles, generateIndicatorStyles, type SidebarProps, type SidebarNavProps, type SidebarToggleProps, type SidebarContentProps, type SidebarIndicatorProps, type SidebarSafeAreaProps, type SidebarItemProps, type SidebarState, type SidebarToggleState, type SidebarItemState, type SidebarIndicatorState, type SidebarContextValue, type SidebarDimensions, type SidebarSafeAreas, type SidebarAnimations, type SidebarConfig, type SidebarRenderProp, type SidebarToggleRenderProp, type SidebarItemRenderProp, type SidebarIndicatorRenderProp, type SidebarVisualStyle, type SidebarSubContentProps, type SidebarSubLinkProps, type SidebarTooltipProps, SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarWidth, SidebarTransitionDuration, SidebarZIndex, SidebarBorderRadius, SidebarSafeAreaPosition, SidebarTimingFunction, SidebarIconLibrary, DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_VISUAL_STYLE, SIDEBAR_VISUAL_PRESETS, } from './blocks/Sidebar';
 export { MobileBottomNav, NavVariant, NavSize, LabelPosition, AnimationType, NavItemState, IconSize, ZIndexLevel, BlurIntensity, useIOSSafariFix, useIOSFixedReset, detectIOSVersion, type RootProps, type NavListProps, type NavItemProps, type NavContextValue, type SpringConfig, type TweenConfig, type AnimationConfig, type GlassConfig, type BaseNavProps, type IOSSafariFixConfig, DEFAULT_ANIMATION_CONFIG, DEFAULT_GLASS_CONFIG, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, rootVariants, navListVariants, navItemVariants, iconVariants, labelVariants, navBadgeVariants, spacerVariants, } from './blocks/BottomNavBar';
-export { TerminalLogsPanel, terminalLogsPanelStyles, TerminalDisplay, terminalDisplayStyles, terminalDisplayVariants, TerminalPanelChrome, TerminalPanelHeader, TerminalPanelFooter, LogLinesViewer, LogParserService, TerminalActionBar, TerminalStatusBar, TerminalConnectionStatus, TerminalClearButton, LOG_LEVEL_STYLES, STATUS_COLORS, } from './blocks/Terminal';
-export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef, ITerminalDisplayProps, ITerminalDisplayRef, ITerminalPanelHeaderProps, ITerminalPanelFooterProps, TerminalLogsPanelSlot, TerminalDisplaySlot, TerminalDisplayVariantProps, IParsedLogEntry, TLogLevel, TLogLevelFilter, ITerminalSession, ILevelFilterButton, TTerminalAction, } from './blocks/Terminal';
+export { TerminalPanelChrome, TerminalPanelHeader, TerminalPanelFooter, TerminalSettingsPopover, LogParserService, TerminalActionBar, TerminalStatusBar, TerminalConnectionStatus, TerminalClearButton, LOG_LEVEL_STYLES, STATUS_COLORS, } from './blocks/Terminal';
+export type { ITerminalPanelHeaderProps, ITerminalPanelFooterProps, IParsedLogEntry, TLogLevel, TLogLevelFilter, ITerminalSession, ILevelFilterButton, TTerminalAction, } from './blocks/Terminal';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,MAAM,CAAC;AAGrB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,OAAO,CAAC;AAItB,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,eAAe,EACf,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAEL,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EAEd,gBAAgB,EAEhB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EAEnB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAEV,uBAAuB,EACvB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,EACnB,2BAA2B,EAE3B,eAAe,EACf,SAAS,EACT,eAAe,EAEf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,MAAM,CAAC;AAGrB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,OAAO,CAAC;AAItB,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,eAAe,EACf,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,uBAAuB,CAAC;AAc/B,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EAEnB,uBAAuB,EAEvB,gBAAgB,EAEhB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EAEnB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAEV,yBAAyB,EACzB,yBAAyB,EAEzB,eAAe,EACf,SAAS,EACT,eAAe,EAEf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mBAAmB,CAAC"}

package/dist/react-ui/index.js

@@ -164,17 +164,13 @@ import "./blocks/BottomNavBar/index.js";
 import { LogParserService } from "./blocks/Terminal/parsing/LogParserService.js";
 import { LOG_LEVEL_STYLES, STATUS_COLORS } from "./blocks/Terminal/Terminal.tokens.js";
 import { TerminalClearButton } from "./blocks/Terminal/controls/TerminalAtoms.js";
+import { TerminalSettingsPopover } from "./blocks/Terminal/panel/TerminalSettingsPopover/index.js";
 import { TerminalActionBar } from "./blocks/Terminal/controls/TerminalActionBar/index.js";
 import { TerminalConnectionStatus } from "./blocks/Terminal/controls/TerminalConnectionStatus/index.js";
 import { TerminalStatusBar } from "./blocks/Terminal/controls/TerminalStatusBar/index.js";
 import { TerminalPanelHeader } from "./blocks/Terminal/panel/TerminalPanelHeader/index.js";
 import { TerminalPanelChrome } from "./blocks/Terminal/panel/TerminalPanelChrome.js";
 import { TerminalPanelFooter } from "./blocks/Terminal/panel/TerminalPanelFooter/index.js";
-import { LogLinesViewer } from "./blocks/Terminal/panel/LogLinesViewer.js";
-import { terminalLogsPanelStyles } from "./blocks/Terminal/panel/TerminalLogsPanel/TerminalLogsPanel.styles.js";
-import { TerminalLogsPanel } from "./blocks/Terminal/panel/TerminalLogsPanel/index.js";
-import { terminalDisplayStyles, terminalDisplayVariants } from "./blocks/Terminal/TerminalDisplay.styles.js";
-import { TerminalDisplay } from "./blocks/Terminal/TerminalDisplay.js";
 import "./blocks/Terminal/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogLinesViewer, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncatePath, MiddleTruncatePathStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalDisplay, TerminalIcon, TerminalLogsPanel, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalStatusBar, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, ZIndexLevel, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildDelays, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, fileIconVariants, fileItemVariants, filePanelVariants, fileTreeVariants, folderIconVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, middleTruncatePathVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, operationCardVariants, popoverStyles, progressStyles, rootVariants, shouldShowSeparator, spacerVariants, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, terminalDisplayStyles, terminalDisplayVariants, terminalLogsPanelStyles, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIOSFixedReset, useIOSSafariFix, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, useOperationCard, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncatePath, MiddleTruncatePathStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalIcon, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalSettingsPopover, TerminalStatusBar, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, ZIndexLevel, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildDelays, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, fileIconVariants, fileItemVariants, filePanelVariants, fileTreeVariants, folderIconVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, middleTruncatePathVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, operationCardVariants, popoverStyles, progressStyles, rootVariants, shouldShowSeparator, spacerVariants, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIOSFixedReset, useIOSSafariFix, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, useOperationCard, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent, useSwitch, useTooltip, useViewTransitions };

package/dist/react-ui/primitives/AutoHeight/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type HTMLMotionProps, type LegacyAnimationControls, type TargetAndTransition, type Transition } from 'motion/react';
-import { type WithAsChild } from '@/react-ui/primitives/Slot';
+import { type WithAsChild } from '../../../react-ui/primitives/Slot';
 /** Props for the AutoHeight primitive component. */
 type IAutoHeightProps = WithAsChild<{
     children: React.ReactNode;

package/dist/react-ui/primitives/CountingNumber/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SpringOptions } from 'motion/react';
-import { type IUseIsInViewOptions } from '@/react-ui/hooks/DOM/UseIsInView';
+import { type IUseIsInViewOptions } from '../../../react-ui/hooks/DOM/UseIsInView';
 /** Props for the CountingNumber primitive. */
 type ICountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
     /** Target number to animate to. */

package/dist/react-ui/primitives/DotMatrix/DotMatrix.types.d.ts

@@ -20,7 +20,7 @@
  *
  * @module @mks2508/mks-ui/react/primitives/DotMatrix
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { DotMatrixPattern } from './patterns';
 export type { DotMatrixPattern } from './patterns';
 /** Lifecycle status. Applied as a CSS data-attr on the root. */

package/dist/react-ui/primitives/DotMatrix/dot.css

@@ -0,0 +1,364 @@
+/* =============================================================================
+ *  DotMatrix — progressive fill model.
+ *
+ *  Cells light up one at a time in `pattern` order, stay lit until the
+ *  cycle resets, then repeat. Implementation uses ONE CSS animation per
+ *  matrix that drives a registered custom property `--dm-phase` from
+ *  0 → 1 (fill), holds it at 1 (hold), then snaps back to 0 (reset)
+ *  for a rest period.
+ *
+ *  Each cell carries a `--dm-threshold` (its position in the fill
+ *  sequence, 0..1) and computes its own `::before` opacity as a step
+ *  across `phase - threshold`, multiplied by `--dm-edge-sharpness` so
+ *  the edge can range from "instant snap" to "warm fade".
+ *
+ *  Perf shape: N matrices = N animations total (not N × cells). Cell
+ *  opacity is computed at paint time by calc(); the compositor batches
+ *  updates via the shared phase var. With `contain: layout style paint`
+ *  each cell is isolated so work doesn't cascade.
+ * ============================================================================= */
+
+@property --dm-phase {
+	syntax: '<number>';
+	initial-value: 0;
+	inherits: true;
+}
+
+.dm-root {
+	display: grid;
+	width: 100%;
+	gap: var(--dm-gap, 5px);
+	padding: var(--dm-pad, 0.25rem);
+	border-radius: 0.5rem;
+	background-color: transparent;
+
+	/* Skip render work when the matrix is offscreen. */
+	content-visibility: auto;
+	contain-intrinsic-size: auto 200px;
+	transform: translateZ(0);
+
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 50%, transparent);
+}
+
+/* ─── Cell: base OFF layer — neutral dim ──────────────────────────────── */
+
+.dm-cell {
+	position: relative;
+	aspect-ratio: 1 / 1;
+	min-width: 4px;
+	min-height: 4px;
+	border-radius: var(--dm-radius, 32%);
+	background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
+	opacity: var(--dm-off-opacity, 0.45);
+	transform: scale(var(--dm-off-scale, 0.9));
+	contain: layout style paint;
+
+	--dm-threshold: 0;
+	--dm-stagger-delay: 0ms;
+}
+
+/* ─── Pseudo: ON layer — LED look, fades in as phase crosses threshold ─ */
+
+.dm-cell::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background-color: var(--dm-on);
+	background-image:
+		radial-gradient(
+			circle at 32% 26%,
+			rgb(255 255 255 / 0.35) 0%,
+			rgb(255 255 255 / 0.12) 18%,
+			transparent 48%
+		),
+		radial-gradient(
+			circle at 70% 78%,
+			rgb(0 0 0 / 0.22) 0%,
+			transparent 60%
+		);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.dm-root[data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%),
+		0 0 2px var(--dm-glow),
+		0 0 6px var(--dm-glow),
+		0 0 12px color-mix(in oklch, var(--dm-glow) 55%, transparent);
+}
+
+/* ─── Running: phase animates on root, cells derive state from it ────── */
+
+.dm-root[data-status='running'] {
+	animation-name: var(--dm-anim-phase);
+	animation-duration: var(--dm-cycle-total, 2600ms);
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-fill-mode: both;
+}
+
+/* Lit fraction for THIS cell — 0 when off, 1 when fully filled, ramped
+ * near the threshold by `--dm-edge-sharpness`. Reused by both the pseudo
+ * opacity (the LED glow) and the cell's scale (grows when lit). */
+.dm-root[data-status='running'] .dm-cell {
+	opacity: 1;
+	transform: scale(
+		calc(
+			var(--dm-off-scale, 0.88) +
+			(var(--dm-on-scale, 1) - var(--dm-off-scale, 0.88)) *
+			clamp(
+				0,
+				(var(--dm-phase) - var(--dm-threshold)) *
+					var(--dm-edge-sharpness, 50),
+				1
+			)
+		)
+	);
+}
+
+.dm-root[data-status='running'] .dm-cell::before {
+	opacity: clamp(
+		0,
+		calc(
+			(var(--dm-phase) - var(--dm-threshold)) *
+			var(--dm-edge-sharpness, 50)
+		),
+		1
+	);
+}
+
+/* ─── Accent cells ────────────────────────────────────────────────────── */
+
+.dm-cell[data-accent='true'] {
+	opacity: 1;
+	transform: scale(1);
+}
+
+.dm-cell[data-accent='true']::before {
+	background-color: var(--primary);
+	background-image: none;
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		0 0 3px color-mix(in oklch, var(--primary) 70%, transparent),
+		0 0 7px color-mix(in oklch, var(--primary) 50%, transparent);
+	opacity: 1 !important;
+}
+
+/* ─── Lifecycle FINAL animations ──────────────────────────────────────── */
+
+@keyframes dm-success-pop {
+	0% {
+		transform: scale(0.94);
+		filter: brightness(0.7);
+	}
+	45% {
+		transform: scale(1.18);
+		filter: brightness(1.4);
+	}
+	100% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-fail-strobe {
+	0% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+	22% {
+		transform: scale(1.22);
+		filter: brightness(1.55) saturate(1.4);
+	}
+	55% {
+		transform: scale(0.92);
+		filter: brightness(0.75);
+	}
+	100% {
+		transform: scale(0.97);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-cancelled-dim {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(0.9);
+		opacity: 0.55;
+	}
+}
+
+.dm-root[data-status='success'] {
+	animation: none;
+}
+.dm-root[data-status='success'] .dm-cell {
+	opacity: 1;
+	transform: scale(1);
+	animation: dm-success-pop 520ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='success'] .dm-cell::before {
+	opacity: 1;
+}
+
+.dm-root[data-status='failed'] {
+	animation: none;
+}
+.dm-root[data-status='failed'] .dm-cell {
+	opacity: 1;
+	animation: dm-fail-strobe 560ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='failed'] .dm-cell::before {
+	background-color: var(--destructive);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%);
+	opacity: 1;
+}
+.dm-root[data-status='failed'][data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%),
+		0 0 3px color-mix(in oklch, var(--destructive) 70%, transparent),
+		0 0 9px color-mix(in oklch, var(--destructive) 55%, transparent);
+}
+
+.dm-root[data-status='cancelled'] {
+	animation: none;
+}
+.dm-root[data-status='cancelled'] .dm-cell {
+	background-color: color-mix(in oklch, var(--foreground) 22%, transparent);
+	opacity: 0.65;
+	animation: dm-cancelled-dim 380ms cubic-bezier(0.4, 0, 0.8, 0.6) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='cancelled'] .dm-cell::before {
+	opacity: 0;
+}
+
+.dm-root[data-status='idle'] {
+	animation: none;
+}
+.dm-root[data-status='idle'] .dm-cell::before {
+	opacity: 0;
+}
+
+/* ─── Theme-token palettes ────────────────────────────────────────────── */
+
+.dm--foreground {
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 55%, transparent);
+}
+
+.dm--primary {
+	--dm-on: var(--primary);
+	--dm-off: color-mix(in oklch, var(--primary) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--primary) 65%, transparent);
+}
+
+.dm--destructive {
+	--dm-on: var(--destructive);
+	--dm-off: color-mix(in oklch, var(--destructive) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--destructive) 65%, transparent);
+}
+
+.dm--warning {
+	--dm-on: var(--warning);
+	--dm-off: color-mix(in oklch, var(--warning) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--warning) 65%, transparent);
+}
+
+/* ─── Named palettes (OKLCH for stability) ────────────────────────────── */
+
+.dm--cyan {
+	--dm-on: oklch(90% 0.2 195);
+	--dm-off: oklch(40% 0.08 195 / 0.4);
+	--dm-glow: oklch(80% 0.25 195 / 0.95);
+}
+.dm--magenta {
+	--dm-on: oklch(85% 0.25 330);
+	--dm-off: oklch(40% 0.08 330 / 0.4);
+	--dm-glow: oklch(75% 0.3 330 / 0.95);
+}
+.dm--yellow {
+	--dm-on: oklch(95% 0.2 90);
+	--dm-off: oklch(50% 0.08 90 / 0.4);
+	--dm-glow: oklch(90% 0.25 90 / 0.95);
+}
+.dm--green {
+	--dm-on: oklch(90% 0.25 145);
+	--dm-off: oklch(40% 0.08 145 / 0.4);
+	--dm-glow: oklch(80% 0.3 145 / 0.95);
+}
+.dm--orange {
+	--dm-on: oklch(85% 0.22 50);
+	--dm-off: oklch(45% 0.08 50 / 0.4);
+	--dm-glow: oklch(75% 0.28 50 / 0.95);
+}
+.dm--blue {
+	--dm-on: oklch(80% 0.22 260);
+	--dm-off: oklch(40% 0.08 260 / 0.4);
+	--dm-glow: oklch(70% 0.28 260 / 0.95);
+}
+.dm--red {
+	--dm-on: oklch(70% 0.25 25);
+	--dm-off: oklch(40% 0.08 25 / 0.4);
+	--dm-glow: oklch(60% 0.3 25 / 0.95);
+}
+.dm--purple {
+	--dm-on: oklch(75% 0.22 300);
+	--dm-off: oklch(40% 0.08 300 / 0.4);
+	--dm-glow: oklch(65% 0.28 300 / 0.95);
+}
+.dm--teal {
+	--dm-on: oklch(82% 0.18 175);
+	--dm-off: oklch(40% 0.08 175 / 0.4);
+	--dm-glow: oklch(72% 0.24 175 / 0.95);
+}
+.dm--pink {
+	--dm-on: oklch(80% 0.2 350);
+	--dm-off: oklch(45% 0.08 350 / 0.4);
+	--dm-glow: oklch(70% 0.26 350 / 0.95);
+}
+.dm--lime {
+	--dm-on: oklch(88% 0.22 120);
+	--dm-off: oklch(45% 0.08 120 / 0.4);
+	--dm-glow: oklch(80% 0.28 120 / 0.95);
+}
+.dm--white {
+	--dm-on: oklch(98% 0 0);
+	--dm-off: oklch(50% 0 0 / 0.3);
+	--dm-glow: oklch(95% 0 0 / 0.85);
+}
+
+/* ─── Reduced motion — freeze animations ─────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+	.dm-root[data-status='running'],
+	.dm-root[data-status='success'] .dm-cell,
+	.dm-root[data-status='failed'] .dm-cell,
+	.dm-root[data-status='cancelled'] .dm-cell {
+		animation: none !important;
+	}
+	.dm-cell {
+		transform: none;
+	}
+}
+