glasskit-js 0.0.1 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aman Sharma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LiquidGlass.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { LiquidGlassOptions } from "./liquid-glass";
+
+export interface LiquidGlassProps
+  extends LiquidGlassOptions,
+    React.HTMLAttributes<HTMLElement> {
+  /** Element tag to render (e.g. "div", "button", "section"). @default "div" */
+  as?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
+}
+
+declare const LiquidGlass: React.FC<LiquidGlassProps>;
+export default LiquidGlass;

package/LiquidGlass.mjs

@@ -0,0 +1,51 @@
+"use client";
+/*
+ * <LiquidGlass> — React/Next.js wrapper around liquid-glass.js.
+ * Ships without JSX so it works in any bundler (no transform of node_modules needed).
+ *
+ *   import LiquidGlass from "glasskit-js/react";
+ *
+ *   <LiquidGlass as="button" mode="auto" refraction={90} dispersion={0.5}
+ *                style={{ borderRadius: 999, padding: "14px 28px" }}>
+ *     Get tickets
+ *   </LiquidGlass>
+ *
+ * Renders a normal element; the effect follows its own size + border-radius.
+ * SSR-safe: the engine only runs in a client effect.
+ */
+import React, { useRef, useEffect } from "react";
+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",
+];
+
+export default function LiquidGlass({ as: Tag = "div", children, ...props }) {
+  const ref = useRef(null);
+  const instRef = useRef(null);
+
+  // split glass options from normal DOM props
+  const opts = {};
+  const rest = {};
+  for (const k in props) {
+    if (GLASS_KEYS.includes(k)) opts[k] = props[k];
+    else rest[k] = props[k];
+  }
+  const optsKey = JSON.stringify(opts);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    instRef.current = LG.apply(ref.current, JSON.parse(optsKey));
+    return () => { instRef.current?.destroy(); instRef.current = null; };
+    // re-create only when the engine `mode` changes; other params are hot-updated below
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.parse(optsKey).mode]);
+
+  useEffect(() => {
+    instRef.current?.update(JSON.parse(optsKey));
+  }, [optsKey]);
+
+  return React.createElement(Tag, { ref, ...rest }, children);
+}

package/README.md

@@ -1,3 +1,144 @@
-# glasskit-js
+# Glasskit
 
