@hackcove/ui 0.2.0 → 0.2.1

package/README.md

@@ -40,7 +40,7 @@ export const Example = () => (
 - Typography roles (each pins size + weight, takes a `color` and an `as`): `Display`, `Lead`,
   `PageHeading`, `SectionHeading`, `SubsectionHeading`, `ModalHeading`, `Subtitle`, `Overline`,
   `Body`, `BodyStrong`, `Caption`.
-- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
+- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, the last is the current page and gets `aria-current="page"`, and each crumb truncates). `crumbLinkClass` (the classes of a crumb that links, for a router's own `<Link>`). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
 
 ## Palette
 

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from "react";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export declare const crumbLinkClass: string;
+/** `org / project / build / snapshot`: each crumb truncates, and the last is the current page. */
+export declare function Breadcrumbs({ crumbs, className, }: {
+    crumbs: ReactNode[];
+    className?: string;
+}): ReactElement;

package/dist/Breadcrumbs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export const crumbLinkClass = cx("rounded text-slate-500 hover:underline", focusRing);
+/** `org / project / build / snapshot`: each crumb truncates, and the last is the current page. */
+export function Breadcrumbs({ crumbs, className, }) {
+    const last = crumbs.length - 1;
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cx("min-w-0", className), children: _jsx("ol", { className: "flex min-w-0 items-center gap-2 text-sm", children: crumbs.map((crumb, index) => (_jsxs("li", { "aria-current": index === last ? "page" : undefined, className: "flex min-w-0 items-center gap-2", children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: "/" })), _jsx("span", { className: cx("min-w-0 truncate", index === last ? "font-medium text-slate-900" : "text-slate-500"), children: crumb })] }, index))) }) }));
+}

package/dist/Button.d.ts

@@ -2,7 +2,19 @@ import type { ComponentPropsWithoutRef, ReactElement } from "react";
 export type ButtonVariant = "primary" | "outline" | "ghost";
 /** The classes of a Button, for a router's own <Link> that should look like one. */
 export declare function buttonClass(variant?: ButtonVariant): string;
-/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
-export declare function Button({ variant, className, ...rest }: {
+type ButtonProps = {
     variant?: ButtonVariant;
-} & ComponentPropsWithoutRef<"button">): ReactElement;
+    /** Why the button cannot be pressed: disables it, sets it as the `title`, and greys it flat. */
+    disabledReason?: string | undefined;
+    /** The work is in flight: disabled, `aria-busy`, keeps its colour. Wins over `disabledReason`. */
+    busy?: boolean | undefined;
+    /** The label while `busy`, in place of the children. */
+    busyLabel?: string | undefined;
+} & ComponentPropsWithoutRef<"button">;
+/**
+ * A button in the primary, outline or ghost style. Defaults to `type="button"`. `disabledReason`
+ * and `busy` are the two disabled states that say more than a plain `disabled`, which keeps its
+ * half-opacity look.
+ */
+export declare function Button({ variant, disabledReason, busy, busyLabel, className, children, title, disabled, ...rest }: ButtonProps): ReactElement;
+export {};

package/dist/Button.js

