@boyernick/standard-ui-react 0.2.1-canary.35 → 0.2.1-canary.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.2.1-canary.35",
+  "version": "0.2.1-canary.36",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/block-editor.tsx

@@ -641,6 +641,7 @@ export const BlockEditor = ({
     handle: HTMLElement
   } | null>(null)
   const editorRef = useRef<HTMLDivElement>(null)
+  const slashPopupRef = useRef<HTMLDivElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
 
   const setBlocks = useCallback(
@@ -1051,17 +1052,16 @@ export const BlockEditor = ({
 
   const openCommands = slash ? filterCommands(slash.query) : []
 
+  // The menu tracks a slash query the caret is sitting in, so any pointer down
+  // that moves the caret elsewhere has to take the menu with it — a different
+  // block, the blank canvas below the last one, or the page around the editor.
+  // Only the menu's own surface is exempt: closing on `mousedown` inside it
+  // would unmount the item before its click ever lands.
   useEffect(() => {
     if (!slash) return
     const handlePointer = (event: MouseEvent) => {
       if (!(event.target instanceof Node)) return
-      if (editorRef.current?.contains(event.target)) return
-      if (
-        event.target instanceof Element &&
-        event.target.closest("[data-slot=menu-popup], [role=menu]")
-      ) {
-        return
-      }
+      if (slashPopupRef.current?.contains(event.target)) return
       setSlash(null)
     }
     document.addEventListener("mousedown", handlePointer)
@@ -1699,6 +1699,7 @@ export const BlockEditor = ({
 
       {slash ? (
         <div
+          ref={slashPopupRef}
           role="listbox"
           aria-label="Insert block"
           style={{ top: slash.top + 8, left: slash.left }}

package/src/video-player.tsx

@@ -344,7 +344,14 @@ export const VideoPlayer = ({
       {!failed && !loading ? (
         <div
           className={cn(
-            "absolute inset-x-0 bottom-0 flex translate-y-0 flex-col bg-gradient-to-t from-black/80 via-black/40 to-transparent px-2.5 pt-14 pb-2.5 transition-[opacity,transform] duration-[var(--duration-md)] ease-enter group-data-[fullscreen]:px-5 group-data-[fullscreen]:pb-5 motion-reduce:transition-none",
+            // The scrim samples 0.8 → 0 along smootherstep
+            // (`6t⁵ − 15t⁴ + 10t³`) rather than using a three-stop gradient.
+            // Three stops are a run of straight segments, and the eye reads
+            // every slope change between them as a seam; flat or evenly lit
+            // footage shows those plainly. This curve is flat at both ends
+            // instead — no edge where the scrim starts, no corner where it
+            // reaches full strength behind the controls.
+            "absolute inset-x-0 bottom-0 flex translate-y-0 flex-col bg-[linear-gradient(to_top,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.79)_12.5%,rgba(0,0,0,0.72)_25%,rgba(0,0,0,0.58)_37.5%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.22)_62.5%,rgba(0,0,0,0.08)_75%,rgba(0,0,0,0.01)_87.5%,transparent_100%)] px-2.5 pt-14 pb-2.5 transition-[opacity,transform] duration-[var(--duration-md)] ease-enter group-data-[fullscreen]:px-5 group-data-[fullscreen]:pb-5 motion-reduce:transition-none",
             "group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100",
             // Nothing hovers on a touch screen, so the chrome would never come
             // back once playback started. Keep it visible there instead.