-Placeholder release. Install the real package: `npm i glasskit-js@^1.0.0`.
+**Drop-in Apple / Figma "Liquid Glass" for the web — and the generator that ships the code.**
+
+The only liquid-glass tool that lets you **switch the rendering engine** (pure CSS · SVG
+displacement · cross-browser clone · WebGL), apply it to **any element/shape**, **copy the
+code in any framework**, and **measure the real performance cost** before you ship.
+
+> npm: **`glasskit-js`** · global: **`Glasskit`** · web component: **`<glass-kit>`**
+
+```
+liquid-glass.js      ← the engine (zero deps, UMD + <glass-kit> web component)
+liquid-glass.d.ts    ← TypeScript types
+LiquidGlass.mjs      ← React/Next.js wrapper (default export, no JSX — works in any bundler)
+package.json         ← npm package "glasskit-js"
+demo.html            ← minimal standalone playground
+site/                ← the generator website (static, deploy as-is)
+  index.html · app.js · benchmark.html · liquid-glass.js
+bench/               ← automated cross-browser benchmark runner (Playwright)
+```
+
+---
+
+## The engine
+
+### Modes — the switch nobody else gives you
+
+| Mode | Real refraction | Browsers | Refracts | Best for |
+|------|:---:|---|---|---|
+| `css` | ✗ (blur) | **all** | live backdrop | default product UI, mobile, Safari/FF |
+| `svg` | ✓ | **Chromium** | live backdrop | the "wow" surface on Chrome/Edge |
+| `svg-clone` | ✓ | **all** | a cloned DOM element | cross-browser refraction over DOM |
+| `webgl` | ✓ | **all** | an img/canvas/video | hero over a fixed background/video |
+| `auto` | — | — | — | Chromium→`svg`, else `svg-clone` if `background` set, else `css` |
+
+`svg-clone` is the cross-browser trick: Safari/Firefox don't allow an SVG filter in
+`backdrop-filter`, so it **clones the background element and filters the clone** instead.
+It refracts DOM, not `<canvas>` pixels — use `webgl` for canvas/video backgrounds.
+
+### Params ↔ Figma's Glass panel
+
+| Figma slider | Option | | Optical extras | Option |
+|---|---|---|---|---|
+| Frost | `frost` | | curvature (sphere→squircle) | `curvature` |
+| Refraction | `refraction` | | convex↔concave | `convexity` |
+| Depth | `depth` | | tint | `tint`, `tintOpacity` |
+| Dispersion | `dispersion` | | corner radius | `radius` |
+| Splay | `splay` | | | |
+| Light (angle / %) | `lightAngle` / `lightIntensity` | | | |
+
+### Usage
+
+```html
+<!-- vanilla / CDN -->
+<script src="https://unpkg.com/glasskit-js"></script>
+<script>
+  const g = Glasskit.apply(document.querySelector('#card'), {
+    mode: 'auto', frost: 8, refraction: 90, dispersion: 0.5
+  });
+  g.update({ frost: 12 });  // hot-update   ·   g.destroy();
+</script>
+```
+
+```html
+<!-- web component (registered automatically) -->
+<glass-kit mode="auto" refraction="90" dispersion="0.5"
+           style="width:340px;height:210px;border-radius:30px">Glass</glass-kit>
+```
+
+```jsx
+// React
+import Glass from 'glasskit-js/react';
+<Glass as="button" mode="auto" refraction={90} dispersion={0.5}
+       style={{ borderRadius: 999, padding: '14px 28px' }}>Get tickets</Glass>
+```
+
+### Shapes
+Any **rounded rectangle (incl. pills & circles)** works with zero extra code — a
+`ResizeObserver` regenerates the refraction map on resize. Arbitrary outlines (blobs,
+SVG paths) keep the blur/tint/highlight via `clip-path`, but refraction edges assume a
+rounded box; supply a custom displacement map for true custom outlines.
+
+---
+
+## The generator website (`site/`)
+
+Static — no build step. Tune visually → switch engine → copy code for React, Vue,
+vanilla, web component, CSS, or Tailwind. Plus a preset gallery and a benchmark page.
+
+```bash
+npx serve site         # or: python3 -m http.server --directory site
+```
+
+**Deploy to Cloudflare Pages:** create a Pages project, set the **build command empty**
+and the **output/root directory to `site`**. Pure static files. (Vercel: framework
+"Other", output dir `site`.) Then set your domain in the `og:`/`canonical` tags and add an
+`og.png` (a generator script lives at `bench/og.mjs`).
+
+---
+
+## The benchmark
+
+**In-browser** (`site/benchmark.html`): spawns batches of glass elements per engine,
+animates them over a live backdrop, and records **avg/min FPS, avg & p95 frame time,
+jank %, and JS heap**. Results are saved per browser in `localStorage`, so running it in
+Chrome → Safari → Firefox builds a cross-browser comparison. Export JSON anytime.
+
+**Automated** (`bench/run-playwright.mjs`): drives the page across every installed engine.
+
+```bash
+npm i                                   # installs playwright-core
+npm run bench                           # uses your installed Chrome
+node bench/run-playwright.mjs --dur 2.5 --counts 1,5,15,30,60 --modes css,svg,svg-clone,webgl
+npx playwright install webkit firefox   # to also bench Safari & Firefox engines
+```
+Writes `bench/results.json` and `bench/results.csv`.
+
+> Note: headless reports vsync-capped 60fps; real differences show under load and on
+> retina (`dpr 2`). `svg-clone` is the heaviest (one clone per element); `webgl` is
+> capped by the browser's ~8–16 live GL contexts — both are surfaced as findings.
+
+---
+
+## Releasing (CI)
+
+Two GitHub Actions handle shipping:
+
+- **`.github/workflows/pages.yml`** — deploys `site/` to GitHub Pages on every push to `main` that touches `site/`.
+- **`.github/workflows/release.yml`** — publishes to npm when a `v*` tag is pushed, via **npm Trusted Publishing (OIDC)** — no `NPM_TOKEN`, provenance generated automatically.
+
+**One-time bootstrap** (npm requires the package to exist before a trusted publisher can be configured):
+
+1. `npm publish --access public` once from a logged-in machine to create `glasskit-js`.
+2. npmjs.com → the package → **Settings → Trusted Publisher** → GitHub Actions, repo `amanblog/glasskit`, workflow `release.yml`.
+
+After that, cutting a release is tokenless:
+
+```bash
+npm version patch        # bumps package.json + creates the vX.Y.Z tag & commit
+git push --follow-tags   # CI verifies tag == version, then publishes with provenance
+```
+
+## License
+MIT — see [LICENSE](LICENSE).

package/liquid-glass.d.ts

