cursedbelt 5.85.0 → 5.85.1

package/dist/react/lib/overlayMotion.d.ts

@@ -13,6 +13,12 @@
  * simply there. The animation still runs for 0s, so Radix's `Presence` sees its `animationend`
  * and unmounts on close exactly as it does with motion on.
  *
+ * 🔴 A closing overlay lets the pointer through (`CLOSED_PASSTHROUGH`, in every constant below). Its
+ * exit runs for the whole duration at near-zero opacity, still mounted, and until then it took every
+ * click and drag over it: measured in desk (forge task 3488), a drag begun 0.2s after picking a menu
+ * item landed on the fading menu's next item instead of the canvas beneath. `e2e/motion.spec.ts`
+ * reads `pointer-events` at the instant `data-state` turns `closed`.
+ *
  * Each overlay's own direction stays its own: an anchored panel comes from its anchor's side, a
  * drawer slides its whole width in from its edge. What they share is the curve and the speed.
  *
@@ -32,6 +38,6 @@ export declare const DIALOG_MOTION: string;
 export declare const SCRIM_MOTION: string;
 /** A drawer's SPEED and curve. Its slide (`slide-in-from-left` …) is its edge's, so it stays at
  *  the call site; this is what makes it ease like every other overlay instead of tw-animate's
- *  150ms `ease`. */
-export declare const DRAWER_MOTION = "duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0";
+ *  150ms `ease`, and lets the pointer through while it closes. */
+export declare const DRAWER_MOTION: string;
 //# sourceMappingURL=overlayMotion.d.ts.map

package/dist/react/lib/overlayMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlayMotion.d.ts","sourceRoot":"","sources":["../../../src/react/lib/overlayMotion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;4FAE4F;AAC5F,eAAO,MAAM,cAAc,QAKsD,CAAC;AAElF,iGAAiG;AACjG,eAAO,MAAM,eAAe,QAMqD,CAAC;AAElF;kFACkF;AAClF,eAAO,MAAM,aAAa,QAG6E,CAAC;AAExG,2FAA2F;AAC3F,eAAO,MAAM,YAAY,QAGyC,CAAC;AAEnE;;oBAEoB;AACpB,eAAO,MAAM,aAAa,oFAAoF,CAAC"}
+{"version":3,"file":"overlayMotion.d.ts","sourceRoot":"","sources":["../../../src/react/lib/overlayMotion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAOH;;4FAE4F;AAC5F,eAAO,MAAM,cAAc,QAMsD,CAAC;AAElF,iGAAiG;AACjG,eAAO,MAAM,eAAe,QAOqD,CAAC;AAElF;kFACkF;AAClF,eAAO,MAAM,aAAa,QAIN,CAAC;AAErB,2FAA2F;AAC3F,eAAO,MAAM,YAAY,QAIL,CAAC;AAErB;;kEAEkE;AAClE,eAAO,MAAM,aAAa,QAA0G,CAAC"}

package/dist/react/lib/overlayMotion.js

@@ -13,18 +13,29 @@
  * simply there. The animation still runs for 0s, so Radix's `Presence` sees its `animationend`
  * and unmounts on close exactly as it does with motion on.
  *
+ * 🔴 A closing overlay lets the pointer through (`CLOSED_PASSTHROUGH`, in every constant below). Its
+ * exit runs for the whole duration at near-zero opacity, still mounted, and until then it took every
+ * click and drag over it: measured in desk (forge task 3488), a drag begun 0.2s after picking a menu
+ * item landed on the fading menu's next item instead of the canvas beneath. `e2e/motion.spec.ts`
+ * reads `pointer-events` at the instant `data-state` turns `closed`.
+ *
  * Each overlay's own direction stays its own: an anchored panel comes from its anchor's side, a
  * drawer slides its whole width in from its edge. What they share is the curve and the speed.
  *
  * 🔴 Literals only — Tailwind's JIT reads source text (see `tapTarget.ts`). `e2e/motion.spec.ts`
  * opens each primitive and reads its running animation from `getAnimations()`.
  */
+/** What every overlay does once it is closing: nothing under the pointer. Important, because
+ *  Radix writes `pointer-events: auto` INLINE on a dialog's overlay (the body is `none` under a
+ *  modal) and an inline style beats any class — the scrim kept the pointer with the plain one. */
+const CLOSED_PASSTHROUGH = 'data-[state=closed]:pointer-events-none!';
 /** A tooltip: the fast speed, a fade and a 4px rise from its trigger's side. Only a DELAYED
  *  open animates — moving between triggers inside the skip-delay window (`instant-open`) swaps
  *  the bubble in place, the way Linear's do, instead of re-fading it on every neighbour. */
 export const TOOLTIP_MOTION = 'duration-[var(--duration-fast)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
     'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985] ' +
     'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
+    CLOSED_PASSTHROUGH + ' ' +
     'data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 ' +
     'data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1';
 /** An anchored panel (popover, menu, select, hover card): base speed, rising from its anchor. */
@@ -32,19 +43,22 @@ export const ANCHORED_MOTION = 'duration-[var(--duration-base)] ease-[var(--ease
     'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
     'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
     'data-[state=closed]:zoom-out-[0.985] data-[state=open]:zoom-in-[0.985] ' +
+    CLOSED_PASSTHROUGH + ' ' +
     'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 ' +
     'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2';
 /** A dialog's panel (Modal, ConfirmDialog, PromptDialog, Lightbox, the palette, a full-screen
  *  dialog): slow speed, rising 8px from below and from 0.985 — `animate-rise`. */
 export const DIALOG_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
     'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.985] data-[state=open]:slide-in-from-bottom-2 ' +
-    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.985]';
+    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.985] ' +
+    CLOSED_PASSTHROUGH;
 /** The scrim behind a dialog or drawer: a fade at the speed of the panel it sits under. */
 export const SCRIM_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
     'data-[state=open]:animate-in data-[state=open]:fade-in-0 ' +
