cursedbelt 5.64.0 → 5.67.0

package/src/styles-areas/place-bar.css

@@ -18,7 +18,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.
- * 31 candidate(s).
+ * 30 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
@@ -27,7 +27,7 @@
 @source inline("-mt-5 -top-1 bg-accent/15 border-l border-r 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=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
-@source inline("data-[state=open]:slide-in-from-right inset-x-3 items-stretch justify-around leading-4 left-0");
-@source inline("list-none max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
-@source inline("min-h-12 min-w-3.5 no-underline place-items-center pt-0 px-0.5 rounded-l-xl rounded-r-xl");
-@source inline("rounded-t-xl shadow-lg");
+@source inline("data-[state=open]:slide-in-from-right inset-x-3 items-stretch justify-around leading-4 list-none");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-12");
+@source inline("min-w-3.5 no-underline place-items-center pt-0 px-0.5 rounded-l-xl rounded-r-xl rounded-t-xl");
+@source inline("shadow-lg");

package/src/styles-areas/sharing.css

@@ -18,7 +18,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.
- * 30 candidate(s).
+ * 29 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
@@ -27,6 +27,6 @@
 @source inline("bg-accent/15 border-[var(--border)] border-l border-r 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=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
-@source inline("data-[state=open]:slide-in-from-right disabled:opacity-100 hover:opacity-90 left-0 left-3");
-@source inline("max-h-56 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
-@source inline("min-w-48 ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl size-9 space-y-4 w-32");
+@source inline("data-[state=open]:slide-in-from-right disabled:opacity-100 hover:opacity-90 left-3 max-h-56");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-w-48");
+@source inline("ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl size-9 space-y-4 w-32");

package/src/styles-areas/test-report.css

@@ -18,7 +18,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.
- * 24 candidate(s).
+ * 23 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
@@ -27,6 +27,6 @@
 @source inline("border-l border-r 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=open]:slide-in-from-bottom");
 @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right h-80");
-@source inline("hover:bg-muted/60 hover:no-underline last:border-0 left-0 max-h-72 max-h-96");
-@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
-@source inline("no-underline rounded-l-xl rounded-r-xl rounded-t-xl w-2");
+@source inline("hover:bg-muted/60 hover:no-underline last:border-0 max-h-72 max-h-96 max-h-[var(--sheet-h-lg)]");
+@source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm no-underline rounded-l-xl");
+@source inline("rounded-r-xl rounded-t-xl w-2");

package/src/styles-areas/wizard.css

@@ -18,7 +18,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.
- * 58 candidate(s).
+ * 57 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
@@ -33,7 +33,7 @@
 @source inline("data-[state=open]:slide-in-from-right disabled:bg-transparent disabled:opacity-100 duration-100");
 @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
 @source inline("focus-within:ring-field-ring/30 h-105 has-[[aria-invalid=true]]:border-field-error");
-@source inline("hover:border-field-ring hover:text-warning left-0 max-h-64 max-h-[var(--sheet-h-lg)]");
+@source inline("hover:border-field-ring hover:text-warning max-h-64 max-h-[var(--sheet-h-lg)]");
 @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-20 min-w-24");
 @source inline("min-w-[var(--anchor-width)] mr-1.5 mr-2 pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y");
 @source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self-stretch size-7 sm:inline");

package/src/styles-areas/workbench.css

@@ -18,7 +18,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.
- * 108 candidate(s).
+ * 107 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
@@ -32,7 +32,7 @@
 @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
 @source inline("data-[state=open]:slide-in-from-right disabled:opacity-0 duration-150 first:pt-1 flex-row");
 @source inline("group-hover:disabled:opacity-50 h-105 h-40 hover:bg-card-overlay hover:bg-muted-foreground/10");
-@source inline("hover:bg-muted/80 hover:border-field-ring hover:shadow-popover italic left-0 left-2.5");
+@source inline("hover:bg-muted/80 hover:border-field-ring hover:shadow-popover italic left-2.5");
 @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-h-full");
 @source inline("max-w-sm min-h min-h-20 min-h-8 min-h-9 min-h-dvh min-h-full min-w-20 min-w-40 opacity-100");
 @source inline("pb-0.5 pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus peer-focus:outline-none");

package/src/styles-utilities.css

@@ -3344,6 +3344,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[color\,background-color\,border-color\,box-shadow\,scale\] {
+    transition-property: color,background-color,border-color,box-shadow,scale;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,transform\] {
     transition-property: opacity,transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3359,6 +3364,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,width\] {
+    transition-property: transform,width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3400,14 +3410,30 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-\[var\(--duration-base\)\] {
+    --tw-duration: var(--duration-base);
+    transition-duration: var(--duration-base);
+  }
   .duration-\[var\(--duration-fast\)\] {
     --tw-duration: var(--duration-fast);
     transition-duration: var(--duration-fast);
   }
+  .duration-\[var\(--duration-slow\)\] {
+    --tw-duration: var(--duration-slow);
+    transition-duration: var(--duration-slow);
+  }
+  .duration-\[var\(--duration-slow\)\]\! {
+    --tw-duration: var(--duration-slow) !important;
+    transition-duration: var(--duration-slow) !important;
+  }
   .ease-\[var\(--ease-out\)\] {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .ease-\[var\(--ease-out\)\]\! {
+    --tw-ease: var(--ease-out) !important;
+    transition-timing-function: var(--ease-out) !important;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -4026,6 +4052,18 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .active\:scale-100:active {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .active\:scale-\[var\(--press-scale\)\]:active {
+    scale: var(--press-scale);
+  }
+  .active\:scale-\[var\(--press-scale-surface\)\]:active {
+    scale: var(--press-scale-surface);
+  }
   .active\:cursor-grabbing:active {
     cursor: grabbing;
   }
@@ -4082,6 +4120,12 @@
       color: var(--muted-foreground);
     }
   }
+  .disabled\:active\:scale-100:disabled:active {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .has-\[\[aria-invalid\=true\]\]\:border-field-error:has(:is([aria-invalid=true])) {
     border-color: var(--field-error);
   }
@@ -4113,6 +4157,12 @@
       background-color: transparent;
     }
   }
+  .aria-disabled\:active\:scale-100[aria-disabled="true"]:active {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .aria-pressed\:border[aria-pressed="true"] {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4215,15 +4265,27 @@
   .data-\[selected\=true\]\:text-foreground[data-selected="true"] {
     color: var(--foreground);
   }
+  .data-\[side\=bottom\]\:slide-in-from-top-1[data-side="bottom"] {
+    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
+  }
   .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
     --tw-enter-translate-y: calc(2*var(--spacing)*-1);
   }
+  .data-\[side\=left\]\:slide-in-from-right-1[data-side="left"] {
+    --tw-enter-translate-x: calc(1*var(--spacing));
+  }
   .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
     --tw-enter-translate-x: calc(2*var(--spacing));
   }
+  .data-\[side\=right\]\:slide-in-from-left-1[data-side="right"] {
+    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
+  }
   .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
     --tw-enter-translate-x: calc(2*var(--spacing)*-1);
   }
+  .data-\[side\=top\]\:slide-in-from-bottom-1[data-side="top"] {
+    --tw-enter-translate-y: calc(1*var(--spacing));
+  }
   .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
     --tw-enter-translate-y: calc(2*var(--spacing));
   }
@@ -4310,10 +4372,6 @@
     --tw-exit-opacity: calc(0/100);
     --tw-exit-opacity: 0;
   }
-  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
-    --tw-exit-scale: calc(95*1%);
-    --tw-exit-scale: .95;
-  }
   .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
     --tw-exit-translate-y: 100%;
   }
