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

package/src/lib/lens-glass/shader.ts

@@ -0,0 +1,138 @@
+export const VERTEX_SHADER = `
+attribute vec2 a_position;
+varying vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+/**
+ * One pane, drawn into its own output rectangle. Coordinates are CSS pixels
+ * with y down: `u_origin` is the output's top-left in scene space, and the
+ * pane is centred on `u_center` with half-size `u_half`.
+ */
+export const FRAGMENT_SHADER = `
+precision highp float;
+varying vec2 v_uv;
+
+uniform sampler2D u_scene;
+uniform vec2 u_sceneSize;
+uniform vec2 u_origin;
+uniform vec2 u_outSize;
+uniform vec2 u_center;
+uniform vec2 u_half;
+uniform float u_dpr;
+
+uniform float u_radius;
+uniform float u_power;
+uniform float u_bezel;
+uniform float u_bend;
+uniform float u_dispersionRed;
+uniform float u_dispersionBlue;
+uniform float u_rim;
+uniform float u_rimWidth;
+uniform float u_specular;
+uniform float u_frost;
+uniform float u_grain;
+uniform float u_dim;
+uniform float u_fadeStart;
+uniform float u_fadeEnd;
+uniform float u_shadow;
+uniform float u_hover;
+uniform float u_press;
+
+// A rounded rectangle whose corners are superellipses. Power 2 is a circular
+// arc; around 4 is the continuous "squircle" corner.
+float sdPane(vec2 p) {
+  float r = min(u_radius, min(u_half.x, u_half.y));
+  vec2 q = abs(p) - u_half + r;
+  vec2 m = max(q, 0.0);
+  float corner = u_power == 2.0
+    ? length(m)
+    : pow(pow(m.x, u_power) + pow(m.y, u_power), 1.0 / u_power);
+  return corner + min(max(q.x, q.y), 0.0) - r;
+}
+
+vec2 outwardNormal(vec2 p) {
+  float e = 0.5;
+  vec2 g = vec2(
+    sdPane(p + vec2(e, 0.0)) - sdPane(p - vec2(e, 0.0)),
+    sdPane(p + vec2(0.0, e)) - sdPane(p - vec2(0.0, e))
+  );
+  float l = length(g);
+  return l > 1e-5 ? g / l : vec2(0.0);
+}
+
+vec3 ground(vec2 scenePx) {
+  vec2 uv = clamp(scenePx / u_sceneSize, vec2(0.0), vec2(1.0));
+  return texture2D(u_scene, uv).rgb;
+}
+
+// Frost: 16 taps on a golden-angle spiral out to about two sigma.
+vec3 frosted(vec2 scenePx) {
+  if (u_frost < 0.05) return ground(scenePx);
+  vec3 sum = vec3(0.0);
+  float weights = 0.0;
+  for (int i = 0; i < 16; i++) {
+    float fi = float(i);
+    float r = sqrt((fi + 0.5) / 16.0) * 2.0 * u_frost;
+    float a = fi * 2.39996323;
+    float w = exp(-(r * r) / (2.0 * u_frost * u_frost));
+    sum += ground(scenePx + vec2(cos(a), sin(a)) * r) * w;
+    weights += w;
+  }
+  return sum / weights;
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+  vec2 scenePx = u_origin + vec2(v_uv.x, 1.0 - v_uv.y) * u_outSize;
+  vec2 p = scenePx - u_center;
+  float d = sdPane(p);
+
+  // Outside: only a soft contact shadow, heavier below the pane.
+  if (d > 0.0) {
+    float below = smoothstep(-0.6, 0.8, p.y / max(u_half.y, 1.0));
+    float shadow = u_shadow * (1.0 - 0.35 * u_press) * exp(-(d * d) / 40.0) * below;
+    gl_FragColor = vec4(0.0, 0.0, 0.0, shadow);
+    return;
+  }
+
+  float inside = -d;
+  vec2 n = outwardNormal(p);
+
+  // The bezel bends the ground outward across its width: the pane shows what
+  // lies just past its edge, compressed into the band, as a thick lens does.
+  float t = u_bezel > 0.0 ? clamp(1.0 - inside / u_bezel, 0.0, 1.0) : 0.0;
+  float profile = t * t * (3.0 - 2.0 * t);
+  vec2 offset = n * u_bend * (1.0 - 0.35 * u_press) * profile;
+
+  vec3 color = vec3(
+    frosted(scenePx + offset * u_dispersionRed).r,
+    frosted(scenePx + offset).g,
+    frosted(scenePx + offset * u_dispersionBlue).b
+  );
+  color *= u_dim + 0.06 * u_hover;
+
+  // Rim light, strongest where the edge faces the light (top left), and a
+  // sheen across the lit side of the bezel.
+  vec2 light = normalize(vec2(-0.55, -1.0));
+  float facing = max(dot(n, light), 0.0);
+  float rim = 1.0 - smoothstep(0.0, u_rimWidth, inside);
+  color += u_rim * (1.0 + 0.4 * u_hover) * rim * (0.55 + 0.45 * facing);
+  color += u_specular * 0.35 * pow(t, 3.0) * facing;
+
+  // Grain, fixed to the device pixel grid so a still pane never needs redrawing.
+  color += (hash(floor(scenePx * u_dpr)) - 0.5) * u_grain;
+
+  // Optional fade down the pane.
+  float yFrac = (p.y + u_half.y) / (2.0 * u_half.y);
+  float fade = u_fadeEnd > u_fadeStart ? 1.0 - smoothstep(u_fadeStart, u_fadeEnd, yFrac) : 1.0;
+  color = mix(ground(scenePx), color, fade);
+
+  float coverage = clamp(inside * u_dpr + 0.5, 0.0, 1.0);
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), coverage);
+}`;

package/src/lib/media-glass.ts

@@ -0,0 +1,12 @@
+import type { GlassConfig } from "./lens-glass/config";
+
+/**
+ * Shared material for controls over images and video. Their icons are white
+ * (`text-fg-scrim`), so the ground is dimmed further than the default to keep
+ * them legible over a bright frame, and frosted a little more.
+ */
+export const mediaGlass: GlassConfig = {
+  dim: 0.62,
+  frost: 4,
+  shadow: 0.2,
+}

package/src/modal.tsx

@@ -14,7 +14,9 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react"
-import { Button, buttonVariants } from "./button"
+import { buttonVariants } from "./button"
+import { GlassButton, GlassRoot } from "./glass"
+import { mediaGlass } from "./lib/media-glass"
 import {
   Carousel,
   CarouselContent,
@@ -51,10 +53,9 @@ import {
 const TRACKPAD_LABEL =
   "Swipe, use the arrow keys, or use the controls to navigate"
 
-// Glass takes a glass hover: the lens brightens. The ghost button's own
-// hover fill is a page grey and is cleared, or it shows through the body.
+// Match the video controls while preserving the image viewer focus treatment.
 const modalControlClassName =
-  "glass glass-dark hover:bg-transparent hover:brightness-150 text-fg-scrim hover:text-fg-scrim outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-scrim focus-visible:ring-ring/20"
+  "glass-optical glass-optical-media text-fg-scrim hover:text-fg-scrim outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-scrim focus-visible:ring-ring/20"
 
 export const modalContentVariants = cva(
   "h-dvh max-h-dvh w-screen max-w-none gap-0 overflow-hidden rounded-none border-0 bg-transparent p-0 shadow-none max-sm:max-w-none",
@@ -249,11 +250,14 @@ const ModalDownload = ({
   <ModalControlTooltip label="Download image">
     <a
       href={src}
+      data-slot="glass"
+      data-glass-radius="css"
+      data-config={JSON.stringify({ ...mediaGlass, button: true })}
       download={name ?? ""}
       aria-label="Download image"
       className={cn(
         buttonVariants({
-          variant: "ghost",
+          variant: "glass",
           size: "md",
           rounded: true,
           iconOnly: true,
@@ -273,9 +277,9 @@ const ModalDismiss = () => (
   <ModalControlTooltip label="Close image">
     <DialogClose
       render={
-        <Button
+        <GlassButton
           type="button"
-          variant="ghost"
+          config={mediaGlass}
           size="md"
           iconOnly
           rounded
@@ -322,22 +326,24 @@ export const ModalContent = ({
       {...props}
     >
       <TooltipProvider delay={250}>
-        <ModalBackground src={src} />
-        <DialogTitle className="sr-only">{alt}</DialogTitle>
-        <div
-          data-slot="modal-stage"
-          className="relative z-10 flex size-full flex-col items-center justify-center p-4"
-        >
-          <ModalImage src={src} alt={alt} imgProps={imgProps} />
-          {variant === "caption" && (caption || children) ? (
-            <ModalCaption>{caption ?? children}</ModalCaption>
-          ) : null}
-        </div>
-        <ModalDismiss />
-        <ModalDownload
-          src={downloadSrc ?? src}
-          name={downloadName}
-        />
+        <GlassRoot interactiveLighting defaults={mediaGlass} className="size-full [--glass-ground:var(--color-surface-scrim)]">
+          <ModalBackground src={src} />
+          <DialogTitle className="sr-only">{alt}</DialogTitle>
+          <div
+            data-slot="modal-stage"
+            className="relative z-10 flex size-full flex-col items-center justify-center p-4"
+          >
+            <ModalImage src={src} alt={alt} imgProps={imgProps} />
+            {variant === "caption" && (caption || children) ? (
+              <ModalCaption>{caption ?? children}</ModalCaption>
+            ) : null}
+          </div>
+          <ModalDismiss />
+          <ModalDownload
+            src={downloadSrc ?? src}
+            name={downloadName}
+          />
+        </GlassRoot>
       </TooltipProvider>
     </DialogPopup>
   </DialogPortal>
@@ -493,99 +499,101 @@ const GalleryContent = ({
         )}
       >
         <TooltipProvider delay={250}>
-          <ModalBackground src={activeImage.src} />
-          <DialogTitle className="sr-only">{activeImage.alt}</DialogTitle>
-          <p className="sr-only" aria-live="polite">
-            Image {activeIndex + 1} of {images.length}. {TRACKPAD_LABEL}.
-          </p>
-          <div className="relative z-10 flex size-full flex-col gap-4 p-4">
-            <Carousel
-              setApi={setApi}
-              opts={{ loop, startIndex: activeIndex, duration: 24, dragFree: false }}
-              data-slot="modal-stage"
-              className="relative min-h-0 w-full min-w-0 flex-1 [&_[data-slot=carousel-viewport]]:h-full [&_[data-slot=carousel-viewport]]:min-h-0"
-              aria-label="Gallery"
-            >
-              <CarouselContent className="h-full !ml-0 !pr-0">
-                {images.map((image, index) => (
-                  <CarouselItem
-                    key={`${image.src}-${index}`}
-                    className="!basis-full flex h-full min-h-0 flex-col items-center justify-center !pl-0"
-                    aria-label={`${index + 1} of ${images.length}`}
-                  >
-                    <div className="flex max-h-full min-h-0 w-full flex-col items-center justify-center">
-                      <div className="flex min-h-0 w-full items-center justify-center overflow-hidden">
-                        <ModalImage
-                          {...image}
-                          fit="contain"
-                          imgProps={{
-                            ...image.imgProps,
-                            className: cn(
-                              "max-w-[min(94vw,72rem)]",
-                              image.imgProps?.className,
-                            ),
-                          }}
-                        />
+          <GlassRoot interactiveLighting defaults={mediaGlass} className="size-full [--glass-ground:var(--color-surface-scrim)]">
+            <ModalBackground src={activeImage.src} />
+            <DialogTitle className="sr-only">{activeImage.alt}</DialogTitle>
+            <p className="sr-only" aria-live="polite">
+              Image {activeIndex + 1} of {images.length}. {TRACKPAD_LABEL}.
+            </p>
+            <div className="relative z-10 flex size-full flex-col gap-4 p-4">
+              <Carousel
+                setApi={setApi}
+                opts={{ loop, startIndex: activeIndex, duration: 24, dragFree: false }}
+                data-slot="modal-stage"
+                className="relative min-h-0 w-full min-w-0 flex-1 [&_[data-slot=carousel-viewport]]:h-full [&_[data-slot=carousel-viewport]]:min-h-0"
+                aria-label="Gallery"
+              >
+                <CarouselContent className="h-full !ml-0 !pr-0">
+                  {images.map((image, index) => (
+                    <CarouselItem
+                      key={`${image.src}-${index}`}
+                      className="!basis-full flex h-full min-h-0 flex-col items-center justify-center !pl-0"
+                      aria-label={`${index + 1} of ${images.length}`}
+                    >
+                      <div className="flex max-h-full min-h-0 w-full flex-col items-center justify-center">
+                        <div className="flex min-h-0 w-full items-center justify-center overflow-hidden">
+                          <ModalImage
+                            {...image}
+                            fit="contain"
+                            imgProps={{
+                              ...image.imgProps,
+                              className: cn(
+                                "max-w-[min(94vw,72rem)]",
+                                image.imgProps?.className,
+                              ),
+                            }}
+                          />
+                        </div>
+                        {variant === "caption" && image.caption ? (
+                          <ModalCaption>{image.caption}</ModalCaption>
+                        ) : null}
                       </div>
-                      {variant === "caption" && image.caption ? (
-                        <ModalCaption>{image.caption}</ModalCaption>
-                      ) : null}
-                    </div>
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-            </Carousel>
-            <GalleryFilmstrip
-              images={images}
-              activeIndex={activeIndex}
-              onSelect={handleSelect}
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+              <GalleryFilmstrip
+                images={images}
+                activeIndex={activeIndex}
+                onSelect={handleSelect}
+              />
+            </div>
+            <ModalDismiss />
+            <ModalDownload
+              src={activeImage.downloadSrc ?? activeImage.src}
+              name={activeImage.downloadName}
             />
-          </div>
-          <ModalDismiss />
-          <ModalDownload
-            src={activeImage.downloadSrc ?? activeImage.src}
-            name={activeImage.downloadName}
-          />
-          {images.length > 1 ? (
-            <>
-              <ModalControlTooltip label="Previous image" side="right">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="lg"
-                  iconOnly
-                  rounded
-                  aria-label="Previous image"
-                  disabled={!loop && !api?.canScrollPrev()}
-                  onClick={() => api?.scrollPrev()}
-                  className={cn(
-                    modalControlClassName,
-                    "absolute top-1/2 left-4 z-20 -translate-y-1/2 active:!-translate-y-1/2",
-                  )}
-                >
-                  <IconChevronRightSmall className="rotate-180" aria-hidden />
-                </Button>
-              </ModalControlTooltip>
-              <ModalControlTooltip label="Next image" side="left">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="lg"
-                  iconOnly
-                  rounded
-                  aria-label="Next image"
-                  disabled={!loop && !api?.canScrollNext()}
-                  onClick={() => api?.scrollNext()}
-                  className={cn(
-                    modalControlClassName,
-                    "absolute top-1/2 right-4 z-20 -translate-y-1/2 active:!-translate-y-1/2",
-                  )}
-                >
-                  <IconChevronRightSmall aria-hidden />
-                </Button>
-              </ModalControlTooltip>
-            </>
-          ) : null}
+            {images.length > 1 ? (
+              <>
+                <ModalControlTooltip label="Previous image" side="right">
+                  <GlassButton
+                    type="button"
+                    config={mediaGlass}
+                    size="lg"
+                    iconOnly
+                    rounded
+                    aria-label="Previous image"
+                    disabled={!loop && !api?.canScrollPrev()}
+                    onClick={() => api?.scrollPrev()}
+                    className={cn(
+                      modalControlClassName,
+                      "absolute top-1/2 left-4 z-20 -translate-y-1/2 active:!-translate-y-1/2",
+                    )}
+                  >
+                    <IconChevronRightSmall className="rotate-180" aria-hidden />
+                  </GlassButton>
+                </ModalControlTooltip>
+                <ModalControlTooltip label="Next image" side="left">
+                  <GlassButton
+                    type="button"
+                    config={mediaGlass}
+                    size="lg"
+                    iconOnly
+                    rounded
+                    aria-label="Next image"
+                    disabled={!loop && !api?.canScrollNext()}
+                    onClick={() => api?.scrollNext()}
+                    className={cn(
+                      modalControlClassName,
+                      "absolute top-1/2 right-4 z-20 -translate-y-1/2 active:!-translate-y-1/2",
+                    )}
+                  >
+                    <IconChevronRightSmall aria-hidden />
+                  </GlassButton>
+                </ModalControlTooltip>
+              </>
+            ) : null}
+          </GlassRoot>
         </TooltipProvider>
       </DialogPopup>
     </DialogPortal>

package/src/video-player.tsx

@@ -18,6 +18,7 @@ import { IconVolumeFull } from "@central-icons-react/round-filled-radius-2-strok
 import { IconVolumeOff } from "@central-icons-react/round-filled-radius-2-stroke-2/IconVolumeOff"
 import { cn } from "./lib/cn"
 import { Glass, GlassButton, GlassRoot } from "./glass"
+import { mediaGlass } from "./lib/media-glass"
 
 /**
  * Picture-in-Picture support is a static browser capability, not React state.
@@ -36,19 +37,7 @@ const formatTime = (seconds: number) => {
 }
 
 // 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
@@ -284,7 +273,7 @@ export const VideoPlayer = ({
   return (
     <GlassRoot
       interactiveLighting
-      defaults={videoGlass}
+      defaults={mediaGlass}
       ref={playerRef}
       data-slot="video-player"
       data-playing={playing || undefined}
@@ -350,7 +339,7 @@ export const VideoPlayer = ({
         type="button"
         rounded
         iconOnly
-        config={videoGlass}
+        config={mediaGlass}
         className={cn(controlVisibility, "left-2 group-data-[fullscreen]:left-5", (failed || loading) && "invisible")}
         aria-label={ended ? "Replay" : playing ? "Pause" : "Play"}
         onClick={handleTogglePlay}
@@ -365,7 +354,7 @@ export const VideoPlayer = ({
         type="button"
         rounded
         iconOnly
-        config={videoGlass}
+        config={mediaGlass}
         className={cn(controlVisibility, "left-13 group-data-[fullscreen]:left-16", (failed || loading) && "invisible")}
         aria-label={muted ? "Unmute" : "Mute"}
         onClick={handleToggleMute}
@@ -473,7 +462,7 @@ export const VideoPlayer = ({
         type="button"
         rounded
         iconOnly
-        config={videoGlass}
+        config={mediaGlass}
         className={cn(controlVisibility, "right-13 group-data-[fullscreen]:right-16", (!pipSupported || failed || loading) && "invisible")}
         aria-label={
           pipActive
@@ -494,7 +483,7 @@ export const VideoPlayer = ({
         type="button"
         rounded
         iconOnly
-        config={videoGlass}
+        config={mediaGlass}
         className={cn(controlVisibility, "right-2 group-data-[fullscreen]:right-5", (failed || loading) && "invisible")}
         aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
         aria-pressed={fullscreen}

package/src/lib/liquidglass/NOTICE.md

@@ -1,24 +0,0 @@
-# LiquidGlass
-
-Vendored from `@ybouane/liquidglass@1.0.3`.
-
-Source: https://github.com/ybouane/liquidglass
-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.d.ts

@@ -1,45 +0,0 @@
-/**
- * Type surface for the vendored @ybouane/liquidglass 1.0.3 renderer.
- * Source: https://github.com/ybouane/liquidglass
- * License: MIT
- */
-
-export interface GlassConfig {
-  blurAmount: number;
-  refraction: number;
-  chromAberration: number;
-  edgeHighlight: number;
-  specular: number;
-  fresnel: number;
-  distortion: number;
-  cornerRadius: number;
-  zRadius: number;
-  opacity: number;
-  saturation: number;
-  tintStrength: number;
-  brightness: number;
-  shadowOpacity: number;
-  shadowSpread: number;
-  shadowOffsetY: number;
-  floating: boolean;
-  button: boolean;
-  bevelMode: number;
-}
-
-export interface LiquidGlassOptions {
-  root: HTMLElement;
-  glassElements?: NodeListOf<HTMLElement> | HTMLElement[];
-  defaults?: Partial<GlassConfig>;
-}
-
-export declare class LiquidGlass {
-  static init(options: LiquidGlassOptions): Promise<LiquidGlass>;
-  readonly root: HTMLElement;
-  readonly defaults: GlassConfig;
-  fps: number;
-  destroy(): void;
-  markChanged(element?: HTMLElement): void;
-}
-
-export declare const DEFAULTS: GlassConfig;
-export declare function invalidateFontEmbedCache(): void;