lensfx 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,53 +1,69 @@
-# Changelog
-
-All notable changes to `lensfx` will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [0.1.1] - 2026-10-17
-
-### Added
-
-#### Engine Layer (`lensfx`)
-- Pure mathematical optics engine:
-  - Error function (`erf`) calculation for Gaussian surface profiles.
-  - Optical dome constant calculation (`computeDomeConstants`).
-  - Radial gradient generation for spherical dome profiles (`domeGradient`).
-  - SVG `feColorMatrix` calculation for aspect ratio corrections (`colorMatrixValues`).
-  - SVG mask URI generation for rounded-rectangle lens clipping (`getSvgMaskDataUri`).
-  - Real-time and asynchronous displacement map generator (`createDisplacementMapGeneratorSync`, `generateDisplacementMapAsync`).
-  - Pre-calibrated lens optical constants (`SWITCH_GLASS_DEFAULTS`, `SLIDER_GLASS_DEFAULTS`, dark/light theme overrides).
-
-#### Primitives Layer
-- `<Lens>` unstyled behavioral glass component:
-  - SVG `feDisplacementMap` real-time DOM refraction (preserves text selection, pointer events, form inputs).
-  - Chromatic aberration separation (red, green, blue optical channels).
-  - Multi-lens context support (`Lens.General` / `Lens.Group`) for sharing one background across multiple moving lenses.
-  - Offscreen generation pausing (`pauseOffscreen`) via `IntersectionObserver`.
-  - Motion value interpolation for 60fps gesture and scroll-driven physics via Framer Motion.
-
-#### Components Layer
-- `<LensSwitch>` accessible glass toggle switch with spring physics, keyboard support (Space / Enter), and full controlled/uncontrolled state.
-- `<LensSlider>` accessible optical glass range slider with tick quantization, track fill refraction, and thumb dome physics.
-- `<LensToggleGroup>` segmented radio control with real-time sliding optical lens and glowing active indicator.
-
-#### WebGL Layer
-- `VideoRefractionRenderer` WebGL 1 shader fallback for live HTML5 `<video>` elements on WebKit / Safari.
-- `QRRefractionRenderer` WebGL 2 (#version 300 es) interactive QR code refraction engine with O(1) uniform texture lookup.
-
-#### Design Tokens
-- Design token stylesheet `lensfx/styles` (`dist/lensfx.css`) providing namespaced CSS custom properties (`--lensfx-*`) for colors, radii, shadows, animations, auto dark-mode (`prefers-color-scheme`), and accessibility (`prefers-reduced-motion`, `:focus-visible`).
-
-#### Developer Experience & Tooling
-- Dual ESM and CJS bundle output with TypeScript declarations (`tsup`).
-- `"use client"` directive injection for Next.js App Router (RSC) compatibility.
-- Tree-shaking enabled with `sideEffects: ["*.css"]`.
-- Comprehensive Vitest unit & integration test suite (50 tests covering pure math, switch, slider, and toggle group).
-- Size-limit bundle gate (core engine < 10 kB, full library < 80 kB).
-- GitHub Actions CI workflow for type checking, testing, building, and bundle size tracking.
-
-## [0.1.0] - 2026-10-16
-
-### Added
-- Initial experimental release of reverse-engineered glass simulation engine.
+# Changelog
+
+All notable changes to `lensfx` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.3] - 2026-10-17
+
+### Added
+- Zero-dependency vanilla DOM engine: `createLens(target, options)` with real-time SVG displacement, chromatic aberration, pointer tracking (`interactive: true`), responsive auto-resizing via `ResizeObserver`, and dynamic lifecycle controls (`setPosition`, `update`, `destroy`).
+- Standalone CDN IIFE builds (`dist/cdn/lensfx.min.js` and `dist/cdn/lensfx.js`) attaching to `window.lensfx` for direct `<script>` tag usage without bundlers or React.
+- Subpath exports `"lensfx/vanilla"` and `"lensfx/cdn"` in `package.json`.
+- Standard CDN distribution fields (`unpkg`, `jsdelivr`) pointing to `dist/cdn/lensfx.min.js`.
+- Made peer dependencies (`react`, `react-dom`, `framer-motion`) optional for vanilla JS consumers.
+- Live standalone CDN showcase demo (`examples/cdn-demo.html`).
+
+## [0.1.2] - 2026-10-17
+
+### Changed
+- Refined package description and registry metadata to emphasize clean optical physics, real DOM refraction, and SVG filter mechanics.
+- Cleaned up internal documentation and comments across engine and primitive layers.
+
+## [0.1.1] - 2026-10-17
+
+### Added
+
+#### Engine Layer (`lensfx`)
+- Pure mathematical optics engine:
+  - Error function (`erf`) calculation for Gaussian surface profiles.
+  - Optical dome constant calculation (`computeDomeConstants`).
+  - Radial gradient generation for spherical dome profiles (`domeGradient`).
+  - SVG `feColorMatrix` calculation for aspect ratio corrections (`colorMatrixValues`).
+  - SVG mask URI generation for rounded-rectangle lens clipping (`getSvgMaskDataUri`).
+  - Real-time and asynchronous displacement map generator (`createDisplacementMapGeneratorSync`, `generateDisplacementMapAsync`).
+  - Pre-calibrated lens optical constants (`SWITCH_GLASS_DEFAULTS`, `SLIDER_GLASS_DEFAULTS`, dark/light theme overrides).
+
+#### Primitives Layer
+- `<Lens>` unstyled behavioral glass component:
+  - SVG `feDisplacementMap` real-time DOM refraction (preserves text selection, pointer events, form inputs).
+  - Chromatic aberration separation (red, green, blue optical channels).
+  - Multi-lens context support (`Lens.General` / `Lens.Group`) for sharing one background across multiple moving lenses.
+  - Offscreen generation pausing (`pauseOffscreen`) via `IntersectionObserver`.
+  - Motion value interpolation for 60fps gesture and scroll-driven physics via Framer Motion.
+
+#### Components Layer
+- `<LensSwitch>` accessible glass toggle switch with spring physics, keyboard support (Space / Enter), and full controlled/uncontrolled state.
+- `<LensSlider>` accessible optical glass range slider with tick quantization, track fill refraction, and thumb dome physics.
+- `<LensToggleGroup>` segmented radio control with real-time sliding optical lens and glowing active indicator.
+
+#### WebGL Layer
+- `VideoRefractionRenderer` WebGL 1 shader fallback for live HTML5 `<video>` elements on WebKit / Safari.
+- `QRRefractionRenderer` WebGL 2 (#version 300 es) interactive QR code refraction engine with O(1) uniform texture lookup.
+
+#### Design Tokens
+- Design token stylesheet `lensfx/styles` (`dist/lensfx.css`) providing namespaced CSS custom properties (`--lensfx-*`) for colors, radii, shadows, animations, auto dark-mode (`prefers-color-scheme`), and accessibility (`prefers-reduced-motion`, `:focus-visible`).
+
+#### Developer Experience & Tooling
+- Dual ESM and CJS bundle output with TypeScript declarations (`tsup`).
+- `"use client"` directive injection for Next.js App Router (RSC) compatibility.
+- Tree-shaking enabled with `sideEffects: ["*.css"]`.
+- Comprehensive Vitest unit & integration test suite (50 tests covering pure math, switch, slider, and toggle group).
+- Size-limit bundle gate (core engine < 10 kB, full library < 80 kB).
+- GitHub Actions CI workflow for type checking, testing, building, and bundle size tracking.
+
+## [0.1.0] - 2026-10-16
+
+### Added
+- Initial experimental release of optical glass refraction engine.

package/README.md

@@ -67,6 +67,45 @@ That's it. Zero configuration for a working lens.
 
 ---
 
+### Vanilla JS / Static HTML (via CDN — No React, No Bundler)
+
+You don't need npm, React, or a bundler. Drop a `<script>` tag into any static `.html` file:
+
+```html
+<!-- jsDelivr (always latest) -->
+<script src="https://cdn.jsdelivr.net/npm/lensfx/dist/cdn/lensfx.min.js"></script>
+
+<!-- or unpkg -->
+<!-- <script src="https://unpkg.com/lensfx/dist/cdn/lensfx.min.js"></script> -->
+
+<div id="card" style="width: 400px; height: 300px; position: relative;">
+  <h2>Refracted content</h2>
+</div>
+
+<script>
+  const lens = lensfx.createLens("#card", {
+    width: 200,
+    height: 120,
+    radius: 28,
+    depth: 2.5,
+    chroma: 0.7,
+    interactive: true, // tracks cursor automatically
+  });
+
+  // Dynamic API
+  // lens.setPosition(x, y);
+  // lens.update({ depth: 3 });
+  // lens.destroy();
+</script>
+```
+
+Or import the zero-dependency vanilla engine via npm:
+```ts
+import { createLens } from "lensfx/vanilla";
+```
+
+---
+
 ## Components
 
 ### `<Lens>` — primitive (unstyled)