@mks2508/mks-ui 0.7.0 → 0.8.1

package/dist/react-ui/index.js

@@ -5,6 +5,10 @@ import { useAutoHeight } from "./hooks/Animation/UseAutoHeight.js";
 import { AutoHeight } from "./primitives/AutoHeight/index.js";
 import { useIsInView } from "./hooks/DOM/UseIsInView.js";
 import { CountingNumber } from "./primitives/CountingNumber/index.js";
+import { DOT_MATRIX_PATTERNS, buildDelays } from "./primitives/DotMatrix/patterns.js";
+import { DotMatrix } from "./primitives/DotMatrix/index.js";
+import { DEFAULT_GOOEY_CONFIG } from "./primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.js";
+import { GooeyMorphingSurface } from "./primitives/GooeyMorphingSurface/index.js";
 import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./primitives/waapi/core/animationConstants.js";
 import { useElementRegistry } from "./primitives/waapi/core/useElementRegistry.js";
 import { usePositionCapture } from "./primitives/waapi/core/usePositionCapture.js";
@@ -56,6 +60,7 @@ import { buttonStateStyles, buttonVariants } from "./ui/Button/Button.styles.js"
 import { Button } from "./ui/Button/index.js";
 import { cardVariants } from "./ui/Card/Card.styles.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/Card/index.js";
+import { GooeyButton } from "./ui/GooeyButton/index.js";
 import { Input } from "./ui/Input/index.js";
 import { Textarea } from "./ui/Textarea/index.js";
 import { inputGroupAddonVariants, inputGroupButtonVariants } from "./ui/InputGroup/InputGroup.styles.js";
@@ -68,6 +73,24 @@ import { Label } from "./ui/Label/index.js";
 import { Separator } from "./ui/Separator/index.js";
 import { fieldVariants } from "./ui/Field/Field.styles.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/Field/index.js";
+import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./ui/FileIcon/FileIcon.styles.js";
+import { FileIcon, FolderIcon } from "./ui/FileIcon/index.js";
+import { MiddleTruncatePathStyles, middleTruncatePathVariants } from "./ui/MiddleTruncatePath/MiddleTruncatePath.styles.js";
+import { MiddleTruncatePath } from "./ui/MiddleTruncatePath/index.js";
+import { FileItemGitStatusClasses, FileItemStyles, fileItemVariants } from "./ui/FileItem/FileItem.styles.js";
+import { FileItem } from "./ui/FileItem/index.js";
+import { FilePanelStyles, filePanelVariants } from "./ui/FilePanel/FilePanel.styles.js";
+import { FilePanel } from "./ui/FilePanel/index.js";
+import { FileTreeStyles, fileTreeVariants } from "./ui/FileTree/FileTree.styles.js";
+import { FileTree } from "./ui/FileTree/index.js";
+import { useOperationCard } from "./ui/OperationCard/OperationCard.context.js";
+import { OperationCardStyles, operationCardVariants } from "./ui/OperationCard/OperationCard.styles.js";
+import { OperationCardHeader } from "./ui/OperationCard/parts/OperationCardHeader.js";
+import { OperationCardVisualizer } from "./ui/OperationCard/parts/OperationCardVisualizer.js";
+import { OperationCardStats } from "./ui/OperationCard/parts/OperationCardStats.js";
+import { OperationCardProgress } from "./ui/OperationCard/parts/OperationCardProgress.js";
+import { OperationCardActions } from "./ui/OperationCard/parts/OperationCardActions.js";
+import { OperationCard, OperationCardRoot } from "./ui/OperationCard/index.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./ui/Select/index.js";
 import { dataCardStyles, dataCardVariants } from "./ui/DataCard/DataCard.styles.js";
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./ui/DataCard/index.js";
@@ -154,4 +177,4 @@ import { terminalDisplayStyles, terminalDisplayVariants } from "./blocks/Termina
 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_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, 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, GOOEY_DEFAULTS, Globe, GooeyCanvas, GooeyFilter, 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, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, 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, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, 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, 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, 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 };

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

