@boyernick/standard-ui-react 0.4.2-canary.58 → 0.4.2-canary.59

package/package.json

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

package/src/button.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority"
-import type { ButtonHTMLAttributes, ReactNode } from "react"
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react"
 import { cn } from "./lib/cn"
 import { focusRing, focusRingDestructive } from "./lib/focus"
 
@@ -8,6 +8,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
+        glass: cn(
+          "relative isolate border border-transparent bg-transparent text-fg-scrim",
+          focusRing,
+        ),
         primary: cn(
           "border border-brand-primary-border bg-brand-primary text-brand-foreground inset-shadow-solid-top hover:bg-brand-primary-hover active:bg-brand-primary-active",
           focusRing,
@@ -83,6 +87,7 @@ export type ButtonProps = Omit<
   "prefix"
 > &
   VariantProps<typeof buttonVariants> & {
+    ref?: Ref<HTMLButtonElement>
     /** Shows a spinner, sets aria-busy, and disables the button */
     loading?: boolean
     /** Square control sized to the height of `size` — pass an icon as children */

package/src/glass.tsx

@@ -3,6 +3,9 @@
 import * as React from "react";
 import type { GlassConfig } from "./lib/liquidglass/index.js";
 import { cn } from "./lib/cn";
+import { scheduleGlassRenderer } from "./lib/glass-lifecycle";
+import { attachGlassLighting } from "./lib/glass-lighting";
+import { Button, type ButtonProps } from "./button";
 
 export type GlassState = "pending" | "live" | "off";
 
@@ -11,6 +14,8 @@ export interface GlassRootProps extends React.ComponentPropsWithoutRef<"div"> {
   defaults?: Partial<GlassConfig>;
   /** Disable WebGL rendering while preserving the underlying DOM. */
   disabled?: boolean;
+  /** Move glass-optical reflections with the pointer; respects reduced motion. */
+  interactiveLighting?: boolean;
   /** Called when the LiquidGlass renderer changes state. */
   onGlassStateChange?: (state: GlassState) => void;
 }
@@ -41,6 +46,7 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
       className,
       defaults,
       disabled = false,
+      interactiveLighting = false,
       onGlassStateChange,
       children,
       ...props
@@ -48,13 +54,22 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
     forwardedRef,
   ) {
     const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const startupRef = React.useRef<Promise<void>>(Promise.resolve());
     const stateCallbackRef = React.useRef(onGlassStateChange);
-    stateCallbackRef.current = onGlassStateChange;
+    React.useEffect(() => {
+      stateCallbackRef.current = onGlassStateChange;
+    }, [onGlassStateChange]);
 
     // GlassConfig is a flat JSON-safe object. A serialized key means callers
     // can pass an inline object without tearing down WebGL on every render.
     const defaultsKey = JSON.stringify(defaults ?? {});
 
+    React.useEffect(() => {
+      if (interactiveLighting && rootRef.current && !disabled) {
+        return attachGlassLighting(rootRef.current);
+      }
+    }, [interactiveLighting, disabled]);
+
     const setRootRef = React.useCallback(
       (node: HTMLDivElement | null) => {
         rootRef.current = node;
@@ -85,35 +100,39 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
         return;
       }
 
-      let cancelled = false;
-      let destroy: (() => void) | undefined;
-
       report("pending");
-
-      void import("./lib/liquidglass/index.js")
-        .then(({ LiquidGlass }) =>
-          LiquidGlass.init({
+      let renderer: { markChanged(): void } | undefined;
+      // Image load does not bubble and is not a DOM mutation. Lazy-loaded
+      // images otherwise leave the renderer's initial empty scene cached.
+      const refresh = () => renderer?.markChanged();
+      root.addEventListener("load", refresh, true);
+
+      const lifecycle = scheduleGlassRenderer(
+        startupRef.current,
+        async () => {
+          const { LiquidGlass } = await import("./lib/liquidglass/index.js");
+          await document.fonts.ready;
+          return LiquidGlass.init({
             root,
             glassElements,
             defaults: JSON.parse(defaultsKey) as Partial<GlassConfig>,
-          }),
-        )
-        .then((instance) => {
-          if (cancelled) {
-            instance.destroy();
-            return;
-          }
-
-          destroy = () => instance.destroy();
+          });
+        },
+        (instance) => {
+          renderer = instance;
           report("live");
-        })
-        .catch(() => {
-          if (!cancelled) report("off");
-        });
+        },
+        (error) => {
+          console.warn("GlassRoot: renderer initialization failed.", error);
+          report("off");
+        },
+      );
+      startupRef.current = lifecycle.settled;
 
       return () => {
-        cancelled = true;
-        destroy?.();
+        root.removeEventListener("load", refresh, true);
+        renderer = undefined;
+        lifecycle.dispose();
       };
     }, [defaultsKey, disabled]);
 
@@ -143,7 +162,7 @@ export const Glass = React.forwardRef<HTMLDivElement, GlassProps>(function Glass
       ref={ref}
       data-slot="glass"
       data-config={config ? JSON.stringify(config) : undefined}
-      className={cn("relative", className)}
+      className={cn("relative isolate", className)}
       {...props}
     >
       {children}
@@ -154,4 +173,29 @@ export const Glass = React.forwardRef<HTMLDivElement, GlassProps>(function Glass
 GlassRoot.displayName = "GlassRoot";
 Glass.displayName = "Glass";
 
+export interface GlassButtonProps extends Omit<ButtonProps, "variant"> {
+  config?: Partial<GlassConfig>;
+}
+
+/** A native StandardUI button, rendered as a direct child of GlassRoot. */
+export function GlassButton({ config, ...props }: GlassButtonProps) {
+  return (
+    <Button
+      {...props}
+      variant="glass"
+      data-slot="glass"
+      data-glass-radius="css"
+      data-config={JSON.stringify({
+        blurAmount: 0.12,
+        refraction: 0.25,
+        zRadius: 6,
+        chromAberration: 0.02,
+        shadowOpacity: 0.15,
+        ...config,
+        button: true,
+      })}
+    />
+  );
+}
+
 export type { GlassConfig } from "./lib/liquidglass/index.js";

package/src/index.ts

@@ -1,4 +1,9 @@
 export { Button, buttonVariants, type ButtonProps } from "./button";
+export {
+  Glass, GlassRoot, GlassButton,
+  type GlassProps, type GlassRootProps, type GlassButtonProps,
+  type GlassConfig, type GlassState,
+} from "./glass";
 export { Input, inputVariants, type InputProps } from "./input";
 export {
   Kbd,

package/src/lib/glass-lifecycle.ts

@@ -0,0 +1,33 @@
+/** Serialize renderer ownership of a root, including asynchronous startup. */
+export function scheduleGlassRenderer<T extends { destroy(): void }>(
+  previous: Promise<void>,
+  initialize: () => Promise<T>,
+  ready: (instance: T) => void,
+  failed: (error: unknown) => void,
+) {
+  let cancelled = false;
+  let instance: T | undefined;
+  const settled = previous.then(async () => {
+    if (cancelled) return;
+    try {
+      instance = await initialize();
+      if (cancelled) {
+        instance.destroy();
+        instance = undefined;
+      } else {
+        ready(instance);
+      }
+    } catch (error) {
+      if (!cancelled) failed(error);
+    }
+  });
+
+  return {
+    settled,
+    dispose() {
+      cancelled = true;
+      instance?.destroy();
+      instance = undefined;
+    },
+  };
+}

package/src/lib/glass-lighting.ts

@@ -0,0 +1,33 @@
+/** Update CSS-only reflections without re-rendering React or the WebGL scene. */
+export function attachGlassLighting(root: HTMLElement) {
+  const target = root.closest("a, button") ?? root
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
+  let frame = 0
+  const reset = () => {
+    cancelAnimationFrame(frame)
+    root.style.removeProperty("--glass-light-angle")
+    root.style.removeProperty("--glass-light-x")
+    root.style.removeProperty("--glass-light-y")
+  }
+  const move = (event: Event) => {
+    if (!(event instanceof PointerEvent) || reducedMotion.matches) return
+    const bounds = target.getBoundingClientRect()
+    const x = Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width))
+    const y = Math.min(1, Math.max(0, (event.clientY - bounds.top) / bounds.height))
+    cancelAnimationFrame(frame)
+    frame = requestAnimationFrame(() => {
+      root.style.setProperty("--glass-light-angle", `${125 + x * 35 + y * 10}deg`)
+      root.style.setProperty("--glass-light-x", `${20 + x * 40}%`)
+      root.style.setProperty("--glass-light-y", `${y * 35}%`)
+    })
+  }
+  target.addEventListener("pointermove", move)
+  target.addEventListener("pointerleave", reset)
+  reducedMotion.addEventListener("change", reset)
+  return () => {
+    reset()
+    target.removeEventListener("pointermove", move)
+    target.removeEventListener("pointerleave", reset)
+    reducedMotion.removeEventListener("change", reset)
+  }
+}

package/src/lib/liquidglass/NOTICE.md

@@ -8,3 +8,17 @@ License: MIT (as declared by the upstream package).
 `index.js` is the package's published bundled WebGL renderer. StandardUI
 vendors the build because version 1.0.3 publishes a `postinstall`
 command whose `patch-package` executable is not a runtime dependency.
+
+Local patch: `LiquidGlass.init()` destroys a partially initialized instance
+before rethrowing a startup error, releasing its canvas, listeners and WebGL
+resources.
+
+StandardUI's `data-glass-radius="css"` panes derive the shader radius from the
+computed CSS radius. Disabled buttons suppress shader hover/press feedback.
+
+Responsive images are decoded from `currentSrc` without `srcset` before canvas
+sampling. This keeps object-fit crop coordinates in resource pixels instead of
+mixing density-corrected `naturalWidth` with full-resolution canvas coordinates.
+
+Injected canvases compensate for the host's border so the rendered lens stays
+centered on bordered controls and their icons.

package/src/lib/liquidglass/index.js

@@ -1831,6 +1831,7 @@ var LiquidGlass = class _LiquidGlass {
     this.defaults = { ...DEFAULTS, ...defaults };
     this.glassSet = new Set(Array.from(glassElements || []));
     this.glassCanvases = /* @__PURE__ */ new Map();
+    this._decodedImages = /* @__PURE__ */ new WeakMap();
     this.capture = new HtmlCapture(root);
     this.capture.onCacheUpdate = (element) => {
       this._markGlassesIntersecting(element);
@@ -1852,8 +1853,13 @@ var LiquidGlass = class _LiquidGlass {
   // ────────────────────────────────────────────
   static async init(options) {
     const instance = new _LiquidGlass(options);
-    await instance._start();
-    return instance;
+    try {
+      await instance._start();
+      return instance;
+    } catch (error) {
+      instance.destroy();
+      throw error;
+    }
   }
   // ────────────────────────────────────────────
   // Lifecycle
@@ -2285,9 +2291,13 @@ var LiquidGlass = class _LiquidGlass {
       cachedEl.configCacheKey = configKey;
     }
     const config = { ...this.defaults, ...cachedEl.configCache || {} };
+    // StandardUI buttons derive the lens outline from their CSS radius token.
+    if (el.dataset.glassRadius === "css") {
+      config.cornerRadius = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+    }
     if (config.button) {
       const state = this._buttonStates.get(el);
-      if (state) {
+      if (state && !el.matches(":disabled")) {
         if (state.pressed) {
           config.zRadius = config.zRadius * 0.8;
           config.shadowSpread = config.shadowSpread * 1.2;
@@ -2325,8 +2335,10 @@ var LiquidGlass = class _LiquidGlass {
     canvas.height = Math.round((elH + padH) * dpr);
     canvas.style.cssText = [
       "position:absolute",
-      `left:${-SHADOW_PAD}px`,
-      `top:${-SHADOW_PAD}px`,
+      // Absolute children start at the padding edge. Align the lens with the
+      // outer border box used for sampling and centering the button's icon.
+      `left:${-SHADOW_PAD - el.clientLeft}px`,
+      `top:${-SHADOW_PAD - el.clientTop}px`,
       `width:${elW + padW}px`,
       `height:${elH + padH}px`,
       "pointer-events:none",
@@ -2674,8 +2686,28 @@ var LiquidGlass = class _LiquidGlass {
       targetCtx.drawImage(liveCanvas, dx, dy, dw, dh);
       return true;
     } else if (tag === "IMG") {
-      const img = el;
+      let img = el;
       if (!img.complete || img.naturalWidth === 0) return false;
+      // srcset makes naturalWidth density-corrected, but drawImage source
+      // coordinates address the resource's pixels. Decode currentSrc without
+      // srcset so object-fit cropping and canvas sampling use the same units.
+      if (img.srcset) {
+        const source = img.currentSrc || img.src;
+        let cached = this._decodedImages.get(el);
+        if (!cached || cached.source !== source) {
+          const decoded = new Image();
+          if (img.crossOrigin !== null) decoded.crossOrigin = img.crossOrigin;
+          decoded.referrerPolicy = img.referrerPolicy;
+          decoded.onload = () => {
+            if (this._running) this.markChanged(el);
+          };
+          cached = { source, image: decoded };
+          this._decodedImages.set(el, cached);
+          decoded.src = source;
+        }
+        img = cached.image;
+        if (!img.complete || img.naturalWidth === 0) return false;
+      }
       this._drawMediaFitted(
         targetCtx,
         img,

package/src/video-player.tsx

@@ -17,13 +17,14 @@ import { IconPlay } from "@central-icons-react/round-filled-radius-2-stroke-2/Ic
 import { IconVolumeFull } from "@central-icons-react/round-filled-radius-2-stroke-2/IconVolumeFull"
 import { IconVolumeOff } from "@central-icons-react/round-filled-radius-2-stroke-2/IconVolumeOff"
 import { cn } from "./lib/cn"
+import { Glass, GlassButton, GlassRoot } from "./glass"
 
 /**
  * Picture-in-Picture support is a static browser capability, not React state.
  * Reading it through an external store keeps the server snapshot `false` so
  * hydration matches, without a post-mount setState that re-renders the player.
  */
-const subscribePipSupport = () => () => {}
+const subscribePipSupport = () => () => { }
 const getPipSupported = () => document.pictureInPictureEnabled
 const getPipSupportedOnServer = () => false
 
@@ -34,26 +35,20 @@ const formatTime = (seconds: number) => {
   return `${mins}:${secs.toString().padStart(2, "0")}`
 }
 
-// The media surface is black in both themes, so everything sitting on it is
-// light regardless of the theme — semantic foreground tokens would invert and
-// disappear against the video. Buttons follow Linear’s glass chrome: circular,
-// muted until hover, no filled chip behind the icon at rest.
-/** One control, one piece of glass. Sized to 36 because a standalone floating
- *  object needs to be tappable in its own right — inside the old bar these
- *  could lean on the bar for presence and sat at 28.
- *
- *  No hover background: the material *is* the background, and a translucent
- *  white wash over it fights the fill and the rim. The lens brightens instead,
- *  by the same step as the image modal's glass controls.
- *
- *  No drop shadow on any glass here: the material draws its shape with the
- *  rim, and `shadow-lg` would add its own hairline ring over it. */
-const overlayControl =
-  "glass glass-dark [--glass-alpha:52%] inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/85 outline-none transition-[filter,color,transform] duration-[var(--duration-sm)] ease-enter hover:text-white hover:brightness-150 active:scale-95 focus-visible:text-white focus-visible:ring-2 focus-visible:ring-white/50 motion-reduce:transition-none motion-reduce:active:scale-100"
-
-/** The scrubber and its two timecodes travel together as one object. */
-const overlayTrack =
-  "glass glass-dark [--glass-alpha:52%] flex h-9 min-w-0 flex-1 items-center gap-2 rounded-full px-3"
+// All panes are direct children of the video root, sharing one WebGL context.
+const videoGlass = {
+  blurAmount: 0.08,
+  refraction: 0.12,
+  zRadius: 3,
+  chromAberration: 0,
+  brightness: -0.3,
+  edgeHighlight: 0.045,
+  specular: 0.02,
+  fresnel: 1,
+  shadowOpacity: 0.065,
+  shadowSpread: 12,
+  shadowOffsetY: 3,
+}
 
 export type VideoPlayerProps = ComponentProps<"div"> & {
   src: string
@@ -279,8 +274,17 @@ export const VideoPlayer = ({
   const loaded = duration > 0 ? (buffered / duration) * 100 : 0
   const remaining = Math.max(duration - current, 0)
 
+  const controlVisibility = cn(
+    "glass-optical glass-optical-media absolute bottom-2 transition-opacity duration-[var(--duration-md)] ease-enter group-data-[fullscreen]:bottom-5 motion-reduce:transition-none",
+    "group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto",
+    "[@media(hover:none)]:opacity-100 [@media(hover:none)]:pointer-events-auto",
+    playing ? "pointer-events-none opacity-0" : "opacity-100",
+  )
+
   return (
-    <div
+    <GlassRoot
+      interactiveLighting
+      defaults={videoGlass}
       ref={playerRef}
       data-slot="video-player"
       data-playing={playing || undefined}
@@ -313,216 +317,196 @@ export const VideoPlayer = ({
         onClick={handleTogglePlay}
       />
 
-      {/* These centred states stay inert so the video remains the click target. */}
-      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      {/* The status pane stays mounted so startup owns a stable set of panes.
+          It remains inert; clicking the video still toggles playback. */}
+      <Glass
+        data-glass-radius="css"
+        className={cn(
+          "glass-optical glass-optical-media pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-fg-scrim",
+          failed ? "max-w-sm flex-col gap-2 rounded-xl px-5 py-4 text-center" : ended ? "h-8 gap-1 rounded-full px-2.5" : "size-11 rounded-full",
+          playing && !buffering && !loading && !failed && "invisible",
+        )}
+      >
         {failed ? (
-          <div
-            role="alert"
-            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl glass glass-dark px-5 py-4 text-center text-white"
-          >
-            <IconExclamationTriangle
-              size={22}
-              mode="raw"
-              className="size-5.5"
-              aria-hidden
-            />
+          <div role="alert" className="flex flex-col items-center gap-2">
+            <IconExclamationTriangle size={22} mode="raw" aria-hidden />
             <span className="text-sm-strong">Video unavailable</span>
-            <span className="text-xs text-white/70">
-              Check the source and try again.
-            </span>
+            <span className="text-xs text-fg-scrim-secondary">Check the source and try again.</span>
           </div>
         ) : loading || buffering ? (
-          <div
-            role="status"
-            className="flex size-14 items-center justify-center rounded-full glass glass-dark text-white"
-          >
-            <span className="size-6 animate-spin rounded-full border-2 border-white/30 border-t-white motion-reduce:animate-none" />
-            <span className="sr-only">
-              {buffering ? "Buffering video" : "Loading video"}
-            </span>
+          <div role="status">
+            <span className="block size-6 animate-spin rounded-full border-2 border-fg-scrim/30 border-t-fg-scrim motion-reduce:animate-none" />
+            <span className="sr-only">{buffering ? "Buffering video" : "Loading video"}</span>
           </div>
-        ) : !playing ? (
-          <div
-            className={cn(
-              "flex items-center justify-center rounded-full glass glass-dark text-white",
-              ended ? "h-8 gap-1 px-2.5" : "size-11",
-            )}
-          >
-            <IconPlay
-              size={ended ? 12 : 18}
-              mode="raw"
-              // No nudge: Central's play glyph is already optically centred in
-              // its 24-unit box (its mass sits at x 11.7), so a margin shifts
-              // it right a second time.
-              className={cn(ended ? "size-3" : "size-4.5")}
-              aria-hidden
-            />
+        ) : (
+          <>
+            <IconPlay size={ended ? 12 : 18} mode="raw" className={ended ? "size-3" : "size-4.5"} aria-hidden />
             {ended ? <span className="text-xs-strong">Replay</span> : null}
-          </div>
-        ) : null}
-      </div>
+          </>
+        )}
+      </Glass>
 
-      {!failed && !loading ? (
-        <div
-          className={cn(
-            // A floating bar rather than a full-bleed scrim. The scrim existed
-            // to keep white controls legible over arbitrary footage; the glass
-            // material does that itself, and does it without darkening a strip
-            // of the picture the viewer is trying to watch. Inset from the
-            // edges so it reads as an object on the video rather than part of
-            // the frame.
-            "absolute inset-x-2 bottom-2 flex translate-y-0 items-center gap-2 transition-[opacity,transform] duration-[var(--duration-md)] ease-enter group-data-[fullscreen]:inset-x-5 group-data-[fullscreen]:bottom-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.
-            "[@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-100",
-            playing ? "translate-y-2 opacity-0" : "opacity-100",
-          )}
-        >
-              <button
-                type="button"
-                className={overlayControl}
-                aria-label={ended ? "Replay" : playing ? "Pause" : "Play"}
-                onClick={handleTogglePlay}
-              >
-                {playing ? (
-                  <IconPause size={14} mode="raw" className="size-3.5" aria-hidden />
-                ) : (
-                  <IconPlay size={14} mode="raw" className="size-3.5" aria-hidden />
-                )}
-              </button>
-              <button
-                type="button"
-                className={overlayControl}
-                aria-label={muted ? "Unmute" : "Mute"}
-                onClick={handleToggleMute}
-              >
-                {muted ? (
-                  <IconVolumeOff
-                    size={14}
-                    mode="raw"
-                    className="size-3.5"
-                    aria-hidden
-                  />
-                ) : (
-                  <IconVolumeFull
-                    size={14}
-                    mode="raw"
-                    className="size-3.5"
-                    aria-hidden
-                  />
-                )}
-              </button>
-            <div className={overlayTrack}>
-              <span className="text-xs min-w-9 shrink-0 tabular-nums text-white/85">
-              {formatTime(current)}
-            </span>
+      <GlassButton
+        type="button"
+        rounded
+        iconOnly
+        config={videoGlass}
+        className={cn(controlVisibility, "left-2 group-data-[fullscreen]:left-5", (failed || loading) && "invisible")}
+        aria-label={ended ? "Replay" : playing ? "Pause" : "Play"}
+        onClick={handleTogglePlay}
+      >
+        {playing ? (
+          <IconPause size={14} mode="raw" className="size-3.5" aria-hidden />
+        ) : (
+          <IconPlay size={14} mode="raw" className="size-3.5" aria-hidden />
+        )}
+      </GlassButton>
+      <GlassButton
+        type="button"
+        rounded
+        iconOnly
+        config={videoGlass}
+        className={cn(controlVisibility, "left-13 group-data-[fullscreen]:left-16", (failed || loading) && "invisible")}
+        aria-label={muted ? "Unmute" : "Mute"}
+        onClick={handleToggleMute}
+      >
+        {muted ? (
+          <IconVolumeOff
+            size={14}
+            mode="raw"
+            className="size-3.5"
+            aria-hidden
+          />
+        ) : (
+          <IconVolumeFull
+            size={14}
+            mode="raw"
+            className="size-3.5"
+            aria-hidden
+          />
+        )}
+      </GlassButton>
+      <Glass
+        data-glass-radius="css"
+        className={cn(
+          controlVisibility,
+          "left-24 flex h-9 min-w-0 items-center gap-2 rounded-full px-3 group-data-[fullscreen]:left-27",
+          pipSupported ? "right-24 group-data-[fullscreen]:right-27" : "right-13 group-data-[fullscreen]:right-16",
+          (failed || loading) && "invisible",
+        )}
+      >
+        <span className="text-xs min-w-9 shrink-0 tabular-nums text-white/85">
+          {formatTime(current)}
+        </span>
 
-            <label className="sr-only" htmlFor={seekId}>
-              Seek
-            </label>
-            <div className="group/seek relative flex h-5 min-w-0 flex-1 items-center">
-              <span
-                ref={seekPreviewRef}
-                className="text-xs pointer-events-none absolute -top-8 z-10 -translate-x-1/2 rounded-md bg-black/80 px-1.5 py-1 text-white opacity-0 shadow-sm transition-opacity duration-[var(--duration-sm)] data-[visible]:opacity-100 motion-reduce:transition-none"
-              />
-              {/* Track, buffered fill and played fill sit under the input, which
+        <label className="sr-only" htmlFor={seekId}>
+          Seek
+        </label>
+        <div className="group/seek relative flex h-5 min-w-0 flex-1 items-center">
+          <span
+            ref={seekPreviewRef}
+            className="text-xs pointer-events-none absolute -top-8 z-10 -translate-x-1/2 rounded-md bg-black/80 px-1.5 py-1 text-white opacity-0 shadow-sm transition-opacity duration-[var(--duration-sm)] data-[visible]:opacity-100 motion-reduce:transition-none"
+          />
+          {/* Track, buffered fill and played fill sit under the input, which
                   stays transparent so its thumb is the only thing it paints. */}
-              <span
-                aria-hidden
-                className="pointer-events-none absolute inset-x-0 h-0.75 rounded-full bg-white/25 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
-              />
-              <span
-                aria-hidden
-                className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white/35 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
-                style={{ width: `${loaded}%` }}
-              />
-              <span
-                aria-hidden
-                className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
-                style={{ width: `${played}%` }}
-              />
-              <input
-                id={seekId}
-                type="range"
-                min={0}
-                max={duration || 0}
-                step={0.01}
-                value={current}
-                onChange={(event) => {
-                  const value = Number(event.target.value)
-                  handleSeek(value)
-                  showSeekPreview(value)
-                }}
-                onPointerMove={(event) => {
-                  if (duration <= 0) return
-                  const rect = event.currentTarget.getBoundingClientRect()
-                  const ratio = Math.min(
-                    Math.max((event.clientX - rect.left) / rect.width, 0),
-                    1,
-                  )
-                  showSeekPreview(ratio * duration)
-                }}
-                onPointerLeave={(event) => {
-                  if (document.activeElement !== event.currentTarget) {
-                    hideSeekPreview()
-                  }
-                }}
-                onFocus={() => showSeekPreview(current)}
-                onBlur={hideSeekPreview}
-                aria-valuetext={`${formatTime(current)} of ${formatTime(duration)}`}
-                className={cn(
-                  "relative m-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-none",
-                  // Both vendor thumbs, or Firefox falls back to a default one.
-                  "[&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:scale-75 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:opacity-0 [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[opacity,transform] [&:hover::-webkit-slider-thumb]:scale-100 [&:hover::-webkit-slider-thumb]:opacity-100",
-                  "[&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:scale-75 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:opacity-0 [&::-moz-range-thumb]:transition-[opacity,transform] [&:hover::-moz-range-thumb]:scale-100 [&:hover::-moz-range-thumb]:opacity-100",
-                  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-white/70",
-                  "focus-visible:[&::-webkit-slider-thumb]:scale-100 focus-visible:[&::-webkit-slider-thumb]:opacity-100 focus-visible:[&::-moz-range-thumb]:scale-100 focus-visible:[&::-moz-range-thumb]:opacity-100",
-                )}
-              />
-            </div>
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 h-0.75 rounded-full bg-white/25 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+          />
+          <span
+            aria-hidden
+            className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white/35 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+            style={{ width: `${loaded}%` }}
+          />
+          <span
+            aria-hidden
+            className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+            style={{ width: `${played}%` }}
+          />
+          <input
+            id={seekId}
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.01}
+            value={current}
+            onChange={(event) => {
+              const value = Number(event.target.value)
+              handleSeek(value)
+              showSeekPreview(value)
+            }}
+            onPointerMove={(event) => {
+              if (duration <= 0) return
+              const rect = event.currentTarget.getBoundingClientRect()
+              const ratio = Math.min(
+                Math.max((event.clientX - rect.left) / rect.width, 0),
+                1,
+              )
+              showSeekPreview(ratio * duration)
+            }}
+            onPointerLeave={(event) => {
+              if (document.activeElement !== event.currentTarget) {
+                hideSeekPreview()
+              }
+            }}
+            onFocus={() => showSeekPreview(current)}
+            onBlur={hideSeekPreview}
+            aria-valuetext={`${formatTime(current)} of ${formatTime(duration)}`}
+            className={cn(
+              "relative m-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-none",
+              // Both vendor thumbs, or Firefox falls back to a default one.
+              "[&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:scale-75 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:opacity-0 [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[opacity,transform] [&:hover::-webkit-slider-thumb]:scale-100 [&:hover::-webkit-slider-thumb]:opacity-100",
+              "[&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:scale-75 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:opacity-0 [&::-moz-range-thumb]:transition-[opacity,transform] [&:hover::-moz-range-thumb]:scale-100 [&:hover::-moz-range-thumb]:opacity-100",
+              "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-white/70",
+              "focus-visible:[&::-webkit-slider-thumb]:scale-100 focus-visible:[&::-webkit-slider-thumb]:opacity-100 focus-visible:[&::-moz-range-thumb]:scale-100 focus-visible:[&::-moz-range-thumb]:opacity-100",
+            )}
+          />
+        </div>
 
-              <span className="text-xs min-w-10 shrink-0 text-right tabular-nums text-white/85">
-                -{formatTime(remaining)}
-              </span>
-            </div>
+        <span className="text-xs min-w-10 shrink-0 text-right tabular-nums text-white/85">
+          -{formatTime(remaining)}
+        </span>
+      </Glass>
 
-              {pipSupported ? (
-                <button
-                  type="button"
-                  className={overlayControl}
-                  aria-label={
-                    pipActive
-                      ? "Exit picture in picture"
-                      : "Picture in picture"
-                  }
-                  aria-pressed={pipActive}
-                  onClick={handlePictureInPicture}
-                >
-                  <IconPictureInPicture
-                    size={14}
-                    mode="raw"
-                    className="size-3.5"
-                    aria-hidden
-                  />
-                </button>
-              ) : null}
-              <button
-                type="button"
-                className={overlayControl}
-                aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
-                aria-pressed={fullscreen}
-                onClick={handleFullscreen}
-              >
-                <IconFullScreen
-                  size={14}
-                  mode="raw"
-                  className="size-3.5"
-                  aria-hidden
-                />
-              </button>
-        </div>
-      ) : null}
-    </div>
+
+      <GlassButton
+        type="button"
+        rounded
+        iconOnly
+        config={videoGlass}
+        className={cn(controlVisibility, "right-13 group-data-[fullscreen]:right-16", (!pipSupported || failed || loading) && "invisible")}
+        aria-label={
+          pipActive
+            ? "Exit picture in picture"
+            : "Picture in picture"
+        }
+        aria-pressed={pipActive}
+        onClick={handlePictureInPicture}
+      >
+        <IconPictureInPicture
+          size={14}
+          mode="raw"
+          className="size-3.5"
+          aria-hidden
+        />
+      </GlassButton>
+      <GlassButton
+        type="button"
+        rounded
+        iconOnly
+        config={videoGlass}
+        className={cn(controlVisibility, "right-2 group-data-[fullscreen]:right-5", (failed || loading) && "invisible")}
+        aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
+        aria-pressed={fullscreen}
+        onClick={handleFullscreen}
+      >
+        <IconFullScreen
+          size={14}
+          mode="raw"
+          className="size-3.5"
+          aria-hidden
+        />
+      </GlassButton>
+    </GlassRoot>
   )
 }