@@ -0,0 +1,78 @@
+/** liquid-glass.js — TypeScript definitions */
+
+export type LiquidGlassMode = "auto" | "css" | "svg" | "svg-clone" | "webgl";
+
+export interface LiquidGlassOptions {
+  /**
+   * Rendering engine.
+   * - `css`        blur + tint + highlight. Every browser. No real refraction.
+   * - `svg`        real refraction on the live backdrop. Chromium only.
+   * - `svg-clone`  real refraction in Chrome/Safari/Firefox (clones `background`). DOM only.
+   * - `webgl`      real refraction of a supplied `background` (img/canvas/video).
+   * - `auto`       Chromium→svg; else `background` set→svg-clone; else css.
+   * @default "auto"
+   */
+  mode?: LiquidGlassMode;
+  /** Figma "Frost" — backdrop blur in px. @default 6 */
+  frost?: number;
+  /** Figma "Refraction" — edge displacement strength in px. @default 90 */
+  refraction?: number;
+  /** Figma "Depth" — bezel width in px. @default 22 */
+  depth?: number;
+  /** Figma "Dispersion" — chromatic aberration, 0..1. @default 0.4 */
+  dispersion?: number;
+  /** Figma "Splay" — softens/widens the bezel falloff, 0..1. @default 0 */
+  splay?: number;
+  /** Figma "Light" angle in degrees. @default -45 */
+  lightAngle?: number;
+  /** Figma "Light" % — specular highlight, 0..1. @default 0.8 */
+  lightIntensity?: number;
+  /** Profile exponent: ~2 spherical, ~4 squircle. @default 2.2 */
+  curvature?: number;
+  /** +1 convex (magnify) .. 0 flat .. -1 concave (shrink). @default 1 */
+  convexity?: number;
+  /** Glass tint as "r,g,b". @default "255,255,255" */
+  tint?: string;
+  /** Tint opacity 0..1. @default 0.08 */
+  tintOpacity?: number;
+  /** Diagonal gloss over the card face, 0..1 (0 removes it; the light border stays). @default 0.7 */
+  sheen?: number;
+  /** Gloss color as "r,g,b". @default "255,255,255" */
+  sheenColor?: string;
+  /** Backdrop saturation (css mode). @default 1.4 */
+  saturate?: number;
+  /** Backdrop brightness (css mode). @default 1.04 */
+  brightness?: number;
+  /** Override corner radius (px). null = read element's border-radius. @default null */
+  radius?: number | null;
+  /** Element or selector to refract. Required for `svg-clone` and `webgl`. */
+  background?: Element | string | null;
+}
+
+export interface LiquidGlassInstance {
+  readonly el: HTMLElement;
+  /** The resolved mode actually in use (after `auto` / fallbacks). */
+  readonly mode: LiquidGlassMode;
+  /** Hot-update any subset of options. */
+  update(patch: Partial<LiquidGlassOptions>): LiquidGlassInstance;
+  /** Re-read the background (call after the refracted content changes). */
+  refresh(): LiquidGlassInstance;
+  /** Remove all DOM, filters and listeners. */
+  destroy(): void;
+}
+
+export interface LiquidGlassStatic {
+  apply(el: HTMLElement, options?: LiquidGlassOptions): LiquidGlassInstance;
+  /** Register the <liquid-glass> custom element (auto-called on load). */
+  defineElement(): void;
+  isChromium(): boolean;
+  pickMode(requested: LiquidGlassMode, hasBackground: boolean): LiquidGlassMode;
+  DEFAULTS: Required<Omit<LiquidGlassOptions, "background" | "radius">> & {
+    radius: number | null;
+    background: Element | string | null;
+  };
+  version: string;
+}
+
+declare const LiquidGlass: LiquidGlassStatic;
+export default LiquidGlass;

package/liquid-glass.js

