@abuzareal/contour-ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.1.1
+
+- Lock background scrolling while a Dialog or drawer is open. Nested dialogs retain the lock until the last closes; closing or unmounting restores existing document styles and scrollbar space.
+
+- Support React and React DOM 19 alongside 18.3.1, verified with strict clean-consumer installs, declaration checks, production builds, and runtime tests on 18.3.1, 19.0.0, and 19.3.0.
+- Preserve flip-card inert faces in both React majors, accept nullable refs in public hooks, and initialize the clipboard timer ref explicitly for React 19 types.
+- Let text fields, text areas, and select fields accept caller IDs and retain caller descriptions; keep controlled text counters synchronized with programmatic values.
+- Prevent theme buttons from submitting forms, and show final count-up values when IntersectionObserver is unavailable.
+- Document direct package imports and retain a repeatable compatibility check before publication.
+
 ## 0.1.0
 
 - Extract reusable React components, theme tokens, styling, and optional 3D/scroll entries from the standalone design-system app.

package/README.md

@@ -4,12 +4,14 @@ An independent React component library for editorial interfaces: paper and ink s
 
 The npm package is public under MIT; the development repository is private. Public consumers can inspect the distributed JavaScript, declarations, and CSS, but the repository and its issue tracker are accessible only to invited collaborators.
 
-**Status:** initial `0.1.0` release. React 18.3 is supported; React 19 and React Server Component execution are not advertised as tested. Interactive components belong in a client boundary in frameworks such as Next.js. The root module can be imported on the server, and basic components can render there.
+**Status:** `0.1.1` compatibility update. React 18.3.1 and React 19 are supported; the packed-package matrix checks React 18.3.1, 19.0.0, and 19.3.0. React Server Component execution is not advertised as tested. Interactive components belong in a client boundary in frameworks such as Next.js. The root module can be imported on the server, and basic components can render there.
 
 ## Install
 
 ```sh
-npm install @abuzareal/contour-ui react@18 react-dom@18
+npm install @abuzareal/contour-ui
+# Your application must supply matching React and React DOM versions:
+# React 18.3.1 or React 19.
 ```
 
 ```tsx
@@ -38,6 +40,28 @@ export function App() {
 
 For an app with its own reset, include equivalent native button/input defaults, border-box sizing, focus outlines, and the `[hidden]` rule. Styles use globally named component classes and `:root` theme tokens; they are not Shadow DOM isolated. Avoid redefining generic classes such as `.card` or `.button` elsewhere.
 
+## Direct imports: no local component files required
+
+Use named imports directly in any component file:
+
+```tsx
+import { Button } from "@abuzareal/contour-ui";
+
+export function SaveAction() {
+  return (
+    <Button variant="accent" onClick={() => console.log("Saved")}>
+      Save
+    </Button>
+  );
+}
+```
+
+Import `styles.css` once at the application entry. `reset.css` and `fonts.css` are optional. No provider is needed for `Button` or ordinary controls; only toast consumers require `ToastProvider`.
+
+The original Portfolio and Design-System applications retained thin compatibility re-exports to preserve their pre-package imports. Those files are an application migration choice, not a requirement of this library. Create a wrapper only when it represents your own reusable application behavior.
+
+Text fields accept explicit `id` values and preserve your `aria-describedby` references alongside their own hint or error. Native props follow the documented component types; not every component currently accepts `className`, DOM refs, or arbitrary native attributes. Do not assume router `asChild` composition or form-library ref integration is available in this release.
+
 ## Theme and motion setup
 
 All theme toggles read the same document state. Set `data-theme="light"` or `"dark"` on `<html>`. `useTheme(animate)` returns `{ theme, toggle }`; call `toggle(buttonElement)` for a user action. The existing `aa-theme` local-storage key is preserved for compatibility with the original portfolio. Preference storage is origin-local, not shared across different website domains.
@@ -83,6 +107,8 @@ The package exports named components and props types. TypeScript declarations ar
 - Motion and signature: `BrandMark`, `CountUp`, `DepthButton`, `FlipCard`, `Magnetic`, `Marquee`, `Reveal`, `RevealHeading`, `ScrollProgress`, `TiltCard`, `GitHubIcon`, `LinkedInIcon`.
 - Overlays: `Dialog`, `Popover`, `Tooltip`, `SceneBoundary`.
 
+`Dialog` locks document scrolling while open, including drawer placements. Its content remains scrollable on short screens. Nested dialogs share the lock; closing or unmounting the last restores the document's previous styles. This behavior is included in version 0.1.1.
+
 Use visible labels for fields, concise action labels for buttons, accessible labels for icon-only controls, and text alongside status colors. Sortable tables expect scalar string/number row values. Pagination expects a positive integer page count and a page in that range. Flip cards switch through their button; the hidden side is inert.
 
 Global colors, fonts, radii, duration, and spacing variables are in `tokens.css`. Override semantic tokens rather than copying components into your app. `styles.css` includes tokens and component styles; `fonts.css` and `reset.css` are separately opt-in. Do not import catalogue or portfolio CSS into other apps.
@@ -92,7 +118,7 @@ Global colors, fonts, radii, duration, and spacing variables are in `tokens.css`
 This repository contains only the library. The catalogue and portfolio remain separate repositories and consume the same published npm version. During first-release validation, a packed archive can be installed locally; replace the archive dependency with the registry version before committing consumer manifests.
 
 ```sh
