@bug-on/md3-react 2.0.2 → 2.0.3

package/dist/ui/search/animated-placeholder.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @file animated-placeholder.tsx
+ * MD3 Expressive Search — Animated placeholder overlay.
+ *
+ * Replaces the native `::placeholder` with a GPU-accelerated `translateX`
+ * animation so the placeholder text can smoothly slide from its alignment
+ * position (center / right) to left when the search input is focused.
+ *
+ * Implementation notes:
+ * - Only `transform: translateX` is animated → no layout triggers, no paint.
+ * - Container width is measured once via `useLayoutEffect` (before paint) to
+ *   avoid a first-render flash, then kept fresh via `ResizeObserver`.
+ * - xOffset is stored in `useState` so Framer Motion picks up changes and
+ *   re-animates smoothly on container resize.
+ * - The span is never unmounted — only opacity-toggled — to preserve the
+ *   measurement ref between renders.
+ */
+import * as React from "react";
+interface AnimatedPlaceholderProps {
+    /** Placeholder text to display. */
+    text: string;
+    /** Alignment of the placeholder when idle (not focused). @default "left" */
+    textAlign: "left" | "center" | "right";
+    /**
+     * Whether the placeholder should be visible.
+     * Pass `!query` — hide when the user has typed something.
+     */
+    visible: boolean;
+    /**
+     * Whether the search is in an active/focused state.
+     * When `true`, the placeholder snaps to `left` regardless of `textAlign`.
+     */
+    focused: boolean;
+    /**
+     * The `<input>` element that this component wraps.
+     * It should have `w-full` instead of `flex-1` since this wrapper
+     * takes over the `flex-1` role in the parent flex layout.
+     */
+    children: React.ReactNode;
+    /** Extra className forwarded to the wrapper div. */
+    className?: string;
+}
+/**
+ * Wraps a search `<input>` with an animated placeholder overlay.
+ *
+ * The wrapper div occupies `flex-1` so it fits seamlessly in the
+ * horizontal flex layout used by search bar headers. The children
+ * (the `<input>`) should use `w-full` to fill the wrapper.
+ *
+ * Accessibility: `aria-label` on the `<input>` carries the placeholder
+ * text for screen readers; this span is `aria-hidden="true"`.
+ */
+export declare function AnimatedPlaceholder({ text, textAlign, visible, focused, children, className, }: AnimatedPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/search/hooks/use-search-keyboard.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @file use-search-keyboard.ts
+ * Keyboard navigation hook for the MD3 Search component.
+ *
+ * Handles:
+ * - ArrowDown / ArrowUp → navigate through suggestions (role="option")
+ * - Enter → submit search or select active suggestion
+ * - Escape → close the SearchView
+ */
+import type { UseSearchKeyboardReturn } from "../search.types";
+interface UseSearchKeyboardOptions {
+    /** Whether the SearchView is currently open. */
+    active: boolean;
+    /** Callback to close the SearchView. */
+    onActiveChange: (active: boolean) => void;
+    /** Callback for search submission. */
+    onSearch: (query: string) => void;
+    /** Current search query. */
+    query: string;
+    /** Total number of suggestion items in the listbox. */
+    itemCount: number;
+    /** Called when user selects a specific suggestion by index. */
+    onSelectSuggestion?: (index: number) => void;
+}
+/**
+ * Manages keyboard navigation for the Search component.
+ *
+ * Complies with WAI-ARIA Combobox pattern:
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ */
+export declare function useSearchKeyboard({ active, onActiveChange, onSearch, query, itemCount, onSelectSuggestion, }: UseSearchKeyboardOptions): UseSearchKeyboardReturn;
+export {};

package/dist/ui/search/hooks/use-search-view-focus.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/**
+ * Focuses `inputRef` when `active` becomes true, using a double-rAF
+ * to wait for Framer Motion's layout animation to finish painting.
+ */
+export declare function useSearchViewFocus(inputRef: React.RefObject<HTMLInputElement | null>, active: boolean): void;

package/dist/ui/search/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file index.ts
+ * MD3 Expressive Search — Public API exports.
+ *
+ * Components:
+ * - Search: Orchestrator (SearchBar + SearchView)
+ * - SearchBar: Collapsed pill state (standalone use)
+ * - SearchViewDocked: Expanded docked popup (standalone use)
+ * - SearchViewFullScreen: Expanded full-screen overlay (standalone use)
+ *
+ * Hook:
+ * - useSearchKeyboard: WAI-ARIA combobox keyboard navigation
+ *
+ * Tokens:
+ * - SearchTokens: Dimensional tokens (heights, sizes)
+ * - SEARCH_COLORS: CSS custom property color references
+ * - SEARCH_TYPOGRAPHY: Typography class strings
+ * - Animation constants
+ */
+export { useSearchKeyboard } from "./hooks/use-search-keyboard";
+export { Search } from "./search";
+export { SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SearchTokens, } from "./search.tokens";
+export type { SearchProps, SearchStyleType, SearchVariant, } from "./search.types";
+export { SearchBar } from "./search-bar";
+export { useSearch } from "./search-context";
+export { SearchViewDocked } from "./search-view-docked";
+export { SearchViewFullScreen } from "./search-view-fullscreen";

package/dist/ui/search/search-bar.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @file search-bar.tsx
+ * MD3 Expressive SearchBar — Collapsed state.
+ *
+ * Renders a pill-shaped search bar (CornerFull, h-56px).
+ * When focused/clicked → calls onActiveChange(true) to open SearchView.
+ *
+ * Option B (MD3 morphing): SearchBar is wrapped in its own AnimatePresence
+ * with mode="popLayout". When SearchView opens, SearchBar plays an exit
+ * animation (opacity → 0, scale → 0.95) before unmounting, releasing the
+ * shared layoutId so SearchView can claim it and morph from the same origin.
+ *
+ * Role: combobox (WAI-ARIA Search Combobox pattern).
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ */
+import * as React from "react";
+import type { SearchInternalProps, SearchProps } from "./search.types";
+type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
+    /** KeyDown handler from useSearchKeyboard. */
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    /** Currently highlighted suggestion index (-1 = none). */
+    activeIndex: number;
+};
+/**
+ * SearchBar — collapsed state of the MD3 Search component.
+ *
+ * Uses Framer Motion `layout` + shared `layoutId` to morph into
+ * SearchView when active. Wrapped in AnimatePresence with mode="popLayout"
+ * so it exits (fades/scales out) before SearchView claims the layoutId.
+ */
+export declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/search/search-context.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * MD3 Expressive Search Context
+ * Shared state for the Search orchestrator and its children.
+ */
+interface SearchContextValue {
+    /** Unique ID for the results listbox, used for aria-controls. */
+    listboxId: string;
+    /** Currently highlighted suggestion index. -1 = none. */
+    activeIndex: number;
+}
+/**
+ * Provider for Search component state.
+ * Internal use only within the library.
+ */
+export declare function SearchProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: SearchContextValue;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access Search state from children (e.g., search items).
+ */
+export declare function useSearch(): SearchContextValue;
+export {};