@@ -0,0 +1,420 @@
+/*!
+ * liquid-glass.js — drop-in "Figma Glass" / Apple Liquid Glass for any element.
+ * Zero dependencies. UMD (window.LiquidGlass + CommonJS) + <glass-kit> web component.
+ *
+ *   const g = LiquidGlass.apply(el, { mode: 'auto', refraction: 90, dispersion: 0.5 });
+ *   g.update({ frost: 12 });   g.destroy();
+ *
+ * MODES (the switch nobody else gives you):
+ *   'css'       blur + tint + highlight. Every browser. No real refraction.
+ *   'svg'       real refraction on the LIVE backdrop via backdrop-filter. CHROMIUM ONLY.
+ *   'svg-clone' real refraction in Chrome / Safari / Firefox by cloning a `background`
+ *               element and filtering the clone. Cross-browser. Refracts DOM (not <canvas>).
+ *   'webgl'     real refraction in a shader of a supplied `background` (img/canvas/video).
+ *   'auto'      Chromium -> 'svg'; else `background` set -> 'svg-clone'; else 'css'.
+ *
+ * Params map onto Figma's Glass panel: frost, refraction, depth, dispersion, splay,
+ * lightAngle, lightIntensity (+ optical extras: curvature, convexity, tint).
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) module.exports = factory();
+  else { root.Glasskit = root.LiquidGlass = factory(); }
+})(typeof window !== 'undefined' ? window : this, function () {
+  'use strict';
+
+  var UID = 0;
+  var XLINK = 'http://www.w3.org/1999/xlink';
+
+  var DEFAULTS = {
+    mode: 'auto',
+    frost: 6,             // Figma "Frost"      — backdrop blur (px)
+    refraction: 90,       // Figma "Refraction" — edge displacement strength (px)
+    depth: 22,            // Figma "Depth"      — bezel width (px)
+    dispersion: 0.4,      // Figma "Dispersion" — chromatic aberration (0..1)
+    splay: 0,             // Figma "Splay"      — softens/widens bezel falloff (0..1)
+    lightAngle: -45,      // Figma "Light" angle (deg)
+    lightIntensity: 0.8,  // Figma "Light" %    — specular highlight (0..1)
+    curvature: 2.2,       // profile exponent: ~2 spherical, ~4 squircle
+    convexity: 1,         // +1 convex (magnify) .. 0 flat .. -1 concave (shrink)
+    tint: '255,255,255',  // "r,g,b"
+    tintOpacity: 0.08,
+    sheen: 0.7,           // diagonal gloss over the card FACE (0 = remove; border stays)
+    sheenColor: '255,255,255', // "r,g,b" — recolor the gloss
+    saturate: 1.4,
+    brightness: 1.04,
+    radius: null,         // null = read element border-radius
+    background: null      // Element|selector — required for 'svg-clone' & 'webgl'
+  };
+
+  /* ---------------------------- helpers ---------------------------- */
+  function isChromium() {
+    if (typeof navigator === 'undefined' || typeof window === 'undefined') return false;
+    var ua = navigator.userAgent;
+    var chromium = /(Chrome|Chromium|Edg|OPR)\//.test(ua) && !/\bEdge\//.test(ua);
+    var ok = !!(window.CSS && CSS.supports &&
+      (CSS.supports('backdrop-filter', 'blur(1px)') || CSS.supports('-webkit-backdrop-filter', 'blur(1px)')));
+    return chromium && ok;
+  }
+  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'; }
+  function num(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
+  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); }
+
+  function pickMode(requested, hasBackground) {
+    if (requested && requested !== 'auto') return requested;
+    if (isChromium()) return 'svg';
+    return hasBackground ? 'svg-clone' : 'css';
+  }
+
+  /* rounded-box signed distance field (negative inside) */
+  function sdf(x, y, hw, hh, r) {
+    var qx = Math.abs(x - hw) - (hw - r);
+    var qy = Math.abs(y - hh) - (hh - r);
+    return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
+  }
+
+  /* displacement map: R = x-shift, G = y-shift, 128 = neutral */
+  function buildMap(w, h, radius, bezel, splay, curvature, convexity) {
+    w = Math.max(1, Math.round(w)); h = Math.max(1, Math.round(h));
+    var cvs = document.createElement('canvas'); cvs.width = w; cvs.height = h;
+    var ctx = cvs.getContext('2d');
+    var img = ctx.createImageData(w, h), data = img.data;
+    var hw = w / 2, hh = h / 2, r = Math.min(radius, hw, hh), b = Math.max(1, bezel);
+    var exp = Math.max(0.3, curvature * (1 - 0.5 * splay));
+    for (var y = 0; y < h; y++) {
+      for (var x = 0; x < w; x++) {
+        var d = sdf(x + 0.5, y + 0.5, hw, hh, r);
+        var nx = sdf(x + 1.5, y + 0.5, hw, hh, r) - sdf(x - 0.5, y + 0.5, hw, hh, r);
+        var nyv = sdf(x + 0.5, y + 1.5, hw, hh, r) - sdf(x + 0.5, y - 0.5, hw, hh, r);
+        var nl = Math.hypot(nx, nyv) || 1, m = 0;
+        if (d < 0 && d > -b) { var t = -d / b; m = Math.pow(1 - t, exp) * convexity; }
+        var i = (y * w + x) * 4;
+        data[i] = clamp8(128 - (nx / nl) * m * 127);
+        data[i + 1] = clamp8(128 - (nyv / nl) * m * 127);
+        data[i + 2] = 128; data[i + 3] = 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+    return cvs.toDataURL();
+  }
+
+  /* ============================ instance ============================ */
+  function apply(el, options) {
+    var o = Object.assign({}, DEFAULTS, options || {});
+    var bg = resolveEl(o.background);
+    var id = 'lg' + (++UID);
+    var mode = pickMode(o.mode, !!bg);
+    // graceful fallback if a refraction mode lacks its background source
+    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 overlay = document.createElement('div');
+    overlay.style.cssText = 'position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;';
+    el.appendChild(overlay);
+
+    var svg, filter, feImage, feR, feG, feB, feBlur;
+    var lensWrap, clone;            // svg-clone
+    var glcanvas, gl, glState;      // webgl
+    var rafId = 0;
+    var lastMapKey = '';
+
+    if (mode === 'svg' || mode === 'svg-clone') buildSvgFilter();
+    if (mode === 'svg-clone') buildClone();
+    if (mode === 'webgl') buildGL();
+
+    /* ---- SVG filter (shared by backdrop + clone modes) ---- */
+    function buildSvgFilter() {
+      svg = ns('svg');
+      svg.setAttribute('width', '0'); svg.setAttribute('height', '0');
+      svg.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden;';
+      var defs = ns('defs');
+      filter = ns('filter');
+      filter.setAttribute('id', id);
+      filter.setAttribute('filterUnits', 'userSpaceOnUse');
+      filter.setAttribute('color-interpolation-filters', 'sRGB');
+      feImage = ns('feImage');
+      feImage.setAttribute('result', 'map');
+      feImage.setAttribute('preserveAspectRatio', 'none');
+      feR = disp('pR'); var mR = chan('mr', 'pR', 'r');
+      feG = disp('pG'); var mG = chan('mg', 'pG', 'g');
+      feB = disp('pB'); var mB = chan('mb', 'pB', 'b');
+      var b1 = blend('mr', 'mg', 'rg'), b2 = blend('rg', 'mb', 'rgb');
+      feBlur = ns('feGaussianBlur'); feBlur.setAttribute('in', 'rgb');
+      [feImage, feR, mR, feG, mG, feB, mB, b1, b2, feBlur].forEach(function (n) { filter.appendChild(n); });
+      defs.appendChild(filter); svg.appendChild(defs); document.body.appendChild(svg);
+
+      function disp(res) {
+        var f = ns('feDisplacementMap');
+        f.setAttribute('in', 'SourceGraphic'); f.setAttribute('in2', 'map');
+        f.setAttribute('xChannelSelector', 'R'); f.setAttribute('yChannelSelector', 'G');
+        f.setAttribute('result', res); return f;
+      }
+      function chan(res, inp, w) {
+        var f = ns('feColorMatrix'); f.setAttribute('in', inp); f.setAttribute('result', res);
+        f.setAttribute('type', 'matrix');
+        f.setAttribute('values',
+          w === 'r' ? '1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' :
+          w === 'g' ? '0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0' :
+                      '0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0'); return f;
+      }
+      function blend(a, b, res) {
+        var f = ns('feBlend'); f.setAttribute('in', a); f.setAttribute('in2', b);
+        f.setAttribute('mode', 'screen'); f.setAttribute('result', res); return f;
+      }
+    }
+
+    function refreshMap() {
+      if (mode !== 'svg' && mode !== 'svg-clone') return;
+      var r = el.getBoundingClientRect();
+      var rad = o.radius == null ? readRadius(el) : o.radius;
+      var key = [Math.round(r.width), Math.round(r.height), rad, o.depth, o.splay, o.curvature, o.convexity].join(',');
+      if (key === lastMapKey) return;
+      lastMapKey = key;
+      var url = buildMap(r.width, r.height, rad, o.depth, o.splay, o.curvature, o.convexity);
+      feImage.setAttribute('href', url);
+      feImage.setAttributeNS(XLINK, 'xlink:href', url);
+      feImage.setAttribute('width', r.width); feImage.setAttribute('height', r.height);
+      if (mode === 'svg') {
+        // backdrop-filter applies in the element's own space → region is 0,0,w,h
+        feImage.setAttribute('x', 0); feImage.setAttribute('y', 0);
+        filter.setAttribute('x', 0); filter.setAttribute('y', 0);
+        filter.setAttribute('width', r.width); filter.setAttribute('height', r.height);
+      }
+      // clone mode: the map + filter region track the visible window every frame (syncClone)
+    }
+
+    /* ---- clone layer (cross-browser refraction) ---- */
+    function buildClone() {
+      lensWrap = document.createElement('div');
+      lensWrap.style.cssText = 'position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none;';
+      clone = bg.cloneNode(true);
+      clone.removeAttribute('id');
+      clone.style.position = 'absolute';
+      clone.style.margin = '0';
+      clone.style.filter = 'url(#' + id + ')';
+      clone.style.webkitFilter = 'url(#' + id + ')';
+      lensWrap.appendChild(clone);
+      el.insertBefore(lensWrap, overlay);
+      el.style.backgroundColor = 'transparent';
+      syncClone();
+    }
+    function syncClone() {
+      if (!clone) return;
+      var er = el.getBoundingClientRect(), br = bg.getBoundingClientRect();
+      clone.style.left = (br.left - er.left) + 'px';
+      clone.style.top = (br.top - er.top) + 'px';
+      clone.style.width = br.width + 'px';
+      clone.style.height = br.height + 'px';
+      // The filter runs in the clone's user space (origin = background top-left). Move the
+      // displacement map + filter region to sit exactly over the glass window, wherever it is.
+      var ox = er.left - br.left, oy = er.top - br.top, pad = Math.ceil(o.frost * 2 + 12);
+      feImage.setAttribute('x', ox); feImage.setAttribute('y', oy);
+      filter.setAttribute('x', ox - pad); filter.setAttribute('y', oy - pad);
+      filter.setAttribute('width', er.width + pad * 2); filter.setAttribute('height', er.height + pad * 2);
+    }
+    function reclone() {
+      if (!lensWrap) return;
+      var nc = bg.cloneNode(true);
+      nc.removeAttribute('id'); nc.style.position = 'absolute'; nc.style.margin = '0';
+      nc.style.filter = 'url(#' + id + ')'; nc.style.webkitFilter = 'url(#' + id + ')';
+      lensWrap.replaceChild(nc, clone); clone = nc; syncClone();
+    }
+
+    /* ---- apply backdrop/filter scales + frost ---- */
+    function applyFilterParams() {
+      var k = o.dispersion * 0.4;
+      if (feR) {
+        feR.setAttribute('scale', o.refraction * (1 - k));
+        feG.setAttribute('scale', o.refraction);
+        feB.setAttribute('scale', o.refraction * (1 + k));
+        feBlur.setAttribute('stdDeviation', o.frost);
+      }
+      if (mode === 'svg') {
+        var f = 'url(#' + id + ')'; el.style.backdropFilter = f; el.style.webkitBackdropFilter = f;
+      } else if (mode === 'css') {
+        var c = 'blur(' + num(o.frost, 6) + 'px) saturate(' + num(o.saturate, 1.4) + ') brightness(' + num(o.brightness, 1.04) + ')';
+        el.style.backdropFilter = c; el.style.webkitBackdropFilter = c;
+      }
+    }
+
+    /* ---- 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) + ')';
+      // 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 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)';
+    }
+
+    /* ------------------------------ WebGL ------------------------------ */
+    function buildGL() {
+      glcanvas = document.createElement('canvas');
+      glcanvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:0;';
+      el.insertBefore(glcanvas, overlay);
+      el.style.backgroundColor = 'transparent';
+      gl = glcanvas.getContext('webgl', { premultipliedAlpha: false, alpha: true });
+      if (!gl) { mode = 'css'; applyFilterParams(); return; }
+      var vs = 'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}';
+      var fs = [
+        'precision highp float;',
+        'uniform sampler2D u_bg;uniform vec2 u_win,u_origin,u_size,u_light;',
+        'uniform float u_radius,u_bezel,u_refraction,u_dispersion,u_frost,u_lightI,u_curv,u_convex;',
+        'float sd(vec2 p,vec2 b,float r){vec2 q=abs(p)-b+r;return min(max(q.x,q.y),0.)+length(max(q,0.))-r;}',
+        'vec4 bl(vec2 uv,float rad){if(rad<0.5)return texture2D(u_bg,uv);vec2 px=rad/u_win;vec4 c=vec4(0.);for(int i=-2;i<=2;i++){for(int j=-2;j<=2;j++){c+=texture2D(u_bg,uv+vec2(float(i),float(j))*px*0.5);}}return c/25.;}',
+        'void main(){',
+        ' vec2 fc=vec2(gl_FragCoord.x,u_size.y-gl_FragCoord.y);',
+        ' vec2 c=fc-u_size*0.5;vec2 b=u_size*0.5;float r=min(u_radius,min(b.x,b.y));',
+        ' float d=sd(c,b,r);float e=1.0;',
+        ' float dx=sd(c+vec2(e,0.),b,r)-sd(c-vec2(e,0.),b,r);',
+        ' float dy=sd(c+vec2(0.,e),b,r)-sd(c-vec2(0.,e),b,r);',
+        ' vec2 n=normalize(vec2(dx,dy)+1e-6);',
+        ' float m=0.;if(d<0.&&d>-u_bezel){float t=-d/u_bezel;m=pow(1.-t,u_curv)*u_convex;}',
+        ' vec2 disp=-n*m*u_refraction;vec2 base=u_origin+fc;float k=u_dispersion*0.4;',
+        ' vec4 cr=bl((base+disp*(1.-k))/u_win,u_frost);',
+        ' vec4 cg=bl((base+disp)/u_win,u_frost);',
+        ' vec4 cb=bl((base+disp*(1.+k))/u_win,u_frost);',
+        ' vec3 col=vec3(cr.r,cg.g,cb.b);',
+        ' float spec=pow(max(dot(n,u_light),0.),4.)*abs(m)*u_lightI;col+=spec+0.04*u_lightI*abs(m);',
+        ' float al=smoothstep(0.75,-0.75,d);gl_FragColor=vec4(col,al);}'
+      ].join('\n');
+      var prog = linkProg(vs, fs); gl.useProgram(prog);
+      var buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+      var loc = gl.getAttribLocation(prog, 'p'); gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+      var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // uv.y is top-origin to match the element math
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.enable(gl.BLEND); gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      glState = { prog: prog, tex: tex, src: null };
+      loadGLBg(bg);
+
+      function linkProg(v, f) {
+        function sh(t, s) { var x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x);
+          if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) console.warn('LG shader:', gl.getShaderInfoLog(x)); return x; }
+        var p = gl.createProgram();
+        gl.attachShader(p, sh(gl.VERTEX_SHADER, v)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, f));
+        gl.linkProgram(p); return p;
+      }
+    }
+    function loadGLBg(src) {
+      if (!gl || !src) return;
+      if (typeof src === 'string') { var im = new Image(); im.crossOrigin = 'anonymous'; im.onload = function () { glState.src = im; uploadGL(im); }; im.src = src; }
+      else { glState.src = src; uploadGL(src); }
+    }
+    function uploadGL(src) {
+      if (!gl || !src) return;
+      gl.bindTexture(gl.TEXTURE_2D, glState.tex);
+      try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src); } catch (e) {}
+    }
+    function renderGL() {
+      if (!gl || !glState || !glState.src) return;
+      // render the drawing buffer at device-pixel resolution so high-frequency
+      // detail (text edges) doesn't alias when the browser upscales on HiDPI screens.
+      var dpr = window.devicePixelRatio || 1;
+      var r = el.getBoundingClientRect();
+      var w = Math.max(1, Math.round(r.width * dpr)), h = Math.max(1, Math.round(r.height * dpr));
+      if (glcanvas.width !== w || glcanvas.height !== h) { glcanvas.width = w; glcanvas.height = h; }
+      gl.viewport(0, 0, w, h);
+      var tag = glState.src.tagName;
+      if (tag === 'CANVAS' || tag === 'VIDEO') uploadGL(glState.src);
+      var p = glState.prog, U = function (n) { return gl.getUniformLocation(p, n); };
+      var rad = o.radius == null ? readRadius(el) : o.radius, a = o.lightAngle * Math.PI / 180;
+      // every pixel-space uniform scales by dpr together, keeping the shader internally consistent
+      // sample UVs are relative to the BACKGROUND's on-screen rect, not the window
+      var br = bg && bg.getBoundingClientRect ? bg.getBoundingClientRect() : null;
+      var bw = br && br.width ? br.width : innerWidth, bh = br && br.height ? br.height : innerHeight;
+      gl.uniform2f(U('u_win'), bw * dpr, bh * dpr);
+      gl.uniform2f(U('u_origin'), (br && br.width ? r.left - br.left : r.left) * dpr, (br && br.height ? r.top - br.top : r.top) * dpr);
+      gl.uniform2f(U('u_size'), w, h);
+      gl.uniform1f(U('u_radius'), rad * dpr);
+      gl.uniform1f(U('u_bezel'), o.depth * dpr);
+      gl.uniform1f(U('u_refraction'), o.refraction * dpr);
+      gl.uniform1f(U('u_dispersion'), o.dispersion);
+      gl.uniform1f(U('u_frost'), o.frost * dpr);
+      gl.uniform1f(U('u_curv'), o.curvature);
+      gl.uniform1f(U('u_convex'), o.convexity);
+      gl.uniform1f(U('u_lightI'), o.lightIntensity);
+      gl.uniform2f(U('u_light'), Math.cos(a), Math.sin(a));
+      gl.uniform1i(U('u_bg'), 0);
+      gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+
+    /* ---- per-frame loop only for modes that need positional sync ---- */
+    function tick() { if (mode === 'svg-clone') syncClone(); else if (mode === 'webgl') renderGL(); rafId = requestAnimationFrame(tick); }
+    if (mode === 'svg-clone' || mode === 'webgl') rafId = requestAnimationFrame(tick);
+
+    var ro = new ResizeObserver(function () { refreshMap(); if (mode === 'svg-clone') syncClone(); });
+    ro.observe(el);
+
+    refreshMap(); applyFilterParams(); applyOverlay();
+
+    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();
+        return instance;
+      },
+      refresh: function () { if (mode === 'svg-clone') reclone(); else if (mode === 'webgl') loadGLBg(resolveEl(o.background)); return instance; },
+      destroy: function () {
+        if (rafId) cancelAnimationFrame(rafId);
+        ro.disconnect();
+        // 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;
+      }
+    };
+    return instance;
+  }
+
+  /* ===================== <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'];
+  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;
+    var Base = (typeof HTMLElement !== 'undefined') ? HTMLElement : function () {};
+    function readOpts(node) {
+      var opts = {};
+      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);
+      });
+      return opts;
+    }
+    var C = function () { return Reflect.construct(Base, [], C); };
+    C.prototype = Object.create(Base.prototype);
+    C.observedAttributes = ATTRS;
+    C.prototype.connectedCallback = function () {
+      var self = this; if (this.style.display === '') this.style.display = 'block';
+      requestAnimationFrame(function () { self._lg = apply(self, readOpts(self)); });
+    };
+    C.prototype.attributeChangedCallback = function () { if (this._lg) this._lg.update(readOpts(this)); };
+    C.prototype.disconnectedCallback = function () { if (this._lg) { this._lg.destroy(); this._lg = null; } };
+    try { customElements.define('glass-kit', C); } catch (e) {}
+  }
+  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.0' };
+});

package/package.json

@@ -1,7 +1,65 @@
 {
   "name": "glasskit-js",
-  "version": "0.0.1",
-  "description": "Placeholder to reserve the name. Use glasskit-js@^1.0.0.",
+  "version": "1.0.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",
+    "glassmorphism",
+    "glass",
+    "backdrop-filter",
+    "refraction",
+    "displacement-map",
+    "feDisplacementMap",
+    "chromatic-aberration",
+    "webgl",
+    "apple",
+    "ios26",
+    "figma",
+    "ui",
+    "web-component",
+    "frosted-glass"
+  ],
+  "main": "./liquid-glass.js",
+  "module": "./liquid-glass.js",
+  "unpkg": "./liquid-glass.js",
+  "jsdelivr": "./liquid-glass.js",
+  "types": "./liquid-glass.d.ts",
+  "exports": {
+    ".": {
+      "types": "./liquid-glass.d.ts",
+      "import": "./liquid-glass.js",
+      "require": "./liquid-glass.js",
+      "default": "./liquid-glass.js"
+    },
+    "./react": {
+      "types": "./LiquidGlass.d.ts",
+      "default": "./LiquidGlass.mjs"
+    }
+  },
+  "files": [
+    "liquid-glass.js",
+    "liquid-glass.d.ts",
+    "LiquidGlass.mjs",
+    "LiquidGlass.d.ts",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./liquid-glass.js"
+  ],
+  "scripts": {
+    "bench": "node bench/run-playwright.mjs"
+  },
   "license": "MIT",
-  "private": false
+  "author": "amanblog",
+  "homepage": "https://amanblog.github.io/glasskit/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amanblog/glasskit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/amanblog/glasskit/issues"
+  },
+  "devDependencies": {
+    "playwright-core": "^1.61.1"
+  }
 }