@@ -1,16 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx, focusRing } from "./cx.js";
-const BASE = `inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+const SHAPE = "inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition";
+// A plain `disabled` washes out and ignores the pointer. Blocked and busy buttons are disabled too,
+// but they keep pointer events (the title shows, the cursor says why) and do not take this.
+const DISABLED_PLAIN = "disabled:pointer-events-none disabled:opacity-50";
 const VARIANT = {
-    primary: "border-violet-600 bg-violet-600 text-violet-50 hover:bg-violet-700",
-    outline: "border-violet-600 text-violet-600 hover:bg-violet-50",
-    ghost: "border-transparent text-slate-600 hover:bg-slate-100",
+    primary: {
+        color: "border-violet-600 bg-violet-600 text-violet-50",
+        hover: "hover:bg-violet-700",
+    },
+    outline: { color: "border-violet-600 text-violet-600", hover: "hover:bg-violet-50" },
+    ghost: { color: "border-transparent text-slate-600", hover: "hover:bg-slate-100" },
 };
+// Blocked replaces the variant's colour and hover rather than overriding them, so no `!` is needed.
+const BLOCKED = "cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400";
+const BUSY = "cursor-progress opacity-85";
 /** The classes of a Button, for a router's own <Link> that should look like one. */
 export function buttonClass(variant = "primary") {
-    return cx(BASE, VARIANT[variant]);
+    return cx(SHAPE, DISABLED_PLAIN, focusRing, VARIANT[variant].color, VARIANT[variant].hover);
 }
-/** A button in the primary, outline or ghost style. Defaults to `type="button"`. */
-export function Button({ variant = "primary", className, ...rest }) {
-    return _jsx("button", { type: "button", className: cx(buttonClass(variant), className), ...rest });
+/** The classes of a Button in a given state: blocked swaps the colour out, busy keeps it. */
+function stateClass(variant, blocked, busy) {
+    const { color } = VARIANT[variant];
+    if (blocked)
+        return cx(SHAPE, focusRing, BLOCKED);
+    if (busy)
+        return cx(SHAPE, focusRing, color, BUSY);
+    return buttonClass(variant);
+}
+/**
+ * A button in the primary, outline or ghost style. Defaults to `type="button"`. `disabledReason`
+ * and `busy` are the two disabled states that say more than a plain `disabled`, which keeps its
+ * half-opacity look.
+ */
+export function Button({ variant = "primary", disabledReason, busy = false, busyLabel, className, children, title, disabled, ...rest }) {
+    const blocked = disabledReason !== undefined && !busy;
+    return (_jsx("button", { type: "button", className: cx(stateClass(variant, blocked, busy), className), disabled: disabled || busy || blocked, "aria-busy": busy || undefined, title: blocked ? disabledReason : title, ...rest, children: busy && busyLabel ? busyLabel : children }));
 }

package/dist/CopyButton.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithoutRef, type ReactElement } from "react";
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export declare function CopyButton({ text, label, copiedLabel, onClick, className, ...rest }: {
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">): ReactElement;

package/dist/CopyButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx, focusRing } from "./cx.js";
+const BASE = `shrink-0 rounded px-1.5 py-0.5 font-sans text-xs text-slate-400 hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export function CopyButton({ text, label = "copy", copiedLabel = "copied", onClick, className, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", ...rest, className: cx(BASE, className), onClick: (event) => {
+            onClick?.(event);
+            // The rejection is swallowed on purpose: a denied write is not an error the page can act on.
+            navigator.clipboard?.writeText(text).then(() => setCopied(true), () => { });
+        }, children: copied ? copiedLabel : label }));
+}

package/dist/CopyLine.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `className` and every other div prop go on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export declare function CopyLine({ text, className, ...rest }: {
+    text: string;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">): ReactElement;

package/dist/CopyLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./CopyButton.js";
+import { cx } from "./cx.js";
+const BOX = "flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-2.5 py-2 font-mono text-[12.5px] text-slate-900";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `className` and every other div prop go on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export function CopyLine({ text, className, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx(BOX, className), children: [_jsx("code", { className: "min-w-0 break-words", children: text }), _jsx(CopyButton, { text: text })] }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode } from "react";
+declare const SIZE: {
+    readonly sm: "w-80";
+    readonly md: "w-110";
+};
+export type DialogProps = {
+    /** The dialog's accessible name, shown as its heading. */
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Actions under the body, right-aligned. A submit button here can reach a form in the body with its `form` attribute. */
+    footer?: ReactNode;
+    /** `sm` is a list; `md` (the default) holds a form. */
+    size?: keyof typeof SIZE;
+    /** Called when the dialog closes: Esc, a click on the backdrop, or a `<form method="dialog">` submit. */
+    onClose: () => void;
+    className?: string;
+};
+/**
+ * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
+ * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ */
+export declare function Dialog({ title, description, children, footer, size, onClose, className, }: DialogProps): ReactElement;
+export {};

package/dist/Dialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { Subtitle, ModalHeading } from "./typography.js";
+const PANEL = "mx-auto mt-28 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-0 text-slate-900 shadow-2xl backdrop:bg-slate-900/35";
+const SIZE = { sm: "w-80", md: "w-110" };
+/**
+ * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
+ * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ */
+export function Dialog({ title, description, children, footer, size = "md", onClose, className, }) {
+    const dialog = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        dialog.current?.showModal();
+    }, []);
+    return (_jsx("dialog", { ref: dialog, "aria-labelledby": titleId, onClose: onClose, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size], className), children: _jsxs("div", { className: "p-5.5", children: [_jsx(ModalHeading, { id: titleId, children: title }), description && _jsx(Subtitle, { className: "mt-1", children: description }), children && _jsx("div", { className: "mt-4", children: children }), footer && _jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })] }) }));
+}

