@edinstvo/glass 0.0.0-stage → 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Makar K
+
+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/README.md

@@ -1,3 +1,142 @@
-# Temporary Holding Version
+<div align="center">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1>@edinstvo/glass</h1>
+
+<p><b>Real glass for the web. One material, the same on macOS and Windows.</b></p>
+
+<p>
+A WebGL lens with refraction, dispersion, frost and light,<br>
+wrapped in a single web component that works in any framework.
+</p>
+
+<p>
+<a href="https://www.npmjs.com/package/@edinstvo/glass"><img src="https://img.shields.io/npm/v/@edinstvo/glass?style=for-the-badge&labelColor=000000&color=1a1a1a&label=npm" alt="npm version"></a>
+<img src="https://img.shields.io/badge/WebGL-2-1a1a1a?style=for-the-badge&labelColor=000000&logo=webgl&logoColor=white" alt="WebGL 2">
+<img src="https://img.shields.io/badge/dependencies-0-1a1a1a?style=for-the-badge&labelColor=000000" alt="Zero dependencies">
+<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-1a1a1a?style=for-the-badge&labelColor=000000" alt="MIT license"></a>
+</p>
+
+<p>
+<a href="#install"><b>Install</b></a>
+&nbsp;·&nbsp;
+<a href="#material">Material</a>
+&nbsp;·&nbsp;
+<a href="#backdrop">Backdrop</a>
+&nbsp;·&nbsp;
+<a href="#limits">Limits</a>
+</p>
+
+</div>
+
+<br>
+
+## Principles
+
+> **Optics, not blur.** Light bends through a curved edge by Snell's law, so glass behaves like glass
+> instead of a tinted rectangle.
+>
+> **Quiet by default.** A frame is drawn only when something changes. Nothing on screen moves, nothing
+> runs on the GPU.
+>
+> **One context.** Every element on the page shares a single WebGL context, however many there are.
+
+## Install
+
+```bash
+npm i @edinstvo/glass
+```
+
+```html
+<script type="module">
+  import "@edinstvo/glass/define";
+</script>
+
+<edinstvo-glass material="regular" interaction="calm">
+  Hello
+</edinstvo-glass>
+```
+
+The corner radius comes from CSS `border-radius`, the size from your layout. Everything else is optional.
+
+Not a fan of custom elements? Attach glass to any node:
+
+```js
+import { attachGlass } from "@edinstvo/glass";
+
+const glass = attachGlass(element, { material: "frost" });
+glass.set({ material: { frost: 0.4 } });
+glass.destroy();
+```
+
+## Material
+
+Set a preset with `material`, then override anything with an attribute, a `--glass-*` CSS variable or a property.
+
+| Attribute | Range | What it does |
+|---|---|---|
+| `refraction` | 0 to 1 | How hard the edge bends what is behind it |
+| `depth` | 0 to 96 px | Width of the curved edge |
+| `splay` | 0 to 1 | Spreads the curve from the edge towards the centre |
+| `dispersion` | 0 to 1 | How far colours split wherever the glass bends |
+| `frost` | 0 to 1 | Matte surface, a true gaussian up to 20 px |
+| `transparency` | 0 to 1 | How much of the backdrop survives the tint |
+| `tint` | any CSS colour | Glass colour. `auto` follows the theme |
+| `lift` | 0 to 1 | Brightens everything behind the glass |
+| `light` | 0 to 1 | Shading across the curve, bright towards the light and dark away from it |
+| `rim` | 0 to 1 | Thin light line along the edge, brightest in line with the light |
+| `glint` | 0 to 1 | Sharp highlight along the edge. Off in every preset |
+| `light-angle` | -180 to 180° | Where the light comes from. 0 is the top |
+| `bloom` | 0 to 1 | Glow inside the glass and around it |
+
+### Presets
+
+`pure` · `clear` · `regular` · `frost` · `lens` · `prism`
+
+`regular` and `clear` are tuned against the system glass on macOS, pixel by pixel. `pure` is the same lens with no frost at all.
+
+### Interaction
+
+`none` · `calm` · `lively`, or your own `{ follow, press, stretch }`.
+Light follows the pointer, the surface swells under a press. `prefers-reduced-motion` turns all of it off.
+
+## Backdrop
+
+WebGL can't read the pixels of a page, so glass needs to be told what is behind it.
+With `source="auto"` it looks for itself: the nearest `<img>`, `<video>`, `<canvas>`, CSS `url()` background
+or solid colour under the element.
+
+```html
+<edinstvo-glass source="#scene"></edinstvo-glass>
+```
+
+```js
+glass.source = canvas;
+glass.invalidate();
+```
+
+A playing video updates on its own. For a canvas you draw on, call `invalidate()` after drawing or set `live`.
+
+## Plain CSS
+
+No JavaScript, or no GPU? `@edinstvo/glass/glass.css` gives you `.glass`, `.glass-clear` and `.glass-frost`
+on top of `backdrop-filter`. The element falls back to the same look by itself when WebGL is missing.
+
+## Limits
+
+- Text and regular DOM behind the glass aren't refracted, only the sources listed above. Draw them to a canvas if you need them.
+- CSS gradients aren't read yet. Glass skips them and looks further down the stack.
+- Cross-origin images need CORS headers, otherwise that element falls back to CSS.
+
+## Development
+
+```bash
+npm run demo
+```
+
+```bash
+npm test
+```
+
+## License
+
+[MIT](LICENSE)