package/dist/ui/search/search-view-docked.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file search-view-docked.tsx
+ * MD3 Expressive SearchView — Docked variant.
+ *
+ * Displays as a popup dropdown below the SearchBar.
+ * Recommended for medium and large screens (tablets, desktops).
+ *
+ * Shape: CornerExtraLarge (rounded-[28px]) per SearchViewTokens.DockedContainerShape.
+ * Header height: 56dp per SearchViewTokens.DockedHeaderContainerHeight.
+ *
+ * Animation (Option B — MD3 morphing):
+ * - Shares `layoutId` with SearchBar. After SearchBar exits via its own
+ *   AnimatePresence (mode="popLayout"), this view claims the layoutId and
+ *   Framer Motion morphs the pill shape → rounded-[28px] container.
+ * - Uses mode="popLayout" so SearchBar can re-enter after this exits.
+ * - Focus: double-rAF pattern syncs focus with layout animation frame.
+ */
+import * as React from "react";
+import type { SearchInternalProps, SearchProps } from "./search.types";
+type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    activeIndex: number;
+};
+export declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/search/search-view-fullscreen.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file search-view-fullscreen.tsx
+ * MD3 Expressive SearchView — FullScreen variant.
+ *
+ * Renders a full-screen overlay via React Portal.
+ * Using Portal avoids z-index stacking context issues and ensures
+ * the overlay always covers the entire viewport correctly.
+ *
+ * Animation (Option B — MD3 morphing):
+ * - Shares `layoutId` with SearchBar. After SearchBar exits via its own
+ *   AnimatePresence (mode="popLayout"), this view claims the layoutId and
+ *   Framer Motion morphs the pill shape → full-screen rect (CornerFull → CornerNone).
+ * - mode="popLayout" on this AnimatePresence enables SearchBar to re-enter
+ *   after this view exits.
+ * - Focus: double-rAF pattern syncs focus with layout animation frame.
+ *
+ * Header height: 72dp per SearchViewTokens.FullScreenHeaderContainerHeight.
+ * ESC key closes the view (handled by useSearchKeyboard).
+ */
+import * as React from "react";
+import type { SearchInternalProps, SearchProps } from "./search.types";
+type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    activeIndex: number;
+};
+/**
+ * SearchView FullScreen — full-screen overlay via React Portal.
+ *
+ * The `layoutId` shared with SearchBar enables Framer Motion to animate
+ * the shape morphing from the pill (rounded-full) to a full-screen rect.
+ *
+ * Contained style: no divider, background preserved.
+ * Divided style: HorizontalDivider between header and results.
+ */
+export declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React.ReactPortal | null;
+export {};

