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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.57",
+  "version": "0.4.2-canary.58",
   "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/glass.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import type { GlassConfig } from "./lib/liquidglass/index.js";
+import { cn } from "./lib/cn";
+
+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;
+  /** 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,
+      onGlassStateChange,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const stateCallbackRef = React.useRef(onGlassStateChange);
+    stateCallbackRef.current = 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 ?? {});
+
+    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;
+      }
+
+      let cancelled = false;
+      let destroy: (() => void) | undefined;
+
+      report("pending");
+
+      void import("./lib/liquidglass/index.js")
+        .then(({ LiquidGlass }) =>
+          LiquidGlass.init({
+            root,
+            glassElements,
+            defaults: JSON.parse(defaultsKey) as Partial<GlassConfig>,
+          }),
+        )
+        .then((instance) => {
+          if (cancelled) {
+            instance.destroy();
+            return;
+          }
+
+          destroy = () => instance.destroy();
+          report("live");
+        })
+        .catch(() => {
+          if (!cancelled) report("off");
+        });
+
+      return () => {
+        cancelled = true;
+        destroy?.();
+      };
+    }, [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", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+GlassRoot.displayName = "GlassRoot";
+Glass.displayName = "Glass";
+
+export type { GlassConfig } from "./lib/liquidglass/index.js";

package/src/lib/liquidglass/NOTICE.md

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

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;