@k2b/ui 0.25.0 → 0.26.0

package/dist/browser/layout/app-workspace-controller.js

@@ -1,4 +1,5 @@
 import { suppressTextSelection } from "../internal/text-selection";
+import { prefersReducedMotion } from "../motion";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspacePanelVariable, appWorkspaceResizeLimits, fitAppWorkspacePaneSizes, normalizeAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
 import { installScrollFades } from "./scroll-fade";
 const HANDLE_SELECTOR = "[data-app-workspace-resize]";
@@ -298,7 +299,6 @@ export const installAppWorkspaceController = (options = {}) => {
   const phone = typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 47.999rem)") : null;
   const wide = typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 48rem)") : null;
   const touchDrawer = typeof window.matchMedia === "function" ? window.matchMedia(`${COMPACT_QUERY} and (pointer: coarse)`) : null;
-  const reducedMotion = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
   const detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
   const detailHidden = new WeakMap();
@@ -466,7 +466,7 @@ export const installAppWorkspaceController = (options = {}) => {
   // edge, so the workspace clips while the panel moves (see the stylesheet).
   const slide = (root, aside) => {
     slides.get(root)?.();
-    if (!root.hasAttribute("data-workspace-motion") || reducedMotion?.matches || !wide?.matches) return;
+    if (!root.hasAttribute("data-workspace-motion") || prefersReducedMotion() || !wide?.matches) return;
     const end = () => {
       aside.removeEventListener("transitionend", onEnd);
       aside.removeEventListener("transitioncancel", onEnd);
@@ -494,7 +494,7 @@ export const installAppWorkspaceController = (options = {}) => {
     revealFrames.set(root, requestAnimationFrame(() => {
       revealFrames.delete(root);
       if (!aside.hidden && aside.isConnected && snapshot.item.isConnected && mainElement(root)?.contains(snapshot.item) && snapshot.item.closest(ROOT_SELECTOR) === root) {
-        const behavior = reducedMotion?.matches ? "auto" : "smooth";
+        const behavior = prefersReducedMotion() ? "auto" : "smooth";
         const main = mainElement(root);
         const cell = snapshot.cell;
         const target = cell?.isConnected && main?.contains(cell) ? cell : snapshot.item;
@@ -563,7 +563,7 @@ export const installAppWorkspaceController = (options = {}) => {
     if (aside.hidden) {
       if (pendingTitle?.aside === aside) cancelTitle();
       if (panelStep === aside) panelStep = null;
-      if (root.hasAttribute("data-workspace-motion") && !reducedMotion?.matches && wide?.matches) {
+      if (root.hasAttribute("data-workspace-motion") && !prefersReducedMotion() && wide?.matches) {
         // Closing holds the detail column until the slide ends; anchor after Main widens.
         const cancel = () => {
           root.removeEventListener("transitionend", onTransitionEnd);