@edinstvo/glass 0.0.0-stage → 0.1.0-beta.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,164 @@
-# 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 frost="0.4" refraction="0.5">
+  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: 0.7 } });
+glass.set({ material: { frost: 0.4 } });
+glass.destroy();
+```
+
+## Material
+
+There are no types of glass, only settings. Set anything with an attribute, a `--glass-*` CSS variable or the `material` property. The defaults are tuned against the system glass on macOS, pixel by pixel.
+
+| 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 |
+
+## Motion
+
+Change an element's size or position in CSS and the glass flows there with a spring, overshoot included.
+Each of these is its own setting, on a group or on a single child. `prefers-reduced-motion` turns them all off.
+
+| Attribute | Range | What it does |
+|---|---|---|
+| `morph` | 0 to 1 | Softness of the flow. 0 jumps straight to the new shape |
+| `jelly` | 0 to 1 | Stretch while moving and under a drag |
+| `press` | 0 to 1 | How much the glass swells when held |
+| `glow` | 0 to 1 | Light that spreads from under the finger |
+| `follow` | 0 to 1 | How far the light chases the pointer |
+| `merge` | 0 to 64 px | Melts this element into others that have it too. 0 stays separate |
+
+### Merge
+
+Merging is opt-in, per element. Give `merge` to the pieces that should become one shape: they melt together when they get close and pull apart like liquid. Everything else in the group stays separate.
+
+```html
+<edinstvo-glass-group>
+  <edinstvo-glass merge="28"></edinstvo-glass>
+  <edinstvo-glass merge="28"></edinstvo-glass>
+  <edinstvo-glass></edinstvo-glass>
+</edinstvo-glass-group>
+```
+
+Up to 8 shapes per group, all drawn in one pass. `merge` on the group sets it for every child, `merge="0"` on a child opts out.
+
+### Appear
+
+Add `appear` to materialise on load, or call `show()` and `hide()`. Both return a promise.
+
+## 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
+
+- Glass sees other glass under it. Later in the document means on top, `z-index` is not read yet.
+- 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":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAsB,MAAM,EAAE,MAAM,eAAe,CAAC;AAa3D,MAAM,QAAQ,GAAG,GAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;AAC5E,MAAM,MAAM,GAAG,IAAI,GAAG,EAA4B,CAAC;AACnD,MAAM,MAAM,GAAG,IAAI,GAAG,EAA6B,CAAC;AAEpD,SAAS,WAAW,CAAC,KAAiB;IACpC,IAAI,KAAK,YAAY,gBAAgB;QAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClH,IAAI,KAAK,YAAY,gBAAgB;QAAE,OAAO,KAAK,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrH,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,SAAS,CAAC,KAAiB,EAAE,OAAmB;IACvD,IAAI,KAAK,YAAY,gBAAgB;QAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/F,IAAI,KAAK,YAAY,gBAAgB;QAAE,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACvG,CAAC;AAED,SAAS,KAAK,CAAC,KAAa;IAC1B,IAAI,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;QACzC,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7B,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC5B,CAAC;IACD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC9E,CAAC;AAED,SAAS,SAAS,CAAC,KAAiB,EAAE,OAAmB;IACvD,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,GAAG,GAAG,QAAQ,EAAE,CAAC;IACrB,IAAI,KAAK,YAAY,OAAO,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QAClD,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC3C,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,SAAgB,CAAC;QACrD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,YAAY,iBAAiB,IAAI,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChM,CAAC;IACD,MAAM,IAAI,GAAG,KAAK,YAAY,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,YAAY,iBAAiB,IAAI,KAAK,YAAY,eAAe,CAAC;IACxI,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AAC7C,CAAC;AAED,SAAS,SAAS,CAAC,GAAW,EAAE,OAAmB;IACjD,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QACpB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;QAChC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QAChB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IACD,IAAI,CAAC,KAAK,CAAC,QAAQ;QAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7E,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,cAAc,CAAC,OAAgB,EAAE,OAAmB;IAC3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACtE,IAAI,GAAG,EAAE,CAAC;QACR,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,YAAY;YAAE,OAAO,IAAI,CAAC;QACxD,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC7C,MAAM,IAAI,GAAG,OAAO,KAAK,QAAQ,CAAC,IAAI,IAAI,OAAO,KAAK,QAAQ,CAAC,eAAe,CAAC;QAC/E,MAAM,GAAG,GAAG,KAAK,CAAC,oBAAoB,KAAK,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QACvI,MAAM,GAAG,GAAQ,KAAK,CAAC,cAAc,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QACtK,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACxJ,CAAC;IACD,IAAI,UAAU,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;QAAE,OAAO,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACrF,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,QAAQ,CAAC,IAAiB,EAAE,IAAa,EAAE,OAAmB;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACjG,KAAK,MAAM,OAAO,IAAI,KAAK,EAAE,CAAC;QAC5B,IAAI,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC;YAAE,SAAS;QAChG,IAAI,OAAO,YAAY,gBAAgB,IAAI,OAAO,YAAY,iBAAiB,IAAI,OAAO,YAAY,gBAAgB,EAAE,CAAC;YACvH,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC1C,IAAI,KAAK;gBAAE,OAAO,KAAK,CAAC;YACxB,SAAS;QACX,CAAC;QACD,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC/C,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,KAAK,CAAC;IACxC,CAAC;IACD,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAiB,EAAE,IAAa,EAAE,MAAmB,EAAE,OAAmB;IACxG,IAAI,MAAM,KAAK,MAAM;QAAE,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAC5D,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,OAAO,YAAY,gBAAgB,IAAI,OAAO,YAAY,iBAAiB,IAAI,OAAO,YAAY,gBAAgB;YAAE,OAAO,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC3J,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrE,CAAC;IACD,OAAO,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACpC,CAAC"}

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,34 @@
+import type { GlassSource } from "./backdrop.js";
+import { type Material } from "./material.js";
+import { GlassSurface } from "./surface.js";
+declare const Base: typeof HTMLElement;
+export declare class EdinstvoGlass extends Base {
+    static observedAttributes: string[];
+    protected surface: GlassSurface;
+    private group;
+    private sourceValue;
+    private materialValue;
+    constructor();
+    protected get isGroup(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    attributeChangedCallback(): void;
+    get source(): GlassSource;
+    set source(value: GlassSource);
+    get material(): Partial<Material>;
+    set material(value: Partial<Material>);
+    invalidate(): void;
+    protected sync(): void;
+    private composeMaterial;
+}
+export declare class EdinstvoGlassGroup extends EdinstvoGlass {
+    protected get isGroup(): boolean;
+    connectedCallback(): void;
+    adopt(child: EdinstvoGlass): void;
+    release(child: EdinstvoGlass): void;
+    refresh(): void;
+}
+export declare function defineGlass(tag?: string): void;
+export {};

package/dist/element.js

@@ -0,0 +1,166 @@
+import { motionKeys } from "./interaction.js";
+import { kebab, numericKeys } 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);
+}
+:host([data-grouped]) {
+  box-shadow: none;
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:host([data-grouped]) > canvas {
+  display: none;
+}
+:host([data-glass-group]) {
+  display: block;
+  box-shadow: none;
+  border-radius: 0;
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.content {
+  display: block;
+  position: relative;
+  z-index: 1;
+  border-radius: inherit;
+  scale: var(--glass-scale, 1);
+  opacity: var(--glass-appear, 1);
+}
+`;
+const materialAttributes = new Map(numericKeys.map((key) => [kebab(key), key]));
+export class EdinstvoGlass extends Base {
+    static observedAttributes = ["source", "live", "tint", "appear", ...motionKeys, ...materialAttributes.keys()];
+    surface;
+    group = null;
+    sourceValue;
+    materialValue;
+    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, {}, this.isGroup);
+    }
+    get isGroup() {
+        return false;
+    }
+    connectedCallback() {
+        this.group = this.parentElement?.closest("[data-glass-group]") ?? null;
+        if (this.group) {
+            this.dataset.grouped = "";
+            this.group.adopt(this);
+            return;
+        }
+        this.sync();
+        this.surface.connect();
+    }
+    disconnectedCallback() {
+        if (this.group) {
+            this.group.release(this);
+            this.group = null;
+            delete this.dataset.grouped;
+            return;
+        }
+        this.surface.disconnect();
+    }
+    show() {
+        return this.surface.show();
+    }
+    hide() {
+        return this.surface.hide();
+    }
+    attributeChangedCallback() {
+        if (this.group)
+            this.group.refresh();
+        else 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 ?? {};
+    }
+    set material(value) {
+        this.materialValue = value;
+        this.sync();
+    }
+    invalidate() {
+        this.surface.invalidate();
+    }
+    sync() {
+        const live = this.getAttribute("live");
+        this.surface.set({
+            material: this.composeMaterial(),
+            source: this.source,
+            live: live === null ? undefined : live !== "false",
+            appear: this.hasAttribute("appear"),
+        });
+    }
+    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;
+        return { ...this.material, ...overrides };
+    }
+}
+export class EdinstvoGlassGroup extends EdinstvoGlass {
+    get isGroup() {
+        return true;
+    }
+    connectedCallback() {
+        this.dataset.glassGroup = "";
+        super.connectedCallback();
+    }
+    adopt(child) {
+        this.surface.track(child);
+    }
+    release(child) {
+        this.surface.untrack(child);
+    }
+    refresh() {
+        this.surface.restyle();
+    }
+}
+export function defineGlass(tag = "edinstvo-glass") {
+    if (!customElements.get(`${tag}-group`))
+        customElements.define(`${tag}-group`, class extends EdinstvoGlassGroup {
+        });
+    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,18 @@
+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];
+export declare function softPeak(halfW: number, halfH: number, radius: number): number;

package/dist/geometry.js

@@ -0,0 +1,33 @@
+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)];
+}
+export function softPeak(halfW, halfH, radius) {
+    const a = halfW + radius;
+    const b = halfH + radius;
+    const lo = Math.min(a, b);
+    return lo * (1 + (lo / Math.max(a, b)) ** 2.7) ** (-1 / 2.7) - radius;
+}
+//# sourceMappingURL=geometry.js.map