-    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0';
+    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
+    CLOSED_PASSTHROUGH;
 /** A drawer's SPEED and curve. Its slide (`slide-in-from-left` …) is its edge's, so it stays at
  *  the call site; this is what makes it ease like every other overlay instead of tw-animate's
- *  150ms `ease`. */
-export const DRAWER_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0';
+ *  150ms `ease`, and lets the pointer through while it closes. */
+export const DRAWER_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' + CLOSED_PASSTHROUGH;
 //# sourceMappingURL=overlayMotion.js.map

package/dist/react/lib/overlayMotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayMotion.js","sourceRoot":"","sources":["../../../src/react/lib/overlayMotion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;4FAE4F;AAC5F,MAAM,CAAC,MAAM,cAAc,GACzB,kFAAkF;IAClF,qHAAqH;IACrH,iEAAiE;IACjE,gFAAgF;IAChF,+EAA+E,CAAC;AAElF,iGAAiG;AACjG,MAAM,CAAC,MAAM,eAAe,GAC1B,kFAAkF;IAClF,+DAA+D;IAC/D,6DAA6D;IAC7D,yEAAyE;IACzE,gFAAgF;IAChF,+EAA+E,CAAC;AAElF;kFACkF;AAClF,MAAM,CAAC,MAAM,aAAa,GACxB,kFAAkF;IAClF,sIAAsI;IACtI,qGAAqG,CAAC;AAExG,2FAA2F;AAC3F,MAAM,CAAC,MAAM,YAAY,GACvB,kFAAkF;IAClF,2DAA2D;IAC3D,gEAAgE,CAAC;AAEnE;;oBAEoB;AACpB,MAAM,CAAC,MAAM,aAAa,GAAG,iFAAiF,CAAC"}
+{"version":3,"file":"overlayMotion.js","sourceRoot":"","sources":["../../../src/react/lib/overlayMotion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH;;kGAEkG;AAClG,MAAM,kBAAkB,GAAG,0CAA0C,CAAC;AAEtE;;4FAE4F;AAC5F,MAAM,CAAC,MAAM,cAAc,GACzB,kFAAkF;IAClF,qHAAqH;IACrH,iEAAiE;IACjE,kBAAkB,GAAG,GAAG;IACxB,gFAAgF;IAChF,+EAA+E,CAAC;AAElF,iGAAiG;AACjG,MAAM,CAAC,MAAM,eAAe,GAC1B,kFAAkF;IAClF,+DAA+D;IAC/D,6DAA6D;IAC7D,yEAAyE;IACzE,kBAAkB,GAAG,GAAG;IACxB,gFAAgF;IAChF,+EAA+E,CAAC;AAElF;kFACkF;AAClF,MAAM,CAAC,MAAM,aAAa,GACxB,kFAAkF;IAClF,sIAAsI;IACtI,sGAAsG;IACtG,kBAAkB,CAAC;AAErB,2FAA2F;AAC3F,MAAM,CAAC,MAAM,YAAY,GACvB,kFAAkF;IAClF,2DAA2D;IAC3D,iEAAiE;IACjE,kBAAkB,CAAC;AAErB;;kEAEkE;AAClE,MAAM,CAAC,MAAM,aAAa,GAAG,kFAAkF,GAAG,kBAAkB,CAAC"}

package/dist/styles-areas/core.css

@@ -15,7 +15,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 927 candidate(s).
+ * 928 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -88,13 +88,13 @@
 @source inline("data-[state=checked]:ring-accent data-[state=checked]:text-white");
 @source inline("data-[state=checked]:translate-x-4 data-[state=closed]:animate-collapsible-up");
 @source inline("data-[state=closed]:animate-out data-[state=closed]:fade-out-0");
-@source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
-@source inline("data-[state=closed]:slide-out-to-right data-[state=closed]:zoom-out-[0.985]");
-@source inline("data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0");
-@source inline("data-[state=delayed-open]:zoom-in-[0.985] data-[state=indeterminate]:bg-accent-solid");
-@source inline("data-[state=indeterminate]:border-accent-solid data-[state=indeterminate]:text-white");
-@source inline("data-[state=open]:animate-collapsible-down data-[state=open]:animate-in");
-@source inline("data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom");
+@source inline("data-[state=closed]:pointer-events-none! data-[state=closed]:slide-out-to-bottom");
+@source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
+@source inline("data-[state=closed]:zoom-out-[0.985] data-[state=delayed-open]:animate-in");
+@source inline("data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985]");
+@source inline("data-[state=indeterminate]:bg-accent-solid data-[state=indeterminate]:border-accent-solid");
+@source inline("data-[state=indeterminate]:text-white data-[state=open]:animate-collapsible-down");
+@source inline("data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom");
 @source inline("data-[state=open]:slide-in-from-bottom-2 data-[state=open]:slide-in-from-left");
 @source inline("data-[state=open]:slide-in-from-right data-[state=open]:zoom-in-[0.985]");
 @source inline("data-[state=unchecked]:bg-muted data-[state=unchecked]:translate-x-0 disable disabled");

package/dist/styles-utilities.css

@@ -4444,6 +4444,9 @@
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
+  .data-\[state\=closed\]\:pointer-events-none\![data-state="closed"] {
+    pointer-events: none !important;
+  }
   .data-\[state\=closed\]\:animate-collapsible-up[data-state="closed"] {
     animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.85.0",
+	"version": "5.85.1",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",

package/src/react/lib/overlayMotion.ts

@@ -13,6 +13,12 @@
  * simply there. The animation still runs for 0s, so Radix's `Presence` sees its `animationend`
  * and unmounts on close exactly as it does with motion on.
  *
+ * 🔴 A closing overlay lets the pointer through (`CLOSED_PASSTHROUGH`, in every constant below). Its
+ * exit runs for the whole duration at near-zero opacity, still mounted, and until then it took every
+ * click and drag over it: measured in desk (forge task 3488), a drag begun 0.2s after picking a menu
+ * item landed on the fading menu's next item instead of the canvas beneath. `e2e/motion.spec.ts`
+ * reads `pointer-events` at the instant `data-state` turns `closed`.
+ *
  * Each overlay's own direction stays its own: an anchored panel comes from its anchor's side, a
  * drawer slides its whole width in from its edge. What they share is the curve and the speed.
  *
@@ -20,6 +26,11 @@
  * opens each primitive and reads its running animation from `getAnimations()`.
  */
 
+/** What every overlay does once it is closing: nothing under the pointer. Important, because
+ *  Radix writes `pointer-events: auto` INLINE on a dialog's overlay (the body is `none` under a
+ *  modal) and an inline style beats any class — the scrim kept the pointer with the plain one. */
+const CLOSED_PASSTHROUGH = 'data-[state=closed]:pointer-events-none!';
+
 /** A tooltip: the fast speed, a fade and a 4px rise from its trigger's side. Only a DELAYED
  *  open animates — moving between triggers inside the skip-delay window (`instant-open`) swaps
  *  the bubble in place, the way Linear's do, instead of re-fading it on every neighbour. */
@@ -27,6 +38,7 @@ export const TOOLTIP_MOTION =
   'duration-[var(--duration-fast)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
   'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985] ' +
   'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
+  CLOSED_PASSTHROUGH + ' ' +
   'data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 ' +
   'data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1';
 
@@ -36,6 +48,7 @@ export const ANCHORED_MOTION =
   'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
   'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
   'data-[state=closed]:zoom-out-[0.985] data-[state=open]:zoom-in-[0.985] ' +
+  CLOSED_PASSTHROUGH + ' ' +
   'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 ' +
   'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2';
 
@@ -44,15 +57,17 @@ export const ANCHORED_MOTION =
 export const DIALOG_MOTION =
   'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
   'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.985] data-[state=open]:slide-in-from-bottom-2 ' +
-  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.985]';
+  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.985] ' +
+  CLOSED_PASSTHROUGH;
 
 /** The scrim behind a dialog or drawer: a fade at the speed of the panel it sits under. */
 export const SCRIM_MOTION =
   'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
   'data-[state=open]:animate-in data-[state=open]:fade-in-0 ' +