@@ -4323,6 +4381,19 @@
   .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
     --tw-exit-translate-x: 100%;
   }
+  .data-\[state\=closed\]\:zoom-out-\[0\.985\][data-state="closed"] {
+    --tw-exit-scale: 0.985;
+  }
+  .data-\[state\=delayed-open\]\:animate-in[data-state="delayed-open"] {
+    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+  .data-\[state\=delayed-open\]\:fade-in-0[data-state="delayed-open"] {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
+  }
+  .data-\[state\=delayed-open\]\:zoom-in-\[0\.985\][data-state="delayed-open"] {
+    --tw-enter-scale: 0.985;
+  }
   .data-\[state\=indeterminate\]\:border-accent-solid[data-state="indeterminate"] {
     border-color: var(--accent-solid);
   }
@@ -4342,21 +4413,20 @@
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
   }
-  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
-    --tw-enter-scale: calc(95*1%);
-    --tw-enter-scale: .95;
-  }
   .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
     --tw-enter-translate-y: 100%;
   }
+  .data-\[state\=open\]\:slide-in-from-bottom-2[data-state="open"] {
+    --tw-enter-translate-y: calc(2*var(--spacing));
+  }
   .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
     --tw-enter-translate-x: -100%;
   }
   .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
     --tw-enter-translate-x: 100%;
   }
