glasskit-js 1.0.2 → 1.1.0

package/LiquidGlass.d.ts

@@ -9,5 +9,7 @@ export interface LiquidGlassProps
   children?: React.ReactNode;
 }
 
-declare const LiquidGlass: React.FC<LiquidGlassProps>;
+declare const LiquidGlass: React.ForwardRefExoticComponent<
+  LiquidGlassProps & React.RefAttributes<HTMLElement>
+>;
 export default LiquidGlass;

package/LiquidGlass.mjs

@@ -22,7 +22,7 @@ const GLASS_KEYS = [
   "tint", "tintOpacity", "sheen", "sheenColor", "saturate", "brightness", "shadow", "radius", "background",
 ];
 
-export default function LiquidGlass({ as: Tag = "div", children, ...props }) {
+const LiquidGlass = React.forwardRef(function LiquidGlass({ as: Tag = "div", children, ...props }, forwardedRef) {
   const ref = useRef(null);
   const instRef = useRef(null);
 
@@ -47,5 +47,14 @@ export default function LiquidGlass({ as: Tag = "div", children, ...props }) {
     instRef.current?.update(JSON.parse(optsKey));
   }, [optsKey]);
 
-  return React.createElement(Tag, { ref, ...rest }, children);
-}
+  // keep our internal ref and forward the node to the caller's ref too
+  const setRef = (node) => {
+    ref.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+
+  return React.createElement(Tag, { ref: setRef, ...rest }, children);
+});
+
+export default LiquidGlass;

package/README.md

@@ -73,7 +73,11 @@ It refracts DOM, not `<canvas>` pixels — use `webgl` for canvas/video backgrou
 | Depth | `depth` | | tint | `tint`, `tintOpacity` |
 | Dispersion | `dispersion` | | corner radius | `radius` |
 | Splay | `splay` | | | |
-| Light (angle / %) | `lightAngle` / `lightIntensity` | | | |
+| Light (angle / %) | `lightAngle` / `lightIntensity` | | drop shadow | `shadow` |
+
+- **`tint`** takes either `"r,g,b"` (paired with `tintOpacity`) **or a full CSS gradient** — `tint="linear-gradient(180deg, rgba(255,255,255,.2), rgba(19,19,19,.22))"`.
+- **`radius`** sets `border-radius` on the element *and* the refraction map — `radius={999}` alone gives you a pill; no need to also set it in `style`.
+- **`shadow`** is any CSS `box-shadow` (`"none"` removes it); the inner light border/bezel follow `lightIntensity`.
 
 ## Shapes
 

package/liquid-glass.d.ts

@@ -31,7 +31,7 @@ export interface LiquidGlassOptions {
   curvature?: number;
   /** +1 convex (magnify) .. 0 flat .. -1 concave (shrink). @default 1 */
   convexity?: number;
-  /** Glass tint as "r,g,b". @default "255,255,255" */
+  /** Glass tint — either "r,g,b" (combined with `tintOpacity`) or a full CSS `gradient(...)` string (opacity baked into its color stops). @default "255,255,255" */
   tint?: string;
   /** Tint opacity 0..1. @default 0.08 */
   tintOpacity?: number;
@@ -45,7 +45,7 @@ export interface LiquidGlassOptions {
   brightness?: number;
   /** Outer drop shadow as any CSS box-shadow value; "none" or "" removes it. The inner light border/bezel are controlled by `lightIntensity`. @default "0 8px 30px rgba(0,0,0,0.18)" */
   shadow?: string;
-  /** Override corner radius (px). null = read element's border-radius. @default null */
+  /** Corner radius in px. When set, it both feeds the refraction map AND applies `border-radius` to the element. null = read the element's existing border-radius. @default null */
   radius?: number | null;
   /** Element or selector to refract. Required for `svg-clone` and `webgl`. */
   background?: Element | string | null;

package/liquid-glass.js

@@ -64,7 +64,19 @@
     if (typeof v !== 'string' || !v || v === 'none') return '';
     return /url\(|expression|javascript:|[;{}<>]/i.test(v) ? '' : v;
   }
+  // allow CSS gradient values only; block url()/image-set()/extra declarations
+  function safeGradient(v) {
+    if (typeof v !== 'string') return '';
+    if (/url\(|image-set|element\(|expression|javascript:|[;{}<>]/i.test(v)) return '';
+    return /(^|\s)(repeating-)?(linear|radial|conic)-gradient\(/i.test(v) ? v : '';
+  }
   function num(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
+  // tint background: a full CSS gradient string, else an rgba() built from "r,g,b" + opacity
+  function tintValue(o) {
+    var t = o.tint;
+    if (typeof t === 'string' && /gradient\(/i.test(t)) { var g = safeGradient(t); if (g) return g; }
+    return 'rgba(' + safeRGB(t) + ',' + num(o.tintOpacity, 0.08) + ')';
+  }
   function resolveEl(x) { return typeof x === 'string' ? document.querySelector(x) : x; }
   function readRadius(el) { return parseFloat(getComputedStyle(el).borderRadius) || 0; }
   function ns(tag) { return document.createElementNS('http://www.w3.org/2000/svg', tag); }
@@ -117,7 +129,7 @@
     if ((mode === 'svg-clone' || mode === 'webgl') && !bg) mode = isChromium() ? 'svg' : 'css';
 
     if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
-    var prevBg = el.style.backgroundColor;
+    var prevBg = el.style.background, prevRadius = el.style.borderRadius;
 
     var overlay = document.createElement('div');
     overlay.style.cssText = 'position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;';
@@ -251,7 +263,7 @@
     /* ---- tint + specular overlay (all modes) ---- */
     function applyOverlay() {
       var li = num(o.lightIntensity, 0.8), a = (num(o.lightAngle, -45) + 90) * Math.PI / 180;
-      if (mode === 'css' || mode === 'svg') el.style.backgroundColor = 'rgba(' + safeRGB(o.tint) + ',' + num(o.tintOpacity, 0.08) + ')';
+      if (mode === 'css' || mode === 'svg') el.style.background = tintValue(o);
       // FACE gloss — controlled by `sheen`/`sheenColor`, independent of the border light below
       var sc = safeRGB(o.sheenColor), sh = num(o.sheen, 0.7);
       overlay.style.background = sh <= 0 ? 'none' :
@@ -371,14 +383,17 @@
     var ro = new ResizeObserver(function () { refreshMap(); if (mode === 'svg-clone') syncClone(); });
     ro.observe(el);
 
-    refreshMap(); applyFilterParams(); applyOverlay();
+    // when an explicit radius is given, round the element itself (not just the refraction map)
+    function applyRadius() { if (o.radius != null) el.style.borderRadius = num(o.radius, 0) + 'px'; }
+
+    refreshMap(); applyFilterParams(); applyOverlay(); applyRadius();
 
     var instance = {
       el: el, mode: mode,
       update: function (patch) {
         Object.assign(o, patch || {});
         if (patch && patch.background != null && mode === 'webgl') loadGLBg(resolveEl(o.background));
-        refreshMap(); applyFilterParams(); applyOverlay();
+        refreshMap(); applyFilterParams(); applyOverlay(); applyRadius();
         return instance;
       },
       refresh: function () { if (mode === 'svg-clone') reclone(); else if (mode === 'webgl') loadGLBg(resolveEl(o.background)); return instance; },
@@ -388,7 +403,7 @@
         // free the WebGL context explicitly — browsers cap ~16 per page
         if (gl) { var lc = gl.getExtension('WEBGL_lose_context'); if (lc) lc.loseContext(); gl = null; }
         [svg, lensWrap, glcanvas, overlay].forEach(function (n) { if (n && n.parentNode) n.parentNode.removeChild(n); });
-        el.style.backdropFilter = ''; el.style.webkitBackdropFilter = ''; el.style.backgroundColor = prevBg;
+        el.style.backdropFilter = ''; el.style.webkitBackdropFilter = ''; el.style.background = prevBg; el.style.borderRadius = prevRadius;
       }
     };
     return instance;
@@ -424,5 +439,5 @@
   }
   if (typeof window !== 'undefined') { if (document.readyState !== 'loading') defineElement(); else document.addEventListener('DOMContentLoaded', defineElement); }
 
-  return { apply: apply, defineElement: defineElement, isChromium: isChromium, pickMode: pickMode, DEFAULTS: DEFAULTS, version: '1.0.2' };
+  return { apply: apply, defineElement: defineElement, isChromium: isChromium, pickMode: pickMode, DEFAULTS: DEFAULTS, version: '1.1.0' };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glasskit-js",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Drop-in Apple/Figma 'Liquid Glass' for any element — switch between pure CSS, SVG displacement (live backdrop), cross-browser clone-mode, or WebGL. Real refraction, chromatic aberration, specular highlight. Zero dependencies. Class + <liquid-glass> web component.",
   "keywords": [
     "liquid-glass",