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

package/package.json

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

package/src/carousel.tsx

@@ -562,19 +562,7 @@ export const CarouselDots = ({ className, ...props }: CarouselDotsProps) => {
         <Glass
           data-glass-radius="css"
           className="glass-optical flex items-center gap-1 rounded-full px-3 py-2.5"
-          config={{
-            blurAmount: 0,
-            refraction: 0.12,
-            zRadius: 3,
-            chromAberration: 0,
-            tintStrength: 0,
-            edgeHighlight: 0.045,
-            specular: 0.02,
-            fresnel: 1,
-            shadowOpacity: 0.065,
-            shadowSpread: 12,
-            shadowOffsetY: 3,
-          }}
+          config={{ shadow: 0.06 }}
         >
           {scrollSnaps.map((_, index) => {
             const isSelected = index === selectedIndex

package/src/glass.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import type { GlassConfig } from "./lib/liquidglass/index.js";
+import type { GlassConfig } from "./lib/lens-glass/config";
 import { cn } from "./lib/cn";
 import { scheduleGlassRenderer } from "./lib/glass-lifecycle";
 import { attachGlassLighting } from "./lib/glass-lighting";
@@ -10,19 +10,19 @@ 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>;
+  /** Default glass material configuration shared by direct Glass children. */
+  defaults?: 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. */
+  /** Called when the glass renderer changes state. */
   onGlassStateChange?: (state: GlassState) => void;
 }
 
 export interface GlassProps extends React.ComponentPropsWithoutRef<"div"> {
-  /** Per-pane LiquidGlass shader configuration. */
-  config?: Partial<GlassConfig>;
+  /** Per-pane glass material configuration. */
+  config?: GlassConfig;
 }
 
 function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
@@ -34,11 +34,13 @@ function setForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
 }
 
 /**
- * A positioned rendering root for LiquidGlass.
+ * A positioned rendering root for the glass material.
  *
- * 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.
+ * Glass panes must be direct children of this element. Each pane refracts the
+ * images, video and canvases inside the root that are behind it, drawn where
+ * they are each frame, over the root's children's backgrounds and a ground
+ * colour: `--glass-ground` on the root, else the nearest opaque ancestor
+ * background.
  */
 export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
   function GlassRoot(
@@ -101,27 +103,18 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
       }
 
       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({
+          const { createLensGlass } = await import("./lib/lens-glass/renderer");
+          return createLensGlass({
             root,
             glassElements,
-            defaults: JSON.parse(defaultsKey) as Partial<GlassConfig>,
+            defaults: JSON.parse(defaultsKey) as GlassConfig,
           });
         },
-        (instance) => {
-          renderer = instance;
-          report("live");
-        },
+        () => report("live"),
         (error) => {
           console.warn("GlassRoot: renderer initialization failed.", error);
           report("off");
@@ -129,11 +122,7 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
       );
       startupRef.current = lifecycle.settled;
 
-      return () => {
-        root.removeEventListener("load", refresh, true);
-        renderer = undefined;
-        lifecycle.dispose();
-      };
+      return () => lifecycle.dispose();
     }, [defaultsKey, disabled]);
 
     return (
@@ -150,8 +139,8 @@ export const GlassRoot = React.forwardRef<HTMLDivElement, GlassRootProps>(
 );
 
 /**
- * A LiquidGlass pane. It must be rendered as a direct child of GlassRoot.
- * `config` maps directly to LiquidGlass's per-element `data-config` JSON.
+ * A glass pane. It must be rendered as a direct child of GlassRoot.
+ * `config` is serialized to the pane's `data-config` attribute.
  */
 export const Glass = React.forwardRef<HTMLDivElement, GlassProps>(function Glass(
   { className, config, children, ...props },
@@ -174,7 +163,7 @@ GlassRoot.displayName = "GlassRoot";
 Glass.displayName = "Glass";
 
 export interface GlassButtonProps extends Omit<ButtonProps, "variant"> {
-  config?: Partial<GlassConfig>;
+  config?: GlassConfig;
 }
 
 /** A native StandardUI button, rendered as a direct child of GlassRoot. */
@@ -185,17 +174,9 @@ export function GlassButton({ config, ...props }: GlassButtonProps) {
       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,
-      })}
+      data-config={JSON.stringify({ ...config, button: true })}
     />
   );
 }
 