-  .data-\[state\=open\]\:slide-in-from-top-2[data-state="open"] {
-    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+  .data-\[state\=open\]\:zoom-in-\[0\.985\][data-state="open"] {
+    --tw-enter-scale: 0.985;
   }
   .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
     --tw-translate-x: 0px;
@@ -4369,6 +4439,19 @@
     .motion-reduce\:animate-none {
       animation: none;
     }
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+    .motion-reduce\:duration-0 {
+      --tw-duration: 0ms;
+      transition-duration: 0ms;
+    }
+    .motion-reduce\:active\:scale-100:active {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
   }
   @media (width < 48rem) {
     .max-md\:absolute {
@@ -4621,14 +4704,6 @@
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
-    .sm\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
-      --tw-exit-scale: calc(95*1%);
-      --tw-exit-scale: .95;
-    }
-    .sm\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
-      --tw-enter-scale: calc(95*1%);
-      --tw-enter-scale: .95;
-    }
   }
   @media (width >= 48rem) {
     .md\:flex {
@@ -5071,6 +5146,14 @@
       }
     }
   }
+  @media (width >= 40rem) {
+    @media (pointer: fine) {
+      .sm\:pointer-fine\:text-sm {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+    }
+  }
   .\[\&_\.alert-icon\]\:text-accent .alert-icon {
     color: var(--accent);
   }
@@ -5768,11 +5851,11 @@
 /*
  * Theme variables cursedbelt's components read BY NAME (`var(--color-card)` in a style prop).
  * Tailwind emits a theme variable only when the app's own pass sees it used, and a `var()` here is
- * that use — `@source inline` cannot mark one. 10 variable(s), derived by
+ * that use — `@source inline` cannot mark one. 13 variable(s), derived by
  * scripts/generateUtilityStyles.ts → themeVariablesReadByName(). Nothing reads this property.
  */
 @layer theme {
   :root, :host {
-    --cb-theme-read-by-name: var(--color-accent) var(--color-border) var(--color-card) var(--color-muted) var(--color-popover) var(--duration-base) var(--ease-out) var(--spacing) var(--text-caption) var(--text-sm);
+    --cb-theme-read-by-name: var(--color-accent) var(--color-border) var(--color-card) var(--color-muted) var(--color-popover) var(--duration-base) var(--duration-slow) var(--ease-out) var(--press-scale) var(--press-scale-surface) var(--spacing) var(--text-caption) var(--text-sm);
   }
 }

package/src/theme.css

@@ -896,6 +896,47 @@ body {
   color: var(--foreground);
 }
 
+/*
+ * ───────────── Scrollbars: a thin capsule tinted to the pane (forge task 2912) ─────
+ *
+ * The browser's stock scrollbar is a grey trough with a grey slab in it — on Windows and
+ * Linux 15-17px of chrome down the side of every scrolling list, in the OS's colours, not
+ * the app's. Linear and Obsidian draw a thin capsule that tints toward the pane it sits on;
+ * the owner's brief (`owner-drafting-area/linear-art.md/app.css`) does the same, and so does
+ * every app that takes this stylesheet.
+ *
+ * `--scrollbar-thumb` is the token: unset, the thumb is the pane's own `--foreground` at 22%,
+ * resolved per element — so it follows `.dark`, the aurora and every look with no per-scope
+ * literal. A scope that wants another tint sets the token. `scrollbar-width`/`scrollbar-color`
+ * are the standard (Firefox, Chrome 121+, Safari 18.2+); the `::-webkit-scrollbar` rules are
+ * for the Safari that predates them, and Chrome ignores them once the standard pair is set.
+ * A Mac's overlay scrollbars keep their own behaviour — only their colour is ours.
+ *
+ * 🔴 `@layer base`, not bare: this file is unlayered, and an unlayered rule beats every
+ * layered one whatever its specificity — so a bare `*` here would have put a thumb back on
+ * every strip that hides its bar with the `[scrollbar-width:none]` utility (ChipFilterStrip,
+ * TagStrip, TopBar, SectionNav).
+ */
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, color-mix(in oklab, var(--foreground) 22%, transparent)) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb, color-mix(in oklab, var(--foreground) 22%, transparent));
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: content-box;
+  }
+}
+
 /*
  * ───────────── The native <select>'s own list, which the PAGE cannot reach ────
  *
@@ -1099,6 +1140,12 @@ option:disabled {
   --duration-fast: 120ms; /* hover / press */
   --duration-base: 200ms; /* popover */
   --duration-slow: 300ms; /* modal */
+  /* How far a control dips while it is held (Button: `active:scale-[var(--press-scale)]`). One
+     token so every pressable surface answers a finger the same amount; 1 turns it off. */
+  --press-scale: 0.97;
+  /* The same answer for a whole card or row (`CardTapTarget`): a dip is proportional to size, so
+     0.97 of a 400px card moves 12px and reads as a lurch. lib/press.ts has the contract. */
+  --press-scale-surface: 0.99;
 
   /* Fluid typography — headings only (fluid body text causes line-length drift).
      Exposed as text-h1 / text-h2 / text-h3 font-size utilities. */