package/dist/FieldDialog.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+export type FieldDialogProps = {
+    title: string;
+    description?: string;
+    /** The visible label above the field. */
+    label: string;
+    /** The field's accessible name, when it says more than the visible label. */
+    inputLabel: string;
+    placeholder: string;
+    hint: string;
+    /** Said when the field is empty and the submit button is blocked. */
+    emptyReason: string;
+    submit: string;
+    busyLabel: string;
+    /** Gets the trimmed value. Resolving closes the dialog; a rejection shows its message in it. */
+    onSubmit: (value: string) => Promise<unknown>;
+    onClose: () => void;
+};
+/** A `Dialog` with one text field and Cancel / submit buttons. Render it only while open. */
+export declare function FieldDialog({ title, description, label, inputLabel, placeholder, hint, emptyReason, submit, busyLabel, onSubmit, onClose, }: FieldDialogProps): ReactElement;

package/dist/FieldDialog.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "./Button.js";
+import { Dialog } from "./Dialog.js";
+import { Field } from "./Field.js";
+import { Input } from "./Input.js";
+/** The field's value and its in-flight state; `send` is the form's submit handler. */
+function useFieldSubmit(onSubmit, onClose) {
+    const [value, setValue] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const empty = value.trim().length === 0;
+    const send = (event) => {
+        event.preventDefault();
+        if (empty || busy)
+            return;
+        setError(null);
+        setBusy(true);
+        void onSubmit(value.trim()).then(onClose, (e) => {
+            setBusy(false);
+            setError(e instanceof Error ? e.message : String(e));
+        });
+    };
+    return { value, setValue, busy, error, empty, send };
+}
+/** A `Dialog` with one text field and Cancel / submit buttons. Render it only while open. */
+export function FieldDialog({ title, description, label, inputLabel, placeholder, hint, emptyReason, submit, busyLabel, onSubmit, onClose, }) {
+    const id = useId();
+    const formId = `${id}-form`;
+    const { value, setValue, busy, error, empty, send } = useFieldSubmit(onSubmit, onClose);
+    return (_jsx(Dialog, { title: title, description: description, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: (event) => event.currentTarget.closest("dialog")?.close(), children: "Cancel" }), _jsx(Button, { type: "submit", form: formId, disabledReason: empty ? emptyReason : undefined, busy: busy, busyLabel: busyLabel, children: submit })] }), children: _jsx("form", { id: formId, onSubmit: send, children: _jsx(Field, { label: label, htmlFor: id, hint: empty ? emptyReason : hint, error: error ?? undefined, children: _jsx(Input, { autoFocus: true, id: id, "aria-label": inputLabel, placeholder: placeholder, value: value, onChange: (e) => setValue(e.target.value), autoComplete: "off" }) }) }) }));
+}

package/dist/Kbd.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export declare function Kbd({ children, className, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement>): ReactElement;

package/dist/Kbd.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export function Kbd({ children, className, ...rest }) {
+    return (_jsx("kbd", { className: cx("rounded border border-current/30 px-1 font-mono text-xs leading-4", className), ...rest, children: children }));
+}

package/dist/KeyValueList.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** A definition list of label/value rows: each label on the left, its value right-aligned. */
+export declare function KeyValueList({ className, children, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLDListElement>): ReactElement;
+/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+export declare function KeyValue({ label, children, className, ...rest }: {
+    label: ReactNode;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>): ReactElement;

package/dist/KeyValueList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A definition list of label/value rows: each label on the left, its value right-aligned. */
+export function KeyValueList({ className, children, ...rest }) {
+    return (_jsx("dl", { className: cx("flex flex-col gap-1.5 text-sm", className), ...rest, children: children }));
+}
+/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+export function KeyValue({ label, children, className, ...rest }) {
+    return (_jsxs("div", { className: cx("flex justify-between gap-3", className), ...rest, children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: "text-right tabular-nums", children: children })] }));
+}

package/dist/index.d.ts

@@ -1,14 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
 export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
 export { Callout, type CalloutTone } from "./Callout.js";
+export { Dialog, type DialogProps } from "./Dialog.js";
 export { IconButton } from "./IconButton.js";
 export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { CopyButton } from "./CopyButton.js";
+export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
+export { FieldDialog, type FieldDialogProps } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export { Kbd } from "./Kbd.js";
+export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";

package/dist/index.js

@@ -1,14 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
 export { Button, buttonClass } from "./Button.js";
+export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
 export { Callout } from "./Callout.js";
+export { Dialog } from "./Dialog.js";
 export { IconButton } from "./IconButton.js";
 export { NavTabs, navTabClass } from "./NavTabs.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { CopyButton } from "./CopyButton.js";
+export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
+export { FieldDialog } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export { Kbd } from "./Kbd.js";
+export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,7 @@
     "@types/bun": "1.4.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "tailwindcss": "^4.3.3",