@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/utilities/preview/preview.css

@@ -0,0 +1,268 @@
+.puzzle-preview {
+  width: 100%;
+  min-width: 0;
+  margin-block: var(--puzzle-space-6, 1.5rem);
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface, #fff);
+  border: 1px solid var(--puzzle-color-border, #e5e0d6);
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  overflow: hidden;
+}
+
+.puzzle-preview__toolbar {
+  border-bottom: 1px solid var(--puzzle-color-border, #e5e0d6);
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  min-height: 3.5rem;
+  padding: .5rem .75rem;
+  display: flex;
+}
+
+.puzzle-preview__tabs {
+  flex-shrink: 0;
+  align-items: center;
+  gap: .25rem;
+  display: flex;
+}
+
+.puzzle-preview__tab {
+  appearance: none;
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text-muted, #666);
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+  transition: color .15s, background-color .15s, border-color .15s;
+}
+
+.puzzle-preview__tab:hover {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-preview__tab--active {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+  border-color: var(--puzzle-color-border, #e5e0d6);
+}
+
+.puzzle-preview__tab:focus-visible, .puzzle-preview__device:focus-visible, .puzzle-preview__copy:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.puzzle-preview__toolbar-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: .75rem;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-preview__devices {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .25rem;
+  display: flex;
+}
+
+.puzzle-preview__device {
+  appearance: none;
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text-muted, #666);
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+  transition: color .15s, background-color .15s, border-color .15s;
+}
+
+.puzzle-preview__device:hover {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-preview__device--active {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+  border-color: var(--puzzle-color-border, #e5e0d6);
+}
+
+.puzzle-preview__dimensions {
+  color: var(--puzzle-color-text-muted, #666);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  font-size: .75rem;
+}
+
+.puzzle-preview__copy {
+  appearance: none;
+  border: 1px solid var(--puzzle-color-border, #e5e0d6);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface, #fff);
+  font: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  gap: .5rem;
+  padding: .5rem .75rem;
+  font-size: .875rem;
+  transition: background-color .15s, border-color .15s;
+  display: inline-flex;
+}
+
+.puzzle-preview__copy:hover {
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-preview__copy svg {
+  flex-shrink: 0;
+}
+
+.puzzle-preview__panel {
+  min-width: 0;
+}
+
+.puzzle-preview__stage {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  min-width: 0;
+  min-height: 20rem;
+  max-height: 75vh;
+  padding: 1.5rem;
+  display: flex;
+  overflow: clip auto;
+}
+
+.puzzle-preview__stage[hidden] {
+  display: none;
+}
+
+.puzzle-preview__stage::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.puzzle-preview__viewport {
+  box-sizing: border-box;
+  background: var(--puzzle-color-background, #fff);
+  flex: 0 auto;
+  min-width: 0;
+  max-width: 100%;
+  margin: auto;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 12px #0000001a;
+}
+
+.puzzle-preview__frame {
+  transform-origin: 0 0;
+  background: var(--puzzle-color-background, #fff);
+  border: 0;
+  max-width: none;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.puzzle-preview__code {
+  min-width: 0;
+  max-height: 75vh;
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+  scrollbar-width: thin;
+  overflow: auto;
+}
+
+.puzzle-preview__code pre {
+  font-family: var(--puzzle-font-family-monospace, "SFMono-Regular",
+    Consolas,
+    "Liberation Mono",
+    monospace);
+  tab-size: 2;
+  white-space: pre;
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  font-size: .8125rem;
+  line-height: 1.7;
+  overflow: visible;
+}
+
+.puzzle-preview__code code {
+  min-width: fit-content;
+  color: inherit;
+  font: inherit;
+  display: block;
+}
+
+.puzzle-preview__token--comment {
+  color: var(--puzzle-color-text-muted, #666);
+  font-style: italic;
+}
+
+.puzzle-preview__token--string {
+  color: var(--puzzle-color-success, #15803d);
+}
+
+.puzzle-preview__token--keyword {
+  color: var(--puzzle-color-accent, #7c3aed);
+}
+
+.puzzle-preview__token--number {
+  color: var(--puzzle-color-warning, #a16207);
+}
+
+.puzzle-preview__token--type {
+  color: var(--puzzle-color-info, #0369a1);
+}
+
+.puzzle-preview__copy-status {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@media (width <= 480px) {
+  .puzzle-preview__toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+  }
+
+  .puzzle-preview__toolbar-actions {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .puzzle-preview__stage {
+    padding: 1rem;
+  }
+
+  .puzzle-preview__code pre {
+    padding: 1rem;
+    font-size: .75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-preview__tab, .puzzle-preview__device, .puzzle-preview__copy {
+    transition: none;
+  }
+}

package/dist/components/utilities/scroll-lock/index.cjs

@@ -0,0 +1,124 @@
+"use client";
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/utilities/scroll-lock/index.tsx
+const BODY_STYLE_PROPERTIES = [
+	"overflow",
+	"padding-right",
+	"position",
+	"top",
+	"left",
+	"width"
+];
+const HTML_STYLE_PROPERTIES = [
+	"overflow-x",
+	"overflow-y",
+	"scrollbar-gutter",
+	"scroll-behavior"
+];
+const scrollLocks = /* @__PURE__ */ new WeakMap();
+const getStyleSnapshots = (style, properties) => {
+	const snapshots = {};
+	for (const property of properties) snapshots[property] = {
+		value: style.getPropertyValue(property),
+		priority: style.getPropertyPriority(property)
+	};
+	return snapshots;
+};
+const restoreInlineStyle = (style, property, snapshot) => {
+	if (snapshot.value) {
+		style.setProperty(property, snapshot.value, snapshot.priority);
+		return;
+	}
+	style.removeProperty(property);
+};
+const restoreStyleSnapshots = (style, snapshots) => {
+	for (const property of Object.keys(snapshots)) restoreInlineStyle(style, property, snapshots[property]);
+};
+const isIOSDevice = (window) => {
+	const { navigator } = window;
+	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+};
+const getScrollbarWidth = (document) => {
+	const window = document.defaultView;
+	if (!window) return 0;
+	return Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+};
+const lockScroll = (document) => {
+	const body = document.body;
+	const html = document.documentElement;
+	const window = document.defaultView;
+	if (!body || !window) return () => {};
+	const existingState = scrollLocks.get(document);
+	if (existingState) {
+		existingState.count += 1;
+		return () => unlockScroll(document);
+	}
+	const computedBodyStyle = window.getComputedStyle(body);
+	const computedGutter = window.getComputedStyle(html).getPropertyValue("scrollbar-gutter");
+	const supportsStableGutter = typeof window.CSS !== "undefined" && window.CSS.supports("scrollbar-gutter: stable");
+	const hasStableGutter = computedGutter.split(/\s+/).includes("stable");
+	const isIOS = isIOSDevice(window);
+	const state = {
+		count: 1,
+		scrollX: window.scrollX,
+		scrollY: window.scrollY,
+		isIOS,
+		bodyStyles: getStyleSnapshots(body.style, BODY_STYLE_PROPERTIES),
+		htmlStyles: getStyleSnapshots(html.style, HTML_STYLE_PROPERTIES)
+	};
+	scrollLocks.set(document, state);
+	if (supportsStableGutter && !hasStableGutter) html.style.setProperty("scrollbar-gutter", "stable", "important");
+	if (!supportsStableGutter && !isIOS) {
+		const scrollbarWidth = getScrollbarWidth(document);
+		if (scrollbarWidth > 0) {
+			const paddingRight = Number.parseFloat(computedBodyStyle.paddingRight) || 0;
+			body.style.setProperty("padding-right", `${paddingRight + scrollbarWidth}px`, "important");
+		}
+	}
+	body.style.setProperty("overflow", "hidden", "important");
+	html.style.setProperty("overflow-x", "hidden", "important");
+	html.style.setProperty("overflow-y", "hidden", "important");
+	if (isIOS) {
+		body.style.setProperty("position", "fixed", "important");
+		body.style.setProperty("top", `${-state.scrollY}px`, "important");
+		body.style.setProperty("left", `${-state.scrollX}px`, "important");
+		body.style.setProperty("width", `${html.clientWidth}px`, "important");
+	}
+	return () => unlockScroll(document);
+};
+const unlockScroll = (document) => {
+	const state = scrollLocks.get(document);
+	const body = document.body;
+	const html = document.documentElement;
+	const window = document.defaultView;
+	if (!state || !body || !window) return;
+	state.count -= 1;
+	if (state.count > 0) return;
+	scrollLocks.delete(document);
+	restoreStyleSnapshots(body.style, state.bodyStyles);
+	restoreInlineStyle(html.style, "overflow-x", state.htmlStyles["overflow-x"]);
+	restoreInlineStyle(html.style, "overflow-y", state.htmlStyles["overflow-y"]);
+	restoreInlineStyle(html.style, "scrollbar-gutter", state.htmlStyles["scrollbar-gutter"]);
+	html.style.setProperty("scroll-behavior", "auto", "important");
+	try {
+		if (state.isIOS) window.scrollTo(state.scrollX, state.scrollY);
+	} finally {
+		restoreInlineStyle(html.style, "scroll-behavior", state.htmlStyles["scroll-behavior"]);
+	}
+};
+const ScrollLock = ({ enabled = true }) => {
+	const markerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const ownerDocument = markerRef.current?.ownerDocument;
+		if (!enabled || !ownerDocument) return;
+		return lockScroll(ownerDocument);
+	}, [enabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref: markerRef,
+		hidden: true
+	});
+};
+exports.ScrollLock = ScrollLock;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/utilities/scroll-lock/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useRef"],"sources":["../../../../src/components/utilities/scroll-lock/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ntype ScrollLockProps = {\n  /** Whether document scrolling should be locked. */\n  enabled?: boolean;\n};\n\ntype InlineStyleSnapshot = {\n  value: string;\n  priority: string;\n};\n\nconst BODY_STYLE_PROPERTIES = [\n  \"overflow\",\n  \"padding-right\",\n  \"position\",\n  \"top\",\n  \"left\",\n  \"width\",\n] as const;\n\nconst HTML_STYLE_PROPERTIES = [\n  \"overflow-x\",\n  \"overflow-y\",\n  \"scrollbar-gutter\",\n  \"scroll-behavior\",\n] as const;\n\ntype BodyStyleProperty = (typeof BODY_STYLE_PROPERTIES)[number];\ntype HtmlStyleProperty = (typeof HTML_STYLE_PROPERTIES)[number];\n\ntype ScrollLockState = {\n  count: number;\n  scrollX: number;\n  scrollY: number;\n  isIOS: boolean;\n  bodyStyles: Record<BodyStyleProperty, InlineStyleSnapshot>;\n  htmlStyles: Record<HtmlStyleProperty, InlineStyleSnapshot>;\n};\n\nconst scrollLocks = new WeakMap<Document, ScrollLockState>();\n\nconst getStyleSnapshots = <T extends string>(\n  style: CSSStyleDeclaration,\n  properties: readonly T[],\n): Record<T, InlineStyleSnapshot> => {\n  const snapshots = {} as Record<T, InlineStyleSnapshot>;\n\n  for (const property of properties) {\n    snapshots[property] = {\n      value: style.getPropertyValue(property),\n      priority: style.getPropertyPriority(property),\n    };\n  }\n\n  return snapshots;\n};\n\nconst restoreInlineStyle = (\n  style: CSSStyleDeclaration,\n  property: string,\n  snapshot: InlineStyleSnapshot,\n) => {\n  if (snapshot.value) {\n    style.setProperty(property, snapshot.value, snapshot.priority);\n    return;\n  }\n\n  style.removeProperty(property);\n};\n\nconst restoreStyleSnapshots = <T extends string>(\n  style: CSSStyleDeclaration,\n  snapshots: Record<T, InlineStyleSnapshot>,\n) => {\n  for (const property of Object.keys(snapshots) as T[]) {\n    restoreInlineStyle(style, property, snapshots[property]);\n  }\n};\n\nconst isIOSDevice = (window: Window) => {\n  const { navigator } = window;\n\n  return (\n    /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === \"MacIntel\" && navigator.maxTouchPoints > 1)\n  );\n};\n\nconst getScrollbarWidth = (document: Document) => {\n  const window = document.defaultView;\n\n  if (!window) {\n    return 0;\n  }\n\n  return Math.max(0, window.innerWidth - document.documentElement.clientWidth);\n};\n\nconst lockScroll = (document: Document) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const window = document.defaultView;\n\n  if (!body || !window) {\n    return () => {};\n  }\n\n  const existingState = scrollLocks.get(document);\n\n  if (existingState) {\n    existingState.count += 1;\n\n    return () => unlockScroll(document);\n  }\n\n  const computedBodyStyle = window.getComputedStyle(body);\n  const computedGutter = window\n    .getComputedStyle(html)\n    .getPropertyValue(\"scrollbar-gutter\");\n\n  const supportsStableGutter =\n    typeof window.CSS !== \"undefined\" &&\n    window.CSS.supports(\"scrollbar-gutter: stable\");\n\n  const hasStableGutter = computedGutter.split(/\\s+/).includes(\"stable\");\n\n  const isIOS = isIOSDevice(window);\n\n  const state: ScrollLockState = {\n    count: 1,\n    scrollX: window.scrollX,\n    scrollY: window.scrollY,\n    isIOS,\n    bodyStyles: getStyleSnapshots(body.style, BODY_STYLE_PROPERTIES),\n    htmlStyles: getStyleSnapshots(html.style, HTML_STYLE_PROPERTIES),\n  };\n\n  scrollLocks.set(document, state);\n\n  // Reserve the scrollbar gutter in browsers that support it.\n  if (supportsStableGutter && !hasStableGutter) {\n    html.style.setProperty(\"scrollbar-gutter\", \"stable\", \"important\");\n  }\n\n  // Fallback for browsers without scrollbar-gutter.\n  if (!supportsStableGutter && !isIOS) {\n    const scrollbarWidth = getScrollbarWidth(document);\n\n    if (scrollbarWidth > 0) {\n      const paddingRight =\n        Number.parseFloat(computedBodyStyle.paddingRight) || 0;\n\n      body.style.setProperty(\n        \"padding-right\",\n        `${paddingRight + scrollbarWidth}px`,\n        \"important\",\n      );\n    }\n  }\n\n  body.style.setProperty(\"overflow\", \"hidden\", \"important\");\n  html.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n  html.style.setProperty(\"overflow-y\", \"hidden\", \"important\");\n\n  // iOS Safari needs additional protection against touch scrolling.\n  if (isIOS) {\n    body.style.setProperty(\"position\", \"fixed\", \"important\");\n    body.style.setProperty(\"top\", `${-state.scrollY}px`, \"important\");\n    body.style.setProperty(\"left\", `${-state.scrollX}px`, \"important\");\n    body.style.setProperty(\"width\", `${html.clientWidth}px`, \"important\");\n  }\n\n  return () => unlockScroll(document);\n};\n\nconst unlockScroll = (document: Document) => {\n  const state = scrollLocks.get(document);\n  const body = document.body;\n  const html = document.documentElement;\n  const window = document.defaultView;\n\n  if (!state || !body || !window) {\n    return;\n  }\n\n  state.count -= 1;\n\n  // Keep the lock active while another overlay still needs it.\n  if (state.count > 0) {\n    return;\n  }\n\n  scrollLocks.delete(document);\n\n  // Restore the exact original inline declarations and priorities.\n  restoreStyleSnapshots(body.style, state.bodyStyles);\n  restoreInlineStyle(html.style, \"overflow-x\", state.htmlStyles[\"overflow-x\"]);\n  restoreInlineStyle(html.style, \"overflow-y\", state.htmlStyles[\"overflow-y\"]);\n\n  // Explicitly restore the original scrollbar-gutter value.\n  restoreInlineStyle(\n    html.style,\n    \"scrollbar-gutter\",\n    state.htmlStyles[\"scrollbar-gutter\"],\n  );\n\n  // Avoid an animated scroll when restoring the previous position.\n  html.style.setProperty(\"scroll-behavior\", \"auto\", \"important\");\n\n  try {\n    if (state.isIOS) {\n      window.scrollTo(state.scrollX, state.scrollY);\n    }\n  } finally {\n    restoreInlineStyle(\n      html.style,\n      \"scroll-behavior\",\n      state.htmlStyles[\"scroll-behavior\"],\n    );\n  }\n};\n\nconst ScrollLock = ({ enabled = true }: ScrollLockProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const ownerDocument = markerRef.current?.ownerDocument;\n\n    if (!enabled || !ownerDocument) {\n      return;\n    }\n\n    return lockScroll(ownerDocument);\n  }, [enabled]);\n\n  // The marker identifies the document this lock is rendered in.\n  return <span ref={markerRef} hidden />;\n};\n\nexport { ScrollLock, type ScrollLockProps };\n"],"mappings":"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"}

package/dist/components/utilities/scroll-lock/index.d.cts

@@ -0,0 +1,6 @@
+type ScrollLockProps = {
+  /** Whether document scrolling should be locked. */
+  enabled?: boolean;
+};
+declare const ScrollLock: ({ enabled }: ScrollLockProps) => import("react").JSX.Element;
+export { ScrollLock, type ScrollLockProps };

package/dist/components/utilities/scroll-lock/index.d.ts

@@ -0,0 +1,6 @@
+type ScrollLockProps = {
+  /** Whether document scrolling should be locked. */
+  enabled?: boolean;
+};
+declare const ScrollLock: ({ enabled }: ScrollLockProps) => import("react").JSX.Element;
+export { ScrollLock, type ScrollLockProps };

package/dist/components/utilities/scroll-lock/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/utilities/scroll-lock/index.tsx
+const BODY_STYLE_PROPERTIES = [
+	"overflow",
+	"padding-right",
+	"position",
+	"top",
+	"left",
+	"width"
+];
+const HTML_STYLE_PROPERTIES = [
+	"overflow-x",
+	"overflow-y",
+	"scrollbar-gutter",
+	"scroll-behavior"
+];
+const scrollLocks = /* @__PURE__ */ new WeakMap();
+const getStyleSnapshots = (style, properties) => {
+	const snapshots = {};
+	for (const property of properties) snapshots[property] = {
+		value: style.getPropertyValue(property),
+		priority: style.getPropertyPriority(property)
+	};
+	return snapshots;
+};
+const restoreInlineStyle = (style, property, snapshot) => {
+	if (snapshot.value) {
+		style.setProperty(property, snapshot.value, snapshot.priority);
+		return;
+	}
+	style.removeProperty(property);
+};
+const restoreStyleSnapshots = (style, snapshots) => {
+	for (const property of Object.keys(snapshots)) restoreInlineStyle(style, property, snapshots[property]);
+};
+const isIOSDevice = (window) => {
+	const { navigator } = window;
+	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+};
+const getScrollbarWidth = (document) => {
+	const window = document.defaultView;
+	if (!window) return 0;
+	return Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+};
+const lockScroll = (document) => {
+	const body = document.body;
+	const html = document.documentElement;
+	const window = document.defaultView;
+	if (!body || !window) return () => {};
+	const existingState = scrollLocks.get(document);
+	if (existingState) {
+		existingState.count += 1;
+		return () => unlockScroll(document);
+	}
+	const computedBodyStyle = window.getComputedStyle(body);
+	const computedGutter = window.getComputedStyle(html).getPropertyValue("scrollbar-gutter");
+	const supportsStableGutter = typeof window.CSS !== "undefined" && window.CSS.supports("scrollbar-gutter: stable");
+	const hasStableGutter = computedGutter.split(/\s+/).includes("stable");
+	const isIOS = isIOSDevice(window);
+	const state = {
+		count: 1,
+		scrollX: window.scrollX,
+		scrollY: window.scrollY,
+		isIOS,
+		bodyStyles: getStyleSnapshots(body.style, BODY_STYLE_PROPERTIES),
+		htmlStyles: getStyleSnapshots(html.style, HTML_STYLE_PROPERTIES)
+	};
+	scrollLocks.set(document, state);
+	if (supportsStableGutter && !hasStableGutter) html.style.setProperty("scrollbar-gutter", "stable", "important");
+	if (!supportsStableGutter && !isIOS) {
+		const scrollbarWidth = getScrollbarWidth(document);
+		if (scrollbarWidth > 0) {
+			const paddingRight = Number.parseFloat(computedBodyStyle.paddingRight) || 0;
+			body.style.setProperty("padding-right", `${paddingRight + scrollbarWidth}px`, "important");
+		}
+	}
+	body.style.setProperty("overflow", "hidden", "important");
+	html.style.setProperty("overflow-x", "hidden", "important");
+	html.style.setProperty("overflow-y", "hidden", "important");
+	if (isIOS) {
+		body.style.setProperty("position", "fixed", "important");
+		body.style.setProperty("top", `${-state.scrollY}px`, "important");
+		body.style.setProperty("left", `${-state.scrollX}px`, "important");
+		body.style.setProperty("width", `${html.clientWidth}px`, "important");
+	}
+	return () => unlockScroll(document);
+};
+const unlockScroll = (document) => {
+	const state = scrollLocks.get(document);
+	const body = document.body;
+	const html = document.documentElement;
+	const window = document.defaultView;
+	if (!state || !body || !window) return;
+	state.count -= 1;
+	if (state.count > 0) return;
+	scrollLocks.delete(document);
+	restoreStyleSnapshots(body.style, state.bodyStyles);
+	restoreInlineStyle(html.style, "overflow-x", state.htmlStyles["overflow-x"]);
+	restoreInlineStyle(html.style, "overflow-y", state.htmlStyles["overflow-y"]);
+	restoreInlineStyle(html.style, "scrollbar-gutter", state.htmlStyles["scrollbar-gutter"]);
+	html.style.setProperty("scroll-behavior", "auto", "important");
+	try {
+		if (state.isIOS) window.scrollTo(state.scrollX, state.scrollY);
+	} finally {
+		restoreInlineStyle(html.style, "scroll-behavior", state.htmlStyles["scroll-behavior"]);
+	}
+};
+const ScrollLock = ({ enabled = true }) => {
+	const markerRef = useRef(null);
+	useEffect(() => {
+		const ownerDocument = markerRef.current?.ownerDocument;
+		if (!enabled || !ownerDocument) return;
+		return lockScroll(ownerDocument);
+	}, [enabled]);
+	return /* @__PURE__ */ jsx("span", {
+		ref: markerRef,
+		hidden: true
+	});
+};
+export { ScrollLock };
+
+//# sourceMappingURL=index.js.map

package/dist/components/utilities/scroll-lock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/utilities/scroll-lock/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ntype ScrollLockProps = {\n  /** Whether document scrolling should be locked. */\n  enabled?: boolean;\n};\n\ntype InlineStyleSnapshot = {\n  value: string;\n  priority: string;\n};\n\nconst BODY_STYLE_PROPERTIES = [\n  \"overflow\",\n  \"padding-right\",\n  \"position\",\n  \"top\",\n  \"left\",\n  \"width\",\n] as const;\n\nconst HTML_STYLE_PROPERTIES = [\n  \"overflow-x\",\n  \"overflow-y\",\n  \"scrollbar-gutter\",\n  \"scroll-behavior\",\n] as const;\n\ntype BodyStyleProperty = (typeof BODY_STYLE_PROPERTIES)[number];\ntype HtmlStyleProperty = (typeof HTML_STYLE_PROPERTIES)[number];\n\ntype ScrollLockState = {\n  count: number;\n  scrollX: number;\n  scrollY: number;\n  isIOS: boolean;\n  bodyStyles: Record<BodyStyleProperty, InlineStyleSnapshot>;\n  htmlStyles: Record<HtmlStyleProperty, InlineStyleSnapshot>;\n};\n\nconst scrollLocks = new WeakMap<Document, ScrollLockState>();\n\nconst getStyleSnapshots = <T extends string>(\n  style: CSSStyleDeclaration,\n  properties: readonly T[],\n): Record<T, InlineStyleSnapshot> => {\n  const snapshots = {} as Record<T, InlineStyleSnapshot>;\n\n  for (const property of properties) {\n    snapshots[property] = {\n      value: style.getPropertyValue(property),\n      priority: style.getPropertyPriority(property),\n    };\n  }\n\n  return snapshots;\n};\n\nconst restoreInlineStyle = (\n  style: CSSStyleDeclaration,\n  property: string,\n  snapshot: InlineStyleSnapshot,\n) => {\n  if (snapshot.value) {\n    style.setProperty(property, snapshot.value, snapshot.priority);\n    return;\n  }\n\n  style.removeProperty(property);\n};\n\nconst restoreStyleSnapshots = <T extends string>(\n  style: CSSStyleDeclaration,\n  snapshots: Record<T, InlineStyleSnapshot>,\n) => {\n  for (const property of Object.keys(snapshots) as T[]) {\n    restoreInlineStyle(style, property, snapshots[property]);\n  }\n};\n\nconst isIOSDevice = (window: Window) => {\n  const { navigator } = window;\n\n  return (\n    /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === \"MacIntel\" && navigator.maxTouchPoints > 1)\n  );\n};\n\nconst getScrollbarWidth = (document: Document) => {\n  const window = document.defaultView;\n\n  if (!window) {\n    return 0;\n  }\n\n  return Math.max(0, window.innerWidth - document.documentElement.clientWidth);\n};\n\nconst lockScroll = (document: Document) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const window = document.defaultView;\n\n  if (!body || !window) {\n    return () => {};\n  }\n\n  const existingState = scrollLocks.get(document);\n\n  if (existingState) {\n    existingState.count += 1;\n\n    return () => unlockScroll(document);\n  }\n\n  const computedBodyStyle = window.getComputedStyle(body);\n  const computedGutter = window\n    .getComputedStyle(html)\n    .getPropertyValue(\"scrollbar-gutter\");\n\n  const supportsStableGutter =\n    typeof window.CSS !== \"undefined\" &&\n    window.CSS.supports(\"scrollbar-gutter: stable\");\n\n  const hasStableGutter = computedGutter.split(/\\s+/).includes(\"stable\");\n\n  const isIOS = isIOSDevice(window);\n\n  const state: ScrollLockState = {\n    count: 1,\n    scrollX: window.scrollX,\n    scrollY: window.scrollY,\n    isIOS,\n    bodyStyles: getStyleSnapshots(body.style, BODY_STYLE_PROPERTIES),\n    htmlStyles: getStyleSnapshots(html.style, HTML_STYLE_PROPERTIES),\n  };\n\n  scrollLocks.set(document, state);\n\n  // Reserve the scrollbar gutter in browsers that support it.\n  if (supportsStableGutter && !hasStableGutter) {\n    html.style.setProperty(\"scrollbar-gutter\", \"stable\", \"important\");\n  }\n\n  // Fallback for browsers without scrollbar-gutter.\n  if (!supportsStableGutter && !isIOS) {\n    const scrollbarWidth = getScrollbarWidth(document);\n\n    if (scrollbarWidth > 0) {\n      const paddingRight =\n        Number.parseFloat(computedBodyStyle.paddingRight) || 0;\n\n      body.style.setProperty(\n        \"padding-right\",\n        `${paddingRight + scrollbarWidth}px`,\n        \"important\",\n      );\n    }\n  }\n\n  body.style.setProperty(\"overflow\", \"hidden\", \"important\");\n  html.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n  html.style.setProperty(\"overflow-y\", \"hidden\", \"important\");\n\n  // iOS Safari needs additional protection against touch scrolling.\n  if (isIOS) {\n    body.style.setProperty(\"position\", \"fixed\", \"important\");\n    body.style.setProperty(\"top\", `${-state.scrollY}px`, \"important\");\n    body.style.setProperty(\"left\", `${-state.scrollX}px`, \"important\");\n    body.style.setProperty(\"width\", `${html.clientWidth}px`, \"important\");\n  }\n\n  return () => unlockScroll(document);\n};\n\nconst unlockScroll = (document: Document) => {\n  const state = scrollLocks.get(document);\n  const body = document.body;\n  const html = document.documentElement;\n  const window = document.defaultView;\n\n  if (!state || !body || !window) {\n    return;\n  }\n\n  state.count -= 1;\n\n  // Keep the lock active while another overlay still needs it.\n  if (state.count > 0) {\n    return;\n  }\n\n  scrollLocks.delete(document);\n\n  // Restore the exact original inline declarations and priorities.\n  restoreStyleSnapshots(body.style, state.bodyStyles);\n  restoreInlineStyle(html.style, \"overflow-x\", state.htmlStyles[\"overflow-x\"]);\n  restoreInlineStyle(html.style, \"overflow-y\", state.htmlStyles[\"overflow-y\"]);\n\n  // Explicitly restore the original scrollbar-gutter value.\n  restoreInlineStyle(\n    html.style,\n    \"scrollbar-gutter\",\n    state.htmlStyles[\"scrollbar-gutter\"],\n  );\n\n  // Avoid an animated scroll when restoring the previous position.\n  html.style.setProperty(\"scroll-behavior\", \"auto\", \"important\");\n\n  try {\n    if (state.isIOS) {\n      window.scrollTo(state.scrollX, state.scrollY);\n    }\n  } finally {\n    restoreInlineStyle(\n      html.style,\n      \"scroll-behavior\",\n      state.htmlStyles[\"scroll-behavior\"],\n    );\n  }\n};\n\nconst ScrollLock = ({ enabled = true }: ScrollLockProps) => {\n  const markerRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const ownerDocument = markerRef.current?.ownerDocument;\n\n    if (!enabled || !ownerDocument) {\n      return;\n    }\n\n    return lockScroll(ownerDocument);\n  }, [enabled]);\n\n  // The marker identifies the document this lock is rendered in.\n  return <span ref={markerRef} hidden />;\n};\n\nexport { ScrollLock, type ScrollLockProps };\n"],"mappings":"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"}