-npm install @abuzareal/contour-ui@0.1.0 --save-exact
+npm install @abuzareal/contour-ui@0.1.1 --save-exact
 ```
 
 Commit both `package.json` and `package-lock.json`. Dependabot proposes version updates in each consumer repository. Updates reach production after that project's checks, merge, rebuild, and deployment. A registry release does not change deployed applications automatically.
@@ -101,7 +127,9 @@ Commit both `package.json` and `package-lock.json`. Dependabot proposes version
 
 ```sh
 npm ci --ignore-scripts
+npx playwright install chromium # first browser-test run
 npm run validate
+npm run test:compat # packed consumers in both React majors and source compilation with React 19 types
 npm audit
 npm pack --dry-run
 ```

package/RELEASING.md

@@ -3,8 +3,8 @@
 ## Initial release
 
 1. Verify `npm whoami` is `abuzareal`; the package is `@abuzareal/contour-ui` and public under MIT.
-2. Run `npm ci --ignore-scripts`, `npm run validate`, and `npm audit`. Review every advisory; do not release with unexplained audit findings.
-3. Test the actual packed archive in a clean React consumer without optional Three.js or Lenis, and in the catalogue and portfolio with their full browser suites.
+2. Run `npm ci --ignore-scripts`, install Chromium with `npx playwright install chromium` on a new machine, then run `npm run validate`, `npm run test:compat`, and `npm audit`. Review every advisory; do not release with unexplained audit findings.
+3. Test the actual packed archive in clean React 18 and React 19 consumers without optional Three.js or Lenis, and in the catalogue and portfolio with their full browser suites.
 4. Check `npm pack --dry-run --json` and licenses. No private data, credentials, unrelated assets, maps, or app content may enter the archive.
 5. Push the reviewed source and release commit to the independent GitHub repository. The owner currently keeps this repository private; the npm distribution remains public under MIT.
 6. Set `private` to `false` only for an approved, validated release. Publish from the verified owner account: `npm publish --access public`. Complete npm's required authentication/2FA personally.

package/dist/components/ui/CountUp.js

@@ -10,7 +10,9 @@ export default function CountUp({ to, duration = 1400, digits = 0, suffix = "",
         const element = ref.current;
         if (!element)
             return;
-        if (motionDisabledFor(element) || duration <= 0) {
+        if (motionDisabledFor(element) ||
+            duration <= 0 ||
+            typeof IntersectionObserver === "undefined") {
             setCurrent(to);
             return;
         }

package/dist/components/ui/Dialog.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
 import { X } from "lucide-react";
 import { cx } from "../../lib/classNames.js";
+import { lockDocumentScroll } from "../../lib/lockDocumentScroll.js";
 export default function Dialog({ open, onClose, title, children, description, footer, placement = "center", }) {
     const ref = useRef(null);
     const titleId = useId();
@@ -15,6 +16,14 @@ export default function Dialog({ open, onClose, title, children, description, fo
             dialog.showModal();
         if (!open && dialog.open)
             dialog.close();
+        if (!open)
+            return;
+        const release = lockDocumentScroll(dialog.ownerDocument);
+        dialog.addEventListener("close", release);
+        return () => {
+            dialog.removeEventListener("close", release);
+            release();
+        };
     }, [open]);
     return (_jsx("dialog", { ref: ref, className: cx("dialog", `dialog-${placement}`), "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : undefined, onCancel: (event) => {
             event.preventDefault();

package/dist/components/ui/FlipCard.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Two-sided card that flips in 3D; a button toggles it so the back is reachable without hover. */
-import { useState } from "react";
+import { useState, version } from "react";
 import { RefreshCw } from "lucide-react";
 import { cx } from "../../lib/classNames.js";
+// React 18 treats inert as an unknown string attribute; React 19 treats it as boolean.
+const inertAttributes = {
+    inert: Number.parseInt(version, 10) >= 19 ? true : "",
+};
 export default function FlipCard({ front, back, label }) {
     const [flipped, setFlipped] = useState(false);
-    return (_jsxs("div", { className: "flip-stage", children: [_jsxs("div", { className: cx("flip-card", flipped && "is-flipped"), children: [_jsx("div", { className: "flip-face flip-front", "aria-hidden": flipped, ...(flipped ? { inert: "" } : {}), children: front }), _jsx("div", { className: "flip-face flip-back", "aria-hidden": !flipped, ...(!flipped ? { inert: "" } : {}), children: back })] }), _jsxs("button", { type: "button", className: "flip-toggle mono", "aria-pressed": flipped, onClick: () => setFlipped((value) => !value), children: [_jsx(RefreshCw, { size: 13, "aria-hidden": "true" }), label] })] }));
+    return (_jsxs("div", { className: "flip-stage", children: [_jsxs("div", { className: cx("flip-card", flipped && "is-flipped"), children: [_jsx("div", { className: "flip-face flip-front", "aria-hidden": flipped, ...(flipped ? inertAttributes : {}), children: front }), _jsx("div", { className: "flip-face flip-back", "aria-hidden": !flipped, ...(!flipped ? inertAttributes : {}), children: back })] }), _jsxs("button", { type: "button", className: "flip-toggle mono", "aria-pressed": flipped, onClick: () => setFlipped((value) => !value), children: [_jsx(RefreshCw, { size: 13, "aria-hidden": "true" }), label] })] }));
 }

package/dist/components/ui/SelectField.d.ts

@@ -1,6 +1,6 @@
 /** Native select styled as an underlined field with a chevron. */
 import { type SelectHTMLAttributes } from "react";
-export type SelectFieldProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
+export type SelectFieldProps = SelectHTMLAttributes<HTMLSelectElement> & {
     label: string;
     options: {
         value: string;
@@ -10,4 +10,4 @@ export type SelectFieldProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "id
     error?: string;
     placeholder?: string;
 };
-export default function SelectField({ label, options, hint, error, placeholder, ...rest }: SelectFieldProps): import("react").JSX.Element;
+export default function SelectField({ id: providedId, "aria-describedby": describedBy, label, options, hint, error, placeholder, ...rest }: SelectFieldProps): import("react").JSX.Element;

package/dist/components/ui/SelectField.js

@@ -4,7 +4,10 @@ import { useId } from "react";
 import { ChevronDown } from "lucide-react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function SelectField({ label, options, hint, error, placeholder, ...rest }) {
-    const id = useId();
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, children: _jsxs("div", { className: "field-control field-select", children: [_jsxs("select", { ...rest, id: id, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(ChevronDown, { className: "field-chevron", size: 16, "aria-hidden": "true" })] }) }));
+export default function SelectField({ id: providedId, "aria-describedby": describedBy, label, options, hint, error, placeholder, ...rest }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, children: _jsxs("div", { className: "field-control field-select", children: [_jsxs("select", { ...rest, id: id, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+                        .filter(Boolean)
+                        .join(" ") || undefined, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(ChevronDown, { className: "field-chevron", size: 16, "aria-hidden": "true" })] }) }));
 }

package/dist/components/ui/TextArea.d.ts

@@ -1,10 +1,10 @@
 /** Multi-line text input with optional auto-resize and character counter. */
 import { type TextareaHTMLAttributes } from "react";
-export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "id"> & {
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     label: string;
     hint?: string;
     error?: string;
     /** Grows with its content instead of scrolling. */
     autoResize?: boolean;
 };
-export default function TextArea({ label, hint, error, autoResize, maxLength, onChange, rows, ...rest }: TextAreaProps): import("react").JSX.Element;
+export default function TextArea({ id: providedId, "aria-describedby": describedBy, label, hint, error, autoResize, maxLength, onChange, rows, ...rest }: TextAreaProps): import("react").JSX.Element;

package/dist/components/ui/TextArea.js

@@ -3,8 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState, } from "react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function TextArea({ label, hint, error, autoResize = false, maxLength, onChange, rows = 3, ...rest }) {
-    const id = useId();
+export default function TextArea({ id: providedId, "aria-describedby": describedBy, label, hint, error, autoResize = false, maxLength, onChange, rows = 3, ...rest }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
     const ref = useRef(null);
     const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
     const fitContent = () => {
@@ -15,7 +16,11 @@ export default function TextArea({ label, hint, error, autoResize = false, maxLe
         element.style.height = `${element.scrollHeight}px`;
     };
     useLayoutEffect(fitContent);
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, counter: maxLength ? `${length}/${maxLength}` : undefined, children: _jsx("div", { className: "field-control", children: _jsx("textarea", { ...rest, ref: ref, id: id, rows: rows, maxLength: maxLength, "data-auto-resize": autoResize || undefined, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), onChange: (event) => {
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, counter: maxLength
+            ? `${rest.value !== undefined ? String(rest.value).length : length}/${maxLength}`
+            : undefined, children: _jsx("div", { className: "field-control", children: _jsx("textarea", { ...rest, ref: ref, id: id, rows: rows, maxLength: maxLength, "data-auto-resize": autoResize || undefined, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+                    .filter(Boolean)
+                    .join(" ") || undefined, onChange: (event) => {
                     setLength(event.target.value.length);
                     fitContent();
                     onChange?.(event);

package/dist/components/ui/TextField.d.ts

@@ -1,6 +1,6 @@
 /** Single-line text input with underline styling, optional icon/adornment, and character counter. */
 import { type InputHTMLAttributes, type ReactNode } from "react";
-export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     label: string;
     hint?: string;
     error?: string;
@@ -9,4 +9,4 @@ export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "id"> &
     /** Content after the input, e.g. a unit or an icon button. */
     trailing?: ReactNode;
 };
-export default function TextField({ label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }: TextFieldProps): import("react").JSX.Element;
+export default function TextField({ id: providedId, "aria-describedby": describedBy, label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }: TextFieldProps): import("react").JSX.Element;

package/dist/components/ui/TextField.js

@@ -3,10 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState, } from "react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function TextField({ label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }) {
-    const id = useId();
+export default function TextField({ id: providedId, "aria-describedby": describedBy, label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
     const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, hideLabel: hideLabel, disabled: rest.disabled, counter: maxLength ? `${length}/${maxLength}` : undefined, children: _jsxs("div", { className: "field-control", children: [leadingIcon && _jsx("span", { className: "field-icon", children: leadingIcon }), _jsx("input", { ...rest, id: id, maxLength: maxLength, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), onChange: (event) => {
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, hideLabel: hideLabel, disabled: rest.disabled, counter: maxLength
+            ? `${rest.value !== undefined ? String(rest.value).length : length}/${maxLength}`
+            : undefined, children: _jsxs("div", { className: "field-control", children: [leadingIcon && _jsx("span", { className: "field-icon", children: leadingIcon }), _jsx("input", { ...rest, id: id, maxLength: maxLength, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+                        .filter(Boolean)
+                        .join(" ") || undefined, onChange: (event) => {
                         setLength(event.target.value.length);
                         onChange?.(event);
                     } }), trailing && _jsx("span", { className: "field-trailing", children: trailing })] }) }));

package/dist/components/ui/ThemeToggle.js

@@ -5,5 +5,5 @@ import useTheme from "../../hooks/useTheme.js";
 export default function ThemeToggle({ animate }) {
     const { theme, toggle } = useTheme(animate);
     const dark = theme === "dark";
-    return (_jsxs("button", { className: "theme-toggle", "aria-label": "Dark theme", "aria-pressed": dark, title: dark ? "Switch to light theme" : "Switch to dark theme", onClick: (event) => toggle(event.currentTarget), children: [_jsx(Moon, { className: "theme-icon-moon", size: 16, "aria-hidden": "true" }), _jsx(Sun, { className: "theme-icon-sun", size: 17, "aria-hidden": "true" })] }));
+    return (_jsxs("button", { type: "button", className: "theme-toggle", "aria-label": "Dark theme", "aria-pressed": dark, title: dark ? "Switch to light theme" : "Switch to dark theme", onClick: (event) => toggle(event.currentTarget), children: [_jsx(Moon, { className: "theme-icon-moon", size: 16, "aria-hidden": "true" }), _jsx(Sun, { className: "theme-icon-sun", size: 17, "aria-hidden": "true" })] }));
 }

package/dist/hooks/useClipboardCopy.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 const resetDelay = 4000;
 export default function useClipboardCopy(text) {
     const [status, setStatus] = useState("idle");
-    const resetTimer = useRef();
+    const resetTimer = useRef(undefined);
     useEffect(() => () => clearTimeout(resetTimer.current), []);
     const copy = useCallback(async () => {
         clearTimeout(resetTimer.current);

package/dist/hooks/useDismiss.d.ts

@@ -1,3 +1,3 @@
 /** Calls onDismiss on Escape or a pointer press outside the container while `active`. */
 import { type RefObject } from "react";
-export default function useDismiss(container: RefObject<HTMLElement>, active: boolean, onDismiss: (reason: "escape" | "outside") => void): void;
+export default function useDismiss(container: RefObject<HTMLElement | null>, active: boolean, onDismiss: (reason: "escape" | "outside") => void): void;

package/dist/hooks/useHeaderScroll.d.ts

@@ -1,6 +1,6 @@
 /** Derives header state from scroll position: scrolled, over a dark area, and the active section. */
 import { type RefObject } from "react";
-export default function useHeaderScroll(header: RefObject<HTMLElement>): {
+export default function useHeaderScroll(header: RefObject<HTMLElement | null>): {
     scrolled: boolean;
     overDark: boolean;
     activeId: string;

package/dist/hooks/useMobileMenu.d.ts

@@ -1,3 +1,3 @@
 /** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
 import { type RefObject } from "react";
-export default function useMobileMenu(container: RefObject<HTMLElement>, toggleButton: RefObject<HTMLButtonElement>): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
+export default function useMobileMenu(container: RefObject<HTMLElement | null>, toggleButton: RefObject<HTMLButtonElement | null>): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/hooks/useThreeStage.d.ts

@@ -24,5 +24,5 @@ type StageOptions = {
     /** Camera z for a given aspect ratio, keeping the subject framed. */
     cameraDistance: (aspect: number) => number;
 };
-export default function useThreeStage(hostRef: RefObject<HTMLDivElement>, { motionEnabled, setup, cameraDistance }: StageOptions): void;
+export default function useThreeStage(hostRef: RefObject<HTMLDivElement | null>, { motionEnabled, setup, cameraDistance }: StageOptions): void;
 export {};

package/dist/kit/overlays.css

@@ -67,6 +67,7 @@
 }
 
 .dialog {
+  overscroll-behavior: contain;
   width: min(560px, calc(100vw - 32px));
   max-width: none;
   max-height: calc(100dvh - 48px);

package/dist/lib/lockDocumentScroll.d.ts

@@ -0,0 +1 @@
+export declare function lockDocumentScroll(document: Document): () => void;

package/dist/lib/lockDocumentScroll.js

@@ -0,0 +1,43 @@
+/** Reference-counted per document so nested dialogs cannot unlock each other. */
+const locks = new WeakMap();
+export function lockDocumentScroll(document) {
+    let lock = locks.get(document);
+    if (!lock) {
+        const root = document.documentElement;
+        const properties = ["overflow", "overscroll-behavior", "scrollbar-gutter"];
+        const previous = properties.map((name) => ({
+            name,
+            value: root.style.getPropertyValue(name),
+            priority: root.style.getPropertyPriority(name),
+        }));
+        // Preserve an existing scrollbar's space; short pages should gain no gutter.
+        if (document.defaultView &&
+            document.defaultView.innerWidth > root.clientWidth)
+            root.style.setProperty("scrollbar-gutter", "stable", "important");
+        root.style.setProperty("overflow", "hidden", "important");
+        root.style.setProperty("overscroll-behavior", "none", "important");
+        lock = {
+            count: 0,
+            restore: () => {
+                for (const { name, value, priority } of previous) {
+                    if (value)
+                        root.style.setProperty(name, value, priority);
+                    else
+                        root.style.removeProperty(name);
+                }
+            },
+        };
+        locks.set(document, lock);
+    }
+    lock.count += 1;
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        if (--lock.count === 0) {
+            lock.restore();
+            locks.delete(document);
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abuzareal/contour-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "description": "Editorial React components, themes, restrained motion, and optional Three.js objects.",
   "type": "module",
@@ -42,10 +42,12 @@
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "oxlint src --deny-warnings",
     "test": "node --test tests/*.test.mjs",
+    "test:browser": "node --test tests/*.browser.mjs",
     "check:package": "node scripts/check-package.mjs",
-    "validate": "npm run typecheck && npm run lint && npm run build && npm test && npm run check:package",
-    "prepublishOnly": "npm run validate",
-    "test:consumer": "node scripts/test-consumer.mjs"
+    "validate": "npm run typecheck && npm run lint && npm run build && npm test && npm run test:browser && npm run check:package",
+    "prepublishOnly": "npm run validate && npm run test:compat",
+    "test:consumer": "node scripts/test-consumer.mjs",
+    "test:compat": "node scripts/test-compat.mjs"
   },
   "dependencies": {
     "@fontsource-variable/dm-sans": "^5.3.0",
@@ -55,8 +57,8 @@
   },
   "peerDependencies": {
     "lenis": "^1.3.26",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "three": "^0.186.1"
   },
   "peerDependenciesMeta": {
@@ -68,6 +70,7 @@
     }
   },
   "devDependencies": {
+    "@playwright/test": "1.63.0",
     "@testing-library/react": "^16.3.3",
     "@types/node": "^24.13.3",
     "@types/react": "^18.3.5",