package/css/glass.css

@@ -0,0 +1,33 @@
+:root {
+  --glass-radius: 24px;
+  --glass-shadow: 0 8px 32px rgb(0 0 0 / .1);
+  --glass-fallback: rgb(249 249 249 / .22);
+  --glass-edge: rgb(255 255 255 / .5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --glass-shadow: 0 8px 32px rgb(0 0 0 / .4);
+    --glass-fallback: rgb(28 28 30 / .55);
+    --glass-edge: rgb(255 255 255 / .22);
+  }
+}
+
+:root[data-theme="dark"] {
+  --glass-shadow: 0 8px 32px rgb(0 0 0 / .4);
+  --glass-fallback: rgb(28 28 30 / .55);
+  --glass-edge: rgb(255 255 255 / .22);
+}
+
+.glass,
+.glass-clear,
+.glass-frost {
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge);
+  background: var(--glass-fallback);
+  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(1.6);
+  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(1.6);
+}
+
+.glass-clear { --glass-blur: 2px; background: transparent; }
+.glass-frost { --glass-blur: 28px; }

package/dist/backdrop.d.ts

@@ -0,0 +1,11 @@
+import { type Box } from "./geometry.js";
+export type GlassImage = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | OffscreenCanvas;
+export type GlassSource = "auto" | string | GlassImage;
+export interface Backdrop {
+    image: GlassImage;
+    width: number;
+    height: number;
+    map: Box;
+    live: boolean;
+}
+export declare function resolveBackdrop(host: HTMLElement, rect: DOMRect, source: GlassSource, onReady: () => void): Backdrop | null;

package/dist/backdrop.js