@@ -0,0 +1,109 @@
+/**
+ * Type surface for the DotMatrix primitive.
+ *
+ * DotMatrix is a pattern-driven rows×cols grid inspired by the
+ * 3-pixel-grid concept (MetaHeavies). A `pattern` generates per-cell
+ * delays; the engine runs a continuous cycle (fade-in staggered →
+ * hold → fade-out staggered → hold-off → repeat) so the matrix reads
+ * as a living indicator.
+ *
+ * `status` is a *lifecycle event* — not a variant. It captures the
+ * cycle where it is:
+ *   - `running`  → cycle plays (default)
+ *   - `idle`     → cycle paused, all cells off
+ *   - `success`  → cycle stopped, all cells forced on
+ *   - `failed`   → cycle frozen; ON cells → destructive, OFF cells
+ *                  stay as cancelled-muted
+ *   - `cancelled`→ cycle frozen; ON cells fade to muted
+ *
+ * Colour + bloom + accent overlays are orthogonal.
+ *
+ * @module @mks2508/mks-ui/react/primitives/DotMatrix
+ */
+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. */
+export type DotMatrixStatus = 'idle' | 'running' | 'success' | 'failed' | 'cancelled';
+/**
+ * Colour palette. `foreground` / `primary` / `destructive` / `warning`
+ * map to theme tokens (mks-ui RULE 0). The others are opinionated
+ * neon/industrial hues ported from 3-pixel-grid in OKLCH for contrast
+ * stability across themes.
+ */
+export type DotMatrixColor = 'foreground' | 'primary' | 'destructive' | 'warning' | 'cyan' | 'magenta' | 'yellow' | 'green' | 'orange' | 'blue' | 'red' | 'purple' | 'teal' | 'pink' | 'lime' | 'white';
+/** Where accent highlights live. */
+export type DotMatrixAccentRow = 'top' | 'bottom' | 'both';
+/** Slots consumers can override with className overrides. */
+export type DotMatrixSlot = 'root' | 'cell';
+/** Visual variant. `glow` adds a soft box-shadow on ON cells. */
+export type DotMatrixVariant = 'solid' | 'glow';
+/**
+ * @deprecated Superseded by the progressive-fill model. Kept as an empty
+ * alias so older call sites compile; the prop is no longer read.
+ */
+export type DotMatrixSweepStyle = 'stepped' | 'wave' | 'trail' | 'pulse';
+export interface IDotMatrixProps {
+    /** Rows. Default: 6. */
+    rows?: number;
+    /** Cols. Default: 18. */
+    cols?: number;
+    /** Pattern name that determines per-cell delay distribution. */
+    pattern?: DotMatrixPattern;
+    /** Milliseconds per cell during the fill sweep. Default: 120. */
+    patternStep?: number;
+    /**
+     * Steps the grid stays fully lit after the fill completes, before
+     * the reset. Larger values give a longer "fully loaded" pause.
+     * Default: 6.
+     */
+    holdSteps?: number;
+    /**
+     * Empty steps between the reset and the next fill (silence period).
+     * Default: 4.
+     */
+    restSteps?: number;
+    /**
+     * How sharp the transition is when a cell's threshold is crossed.
+     * Higher = crisper snap. 50 is nearly-stepped with a tiny
+     * anti-aliased edge; 5-10 gives a warm fade-in that overlaps across
+     * neighbouring cells. Default: 50.
+     */
+    edgeSharpness?: number;
+    /** @deprecated Replaced by the progressive-fill model. No longer read. */
+    sweepStyle?: DotMatrixSweepStyle;
+    /** @deprecated Replaced by the progressive-fill model. No longer read. */
+    patternHold?: number;
+    /**
+     * External progress in 0..1. When provided, freezes the internal
+     * fill animation and drives `--dm-phase` directly from this value
+     * — cells light up exactly up to the threshold. Useful for real
+     * progress indicators (file transfers, loading bars) where the
+     * matrix should reflect a known percentage rather than cycling.
+     */
+    progress?: number;
+    /** Lifecycle status. Default: `running`. */
+    status?: DotMatrixStatus;
+    /** Palette colour. Default: `foreground`. */
+    color?: DotMatrixColor;
+    /**
+     * Enable the bloom SVG filter. `true` uses the default intensity (4),
+     * a number sets the blur radius.
+     */
+    bloom?: boolean | number;
+    /** Visual variant. Default: `solid`. */
+    variant?: DotMatrixVariant;
+    /** Number of accent cells highlighted (e.g. "3 new commits"). Default: 0. */
+    accentCount?: number;
+    /** Where accent cells sit. Default: `top`. */
+    accentRow?: DotMatrixAccentRow;
+    /** Explicit accent positions — overrides `accentCount` / `accentRow`. */
+    accentPositions?: ReadonlyArray<readonly [row: number, col: number]>;
+    /** Per-slot className overrides. */
+    slots?: SlotOverrides<DotMatrixSlot>;
+    /** Extra className for the root grid container. */
+    className?: string;
+    /** aria-label for the decorative grid. */
+    'aria-label'?: string;
+}
+//# sourceMappingURL=DotMatrix.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DotMatrix.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/DotMatrix/DotMatrix.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,gEAAgE;AAChE,MAAM,MAAM,eAAe,GACxB,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,CAAC;AAEf;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GACvB,YAAY,GACZ,SAAS,GACT,aAAa,GACb,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,CAAC;AAEX,oCAAoC;AACpC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,iEAAiE;AACjE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEzE,MAAM,WAAW,eAAe;IAC/B,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gEAAgE;IAChE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB,wCAAwC;IACxC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,yEAAyE;IACzE,eAAe,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,oCAAoC;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/react-ui/primitives/DotMatrix/dot-matrix-B8DHjPGb.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;
+	}
+}
+

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

@@ -0,0 +1,7 @@
+import './dot-matrix.css';
+import type { IDotMatrixProps } from './DotMatrix.types';
+export * from './DotMatrix.types';
+export { DOT_MATRIX_PATTERNS, buildDelays } from './patterns';
+export type { DotMatrixPattern } from './patterns';
+export declare function DotMatrix({ rows, cols, pattern, patternStep, holdSteps, restSteps, edgeSharpness, progress, status, color, bloom, variant, accentCount, accentRow, accentPositions, slots, className, 'aria-label': ariaLabel, }: IDotMatrixProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/DotMatrix/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAIX,eAAe,EACf,MAAM,mBAAmB,CAAC;AAE3B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA6GnD,wBAAgB,SAAS,CAAC,EACzB,IAAQ,EACR,IAAS,EACT,OAAiB,EACjB,WAAiB,EACjB,SAAa,EACb,SAAa,EACb,aAAkB,EAClB,QAAQ,EACR,MAAkB,EAClB,KAAoB,EACpB,KAAY,EACZ,OAAgB,EAChB,WAAe,EACf,SAAiB,EACjB,eAAe,EACf,KAAK,EACL,SAAS,EACT,YAAY,EAAE,SAAS,GACvB,EAAE,eAAe,2CAuJjB"}