@shulya/liquid-glass 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 # `@shulya/liquid-glass`
 
-[![npm version](https://img.shields.io/badge/npm-v1.0.0-007aff?style=flat-square)](https://www.npmjs.com/package/@shulya/liquid-glass)
+[![npm version](https://img.shields.io/badge/npm-v1.0.1-007aff?style=flat-square)](https://www.npmjs.com/package/@shulya/liquid-glass)
 [![Live Demo](https://img.shields.io/badge/Live%20Demo-liquid.shulya.tech-ff2d55?style=flat-square)](https://liquid.shulya.tech)
 [![GitHub Repo](https://img.shields.io/badge/GitHub-shulya--tech%2Fliquid--glass-181717?style=flat-square&logo=github)](https://github.com/shulya-tech/liquid-glass)
 [![Zero WebGL](<https://img.shields.io/badge/WebGL-None%20(100%25%20DOM%20%2F%202D%20LUT)-30d158?style=flat-square>)](#why-shulyaliquid-glass)
@@ -10,9 +10,10 @@
 **`@shulya/liquid-glass`** is an ultra-lightweight, zero-WebGL optical glass rendering engine for modern web applications. Turn any HTML container, card, navigation bar, modal, or interactive widget into a realistic refractive **Liquid Glass** block with real-time control over **`rim`**, **`ior`**, **`height`**, **`frosted`**, and **`fusion`** parameters.
 
 - **Live Interactive Demo:** [https://liquid.shulya.tech](https://liquid.shulya.tech)
+- **NPM Package:** [https://www.npmjs.com/package/@shulya/liquid-glass](https://www.npmjs.com/package/@shulya/liquid-glass)
 - **GitHub Repository:** [https://github.com/shulya-tech/liquid-glass](https://github.com/shulya-tech/liquid-glass)
 
-![Liquid Glass Interactive Playground](./screen.png)
+![Liquid Glass Interactive Playground](https://raw.githubusercontent.com/shulya-tech/liquid-glass/main/screen.png)
 
 ---
 
@@ -43,7 +44,7 @@ yarn add @shulya/liquid-glass
 > **Try it online right now:** [**https://liquid.shulya.tech**](https://liquid.shulya.tech)  
 > **Source code on GitHub:** [**github.com/shulya-tech/liquid-glass/tree/main/example**](https://github.com/shulya-tech/liquid-glass/tree/main/example)
 
-![Interactive React Playground Preview](./screen.png)
+![Interactive React Playground Preview](https://raw.githubusercontent.com/shulya-tech/liquid-glass/main/screen.png)
 
 The repository includes a complete **React + Vite** interactive playground in [`example/`](./example/) ([`example/src/App.jsx`](./example/src/App.jsx)) where you can drag three `<LiquidGlass>` components (a `136×74` capsule slider, a `196×116` rounded card, and a `112×112` circular lens) across a high-contrast optical test stage with a green pill track, diagonal rainbow ribbon, sunset sphere, black/white stripe grating, and centered `"Shulya"` typography.
 
@@ -327,6 +328,7 @@ To guarantee zero runtime trigonometric or shader overhead across mobile devices
 ## Links
 
 - **Live Demo:** [https://liquid.shulya.tech](https://liquid.shulya.tech)
+- **NPM Package:** [https://www.npmjs.com/package/@shulya/liquid-glass](https://www.npmjs.com/package/@shulya/liquid-glass)
 - **GitHub Repository:** [https://github.com/shulya-tech/liquid-glass](https://github.com/shulya-tech/liquid-glass)
 - **Issue Tracker:** [https://github.com/shulya-tech/liquid-glass/issues](https://github.com/shulya-tech/liquid-glass/issues)
 

package/dist/core.cjs

@@ -399,6 +399,7 @@ let blurCtx = null;
 let clusterOverlayCanvas = null;
 let clusterOverlayCtx = null;
 let rafScheduled = false;
+let rafId = 0;
 let listenersAttached = false;
 let lastFrostedRadius = -1;
 
@@ -449,8 +450,9 @@ function getReadableStrokeColor(borderCol, fallback = 'rgba(148, 163, 184, 0.55)
 
 function ensureStageBuffers() {
   if (typeof document === 'undefined') return false;
-  const vw = Math.max(1, window.innerWidth);
-  const vh = Math.max(1, window.innerHeight);
+  const docEl = document.documentElement;
+  const vw = Math.max(1, window.innerWidth, docEl ? docEl.clientWidth : 0);
+  const vh = Math.max(1, window.innerHeight, docEl ? docEl.clientHeight : 0);
 
   if (!stageCanvas) {
     stageCanvas = document.createElement('canvas');
@@ -497,13 +499,16 @@ function captureViewportStage(neededBlur) {
   stageCtx.fillStyle = '#040814';
   stageCtx.fillRect(0, 0, vw, vh);
 
-  // 2. Copy any background 2D canvas
+  // 2. Copy any background 2D canvas using its exact getBoundingClientRect() viewport box
   const bgCanvases = document.querySelectorAll('canvas:not(.lg-lens-canvas):not(.lg-cluster-canvas)');
   for (let i = 0; i < bgCanvases.length; i++) {
     const c = bgCanvases[i];
     if (c.width > 0 && c.height > 0) {
       try {
-        stageCtx.drawImage(c, 0, 0, vw, vh);
+        const cr = c.getBoundingClientRect();
+        if (cr.width > 0 && cr.height > 0) {
+          stageCtx.drawImage(c, cr.left, cr.top, cr.width, cr.height);
+        }
       } catch {
         // Ignore cross-origin canvas if any
       }
@@ -696,10 +701,9 @@ function renderIsolatedController(ctrl, rect) {
     ctrl._canvas.height = h;
   }
 
-  const vw = stageCanvas.width;
-  const vh = stageCanvas.height;
-  const dx = Math.max(0, Math.min(vw - w, Math.round(rect.left)));
-  const dy = Math.max(0, Math.min(vh - h, Math.round(rect.top)));
+  // Use exact un-clamped element position so dragging near/past mobile viewport edges never shifts the image
+  const dx = Math.round(rect.left);
+  const dy = Math.round(rect.top);
 
   const sourceCtx = ctrl.options.frosted > 0 ? blurCtx : stageCtx;
   const srcImg = sourceCtx.getImageData(dx, dy, w, h);
@@ -914,9 +918,12 @@ function renderAllActiveLenses() {
 }
 
 exports.scheduleStageRedraw = function scheduleStageRedraw() {
-  if (rafScheduled || typeof window === 'undefined') return;
+  if (typeof window === 'undefined') return;
+  if (rafScheduled && rafId) {
+    window.cancelAnimationFrame(rafId);
+  }
   rafScheduled = true;
-  window.requestAnimationFrame(renderAllActiveLenses);
+  rafId = window.requestAnimationFrame(renderAllActiveLenses);
 }
 
 function attachGlobalStageListeners() {

package/dist/core.mjs

@@ -399,6 +399,7 @@ let blurCtx = null;
 let clusterOverlayCanvas = null;
 let clusterOverlayCtx = null;
 let rafScheduled = false;
+let rafId = 0;
 let listenersAttached = false;
 let lastFrostedRadius = -1;
 
@@ -449,8 +450,9 @@ function getReadableStrokeColor(borderCol, fallback = 'rgba(148, 163, 184, 0.55)
 
 function ensureStageBuffers() {
   if (typeof document === 'undefined') return false;
-  const vw = Math.max(1, window.innerWidth);
-  const vh = Math.max(1, window.innerHeight);
+  const docEl = document.documentElement;
+  const vw = Math.max(1, window.innerWidth, docEl ? docEl.clientWidth : 0);
+  const vh = Math.max(1, window.innerHeight, docEl ? docEl.clientHeight : 0);
 
   if (!stageCanvas) {
     stageCanvas = document.createElement('canvas');
@@ -497,13 +499,16 @@ function captureViewportStage(neededBlur) {
   stageCtx.fillStyle = '#040814';
   stageCtx.fillRect(0, 0, vw, vh);
 
-  // 2. Copy any background 2D canvas
+  // 2. Copy any background 2D canvas using its exact getBoundingClientRect() viewport box
   const bgCanvases = document.querySelectorAll('canvas:not(.lg-lens-canvas):not(.lg-cluster-canvas)');
   for (let i = 0; i < bgCanvases.length; i++) {
     const c = bgCanvases[i];
     if (c.width > 0 && c.height > 0) {
       try {
-        stageCtx.drawImage(c, 0, 0, vw, vh);
+        const cr = c.getBoundingClientRect();
+        if (cr.width > 0 && cr.height > 0) {
+          stageCtx.drawImage(c, cr.left, cr.top, cr.width, cr.height);
+        }
       } catch {
         // Ignore cross-origin canvas if any
       }
@@ -696,10 +701,9 @@ function renderIsolatedController(ctrl, rect) {
     ctrl._canvas.height = h;
   }
 
-  const vw = stageCanvas.width;
-  const vh = stageCanvas.height;
-  const dx = Math.max(0, Math.min(vw - w, Math.round(rect.left)));
-  const dy = Math.max(0, Math.min(vh - h, Math.round(rect.top)));
+  // Use exact un-clamped element position so dragging near/past mobile viewport edges never shifts the image
+  const dx = Math.round(rect.left);
+  const dy = Math.round(rect.top);
 
   const sourceCtx = ctrl.options.frosted > 0 ? blurCtx : stageCtx;
   const srcImg = sourceCtx.getImageData(dx, dy, w, h);
@@ -914,9 +918,12 @@ function renderAllActiveLenses() {
 }
 
 export function scheduleStageRedraw() {
-  if (rafScheduled || typeof window === 'undefined') return;
+  if (typeof window === 'undefined') return;
+  if (rafScheduled && rafId) {
+    window.cancelAnimationFrame(rafId);
+  }
   rafScheduled = true;
-  window.requestAnimationFrame(renderAllActiveLenses);
+  rafId = window.requestAnimationFrame(renderAllActiveLenses);
 }
 
 function attachGlobalStageListeners() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shulya/liquid-glass",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "High-performance, zero-WebGL Liquid Glass optical UI engine with pre-computed empirical lookup tables for React, Vue, Svelte, Angular, SolidJS, and Vanilla JS.",
   "author": "Shulya (https://shulya.tech)",
   "homepage": "https://liquid.shulya.tech",
@@ -66,16 +66,7 @@
   },
   "files": [
     "dist",
-    "src",
     "types",
-    "example/index.html",
-    "example/package.json",
-    "example/vite.config.js",
-    "example/README.md",
-    "example/src",
-    "tables/optical_calibration_matrix.xlsx",
-    "tables/optical_calibration_matrix.csv",
-    "screen.png",
     "README.md",
     "LICENSE"
   ],
@@ -84,6 +75,7 @@
   },
   "scripts": {
     "build": "node build.mjs",
+    "build:example": "node build.mjs && cd example && npm install && npm run build",
     "example": "cd example && npm install && npm run dev",
     "prepublishOnly": "node build.mjs"
   },
@@ -114,4 +106,3 @@
   "sideEffects": false,
   "license": "MIT"
 }
-

package/example/README.md

@@ -1,37 +0,0 @@
-# `@shulya/liquid-glass` — React Interactive Playground (`example/`)
-
-- **Live Demo:** [https://liquid.shulya.tech](https://liquid.shulya.tech)
-- **GitHub Repository:** [https://github.com/shulya-tech/liquid-glass](https://github.com/shulya-tech/liquid-glass)
-
-![Liquid Glass React Playground](../screen.png)
-
-This directory contains a complete **React + Vite** application demonstrating the `<LiquidGlass>` component from `@shulya/liquid-glass/react`.
-
-## Overview
-
-- **Three Draggable `<LiquidGlass>` Components:**
-  - **Capsule Slider (`136 × 74 px`, radius `37 px`)** positioned over a green switch track.
-  - **Rounded Rectangle (`196 × 116 px`, radius `22 px`)** positioned over an electric blue gradient card.
-  - **Circular Lens (`112 × 112 px`, radius `56 px`)** positioned over a warm sunset sphere.
-- **High-Contrast Optical Stage:** Features a fine `56 px` architectural hairline grid, a thin diagonal rainbow ribbon, high-contrast black/white stripes, and centered `"Shulya"` typography to inspect edge refraction, chromatic dispersion, and specular bevel highlights.
-- **Liquid Surface Coalescence (`fusion`):** Drag any two or all three `<LiquidGlass>` elements close together to observe real-time liquid bridge coalescence powered by the precomputed empirical lookup tables (`_T0`–`_T4`), or toggle **Liquid Fusion** off in the bottom control shelf to inspect isolated lenses.
-- **Live React State Controls:**
-  - **Bevel Width (`rim`):** `6–32 px` (default `16 px`)
-  - **Refraction (`ior`):** `1.10–1.70` (default `1.46`)
-  - **Thickness (`height`):** `6–34 px` (default `18 px`)
-  - **Frosted Blur (`frosted`):** `0–30 px` (default `0 px`)
-  - **Liquid Fusion (`fusion`):** `true / false` toggle
-
-## Getting Started
-
-```bash
-# 1. From the root of the repository, build the library dist bundles:
-npm run build
-
-# 2. Install example dependencies and start the Vite dev server:
-cd example
-npm install
-npm run dev
-```
-
-Then open **`http://localhost:5173`** in your browser.

package/example/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <title>Liquid Glass UI — React Interactive Playground</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
-</html>

package/example/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "liquid-glass-ui-react-example",
-  "version": "1.0.0",
-  "private": true,
-  "description": "Interactive React playground for @shulya/liquid-glass (https://liquid.shulya.tech)",
-  "homepage": "https://liquid.shulya.tech",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shulya-tech/liquid-glass.git",
-    "directory": "example"
-  },
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "liquid-glass-ui": "file:..",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^6.2.0"
-  }
-}

package/example/src/App.jsx

@@ -1,353 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import {
-  LiquidGlass,
-  OPTICAL_DEFAULTS,
-  scheduleStageRedraw
-} from '@shulya/liquid-glass/react';
-
-/**
- * Draws a crisp, high-DPI optical test stage onto the background canvas:
- * - Light architectural backdrop (#ebedf2) with fine 56px hairline grid
- * - Sleek green switch pill track (top-left)
- * - Thin diagonal rainbow gradient ribbon
- * - Compact electric blue card (right-center)
- * - Refined sunset radial sphere (bottom-left)
- * - Fine 8px optical stripe grating (bottom-right)
- * - Clean centered "Shulya" typography
- */
-function drawStageBackground(canvas) {
-  if (!canvas) return;
-  const w = window.innerWidth;
-  const h = window.innerHeight;
-  const dpr = Math.min(window.devicePixelRatio || 1, 2);
-
-  canvas.width = Math.floor(w * dpr);
-  canvas.height = Math.floor(h * dpr);
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  ctx.save();
-  ctx.scale(dpr, dpr);
-
-  // 1. Clean Light Gray Backdrop (#ebedf2)
-  ctx.fillStyle = '#ebedf2';
-  ctx.fillRect(0, 0, w, h);
-
-  // Fine architectural hairline grid (56px step, 0.5px crisp stroke)
-  ctx.strokeStyle = 'rgba(0, 0, 0, 0.035)';
-  ctx.lineWidth = 0.5;
-  const step = 56;
-  ctx.beginPath();
-  for (let x = 0; x < w; x += step) {
-    ctx.moveTo(x + 0.5, 0);
-    ctx.lineTo(x + 0.5, h);
-  }
-  for (let y = 0; y < h; y += step) {
-    ctx.moveTo(0, y + 0.5);
-    ctx.lineTo(w, y + 0.5);
-  }
-  ctx.stroke();
-
-  // 2. Sleek Green Switch Track (Top-Left)
-  const pillX = w * 0.16;
-  const pillY = h * 0.22;
-  const pillW = 160;
-  const pillH = 26;
-  ctx.save();
-  ctx.beginPath();
-  ctx.roundRect(pillX - pillW / 2, pillY - pillH / 2, pillW, pillH, pillH / 2);
-  ctx.fillStyle = '#32d74b';
-  ctx.fill();
-  ctx.restore();
-
-  // 3. Thin Diagonal Rainbow Gradient Ribbon
-  ctx.save();
-  ctx.translate(w * 0.5, h * 0.51);
-  ctx.rotate(-0.2);
-  const ribHalfLen = Math.min(w * 0.28, 310);
-  const ribThickness = 26;
-  const ribGrad = ctx.createLinearGradient(-ribHalfLen, 0, ribHalfLen, 0);
-  ribGrad.addColorStop(0.0, '#ff2d55');
-  ribGrad.addColorStop(0.25, '#ff9500');
-  ribGrad.addColorStop(0.5, '#ffcc00');
-  ribGrad.addColorStop(0.75, '#5ac8fa');
-  ribGrad.addColorStop(1.0, '#5856d6');
-  ctx.fillStyle = ribGrad;
-  ctx.beginPath();
-  ctx.roundRect(
-    -ribHalfLen,
-    -ribThickness / 2,
-    ribHalfLen * 2,
-    ribThickness,
-    ribThickness / 2
-  );
-  ctx.fill();
-  ctx.restore();
-
-  // 4. Refined Electric Blue Card (Right Center)
-  ctx.save();
-  const cardX = w * 0.67;
-  const cardY = h * 0.24;
-  const cardW = 152;
-  const cardH = 88;
-  const blueGrad = ctx.createLinearGradient(cardX, cardY, cardX + cardW, cardY + cardH);
-  blueGrad.addColorStop(0, '#007aff');
-  blueGrad.addColorStop(1, '#5856d6');
-  ctx.fillStyle = blueGrad;
-  ctx.beginPath();
-  ctx.roundRect(cardX, cardY, cardW, cardH, 22);
-  ctx.fill();
-  ctx.restore();
-
-  // 5. Compact Sunset Orange Sphere (Bottom Left)
-  ctx.save();
-  const orbX = w * 0.26;
-  const orbY = h * 0.67;
-  const orbR = 54;
-  const orbGrad = ctx.createRadialGradient(orbX - 14, orbY - 14, 6, orbX, orbY, orbR);
-  orbGrad.addColorStop(0, '#ffcc00');
-  orbGrad.addColorStop(0.6, '#ff3b30');
-  orbGrad.addColorStop(1, '#c91f66');
-  ctx.fillStyle = orbGrad;
-  ctx.beginPath();
-  ctx.arc(orbX, orbY, orbR, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.restore();
-
-  // 6. Fine Optical Stripe Grating (Bottom Right — 10px stripes for refraction testing)
-  ctx.save();
-  const stX = w * 0.63;
-  const stY = h * 0.62;
-  const stW = 160;
-  const stH = 92;
-  const stripeWidth = 10;
-  ctx.beginPath();
-  ctx.roundRect(stX, stY, stW, stH, 18);
-  ctx.clip();
-  for (let i = 0; i < stW / stripeWidth; i++) {
-    ctx.fillStyle = i % 2 === 0 ? '#1c1c1e' : '#ffffff';
-    ctx.fillRect(stX + i * stripeWidth, stY, stripeWidth, stH);
-  }
-  ctx.restore();
-
-  // 7. Sleek Center Typography ("Shulya")
-  ctx.save();
-  const fontSize = Math.min(w * 0.082, 92);
-  ctx.font = `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillStyle = '#16181d';
-  ctx.fillText('Shulya', w * 0.5, h * 0.43);
-  ctx.restore();
-
-  ctx.restore();
-}
-
-export default function App() {
-  const stageRef = useRef(null);
-
-  // Live optical configuration parameters bound to <LiquidGlass> props
-  const [rim, setRim] = useState(OPTICAL_DEFAULTS.rim);
-  const [ior, setIor] = useState(OPTICAL_DEFAULTS.ior);
-  const [height, setHeight] = useState(OPTICAL_DEFAULTS.height);
-  const [frosted, setFrosted] = useState(OPTICAL_DEFAULTS.frosted);
-  const [fusion, setFusion] = useState(OPTICAL_DEFAULTS.fusion);
-  const [fps, setFps] = useState(60);
-
-  // Three sleek draggable LiquidGlass bodies
-  const [shapes, setShapes] = useState(() => {
-    const w = typeof window !== 'undefined' ? window.innerWidth : 1280;
-    const h = typeof window !== 'undefined' ? window.innerHeight : 800;
-    return [
-      { id: 'slider', x: w * 0.16 + 42, y: h * 0.22, w: 136, h: 74, r: 37 },
-      { id: 'rect', x: w * 0.71, y: h * 0.21, w: 196, h: 116, r: 22 },
-      { id: 'circle', x: w * 0.22, y: h * 0.65, w: 112, h: 112, r: 56 }
-    ];
-  });
-
-  const dragState = useRef(null);
-
-  // Draw stage canvas and handle window resize
-  useEffect(() => {
-    drawStageBackground(stageRef.current);
-    scheduleStageRedraw();
-
-    const handleResize = () => {
-      drawStageBackground(stageRef.current);
-      scheduleStageRedraw();
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  // FPS monitor
-  useEffect(() => {
-    let frameCount = 0;
-    let lastTime = performance.now();
-    let rafId;
-
-    const tick = (now) => {
-      frameCount++;
-      if (now - lastTime >= 500) {
-        setFps(Math.min(120, Math.round((frameCount * 1000) / (now - lastTime))));
-        frameCount = 0;
-        lastTime = now;
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
-  }, []);
-
-  // Pointer dragging handlers
-  const handlePointerDown = useCallback((id, e) => {
-    e.currentTarget.setPointerCapture(e.pointerId);
-    setShapes((prev) => {
-      const idx = prev.findIndex((s) => s.id === id);
-      if (idx === -1) return prev;
-      const target = prev[idx];
-      dragState.current = {
-        id,
-        offX: e.clientX - target.x,
-        offY: e.clientY - target.y
-      };
-      // Move active dragged shape to top of render order
-      const next = [...prev];
-      const [picked] = next.splice(idx, 1);
-      next.push(picked);
-      return next;
-    });
-  }, []);
-
-  useEffect(() => {
-    const handlePointerMove = (e) => {
-      if (!dragState.current) return;
-      const { id, offX, offY } = dragState.current;
-      const nextX = e.clientX - offX;
-      const nextY = e.clientY - offY;
-
-      setShapes((prev) =>
-        prev.map((s) => (s.id === id ? { ...s, x: nextX, y: nextY } : s))
-      );
-      scheduleStageRedraw();
-    };
-
-    const handlePointerUp = () => {
-      dragState.current = null;
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-    window.addEventListener('pointerup', handlePointerUp);
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', handlePointerUp);
-    };
-  }, []);
-
-  return (
-    <>
-      {/* Background Optical Test Stage */}
-      <canvas ref={stageRef} className="stage-canvas" />
-
-      {/* Three Draggable <LiquidGlass> React Components */}
-      {shapes.map((s, index) => (
-        <LiquidGlass
-          key={s.id}
-          rim={rim}
-          ior={ior}
-          height={height}
-          frosted={frosted}
-          fusion={fusion}
-          className="glass-body"
-          data-lg-tint="rgba(255, 255, 255, 0.03)"
-          onPointerDown={(e) => handlePointerDown(s.id, e)}
-          style={{
-            width: `${s.w}px`,
-            height: `${s.h}px`,
-            borderRadius: `${s.r}px`,
-            left: `${Math.round(s.x - s.w * 0.5)}px`,
-            top: `${Math.round(s.y - s.h * 0.5)}px`,
-            zIndex: 20 + index
-          }}
-        />
-      ))}
-
-      {/* Bottom Interactive Control Shelf */}
-      <div className="shelf-bar">
-        <div className="ctrl">
-          <div className="ctrl-head">
-            <span>Bevel Width (Rim)</span>
-            <span className="ctrl-val">{rim} px</span>
-          </div>
-          <input
-            type="range"
-            min="6"
-            max="32"
-            step="1"
-            value={rim}
-            onChange={(e) => setRim(Number(e.target.value))}
-          />
-        </div>
-
-        <div className="ctrl">
-          <div className="ctrl-head">
-            <span>Refraction (IOR)</span>
-            <span className="ctrl-val">{ior.toFixed(2)}</span>
-          </div>
-          <input
-            type="range"
-            min="1.10"
-            max="1.70"
-            step="0.02"
-            value={ior}
-            onChange={(e) => setIor(Number(e.target.value))}
-          />
-        </div>
-
-        <div className="ctrl">
-          <div className="ctrl-head">
-            <span>Thickness (Height)</span>
-            <span className="ctrl-val">{height} px</span>
-          </div>
-          <input
-            type="range"
-            min="6"
-            max="34"
-            step="1"
-            value={height}
-            onChange={(e) => setHeight(Number(e.target.value))}
-          />
-        </div>
-
-        <div className="ctrl">
-          <div className="ctrl-head">
-            <span>Frosted Blur</span>
-            <span className="ctrl-val">{frosted} px</span>
-          </div>
-          <input
-            type="range"
-            min="0"
-            max="30"
-            step="1"
-            value={frosted}
-            onChange={(e) => setFrosted(Number(e.target.value))}
-          />
-        </div>
-
-        <label className="ctrl-toggle">
-          <input
-            type="checkbox"
-            checked={fusion}
-            onChange={(e) => setFusion(e.target.checked)}
-          />
-          <span>Liquid Fusion</span>
-        </label>
-
-        <div className="fps-tag">{fps} FPS</div>
-      </div>
-    </>
-  );
-}

package/example/src/main.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
-import './styles.css';
-
-createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);