glassrender-vue 0.0.0-stage → 0.1.1-beta

package/dist/Glass.d.ts

@@ -0,0 +1,199 @@
+/**
+ * @file Glass.ts
+ * @brief Vue component that tracks a DOM box with glass.
+ * @details Content inherits --glass-foreground and --glass-title. Group members contribute
+ * geometry; the group owns their material.
+ */
+import { type PropType } from "vue";
+import type { Appearance, CornerStyle, Preset, Radius, Rgba, ShownScheme, Transition } from "glassrender";
+/**
+ * @brief Track the component's div with a glass shape.
+ * @details Inside a group, only geometry options apply; the group supplies the material.
+ */
+export declare const Glass: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** @brief Built-in material: "standard" (default), "clear", "menu", "dock", ... */
+    preset: {
+        type: PropType<Preset | undefined>;
+        default: undefined;
+    };
+    /** @brief Surroundings (default: the canvas setting). */
+    appearance: {
+        type: PropType<Appearance | undefined>;
+        default: undefined;
+    };
+    /**
+     * @brief Corner radius in CSS pixels, or four radii (top-left, top-right, bottom-right,
+     * bottom-left).
+     * @details Default: half the short side.
+     */
+    radius: {
+        type: PropType<Radius | undefined>;
+        default: undefined;
+    };
+    /** @brief Corner construction (default "smooth"). */
+    corner: {
+        type: PropType<CornerStyle>;
+        default: string;
+    };
+    /**
+     * @brief Outline of any shape instead of a rounded rectangle: the alpha channel of an image
+     * or canvas, stretched over the box.
+     * @details It has to be there when the box is first drawn; later values replace the mask.
+     */
+    mask: {
+        type: PropType<TexImageSource | undefined>;
+        default: undefined;
+    };
+    /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+    adaptive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Color laid over the glass; its alpha is the strength. */
+    tint: {
+        type: PropType<Rgba | null>;
+        default: null;
+    };
+    /** @brief Opacity of the glass with its shadow (default 1). */
+    opacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+    chromaticAberration: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** @brief Shown (default) or hidden. */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Pressed veil. */
+    pressed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Show the pressed veil while a pointer is down on the box. */
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief How visibility changes and removal look (default "materialize"). */
+    transition: {
+        type: PropType<Transition>;
+        default: string;
+    };
+    /**
+     * @brief Measure the box on every frame (for boxes moved by CSS animations or transforms).
+     */
+    everyFrame: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * @brief "dark" or "light" when the scheme the glass shows changes (and once at the start).
+     */
+    scheme: (_scheme: ShownScheme) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** @brief Built-in material: "standard" (default), "clear", "menu", "dock", ... */
+    preset: {
+        type: PropType<Preset | undefined>;
+        default: undefined;
+    };
+    /** @brief Surroundings (default: the canvas setting). */
+    appearance: {
+        type: PropType<Appearance | undefined>;
+        default: undefined;
+    };
+    /**
+     * @brief Corner radius in CSS pixels, or four radii (top-left, top-right, bottom-right,
+     * bottom-left).
+     * @details Default: half the short side.
+     */
+    radius: {
+        type: PropType<Radius | undefined>;
+        default: undefined;
+    };
+    /** @brief Corner construction (default "smooth"). */
+    corner: {
+        type: PropType<CornerStyle>;
+        default: string;
+    };
+    /**
+     * @brief Outline of any shape instead of a rounded rectangle: the alpha channel of an image
+     * or canvas, stretched over the box.
+     * @details It has to be there when the box is first drawn; later values replace the mask.
+     */
+    mask: {
+        type: PropType<TexImageSource | undefined>;
+        default: undefined;
+    };
+    /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+    adaptive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Color laid over the glass; its alpha is the strength. */
+    tint: {
+        type: PropType<Rgba | null>;
+        default: null;
+    };
+    /** @brief Opacity of the glass with its shadow (default 1). */
+    opacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+    chromaticAberration: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** @brief Shown (default) or hidden. */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Pressed veil. */
+    pressed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief Show the pressed veil while a pointer is down on the box. */
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief How visibility changes and removal look (default "materialize"). */
+    transition: {
+        type: PropType<Transition>;
+        default: string;
+    };
+    /**
+     * @brief Measure the box on every frame (for boxes moved by CSS animations or transforms).
+     */
+    everyFrame: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onScheme?: ((_scheme: ShownScheme) => any) | undefined;
+}>, {
+    preset: "menu" | "standard" | "clear" | "identity" | "notification" | "popover" | "sidebar" | "attachedSidebar" | "inspector" | "dock" | "controlPanel" | "keyboard" | "widget" | "icon" | "player" | "call" | "camera" | "control" | "loupe" | "slider" | "monogram" | "bubble" | "text" | "assistant" | "assistantCard" | "focusRing" | "focusBackground" | "vehicle" | undefined;
+    appearance: Appearance | undefined;
+    radius: Radius | undefined;
+    corner: CornerStyle;
+    mask: TexImageSource | undefined;
+    adaptive: boolean;
+    tint: Rgba | null;
+    opacity: number;
+    chromaticAberration: number | null;
+    visible: boolean;
+    pressed: boolean;
+    interactive: boolean;
+    transition: Transition;
+    everyFrame: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/Glass.js

@@ -0,0 +1,186 @@
+/**
+ * @file Glass.ts
+ * @brief Vue component that tracks a DOM box with glass.
+ * @details Content inherits --glass-foreground and --glass-title. Group members contribute
+ * geometry; the group owns their material.
+ */
+import { defineComponent, h, inject, mergeProps, onBeforeUnmount, ref, shallowRef, watch } from "vue";
+import { CANVAS_KEY, GROUP_KEY } from "./context.js";
+// Match DOM backgrounds and outlines to the glass corners.
+function rounding(radius) {
+    return radius === undefined ? "9999px" : typeof radius === "number" ? radius + "px" : radius.map((r) => r + "px").join(" ");
+}
+function call(handler, e) {
+    const f = handler;
+    if (typeof f === "function")
+        f(e);
+    else if (Array.isArray(f))
+        for (const g of f)
+            g(e);
+}
+/**
+ * @brief Track the component's div with a glass shape.
+ * @details Inside a group, only geometry options apply; the group supplies the material.
+ */
+export const Glass = defineComponent({
+    name: "Glass",
+    inheritAttrs: false,
+    props: {
+        /** @brief Built-in material: "standard" (default), "clear", "menu", "dock", ... */
+        preset: { type: String, default: undefined },
+        /** @brief Surroundings (default: the canvas setting). */
+        appearance: { type: String, default: undefined },
+        /**
+         * @brief Corner radius in CSS pixels, or four radii (top-left, top-right, bottom-right,
+         * bottom-left).
+         * @details Default: half the short side.
+         */
+        radius: { type: [Number, Array], default: undefined },
+        /** @brief Corner construction (default "smooth"). */
+        corner: { type: String, default: "smooth" },
+        /**
+         * @brief Outline of any shape instead of a rounded rectangle: the alpha channel of an image
+         * or canvas, stretched over the box.
+         * @details It has to be there when the box is first drawn; later values replace the mask.
+         */
+        mask: { type: Object, default: undefined },
+        /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+        adaptive: { type: Boolean, default: true },
+        /** @brief Color laid over the glass; its alpha is the strength. */
+        tint: { type: Array, default: null },
+        /** @brief Opacity of the glass with its shadow (default 1). */
+        opacity: { type: Number, default: 1 },
+        /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+        chromaticAberration: { type: Number, default: null },
+        /** @brief Shown (default) or hidden. */
+        visible: { type: Boolean, default: true },
+        /** @brief Pressed veil. */
+        pressed: { type: Boolean, default: false },
+        /** @brief Show the pressed veil while a pointer is down on the box. */
+        interactive: { type: Boolean, default: false },
+        /** @brief How visibility changes and removal look (default "materialize"). */
+        transition: { type: String, default: "materialize" },
+        /**
+         * @brief Measure the box on every frame (for boxes moved by CSS animations or transforms).
+         */
+        everyFrame: { type: Boolean, default: false }
+    },
+    emits: {
+        /**
+         * @brief "dark" or "light" when the scheme the glass shows changes (and once at the start).
+         */
+        scheme: (_scheme) => true
+    },
+    setup(props, { attrs, emit, slots }) {
+        const canvas = inject(CANVAS_KEY, undefined), group = inject(GROUP_KEY, undefined);
+        const box = shallowRef(null);
+        const down = ref(false);
+        let pressPointer = null;
+        let pressCleanup = null;
+        let shape = null, member = null;
+        onBeforeUnmount(() => { pressCleanup?.(); });
+        // Create the shape or group member after both the box and canvas are ready.
+        watch(() => [box.value, canvas === undefined ? null : canvas.glass, group === undefined ? null : group.group], ([el, glass, g], _old, onCleanup) => {
+            if (el === null)
+                return;
+            if (group !== undefined) {
+                if (g === null)
+                    return;
+                const m = g.add({
+                    x: 0, y: 0, width: 0, height: 0, corner: props.corner, ...(props.radius === undefined ? {} : { radius: props.radius }),
+                    ...(props.mask === undefined ? {} : { mask: props.mask })
+                });
+                if (m === null)
+                    return;
+                m.follow(el, props.everyFrame);
+                member = m;
+                onCleanup(() => {
+                    member = null;
+                    m.remove();
+                });
+                return;
+            }
+            if (glass === null)
+                return;
+            const s = glass.add({
+                x: 0, y: 0, width: 0, height: 0, corner: props.corner, tint: props.tint,
+                opacity: props.opacity, chromaticAberration: props.chromaticAberration, visible: props.visible, transition: props.transition, adaptive: props.adaptive,
+                pressed: props.pressed || down.value,
+                onScheme: (scheme) => emit("scheme", scheme),
+                ...(props.radius === undefined ? {} : { radius: props.radius }), ...(props.preset === undefined ? {} : { preset: props.preset }), ...(props.appearance === undefined ? {} : { appearance: props.appearance }),
+                ...(props.mask === undefined ? {} : { mask: props.mask })
+            });
+            s.follow(el, props.everyFrame);
+            shape = s;
+            onCleanup(() => {
+                shape = null;
+                s.remove();
+            });
+        }, { immediate: true, flush: "post" });
+        watch(() => props.everyFrame, (v) => {
+            const el = box.value;
+            if (el === null)
+                return;
+            shape?.follow(el, v);
+            member?.follow(el, v);
+        }, { flush: "post" });
+        watch(() => props.preset, (v) => { shape?.set({ preset: v ?? "standard" }); });
+        watch(() => props.appearance, (v) => { if (v !== undefined)
+            shape?.set({ appearance: v }); });
+        watch(() => (props.radius === undefined ? "" : typeof props.radius === "number" ? String(props.radius) : props.radius.join(" ")), () => {
+            const v = props.radius ?? null;
+            shape?.set({ radius: v });
+            member?.set({ radius: v });
+        });
+        watch(() => props.mask, (v) => {
+            if (v === undefined)
+                return;
+            shape?.set({ mask: v });
+            member?.set({ mask: v });
+        });
+        watch(() => props.adaptive, (v) => { shape?.set({ adaptive: v }); });
+        watch(() => props.corner, (v) => { shape?.set({ corner: v }); });
+        watch(() => (props.tint === null ? "" : props.tint.join(",")), () => { shape?.set({ tint: props.tint }); });
+        watch(() => props.opacity, (v) => { shape?.set({ opacity: v }); });
+        watch(() => props.chromaticAberration, (v) => { shape?.set({ chromaticAberration: v }); });
+        watch(() => props.visible, (v) => { shape?.set({ visible: v }); });
+        watch(() => props.transition, (v) => { shape?.set({ transition: v }); });
+        watch(() => props.pressed || down.value, (v) => { shape?.press(v); });
+        const releasePress = (pointerId) => {
+            if (pointerId !== undefined && pointerId !== pressPointer)
+                return;
+            pressCleanup?.();
+            down.value = false;
+        };
+        // Observe releases without capturing the pointer away from a child button or link.
+        const pointerdown = (e) => {
+            call(attrs.onPointerdown, e);
+            if (!props.interactive || e.defaultPrevented || pressPointer !== null)
+                return;
+            const doc = e.currentTarget.ownerDocument, win = doc.defaultView;
+            const finish = (event) => { releasePress(event.pointerId); };
+            const blur = () => { releasePress(); };
+            pressPointer = e.pointerId;
+            pressCleanup = () => {
+                doc.removeEventListener("pointerup", finish, true);
+                doc.removeEventListener("pointercancel", finish, true);
+                win?.removeEventListener("blur", blur);
+                pressPointer = null;
+                pressCleanup = null;
+            };
+            doc.addEventListener("pointerup", finish, true);
+            doc.addEventListener("pointercancel", finish, true);
+            win?.addEventListener("blur", blur);
+            down.value = true;
+        };
+        const pointerup = (e) => { call(attrs.onPointerup, e); releasePress(e.pointerId); };
+        const pointercancel = (e) => { call(attrs.onPointercancel, e); releasePress(e.pointerId); };
+        const lostcapture = (e) => { call(attrs.onLostpointercapture, e); releasePress(e.pointerId); };
+        return () => {
+            const { onPointerdown: _a, onPointerup: _b, onPointercancel: _c, onLostpointercapture: _d, ...rest } = attrs;
+            return h("div", mergeProps({ class: "glass-box", style: { borderRadius: rounding(props.radius) } }, rest, {
+                ref: box, onPointerdown: pointerdown, onPointerup: pointerup, onPointercancel: pointercancel, onLostpointercapture: lostcapture
+            }), slots.default === undefined ? undefined : slots.default());
+        };
+    }
+});

package/dist/GlassCanvas.d.ts

@@ -0,0 +1,275 @@
+/**
+ * @file GlassCanvas.ts
+ * @brief Vue canvas lifecycle and backdrop component.
+ * @details Descendant shapes share one renderer; the canvas sizes to the viewport or its container.
+ */
+import { type PropType } from "vue";
+import { type Appearance, type Fit, type Follow, type StackingMode } from "glassrender";
+/** @brief Own the canvas and renderer shared by descendant glass components. */
+export declare const GlassCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** @brief Picture behind the glass: a URL, or an image, canvas, video or bitmap. */
+    backdrop: {
+        type: PropType<string | TexImageSource | null>;
+        default: null;
+    };
+    /** @brief How a backdrop of another size is laid on the canvas (default "cover"). */
+    fit: {
+        type: PropType<Fit>;
+        default: string;
+    };
+    /** @brief Upload the backdrop on every frame (a playing video, an animated canvas). */
+    live: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Default surroundings of the glass (default "auto": the page's color scheme).
+     */
+    appearance: {
+        type: PropType<Appearance>;
+        default: string;
+    };
+    /** @brief Glass over glass: "exact" (default) or "flat". */
+    stacking: {
+        type: PropType<StackingMode>;
+        default: string;
+    };
+    /** @brief Turn of the rim lights in radians, clockwise. */
+    lightAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Default color-separation multiplier (0..1, default 0.25). */
+    chromaticAberration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Upper limit of device pixels per CSS pixel (default 2). */
+    maxPixelRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * @brief The window is the active one (default true). false gives the flatter glass of an
+     * inactive window; "auto" follows the focus of the page.
+     */
+    active: {
+        type: PropType<Follow>;
+        default: boolean;
+    };
+    /**
+     * @brief The more opaque, more saturated variant of the standard material (default false).
+     */
+    tinted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Nearly opaque glass without refraction; "auto" (default) follows
+     * `prefers-reduced-transparency`.
+     */
+    reduceTransparency: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief A stronger, more opaque tone; "auto" (default) follows `prefers-contrast: more`.
+     */
+    increaseContrast: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief No refraction inside the glass and more blur; "auto" (default) follows
+     * `prefers-reduced-motion: reduce`.
+     */
+    reduceMotion: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief Rim lights drawn as a plain outline instead of shaded bands (default false).
+     */
+    buttonShapes: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Draw in extended range on screens that show values above the standard white
+     * (default false; "auto" follows `dynamic-range: high`).
+     * @details It can change later only when it was true or "auto" when the canvas was made.
+     */
+    extendedRange: {
+        type: PropType<Follow>;
+        default: boolean;
+    };
+    /**
+     * @brief Brightest value of the screen relative to the standard white, used with extended
+     * range (default 2).
+     */
+    headroom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Preferred brightness multiplier name; overrides headroom when supplied. */
+    displayHeadroom: {
+        type: PropType<number | undefined>;
+        default: undefined;
+    };
+    /** @brief The canvas covers the viewport (default) or only this element. */
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** @brief The browser cannot draw the glass (no WebGL2). */
+    error: (_message: string) => true;
+    /**
+     * @brief The WebGL context is lost; the glass draws again on its own when it is back.
+     */
+    contextlost: () => true;
+    /**
+     * @brief The context is back: "" when the glass was rebuilt, else why it could not be.
+     */
+    contextrestored: (_error: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** @brief Picture behind the glass: a URL, or an image, canvas, video or bitmap. */
+    backdrop: {
+        type: PropType<string | TexImageSource | null>;
+        default: null;
+    };
+    /** @brief How a backdrop of another size is laid on the canvas (default "cover"). */
+    fit: {
+        type: PropType<Fit>;
+        default: string;
+    };
+    /** @brief Upload the backdrop on every frame (a playing video, an animated canvas). */
+    live: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Default surroundings of the glass (default "auto": the page's color scheme).
+     */
+    appearance: {
+        type: PropType<Appearance>;
+        default: string;
+    };
+    /** @brief Glass over glass: "exact" (default) or "flat". */
+    stacking: {
+        type: PropType<StackingMode>;
+        default: string;
+    };
+    /** @brief Turn of the rim lights in radians, clockwise. */
+    lightAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Default color-separation multiplier (0..1, default 0.25). */
+    chromaticAberration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Upper limit of device pixels per CSS pixel (default 2). */
+    maxPixelRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * @brief The window is the active one (default true). false gives the flatter glass of an
+     * inactive window; "auto" follows the focus of the page.
+     */
+    active: {
+        type: PropType<Follow>;
+        default: boolean;
+    };
+    /**
+     * @brief The more opaque, more saturated variant of the standard material (default false).
+     */
+    tinted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Nearly opaque glass without refraction; "auto" (default) follows
+     * `prefers-reduced-transparency`.
+     */
+    reduceTransparency: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief A stronger, more opaque tone; "auto" (default) follows `prefers-contrast: more`.
+     */
+    increaseContrast: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief No refraction inside the glass and more blur; "auto" (default) follows
+     * `prefers-reduced-motion: reduce`.
+     */
+    reduceMotion: {
+        type: PropType<Follow>;
+        default: string;
+    };
+    /**
+     * @brief Rim lights drawn as a plain outline instead of shaded bands (default false).
+     */
+    buttonShapes: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @brief Draw in extended range on screens that show values above the standard white
+     * (default false; "auto" follows `dynamic-range: high`).
+     * @details It can change later only when it was true or "auto" when the canvas was made.
+     */
+    extendedRange: {
+        type: PropType<Follow>;
+        default: boolean;
+    };
+    /**
+     * @brief Brightest value of the screen relative to the standard white, used with extended
+     * range (default 2).
+     */
+    headroom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Preferred brightness multiplier name; overrides headroom when supplied. */
+    displayHeadroom: {
+        type: PropType<number | undefined>;
+        default: undefined;
+    };
+    /** @brief The canvas covers the viewport (default) or only this element. */
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onContextlost?: (() => any) | undefined;
+    onContextrestored?: ((_error: string) => any) | undefined;
+    onError?: ((_message: string) => any) | undefined;
+}>, {
+    appearance: Appearance;
+    chromaticAberration: number;
+    fixed: boolean;
+    backdrop: string | TexImageSource | null;
+    fit: Fit;
+    live: boolean;
+    stacking: StackingMode;
+    lightAngle: number;
+    maxPixelRatio: number;
+    active: Follow;
+    tinted: boolean;
+    reduceTransparency: Follow;
+    increaseContrast: Follow;
+    reduceMotion: Follow;
+    buttonShapes: boolean;
+    extendedRange: Follow;
+    headroom: number;
+    displayHeadroom: number | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/GlassCanvas.js

@@ -0,0 +1,148 @@
+/**
+ * @file GlassCanvas.ts
+ * @brief Vue canvas lifecycle and backdrop component.
+ * @details Descendant shapes share one renderer; the canvas sizes to the viewport or its container.
+ */
+import { defineComponent, h, onBeforeUnmount, onMounted, provide, shallowReactive, shallowRef, watch } from "vue";
+import { createGlass, DEFAULT_CHROMATIC_ABERRATION } from "glassrender";
+import { CANVAS_KEY, ensureStyle } from "./context.js";
+const COVER = { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", zIndex: -1, pointerEvents: "none" };
+const FIXED = { ...COVER, position: "fixed", width: "100vw", height: "100vh" };
+/** @brief Own the canvas and renderer shared by descendant glass components. */
+export const GlassCanvas = defineComponent({
+    name: "GlassCanvas",
+    props: {
+        /** @brief Picture behind the glass: a URL, or an image, canvas, video or bitmap. */
+        backdrop: { type: [String, Object], default: null },
+        /** @brief How a backdrop of another size is laid on the canvas (default "cover"). */
+        fit: { type: String, default: "cover" },
+        /** @brief Upload the backdrop on every frame (a playing video, an animated canvas). */
+        live: { type: Boolean, default: false },
+        /**
+         * @brief Default surroundings of the glass (default "auto": the page's color scheme).
+         */
+        appearance: { type: String, default: "auto" },
+        /** @brief Glass over glass: "exact" (default) or "flat". */
+        stacking: { type: String, default: "exact" },
+        /** @brief Turn of the rim lights in radians, clockwise. */
+        lightAngle: { type: Number, default: 0 },
+        /** @brief Default color-separation multiplier (0..1, default 0.25). */
+        chromaticAberration: { type: Number, default: DEFAULT_CHROMATIC_ABERRATION },
+        /** @brief Upper limit of device pixels per CSS pixel (default 2). */
+        maxPixelRatio: { type: Number, default: 2 },
+        /**
+         * @brief The window is the active one (default true). false gives the flatter glass of an
+         * inactive window; "auto" follows the focus of the page.
+         */
+        active: { type: [Boolean, String], default: true },
+        /**
+         * @brief The more opaque, more saturated variant of the standard material (default false).
+         */
+        tinted: { type: Boolean, default: false },
+        /**
+         * @brief Nearly opaque glass without refraction; "auto" (default) follows
+         * `prefers-reduced-transparency`.
+         */
+        reduceTransparency: { type: [Boolean, String], default: "auto" },
+        /**
+         * @brief A stronger, more opaque tone; "auto" (default) follows `prefers-contrast: more`.
+         */
+        increaseContrast: { type: [Boolean, String], default: "auto" },
+        /**
+         * @brief No refraction inside the glass and more blur; "auto" (default) follows
+         * `prefers-reduced-motion: reduce`.
+         */
+        reduceMotion: { type: [Boolean, String], default: "auto" },
+        /**
+         * @brief Rim lights drawn as a plain outline instead of shaded bands (default false).
+         */
+        buttonShapes: { type: Boolean, default: false },
+        /**
+         * @brief Draw in extended range on screens that show values above the standard white
+         * (default false; "auto" follows `dynamic-range: high`).
+         * @details It can change later only when it was true or "auto" when the canvas was made.
+         */
+        extendedRange: { type: [Boolean, String], default: false },
+        /**
+         * @brief Brightest value of the screen relative to the standard white, used with extended
+         * range (default 2).
+         */
+        headroom: { type: Number, default: 2 },
+        /** @brief Preferred brightness multiplier name; overrides headroom when supplied. */
+        displayHeadroom: { type: Number, default: undefined },
+        /** @brief The canvas covers the viewport (default) or only this element. */
+        fixed: { type: Boolean, default: true }
+    },
+    emits: {
+        /** @brief The browser cannot draw the glass (no WebGL2). */
+        error: (_message) => true,
+        /**
+         * @brief The WebGL context is lost; the glass draws again on its own when it is back.
+         */
+        contextlost: () => true,
+        /**
+         * @brief The context is back: "" when the glass was rebuilt, else why it could not be.
+         */
+        contextrestored: (_error) => true
+    },
+    setup(props, { emit, slots }) {
+        const state = shallowReactive({ glass: null, error: "" });
+        provide(CANVAS_KEY, state);
+        const canvas = shallowRef(null);
+        onMounted(() => {
+            const el = canvas.value;
+            if (el === null)
+                return;
+            ensureStyle();
+            const made = createGlass(el, {
+                appearance: props.appearance, stacking: props.stacking, lightAngle: props.lightAngle, chromaticAberration: props.chromaticAberration, maxPixelRatio: props.maxPixelRatio,
+                extendedRange: props.extendedRange, headroom: props.displayHeadroom ?? props.headroom,
+                environment: {
+                    active: props.active, tinted: props.tinted, reduceTransparency: props.reduceTransparency,
+                    increaseContrast: props.increaseContrast, reduceMotion: props.reduceMotion, buttonShapes: props.buttonShapes
+                },
+                onContextLost: () => emit("contextlost"),
+                onContextRestored: (error) => emit("contextrestored", error)
+            });
+            if (!made.ok) {
+                state.error = made.error;
+                emit("error", made.error);
+                return;
+            }
+            state.glass = made.value;
+        });
+        onBeforeUnmount(() => {
+            const g = state.glass;
+            state.glass = null;
+            if (g !== null)
+                g.destroy();
+        });
+        watch(() => props.appearance, (v) => { state.glass?.setAppearance(v); });
+        watch(() => props.stacking, (v) => { state.glass?.setStacking(v); });
+        watch(() => props.lightAngle, (v) => { state.glass?.setLightAngle(v); });
+        watch(() => props.chromaticAberration, (v) => { state.glass?.setChromaticAberration(v); });
+        watch(() => [props.active, props.tinted, props.reduceTransparency, props.increaseContrast, props.reduceMotion, props.buttonShapes], () => {
+            state.glass?.setEnvironment({
+                active: props.active, tinted: props.tinted, reduceTransparency: props.reduceTransparency,
+                increaseContrast: props.increaseContrast, reduceMotion: props.reduceMotion, buttonShapes: props.buttonShapes
+            });
+        });
+        watch(() => [props.extendedRange, props.headroom, props.displayHeadroom], () => { state.glass?.setExtendedRange(props.extendedRange, props.displayHeadroom ?? props.headroom); });
+        watch(() => [state.glass, props.backdrop, props.fit, props.live], ([glass, b, f, l]) => {
+            if (glass === null)
+                return;
+            if (typeof b === "string") {
+                const img = new Image();
+                img.crossOrigin = "anonymous";
+                img.src = b;
+                glass.setBackdrop(img, f, false);
+            }
+            else
+                glass.setBackdrop(b, f, l);
+        });
+        return () => h("div", { class: "glass-canvas", style: { position: "relative", isolation: "isolate" } }, [
+            h("canvas", { ref: canvas, style: props.fixed ? FIXED : COVER }),
+            slots.default === undefined ? null : slots.default()
+        ]);
+    }
+});

package/dist/GlassGroup.d.ts

@@ -0,0 +1,127 @@
+/**
+ * @file GlassGroup.ts
+ * @brief Vue provider for a shared glass material.
+ * @details Members contribute outlines that merge within spacing; material options belong to the
+ * group.
+ */
+import { type PropType } from "vue";
+import type { Appearance, Preset, Rgba, ShownScheme, Transition } from "glassrender";
+/** @brief Own one shared glass material while descendant components supply its outlines. */
+export declare const GlassGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * @brief Distance in CSS pixels over which neighboring members merge (default 0: they only
+     * share the glass).
+     */
+    spacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Built-in material (default "standard"). */
+    preset: {
+        type: PropType<Preset | undefined>;
+        default: undefined;
+    };
+    /** @brief Surroundings (default: the canvas setting). */
+    appearance: {
+        type: PropType<Appearance | undefined>;
+        default: undefined;
+    };
+    /** @brief Color laid over the glass; its alpha is the strength. */
+    tint: {
+        type: PropType<Rgba | null>;
+        default: null;
+    };
+    /** @brief Opacity of the glass with its shadow (default 1). */
+    opacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+    chromaticAberration: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** @brief Shown (default) or hidden. */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief How visibility changes look (default "materialize"). */
+    transition: {
+        type: PropType<Transition>;
+        default: string;
+    };
+    /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+    adaptive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * @brief "dark" or "light" when the scheme the glass shows changes (and once at the start).
+     */
+    scheme: (_scheme: ShownScheme) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @brief Distance in CSS pixels over which neighboring members merge (default 0: they only
+     * share the glass).
+     */
+    spacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Built-in material (default "standard"). */
+    preset: {
+        type: PropType<Preset | undefined>;
+        default: undefined;
+    };
+    /** @brief Surroundings (default: the canvas setting). */
+    appearance: {
+        type: PropType<Appearance | undefined>;
+        default: undefined;
+    };
+    /** @brief Color laid over the glass; its alpha is the strength. */
+    tint: {
+        type: PropType<Rgba | null>;
+        default: null;
+    };
+    /** @brief Opacity of the glass with its shadow (default 1). */
+    opacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+    chromaticAberration: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** @brief Shown (default) or hidden. */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @brief How visibility changes look (default "materialize"). */
+    transition: {
+        type: PropType<Transition>;
+        default: string;
+    };
+    /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+    adaptive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onScheme?: ((_scheme: ShownScheme) => any) | undefined;
+}>, {
+    preset: "menu" | "standard" | "clear" | "identity" | "notification" | "popover" | "sidebar" | "attachedSidebar" | "inspector" | "dock" | "controlPanel" | "keyboard" | "widget" | "icon" | "player" | "call" | "camera" | "control" | "loupe" | "slider" | "monogram" | "bubble" | "text" | "assistant" | "assistantCard" | "focusRing" | "focusBackground" | "vehicle" | undefined;
+    appearance: Appearance | undefined;
+    adaptive: boolean;
+    tint: Rgba | null;
+    opacity: number;
+    chromaticAberration: number | null;
+    visible: boolean;
+    transition: Transition;
+    spacing: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/GlassGroup.js

@@ -0,0 +1,72 @@
+/**
+ * @file GlassGroup.ts
+ * @brief Vue provider for a shared glass material.
+ * @details Members contribute outlines that merge within spacing; material options belong to the
+ * group.
+ */
+import { defineComponent, inject, provide, shallowReactive, watch } from "vue";
+import { CANVAS_KEY, GROUP_KEY } from "./context.js";
+/** @brief Own one shared glass material while descendant components supply its outlines. */
+export const GlassGroup = defineComponent({
+    name: "GlassGroup",
+    props: {
+        /**
+         * @brief Distance in CSS pixels over which neighboring members merge (default 0: they only
+         * share the glass).
+         */
+        spacing: { type: Number, default: 0 },
+        /** @brief Built-in material (default "standard"). */
+        preset: { type: String, default: undefined },
+        /** @brief Surroundings (default: the canvas setting). */
+        appearance: { type: String, default: undefined },
+        /** @brief Color laid over the glass; its alpha is the strength. */
+        tint: { type: Array, default: null },
+        /** @brief Opacity of the glass with its shadow (default 1). */
+        opacity: { type: Number, default: 1 },
+        /** @brief Color-separation multiplier (0..1); null inherits the canvas default. */
+        chromaticAberration: { type: Number, default: null },
+        /** @brief Shown (default) or hidden. */
+        visible: { type: Boolean, default: true },
+        /** @brief How visibility changes look (default "materialize"). */
+        transition: { type: String, default: "materialize" },
+        /** @brief Small glass follows the luminance of the backdrop under it (default true). */
+        adaptive: { type: Boolean, default: true }
+    },
+    emits: {
+        /**
+         * @brief "dark" or "light" when the scheme the glass shows changes (and once at the start).
+         */
+        scheme: (_scheme) => true
+    },
+    setup(props, { emit, slots }) {
+        const canvas = inject(CANVAS_KEY, undefined);
+        const state = shallowReactive({ group: null });
+        provide(GROUP_KEY, state);
+        watch(() => (canvas === undefined ? null : canvas.glass), (glass, _old, onCleanup) => {
+            if (glass === null)
+                return;
+            const group = glass.addGroup({
+                spacing: props.spacing, tint: props.tint, opacity: props.opacity, chromaticAberration: props.chromaticAberration,
+                visible: props.visible, transition: props.transition, adaptive: props.adaptive,
+                onScheme: (scheme) => emit("scheme", scheme),
+                ...(props.preset === undefined ? {} : { preset: props.preset }), ...(props.appearance === undefined ? {} : { appearance: props.appearance })
+            });
+            state.group = group;
+            onCleanup(() => {
+                state.group = null;
+                group.remove();
+            });
+        }, { immediate: true });
+        watch(() => props.spacing, (v) => { state.group?.set({ spacing: v }); });
+        watch(() => props.preset, (v) => { state.group?.set({ preset: v ?? "standard" }); });
+        watch(() => props.appearance, (v) => { if (v !== undefined)
+            state.group?.set({ appearance: v }); });
+        watch(() => (props.tint === null ? "" : props.tint.join(",")), () => { state.group?.set({ tint: props.tint }); });
+        watch(() => props.opacity, (v) => { state.group?.set({ opacity: v }); });
+        watch(() => props.chromaticAberration, (v) => { state.group?.set({ chromaticAberration: v }); });
+        watch(() => props.visible, (v) => { state.group?.set({ visible: v }); });
+        watch(() => props.transition, (v) => { state.group?.set({ transition: v }); });
+        watch(() => props.adaptive, (v) => { state.group?.set({ adaptive: v }); });
+        return () => (slots.default === undefined ? null : slots.default());
+    }
+});

package/dist/context.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @file context.ts
+ * @brief Vue context for the nearest glass canvas and group.
+ */
+import { type InjectionKey } from "vue";
+import type { Glass, GlassGroup } from "glassrender";
+/**
+ * @brief What a `GlassCanvas` shares with the components inside it.
+ * @details `glass` is null until the canvas is ready.
+ */
+export interface CanvasState {
+    glass: Glass | null;
+    /** @brief Why the canvas could not be used ("" when it works). */
+    error: string;
+}
+/** @brief What a `GlassGroup` shares with its members. */
+export interface GroupState {
+    group: GlassGroup | null;
+}
+export declare const CANVAS_KEY: InjectionKey<CanvasState>;
+export declare const GROUP_KEY: InjectionKey<GroupState>;
+/**
+ * @brief The state of the nearest `GlassCanvas`, for low-level calls from a component inside it
+ * (call it in `setup`).
+ * @details Its `glass` field is reactive.
+ */
+export declare function useGlass(): CanvasState | undefined;
+/**
+ * @brief Content takes the color for the glass it sits on.
+ * @details The rule has no specificity, so any rule of the page wins.
+ */
+export declare function ensureStyle(): void;

package/dist/context.js

@@ -0,0 +1,27 @@
+/**
+ * @file context.ts
+ * @brief Vue context for the nearest glass canvas and group.
+ */
+import { inject } from "vue";
+export const CANVAS_KEY = Symbol("glass-canvas");
+export const GROUP_KEY = Symbol("glass-group");
+/**
+ * @brief The state of the nearest `GlassCanvas`, for low-level calls from a component inside it
+ * (call it in `setup`).
+ * @details Its `glass` field is reactive.
+ */
+export function useGlass() {
+    return inject(CANVAS_KEY, undefined);
+}
+/**
+ * @brief Content takes the color for the glass it sits on.
+ * @details The rule has no specificity, so any rule of the page wins.
+ */
+export function ensureStyle() {
+    if (typeof document === "undefined" || document.getElementById("glassrender-style") !== null)
+        return;
+    const s = document.createElement("style");
+    s.id = "glassrender-style";
+    s.textContent = ":where(.glass-box){color:var(--glass-foreground,inherit)}";
+    document.head.appendChild(s);
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file index.ts
+ * @brief Vue adapter entry point.
+ */
+export { GlassCanvas } from "./GlassCanvas.js";
+export { Glass } from "./Glass.js";
+export { GlassGroup } from "./GlassGroup.js";
+export { useGlass, type CanvasState } from "./context.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * @file index.ts
+ * @brief Vue adapter entry point.
+ */
+export { GlassCanvas } from "./GlassCanvas.js";
+export { Glass } from "./Glass.js";
+export { GlassGroup } from "./GlassGroup.js";
+export { useGlass } from "./context.js";

package/package.json

@@ -1,6 +1,39 @@
 {
-  "name": "glassrender-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "glassrender-vue",
+    "version": "0.1.1-beta",
+    "description": "Vue components for the GlassRender glass material renderer.",
+    "type": "module",
+    "sideEffects": false,
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.build.json",
+        "prepack": "npm run build",
+        "check": "vue-tsc -p tsconfig.json --noEmit",
+        "demo": "vite --config vite.config.js",
+        "build:demo": "vite build --config vite.config.js"
+    },
+    "peerDependencies": {
+        "glassrender": "^0.1.1-beta",
+        "vue": "^3.4.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.0",
+        "glassrender": "file:../..",
+        "typescript": "^6.0.3",
+        "vite": "^8.3.2",
+        "vue": "^3.5.0",
+        "vue-tsc": "^3.0.0"
+    }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.