package/dist/ui/search/search.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @file search.tsx
+ * MD3 Expressive Search — Orchestrator component.
+ *
+ * Composes SearchBar (collapsed) + SearchView (expanded) into a single
+ * developer-facing API. Routes to the correct SearchView variant based on props.
+ *
+ * Developer usage:
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const [active, setActive] = useState(false);
+ *
+ * <Search
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearch={(q) => doSearch(q)}
+ *   active={active}
+ *   onActiveChange={setActive}
+ *   variant="docked"
+ *   styleType="contained"
+ * >
+ *   {results.map((r) => (
+ *     <div key={r.id} id={`${YOUR_LISTBOX_ID}-option-0`} role="option">
+ *       {r.label}
+ *     </div>
+ *   ))}
+ * </Search>
+ * ```
+ */
+import type { SearchProps } from "./search.types";
+import { useSearch } from "./search-context";
+/**
+ * MD3 Expressive Search — Orchestrator component.
+ *
+ * Renders a SearchBar (collapsed pill) and the appropriate SearchView
+ * (docked popup or fullscreen overlay) based on `variant`.
+ *
+ * The component is fully controlled:
+ * - `active` / `onActiveChange` manage open/close state.
+ * - `query` / `onQueryChange` manage input value.
+ *
+ * Shared `searchId` (React.useId) links SearchBar and SearchView via
+ * Framer Motion `layoutId` for seamless animated transitions.
+ */
+declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, leadingIcon, trailingIcon, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+/** MD3 Expressive Search component with `Search.useSearch` context accessor. */
+export declare const Search: typeof SearchComponent & {
+    useSearch: typeof useSearch;
+};
+export {};

package/dist/ui/search/search.tokens.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @file search.tokens.ts
+ * MD3 Expressive Search — Design tokens ported from:
+ *   - SearchBarTokens.kt (v0_210)
+ *   - SearchViewTokens.kt (v0_210)
+ *
+ * All dimensional values are in px (1dp = 1px on web).
+ * Colors reference CSS custom properties — do NOT hardcode hex.
+ * @see docs/m3/search/SearchBarTokens.kt
+ * @see docs/m3/search/SearchViewTokens.kt
+ */
+/**
+ * Height and shape tokens for Search variants.
+ * Maps directly from MD3 Kotlin token files.
+ */
+export declare const SearchTokens: {
+    readonly heights: {
+        /** SearchBarTokens.ContainerHeight = 56dp */
+        readonly bar: 56;
+        /** SearchViewTokens.DockedHeaderContainerHeight = 56dp */
+        readonly dockedHeader: 56;
+        /** SearchViewTokens.FullScreenHeaderContainerHeight = 72dp */
+        readonly fullScreenHeader: 72;
+    };
+    /** SearchBarTokens.AvatarSize = 30dp */
+    readonly avatarSize: 30;
+    /** Standard icon size for leading/trailing icons. */
+    readonly iconSize: 20;
+    /** Touch target for interactive icons per MD3 a11y spec. */
+    readonly iconTouchTarget: 48;
+    /** Gap between SearchBar and results list when hasGap=true. */
+    readonly dropdownGap: 2;
+};
+/**
+ * CSS custom property references for Search colors.
+ * Maps to --md-sys-color-* tokens in the MD3 theme system.
+ *
+ * SearchBarTokens.kt:
+ * - ContainerColor → SurfaceContainerHigh
+ * - LeadingIconColor → OnSurface
+ * - TrailingIconColor → OnSurfaceVariant
+ * - InputTextColor → OnSurface
+ * - SupportingTextColor → OnSurfaceVariant (placeholder)
+ *
+ * SearchViewTokens.kt:
+ * - ContainerColor → SurfaceContainerHigh
+ * - DividerColor → Outline
+ */
+export declare const SEARCH_COLORS: {
+    /** SearchBarTokens.ContainerColor → surface-container-high */
+    readonly container: "var(--md-sys-color-surface-container-high)";
+    /** SearchBarTokens.LeadingIconColor → on-surface */
+    readonly leadingIcon: "var(--md-sys-color-on-surface)";
+    /** SearchBarTokens.TrailingIconColor → on-surface-variant */
+    readonly trailingIcon: "var(--md-sys-color-on-surface-variant)";
+    /** SearchBarTokens.InputTextColor → on-surface */
+    readonly inputText: "var(--md-sys-color-on-surface)";
+    /** SearchBarTokens.SupportingTextColor → on-surface-variant (placeholder) */
+    readonly supportingText: "var(--md-sys-color-on-surface-variant)";
+    /** SearchViewTokens.DividerColor → outline */
+    readonly divider: "var(--md-sys-color-outline)";
+    /** Focus indicator → secondary */
+    readonly focusIndicator: "var(--md-sys-color-secondary)";
+};
+/**
+ * SearchBarTokens.InputTextFont = BodyLarge (16sp / 24sp line-height).
+ * SearchBarTokens.SupportingTextFont = BodyLarge.
+ */
+export declare const SEARCH_TYPOGRAPHY: {
+    /** BodyLarge — used for input text and placeholder. */
+    readonly bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]";
+};
+/**
+ * Spring animation for SearchBar width expand (inactive → active).
+ * Matches MD3 FastSpatial motion scheme.
+ */
+export declare const SEARCH_BAR_EXPAND_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Spring animation for Docked SearchView dropdown reveal (slide + fade).
+ * Offset Y: -8px on enter, opacity 0→1.
+ */
+export declare const SEARCH_DOCKED_REVEAL_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Spring animation for FullScreen SearchView shape morphing.
+ * Lower stiffness + mass gives a smoother pill→fullscreen morph.
+ */
+export declare const SEARCH_FULLSCREEN_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Exit transition for SearchBar when mode="popLayout" is used.
+ * Fast fade-out so SearchView can claim the layoutId quickly.
+ */
+export declare const SEARCH_BAR_EXIT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};

package/dist/ui/search/search.types.d.ts

@@ -0,0 +1,131 @@
+/**
+ * @file search.types.ts
+ * MD3 Expressive Search — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/search/overview
+ * Reference: docs/m3/search/SearchBar.kt (MD3 Expressive)
+ */
+import type * as React from "react";
+/**
+ * Display variant for the expanded SearchView.
+ *
+ * - `docked`: Popup dropdown below the SearchBar. For medium/large screens.
+ * - `fullscreen`: Full-screen dialog overlay. For compact/mobile screens.
+ */
+export type SearchVariant = "docked" | "fullscreen";
+/**
+ * Visual style type for the SearchView.
+ *
+ * - `contained`: No divider between the input area and results.
+ *   The container background is preserved continuously (recommended).
+ * - `divided`: A HorizontalDivider separates the input area from results.
+ */
+export type SearchStyleType = "contained" | "divided";
+/**
+ * Internal props shared between SearchBar and SearchView sub-components.
+ * Not part of the public API.
+ * @internal
+ */
+export interface SearchInternalProps {
+    /** Unique ID generated by useId(), used as Framer Motion layoutId. */
+    searchId: string;
+    /** Unique ID for the results listbox, used for aria-controls. */
+    listboxId: string;
+}
+/**
+ * Props for the `<Search>` component (orchestrator).
+ *
+ * @example
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const [active, setActive] = useState(false);
+ *
+ * <Search
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearch={(q) => console.log("search:", q)}
+ *   active={active}
+ *   onActiveChange={setActive}
+ *   variant="docked"
+ *   styleType="contained"
+ * >
+ *   <SearchResultsList />
+ * </Search>
+ * ```
+ */
+export interface SearchProps {
+    /** Current search query value (controlled). */
+    query: string;
+    /** Called when user types in the search input. */
+    onQueryChange: (query: string) => void;
+    /** Called when user submits search (Enter key or suggestion click). */
+    onSearch: (query: string) => void;
+    /** Whether the SearchView is expanded/open (controlled). */
+    active: boolean;
+    /** Called when the Search open/close state should change. */
+    onActiveChange: (active: boolean) => void;
+    /**
+     * Display variant for the expanded state.
+     * @default "docked"
+     */
+    variant?: SearchVariant;
+    /**
+     * Visual style for the SearchView container.
+     * @default "contained"
+     */
+    styleType?: SearchStyleType;
+    /**
+     * Whether to add a 2dp gap between the input header and the results list.
+     * Only applies when `variant="docked"`.
+     * @default false
+     */
+    hasGap?: boolean;
+    /**
+     * Icon rendered at the leading edge of the search input.
+     * Defaults to a built-in search icon.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Icon or action rendered at the trailing edge of the search input.
+     * Common examples: mic, camera, QR code.
+     */
+    trailingIcon?: React.ReactNode;
+    /** Placeholder text shown when the input is empty. @default "Search" */
+    placeholder?: string;
+    /**
+     * Align the placeholder text to left, center, or right.
+     * Typed text will always remain left-aligned.
+     * @default "left"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * Search results or suggestions rendered inside the SearchView.
+     * Use `role="option"` on each item for accessibility.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override the auto-generated input element ID.
+     * Auto-generated via React.useId() if not provided.
+     */
+    id?: string;
+    /**
+     * Accessible label for the search landmark.
+     * @default "Search"
+     */
+    "aria-label"?: string;
+    /** Additional CSS classes for the SearchBar root element. */
+    className?: string;
+    /** Additional CSS classes for the SearchView container. */
+    viewClassName?: string;
+}
+/**
+ * Return type for `useSearchKeyboard`.
+ * @internal
+ */
+export interface UseSearchKeyboardReturn {
+    /** Currently highlighted suggestion index. -1 = none. */
+    activeIndex: number;
+    /** KeyDown handler — attach to the search input. */
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    /** Reset activeIndex (e.g., when query changes). */
+    resetActiveIndex: () => void;
+}

package/dist/ui/search/trailing-action.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+interface TrailingActionProps {
+    query: string;
+    trailingIcon?: React.ReactNode;
+    onClear: () => void;
+}
+/** Clear button when query is non-empty, otherwise the trailing icon slot. */
+export declare function TrailingAction({ query, trailingIcon, onClear, }: TrailingActionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/md3-react",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug Ổn",
   "license": "MIT",
@@ -68,6 +68,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "4.1.4",
     "jsdom": "^29.0.0",
     "tsup": "^8.4.0",
     "typescript": "5.8.3",