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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.57",
+  "version": "0.4.2-canary.59",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,10 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./glass": {
+      "types": "./src/glass.tsx",
+      "default": "./src/glass.tsx"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {

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

@@ -0,0 +1,201 @@
+"use client";
+
+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";
+
+export interface GlassRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Default LiquidGlass shader configuration shared by direct Glass children. */
+  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;
+}
+
+export interface GlassProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Per-pane LiquidGlass shader configuration. */
+  config?: Partial<GlassConfig>;
+}
+
+function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A positioned rendering root for LiquidGlass.
+ *
+ * Glass panes must be direct children of this element. Background content must
+ * also live inside the root because LiquidGlass samples the root's children,
+ * not the root's own background.
+ */
+export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
+  function GlassRoot(
+    {
+      className,
+      defaults,
+      disabled = false,
+      interactiveLighting = false,
+      onGlassStateChange,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const startupRef = React.useRef<Promise<void>>(Promise.resolve());
+    const stateCallbackRef = React.useRef(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;
+        setForwardedRef(forwardedRef, node);
+      },
+      [forwardedRef],
+    );
+
+    React.useEffect(() => {
+      const root = rootRef.current;
+      const report = (state: GlassState) => {
+        root?.setAttribute("data-glass-state", state);
+        stateCallbackRef.current?.(state);
+      };
+
+      if (!root || disabled) {
+        report("off");
+        return;
+      }
+
+      const glassElements = Array.from(root.children).filter(
+        (element): element is HTMLElement =>
+          element instanceof HTMLElement && element.dataset.slot === "glass",
+      );
+
+      if (glassElements.length === 0) {
+        report("off");
+        return;
+      }
+
+      report("pending");
+      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>,
+          });
+        },
+        (instance) => {
+          renderer = instance;
+          report("live");
+        },
+        (error) => {
+          console.warn("GlassRoot: renderer initialization failed.", error);
+          report("off");
+        },
+      );
+      startupRef.current = lifecycle.settled;
+
+      return () => {
+        root.removeEventListener("load", refresh, true);
+        renderer = undefined;
+        lifecycle.dispose();
+      };
+    }, [defaultsKey, disabled]);
+
+    return (
+      <div
+        ref={setRootRef}
+        data-slot="glass-root"
+        className={cn("relative", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/**
+ * A LiquidGlass pane. It must be rendered as a direct child of GlassRoot.
+ * `config` maps directly to LiquidGlass's per-element `data-config` JSON.
+ */
+export const Glass = React.forwardRef<HTMLDivElement, GlassProps>(function Glass(
+  { className, config, children, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="glass"
+      data-config={config ? JSON.stringify(config) : undefined}
+      className={cn("relative isolate", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+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

@@ -0,0 +1,24 @@
+# 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

@@ -0,0 +1,45 @@
+/**
+ * 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;