-  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0';
+  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
+  CLOSED_PASSTHROUGH;
 
 /** A drawer's SPEED and curve. Its slide (`slide-in-from-left` …) is its edge's, so it stays at
  *  the call site; this is what makes it ease like every other overlay instead of tw-animate's
- *  150ms `ease`. */
-export const DRAWER_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0';
+ *  150ms `ease`, and lets the pointer through while it closes. */
+export const DRAWER_MOTION = 'duration-[var(--duration-slow)] ease-[var(--ease-out)] motion-reduce:duration-0 ' + CLOSED_PASSTHROUGH;

package/src/styles-areas/core.css

@@ -15,7 +15,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 927 candidate(s).
+ * 928 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -88,13 +88,13 @@
 @source inline("data-[state=checked]:ring-accent data-[state=checked]:text-white");
 @source inline("data-[state=checked]:translate-x-4 data-[state=closed]:animate-collapsible-up");
 @source inline("data-[state=closed]:animate-out data-[state=closed]:fade-out-0");
-@source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
-@source inline("data-[state=closed]:slide-out-to-right data-[state=closed]:zoom-out-[0.985]");
-@source inline("data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0");
-@source inline("data-[state=delayed-open]:zoom-in-[0.985] data-[state=indeterminate]:bg-accent-solid");
-@source inline("data-[state=indeterminate]:border-accent-solid data-[state=indeterminate]:text-white");
-@source inline("data-[state=open]:animate-collapsible-down data-[state=open]:animate-in");
-@source inline("data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom");
+@source inline("data-[state=closed]:pointer-events-none! data-[state=closed]:slide-out-to-bottom");
+@source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
+@source inline("data-[state=closed]:zoom-out-[0.985] data-[state=delayed-open]:animate-in");
+@source inline("data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985]");
+@source inline("data-[state=indeterminate]:bg-accent-solid data-[state=indeterminate]:border-accent-solid");
+@source inline("data-[state=indeterminate]:text-white data-[state=open]:animate-collapsible-down");
+@source inline("data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom");
 @source inline("data-[state=open]:slide-in-from-bottom-2 data-[state=open]:slide-in-from-left");
 @source inline("data-[state=open]:slide-in-from-right data-[state=open]:zoom-in-[0.985]");
 @source inline("data-[state=unchecked]:bg-muted data-[state=unchecked]:translate-x-0 disable disabled");

package/src/styles-utilities.css

@@ -4444,6 +4444,9 @@
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
+  .data-\[state\=closed\]\:pointer-events-none\![data-state="closed"] {
+    pointer-events: none !important;
+  }
   .data-\[state\=closed\]\:animate-collapsible-up[data-state="closed"] {
     animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }