glasskit-js 1.0.1 → 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

@@ -19,10 +19,10 @@ import LG from "./liquid-glass.js";
 const GLASS_KEYS = [
   "mode", "frost", "refraction", "depth", "dispersion", "splay",
   "lightAngle", "lightIntensity", "curvature", "convexity",
-  "tint", "tintOpacity", "sheen", "sheenColor", "saturate", "brightness", "radius", "background",
+  "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;
@@ -43,7 +43,9 @@ export interface LiquidGlassOptions {
   saturate?: number;
   /** Backdrop brightness (css mode). @default 1.04 */
   brightness?: number;
-  /** Override corner radius (px). null = read element's border-radius. @default null */
+  /** 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;
+  /** 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

@@ -42,6 +42,7 @@
     sheenColor: '255,255,255', // "r,g,b" — recolor the gloss
     saturate: 1.4,
     brightness: 1.04,
+    shadow: '0 8px 30px rgba(0,0,0,0.18)', // outer drop shadow; 'none'/'' removes it, or pass any CSS box-shadow
     radius: null,         // null = read element border-radius
     background: null      // Element|selector — required for 'svg-clone' & 'webgl'
   };
@@ -58,7 +59,24 @@
   function clamp8(v) { return v < 0 ? 0 : v > 255 ? 255 : Math.round(v); }
   // only ever emit a clean "r,g,b" triplet into inline CSS — blocks url()/expression smuggling
   function safeRGB(v) { return (typeof v === 'string' && /^\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*$/.test(v)) ? v.replace(/\s+/g, '') : '255,255,255'; }
+  // allow only box-shadow-shaped CSS (lengths/colors); reject url()/expression/extra declarations
+  function safeShadow(v) {
+    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); }
@@ -111,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;';
@@ -245,17 +263,19 @@
     /* ---- 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' :
         'linear-gradient(' + (num(o.lightAngle, -45) + 90) + 'deg,rgba(' + sc + ',' + (0.6 * sh).toFixed(3) +
         ') 0%,rgba(' + sc + ',0) 30%,rgba(' + sc + ',0) 70%,rgba(' + sc + ',' + (0.14 * sh).toFixed(3) + ') 100%)';
-      overlay.style.boxShadow =
+      // inset light border + bezel (scale with lightIntensity) and a separately controllable outer drop shadow
+      var insets =
         'inset 0 0 0 1px rgba(255,255,255,' + (0.30 * li) + '),' +
         'inset ' + (Math.cos(a) * 2).toFixed(1) + 'px ' + (Math.sin(a) * 2).toFixed(1) + 'px 2px rgba(255,255,255,' + (0.5 * li) + '),' +
-        'inset ' + (-Math.cos(a) * 2).toFixed(1) + 'px ' + (-Math.sin(a) * 2).toFixed(1) + 'px 6px rgba(0,0,0,.15),' +
-        '0 8px 30px rgba(0,0,0,.18)';
+        'inset ' + (-Math.cos(a) * 2).toFixed(1) + 'px ' + (-Math.sin(a) * 2).toFixed(1) + 'px 6px rgba(0,0,0,.15)';
+      var drop = safeShadow(o.shadow);
+      overlay.style.boxShadow = drop ? insets + ',' + drop : insets;
     }
 
     /* ------------------------------ WebGL ------------------------------ */
@@ -363,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; },
@@ -380,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;
@@ -389,7 +412,7 @@
   /* ===================== <glass-kit> web component ===================== */
   var ATTRS = ['mode', 'frost', 'refraction', 'depth', 'dispersion', 'splay', 'light-angle',
     'light-intensity', 'curvature', 'convexity', 'tint', 'tint-opacity', 'sheen', 'sheen-color',
-    'radius', 'background'];
+    'shadow', 'radius', 'background'];
   function camel(s) { return s.replace(/-([a-z])/g, function (_, c) { return c.toUpperCase(); }); }
   function defineElement() {
     if (typeof customElements === 'undefined' || customElements.get('glass-kit')) return;
@@ -399,7 +422,7 @@
       ATTRS.forEach(function (a) {
         if (!node.hasAttribute(a)) return;
         var v = node.getAttribute(a), key = camel(a);
-        opts[key] = (a === 'mode' || a === 'tint' || a === 'sheen-color' || a === 'background') ? v : parseFloat(v);
+        opts[key] = (a === 'mode' || a === 'tint' || a === 'sheen-color' || a === 'shadow' || a === 'background') ? v : parseFloat(v);
       });
       return opts;
     }
@@ -416,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.1' };
+  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.1",
+  "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",