-export type { GlassConfig } from "./lib/liquidglass/index.js";
+export type { GlassConfig } from "./lib/lens-glass/config";

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

@@ -0,0 +1,225 @@
+/**
+ * The StandardUI glass material: a lens with a refracting bezel, colour
+ * dispersion, a lit rim, frost and grain, over a dimmed ground.
+ *
+ * Every length is in CSS pixels. Unset values scale with the pane, so the
+ * same material reads on a 36px icon button and a 400px panel.
+ */
+export interface GlassConfig {
+  /** Width of the refracting band inside the edge. Default: 30% of the short side, at most 48. */
+  bezel?: number;
+  /** How far the bezel bends the ground, at the rim. Default: ¾ of the bezel. */
+  bend?: number;
+  /** Red channel's share of the bend (colour dispersion). Default 1.2. */
+  dispersionRed?: number;
+  /** Blue channel's share of the bend. Default 0.8. */
+  dispersionBlue?: number;
+  /** Rim light intensity. Default 0.5. */
+  rim?: number;
+  /** Rim light width. Default 3.5, less on small panes. */
+  rimWidth?: number;
+  /** Specular sheen on the lit side of the bezel. Default 0.35. */
+  specular?: number;
+  /** Frost blur, as a Gaussian sigma. Default 3. */
+  frost?: number;
+  /** Film grain. Default 0.07. */
+  grain?: number;
+  /** Multiplier on the ground seen through the glass (1 = undimmed). Default 0.8. */
+  dim?: number;
+  /** Fraction of the height where the glass starts fading out. Default 1 (no fade). */
+  fadeStart?: number;
+  /** Fraction of the height where the glass has faded out. Default 1 (no fade). */
+  fadeEnd?: number;
+  /** Contact shadow under the pane. Default 0.18. */
+  shadow?: number;
+  /**
+   * Corner radius. Default: the element's computed border radius.
+   */
+  cornerRadius?: number;
+  /**
+   * Corner shape: 2 is a circular arc, ~4.2 a continuous "squircle" corner.
+   * Fully rounded panes (circles and pills) are always circular. Default 4.2.
+   */
+  cornerPower?: number;
+  /** Hover brightens the rim; pressing flattens the bend. Default false. */
+  button?: boolean;
+
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  blurAmount?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  refraction?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  chromAberration?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  edgeHighlight?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  fresnel?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  distortion?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  zRadius?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  opacity?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  saturation?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  tintStrength?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  brightness?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  shadowOpacity?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  shadowSpread?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  shadowOffsetY?: number;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  floating?: boolean;
+  /** @deprecated LiquidGlass option, ignored by the lens material. */
+  bevelMode?: number;
+}
+
+/** Everything the shader needs for one pane, fully resolved. */
+export interface ResolvedGlass {
+  width: number;
+  height: number;
+  radius: number;
+  power: number;
+  bezel: number;
+  bend: number;
+  dispersionRed: number;
+  dispersionBlue: number;
+  rim: number;
+  rimWidth: number;
+  specular: number;
+  frost: number;
+  grain: number;
+  dim: number;
+  fadeStart: number;
+  fadeEnd: number;
+  shadow: number;
+  button: boolean;
+}
+
+/** How far outside the pane the ground must be sampled. */
+export function samplePadding(glass: ResolvedGlass) {
+  return Math.ceil(glass.bend * Math.max(glass.dispersionRed, 1) + glass.frost * 2 + 2);
+}
+
+const finite = (value: unknown): value is number =>
+  typeof value === "number" && Number.isFinite(value);
+
+const pick = (value: unknown, fallback: number, min: number, max: number) =>
+  finite(value) ? Math.min(max, Math.max(min, value)) : fallback;
+
+/**
+ * Resolve a pane's configuration against its size and computed radius.
+ * Unset lengths scale with the short side, so small controls keep the
+ * material's proportions rather than a 48px bezel that swallows them.
+ */
+export function resolveGlass(
+  config: GlassConfig,
+  width: number,
+  height: number,
+  cssRadius: number,
+): ResolvedGlass {
+  const short = Math.max(1, Math.min(width, height));
+  const radius = pick(config.cornerRadius, cssRadius, 0, short / 2);
+  // A pane rounded all the way is a circle or a pill: keep it one.
+  const fullyRounded = radius >= short / 2 - 0.5;
+  const power = fullyRounded ? 2 : pick(config.cornerPower, 4.2, 2, 8);
+  const bezel = pick(config.bezel, Math.min(48, short * 0.3), 0, short / 2);
+  return {
+    width,
+    height,
+    radius: fullyRounded ? short / 2 : radius,
+    power,
+    bezel,
+    bend: pick(config.bend, bezel * 0.75, 0, 96),
+    dispersionRed: pick(config.dispersionRed, 1.2, 1, 2),
+    dispersionBlue: pick(config.dispersionBlue, 0.8, 0, 1),
+    rim: pick(config.rim, 0.5, 0, 2),
+    rimWidth: pick(config.rimWidth, Math.min(3.5, Math.max(1.25, short * 0.04)), 0.5, 12),
+    specular: pick(config.specular, 0.35, 0, 2),
+    frost: pick(config.frost, 3, 0, 16),
+    grain: pick(config.grain, 0.07, 0, 0.5),
+    dim: pick(config.dim, 0.8, 0, 1.5),
+    fadeStart: pick(config.fadeStart, 1, 0, 1),
+    fadeEnd: pick(config.fadeEnd, 1, 0, 1),
+    shadow: pick(config.shadow, 0.18, 0, 1),
+    button: config.button === true,
+  };
+}
+
+/** Parse a `data-config` attribute; anything but a JSON object is ignored. */
+export function parseConfig(value: string | null | undefined): GlassConfig {
+  if (!value) return {};
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as GlassConfig)
+      : {};
+  } catch {
+    return {};
+  }
+}
+
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function intersect(a: Box, b: Box): Box | null {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
+}
+
+/** A CSS `object-position` component: a percentage, a length, or a keyword. */
+function position(value: string | undefined, free: number) {
+  const token = (value ?? "50%").trim();
+  if (token === "left" || token === "top") return 0;
+  if (token === "right" || token === "bottom") return free;
+  if (token === "center") return free / 2;
+  if (token.endsWith("%")) return (parseFloat(token) / 100) * free;
+  const px = parseFloat(token);
+  return Number.isFinite(px) ? px : free / 2;
+}
+
+/**
+ * Where a replaced element's content is painted inside its box, per CSS
+ * `object-fit` and `object-position`. Returns the content rectangle in the
+ * box's coordinate space (it may overflow the box; callers clip).
+ */
+export function objectFitRect(
+  box: { width: number; height: number },
+  natural: { width: number; height: number },
+  fit: string,
+  objectPosition: string,
+): Box {
+  const { width: bw, height: bh } = box;
+  const nw = natural.width || bw;
+  const nh = natural.height || bh;
+  let width = bw;
+  let height = bh;
+  if (fit === "contain" || fit === "cover" || fit === "scale-down") {
+    const scale =
+      fit === "cover" ? Math.max(bw / nw, bh / nh) : Math.min(bw / nw, bh / nh);
+    const clamped = fit === "scale-down" ? Math.min(1, scale) : scale;
+    width = nw * clamped;
+    height = nh * clamped;
+  } else if (fit === "none") {
+    width = nw;
+    height = nh;
+  }
+  const [px, py] = objectPosition.split(/\s+/);
+  return {
+    x: position(px, bw - width),
+    y: position(py, bh - height),
+    width,
+    height,
+  };
+}