@@ -0,0 +1,104 @@
+import { parseColor, prefersDark } from "./color.js";
+import { fitBox } from "./geometry.js";
+const viewport = () => ({ x: 0, y: 0, w: innerWidth, h: innerHeight });
+const images = new Map();
+const solids = new Map();
+function naturalSize(image) {
+    if (image instanceof HTMLImageElement)
+        return image.complete ? [image.naturalWidth, image.naturalHeight] : [0, 0];
+    if (image instanceof HTMLVideoElement)
+        return image.readyState >= 2 ? [image.videoWidth, image.videoHeight] : [0, 0];
+    return [image.width, image.height];
+}
+function whenReady(image, onReady) {
+    if (image instanceof HTMLImageElement)
+        image.addEventListener("load", onReady, { once: true });
+    if (image instanceof HTMLVideoElement)
+        image.addEventListener("loadeddata", onReady, { once: true });
+}
+function solid(color) {
+    let canvas = solids.get(color);
+    if (!canvas) {
+        canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        const context = canvas.getContext("2d");
+        context.fillStyle = color;
+        context.fillRect(0, 0, 1, 1);
+        solids.set(color, canvas);
+    }
+    return { image: canvas, width: 1, height: 1, map: viewport(), live: false };
+}
+function fromImage(image, onReady) {
+    const [width, height] = naturalSize(image);
+    if (!width || !height) {
+        whenReady(image, onReady);
+        return null;
+    }
+    let map = viewport();
+    if (image instanceof Element && image.isConnected) {
+        const rect = image.getBoundingClientRect();
+        const fit = getComputedStyle(image).objectFit;
+        if (rect.width && rect.height)
+            map = fitBox({ x: rect.left, y: rect.top, w: rect.width, h: rect.height }, width, height, image instanceof HTMLCanvasElement && fit === "fill" ? "fill" : fit);
+    }
+    const live = image instanceof HTMLVideoElement ? !image.paused : image instanceof HTMLCanvasElement || image instanceof OffscreenCanvas;
+    return { image, width, height, map, live };
+}
+function loadImage(url, onReady) {
+    let image = images.get(url);
+    if (!image) {
+        image = new Image();
+        image.crossOrigin = "anonymous";
+        image.src = url;
+        images.set(url, image);
+    }
+    if (!image.complete)
+        image.addEventListener("load", onReady, { once: true });
+    return image;
+}
+function fromBackground(element, onReady) {
+    const style = getComputedStyle(element);
+    const url = /url\(["']?(.+?)["']?\)/.exec(style.backgroundImage)?.[1];
+    if (url) {
+        const image = loadImage(url, onReady);
+        if (!image.complete || !image.naturalWidth)
+            return null;
+        const rect = element.getBoundingClientRect();
+        const page = element === document.body || element === document.documentElement;
+        const box = style.backgroundAttachment === "fixed" || page ? viewport() : { x: rect.left, y: rect.top, w: rect.width, h: rect.height };
+        const fit = style.backgroundSize === "cover" ? "cover" : style.backgroundSize === "contain" ? "contain" : style.backgroundSize === "100% 100%" ? "fill" : "none";
+        return { image, width: image.naturalWidth, height: image.naturalHeight, map: fitBox(box, image.naturalWidth, image.naturalHeight, fit), live: false };
+    }
+    if (parseColor(style.backgroundColor)[3] > 0.99)
+        return solid(style.backgroundColor);
+    return undefined;
+}
+function discover(host, rect, onReady) {
+    const stack = document.elementsFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    for (const element of stack) {
+        if (element === host || host.contains(element) || element.hasAttribute("data-engine"))
+            continue;
+        if (element instanceof HTMLImageElement || element instanceof HTMLCanvasElement || element instanceof HTMLVideoElement) {
+            const found = fromImage(element, onReady);
+            if (found)
+                return found;
+            continue;
+        }
+        const found = fromBackground(element, onReady);
+        if (found !== undefined)
+            return found;
+    }
+    return solid(prefersDark() ? "#000" : "#fff");
+}
+export function resolveBackdrop(host, rect, source, onReady) {
+    if (source === "auto")
+        return discover(host, rect, onReady);
+    if (typeof source === "string") {
+        const element = document.querySelector(source);
+        if (element instanceof HTMLImageElement || element instanceof HTMLCanvasElement || element instanceof HTMLVideoElement)
+            return fromImage(element, onReady);
+        return element ? (fromBackground(element, onReady) ?? null) : null;
+    }
+    return fromImage(source, onReady);
+}
+//# sourceMappingURL=backdrop.js.map

package/dist/backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","sourceRoot":"","sources":["../src/backdrop.ts"],"names":[],"mappings":"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"}

package/dist/color.d.ts

@@ -0,0 +1,4 @@
+export type Rgba = readonly [number, number, number, number];
+export declare function parseColor(color: string): Rgba;
+export declare function prefersDark(): boolean;
+export declare function resolveTint(tint: string): readonly [number, number, number];

package/dist/color.js

@@ -0,0 +1,29 @@
+const cache = new Map();
+let probe = null;
+export function parseColor(color) {
+    const known = cache.get(color);
+    if (known)
+        return known;
+    probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    if (!probe)
+        return [1, 1, 1, 1];
+    probe.clearRect(0, 0, 1, 1);
+    probe.fillStyle = "#fff";
+    probe.fillStyle = color;
+    probe.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
+    const rgba = a ? [r / a, g / a, b / a, a / 255] : [0, 0, 0, 0];
+    cache.set(color, rgba);
+    return rgba;
+}
+export function prefersDark() {
+    const theme = document.documentElement.dataset.theme;
+    if (theme)
+        return theme === "dark";
+    return matchMedia("(prefers-color-scheme: dark)").matches;
+}
+export function resolveTint(tint) {
+    const [r, g, b] = parseColor(tint === "auto" ? (prefersDark() ? "#1c1c1e" : "#f9f9f9") : tint);
+    return [r, g, b];
+}
+//# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAgB,CAAC;AACtC,IAAI,KAAK,GAAoC,IAAI,CAAC;AAElD,MAAM,UAAU,UAAU,CAAC,KAAa;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,KAAK;QAAE,OAAO,KAAK,CAAC;IACxB,KAAK,KAAK,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,IAAI,CAAC,KAAK;QAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAChC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5B,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3B,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,MAAM,IAAI,GAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACrE,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACvB,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;IACrD,IAAI,KAAK;QAAE,OAAO,KAAK,KAAK,MAAM,CAAC;IACnC,OAAO,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;AAC5D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC/F,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACnB,CAAC"}

package/dist/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/define.js

@@ -0,0 +1,3 @@
+import { defineGlass } from "./element.js";
+defineGlass();
+//# sourceMappingURL=define.js.map

package/dist/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,WAAW,EAAE,CAAC"}

package/dist/element.d.ts

@@ -0,0 +1,26 @@
+import type { GlassSource } from "./backdrop.js";
+import type { Interaction, InteractionName } from "./interaction.js";
+import { type Material, type PresetName } from "./material.js";
+declare const Base: typeof HTMLElement;
+export declare class EdinstvoGlass extends Base {
+    static observedAttributes: string[];
+    private surface;
+    private sourceValue;
+    private materialValue;
+    private interactionValue;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get source(): GlassSource;
+    set source(value: GlassSource);
+    get material(): PresetName | Partial<Material>;
+    set material(value: PresetName | Partial<Material>);
+    get interaction(): InteractionName | Interaction;
+    set interaction(value: InteractionName | Interaction);
+    invalidate(): void;
+    private sync;
+    private composeMaterial;
+}
+export declare function defineGlass(tag?: string): void;
+export {};

package/dist/element.js

@@ -0,0 +1,113 @@
+import { kebab, numericKeys, presets } from "./material.js";
+import { GlassSurface, placeCanvas } from "./surface.js";
+const Base = (globalThis.HTMLElement ?? class {
+});
+const css = `
+:host {
+  display: inline-block;
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--glass-radius, 24px);
+  box-shadow: var(--glass-shadow, 0 8px 32px rgb(0 0 0 / .1));
+}
+:host(:not([data-engine="webgl"])) {
+  background: var(--glass-fallback, rgb(255 255 255 / .22));
+  -webkit-backdrop-filter: blur(16px) saturate(1.6);
+  backdrop-filter: blur(16px) saturate(1.6);
+}
+.content {
+  display: block;
+  position: relative;
+  z-index: 1;
+  border-radius: inherit;
+}
+`;
+const materialAttributes = new Map(numericKeys.map((key) => [kebab(key), key]));
+export class EdinstvoGlass extends Base {
+    static observedAttributes = ["material", "interaction", "source", "live", "tint", ...materialAttributes.keys()];
+    surface;
+    sourceValue;
+    materialValue;
+    interactionValue;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = css;
+        const canvas = document.createElement("canvas");
+        canvas.setAttribute("part", "glass");
+        placeCanvas(canvas);
+        const content = document.createElement("span");
+        content.className = "content";
+        content.setAttribute("part", "content");
+        content.append(document.createElement("slot"));
+        root.append(style, canvas, content);
+        this.surface = new GlassSurface(this, canvas);
+    }
+    connectedCallback() {
+        this.sync();
+        this.surface.connect();
+    }
+    disconnectedCallback() {
+        this.surface.disconnect();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.sync();
+    }
+    get source() {
+        return this.sourceValue ?? this.getAttribute("source") ?? "auto";
+    }
+    set source(value) {
+        this.sourceValue = value;
+        this.sync();
+    }
+    get material() {
+        return this.materialValue ?? (this.getAttribute("material") ?? "regular");
+    }
+    set material(value) {
+        this.materialValue = value;
+        this.sync();
+    }
+    get interaction() {
+        return this.interactionValue ?? (this.getAttribute("interaction") ?? "none");
+    }
+    set interaction(value) {
+        this.interactionValue = value;
+        this.sync();
+    }
+    invalidate() {
+        this.surface.invalidate();
+    }
+    sync() {
+        const live = this.getAttribute("live");
+        this.surface.set({
+            material: this.composeMaterial(),
+            interaction: this.interaction,
+            source: this.source,
+            live: live === null ? undefined : live !== "false",
+        });
+    }
+    composeMaterial() {
+        const overrides = {};
+        for (const [attribute, key] of materialAttributes) {
+            const value = this.getAttribute(attribute);
+            if (value !== null)
+                overrides[key] = parseFloat(value);
+        }
+        const tint = this.getAttribute("tint");
+        if (tint)
+            overrides.tint = tint;
+        if (!Object.keys(overrides).length)
+            return this.material;
+        const base = this.material;
+        return typeof base === "string" ? { ...presetOf(base), ...overrides } : { ...base, ...overrides };
+    }
+}
+const presetOf = (name) => presets[name] ?? presets.regular;
+export function defineGlass(tag = "edinstvo-glass") {
+    if (!customElements.get(tag))
+        customElements.define(tag, class extends EdinstvoGlass {
+        });
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/dist/geometry.d.ts

@@ -0,0 +1,17 @@
+export interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type Fit = "fill" | "cover" | "contain" | "none";
+export declare function fitBox(box: Box, naturalW: number, naturalH: number, fit: Fit): Box;
+export declare function uvTransform(rect: {
+    left: number;
+    top: number;
+}, map: Box, scaleX: number, scaleY: number, dpr: number): {
+    origin: readonly [number, number];
+    perPixel: readonly [number, number];
+};
+export declare function cornerRadius(value: string, w: number, h: number): number;
+export declare function lightVector(angle: number): [number, number];

package/dist/geometry.js

@@ -0,0 +1,27 @@
+export function fitBox(box, naturalW, naturalH, fit) {
+    if (fit === "fill" || !naturalW || !naturalH)
+        return box;
+    if (fit === "none")
+        return { x: box.x, y: box.y, w: naturalW, h: naturalH };
+    const pick = fit === "cover" ? Math.max : Math.min;
+    const scale = pick(box.w / naturalW, box.h / naturalH);
+    const w = naturalW * scale;
+    const h = naturalH * scale;
+    return { x: box.x + (box.w - w) / 2, y: box.y + (box.h - h) / 2, w, h };
+}
+export function uvTransform(rect, map, scaleX, scaleY, dpr) {
+    return {
+        origin: [(rect.left - map.x) / map.w, (rect.top - map.y) / map.h],
+        perPixel: [scaleX / (dpr * map.w), scaleY / (dpr * map.h)],
+    };
+}
+export function cornerRadius(value, w, h) {
+    const number = parseFloat(value) || 0;
+    const px = value.trim().endsWith("%") ? (number / 100) * Math.min(w, h) : number;
+    return Math.min(px, Math.min(w, h) / 2);
+}
+export function lightVector(angle) {
+    const radians = (angle * Math.PI) / 180;
+    return [Math.sin(radians), -Math.cos(radians)];
+}
+//# sourceMappingURL=geometry.js.map

package/dist/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,MAAM,CAAC,GAAQ,EAAE,QAAgB,EAAE,QAAgB,EAAE,GAAQ;IAC3E,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,CAAC;IACzD,IAAI,GAAG,KAAK,MAAM;QAAE,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5E,MAAM,IAAI,GAAG,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACnD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAmC,EAAE,GAAQ,EAAE,MAAc,EAAE,MAAc,EAAE,GAAW;IACpH,OAAO;QACL,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAU;QAC1E,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAU;KACpE,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,CAAS,EAAE,CAAS;IAC9D,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACjF,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACxC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACjD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { EdinstvoGlass, defineGlass } from "./element.js";
+export { GlassSurface, attachGlass, type GlassOptions } from "./surface.js";
+export { type Material, type PresetName, presets, ranges, resolveMaterial } from "./material.js";
+export { type Interaction, type InteractionName, interactions } from "./interaction.js";
+export type { GlassImage, GlassSource } from "./backdrop.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { EdinstvoGlass, defineGlass } from "./element.js";
+export { GlassSurface, attachGlass } from "./surface.js";
+export { presets, ranges, resolveMaterial } from "./material.js";
+export { interactions } from "./interaction.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAqB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAkC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,EAA0C,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/interaction.d.ts

@@ -0,0 +1,47 @@
+export interface Interaction {
+    follow: number;
+    press: number;
+    stretch: number;
+}
+export declare const interactions: {
+    readonly none: {
+        readonly follow: 0;
+        readonly press: 0;
+        readonly stretch: 0;
+    };
+    readonly calm: {
+        readonly follow: 0.5;
+        readonly press: 0.4;
+        readonly stretch: 0;
+    };
+    readonly lively: {
+        readonly follow: 1;
+        readonly press: 1;
+        readonly stretch: 1;
+    };
+};
+export type InteractionName = keyof typeof interactions;
+export declare class Spring {
+    private stiffness;
+    private damping;
+    value: number;
+    target: number;
+    private velocity;
+    constructor(value?: number, stiffness?: number, damping?: number);
+    step(dt: number): void;
+    get settled(): boolean;
+}
+export declare class Motion {
+    private host;
+    private wake;
+    x: Spring;
+    y: Spring;
+    held: Spring;
+    private springs;
+    private cleanup;
+    constructor(host: HTMLElement, wake: () => void);
+    get moving(): boolean;
+    attach(): void;
+    detach(): void;
+    step(dt: number, interaction: Interaction): void;
+}