@mulsense/xnew 0.7.3 → 0.7.4

package/dist/xnew.d.ts

@@ -60,7 +60,6 @@ declare class Unit {
     [key: string]: any;
     _: {
         parent: Unit | null;
-        ancestors: Unit[];
         children: Unit[];
         state: string;
         tostart: boolean;
@@ -156,30 +155,40 @@ declare function OpenAndClose(unit: Unit, { open, transition }: {
 declare function Accordion(unit: Unit): void;
 declare function Popup(unit: Unit): void;
 
-type ScreenFit = 'contain' | 'cover';
+interface SVGInterface {
+    viewBox?: string;
+    className?: string;
+    style?: string;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinejoin?: string;
+    strokeLinecap?: string;
+    fill?: string;
+    fillOpacity?: number;
+}
+declare function SVG(unit: Unit, { viewBox, className, style, stroke, strokeOpacity, strokeWidth, strokeLinejoin, strokeLinecap, fill, fillOpacity }?: SVGInterface): void;
+
 declare function Screen(unit: Unit, { width, height, fit }?: {
     width?: number;
     height?: number;
-    fit?: ScreenFit;
+    fit?: 'contain' | 'cover';
 }): {
     readonly canvas: UnitElement;
 };
 
-declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
+declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, fill, fillOpacity }?: {
     stroke?: string;
     strokeOpacity?: number;
     strokeWidth?: number;
-    strokeLinejoin?: string;
-    diagonal?: boolean;
     fill?: string;
     fillOpacity?: number;
 }): void;
-declare function DPad(unit: Unit, { diagonal, stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
+declare function DPad(unit: Unit, { diagonal, stroke, strokeOpacity, strokeWidth, fill, fillOpacity }?: {
     diagonal?: boolean;
     stroke?: string;
     strokeOpacity?: number;
     strokeWidth?: number;
-    strokeLinejoin?: string;
     fill?: string;
     fillOpacity?: number;
 }): void;
@@ -213,6 +222,10 @@ declare function Scene(unit: Unit): {
     append(Component: Function, props?: any): void;
 };
 
+declare function VolumeController(unit: Unit, { anchor }?: {
+    anchor?: string | undefined;
+}): void;
+
 declare class XImage {
     canvas: HTMLCanvasElement;
     constructor(canvas: HTMLCanvasElement);
@@ -291,6 +304,7 @@ declare const xnew: ((...args: UnitArgs) => Unit) & {
     protect(): void;
 } & {
     basics: {
+        SVG: typeof SVG;
         Screen: typeof Screen;
         OpenAndClose: typeof OpenAndClose;
         AnalogStick: typeof AnalogStick;
@@ -299,6 +313,7 @@ declare const xnew: ((...args: UnitArgs) => Unit) & {
         Accordion: typeof Accordion;
         Popup: typeof Popup;
         Scene: typeof Scene;
+        VolumeController: typeof VolumeController;
     };
     audio: {
         load(path: string): UnitPromise;

package/dist/xnew.js

@@ -572,7 +572,6 @@
                 currentContext: baseContext,
                 currentComponent: null,
                 afterSnapshot: null,
-                ancestors: parent ? [parent, ...parent._.ancestors] : [],
                 children: [],
                 nestElements: [],
                 promises: [],
@@ -668,44 +667,41 @@
         }
         static extend(unit, Component, props) {
             var _a;
-            if (unit._.Components.includes(Component) === true) {
-                throw new Error(`The Component is already extended.`);
-            }
-            else {
-                const backupComponent = unit._.currentComponent;
-                unit._.currentComponent = Component;
-                if (unit._.parent !== null) {
-                    Unit.addContext(unit._.parent, unit, Component, unit);
-                }
-                Unit.addContext(unit, unit, Component, unit);
-                const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
-                unit._.currentComponent = backupComponent;
-                Unit.component2units.add(Component, unit);
-                unit._.Components.push(Component);
-                Object.keys(defines).forEach((key) => {
-                    if (unit[key] !== undefined && unit._.defines[key] === undefined) {
-                        throw new Error(`The property "${key}" already exists.`);
-                    }
-                    const descriptor = Object.getOwnPropertyDescriptor(defines, key);
-                    const wrapper = { configurable: true, enumerable: true };
-                    const snapshot = Unit.snapshot(unit);
-                    if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
-                        if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
-                            wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
-                        if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                            wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
-                    }
-                    else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                        wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
-                    }
-                    else {
-                        throw new Error(`Only function properties can be defined as Component defines. [${key}]`);
-                    }
-                    Object.defineProperty(unit._.defines, key, wrapper);
-                    Object.defineProperty(unit, key, wrapper);
-                });
-                return Object.assign({}, unit._.defines);
-            }
+            const backupComponent = unit._.currentComponent;
+            unit._.currentComponent = Component;
+            if (unit._.parent !== null) {
+                Unit.addContext(unit._.parent, unit, Component, unit);
+            }
+            Unit.addContext(unit, unit, Component, unit);
+            const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
+            unit._.currentComponent = backupComponent;
+            Unit.component2units.add(Component, unit);
+            unit._.Components.push(Component);
+            Object.keys(defines).forEach((key) => {
+                if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                    throw new Error(`The property "${key}" already exists.`);
+                }
+                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+                const wrapper = { configurable: true, enumerable: true };
+                const snapshot = Unit.snapshot(unit);
+                if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
+                        wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
+                        wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
+                }
+                else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
+                }
+                else {
+                    throw new Error(`Only function properties can be defined as Component defines. [${key}]`);
+                }
+                Object.defineProperty(unit._.defines, key, wrapper);
+                Object.defineProperty(unit, key, wrapper);
+            });
+            let clone = {};
+            Object.defineProperties(clone, Object.getOwnPropertyDescriptors(unit._.defines));
+            return clone;
         }
         static start(unit) {
             if (unit._.tostart === false)
@@ -836,10 +832,17 @@
             var _a, _b;
             const current = Unit.currentUnit;
             if (type[0] === '+') {
+                const ancestors = [];
+                for (let u = current._.parent; u !== null; u = u._.parent)
+                    ancestors.push(u);
                 (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
-                    const find = [unit, ...unit._.ancestors].find(u => u._.protected === true);
-                    if (find === undefined || current._.ancestors.includes(find) === true || current === find) {
+                    let find = undefined;
+                    for (let u = unit; u !== null && find === undefined; u = u._.parent) {
+                        if (u._.protected === true)
+                            find = u;
+                    }
+                    if (find === undefined || ancestors.includes(find) === true || current === find) {
                         (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(props));
                     }
                 });
@@ -990,6 +993,9 @@
                 if (Unit.currentUnit._.state !== 'invoked') {
                     throw new Error('xnew.extend can not be called after initialized.');
                 }
+                if (Unit.currentUnit._.Components.includes(Component) === true) {
+                    console.warn('Component is already extended in this unit:', Component);
+                }
                 const defines = Unit.extend(Unit.currentUnit, Component, props);
                 return defines;
             }
@@ -1331,10 +1337,24 @@
         });
     }
 
-    function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
-        const aspect = width / height;
-        xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
-        xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
+    function SVG(unit, { viewBox = '0 0 64 64', className = '', style = '', stroke = 'none', strokeOpacity = 1, strokeWidth = 1, strokeLinejoin = 'round', strokeLinecap = 'round', fill = 'none', fillOpacity = 1 } = {}) {
+        xnew$1.nest(`<svg
+        viewBox="${viewBox}"
+        class="${className}"
+        style="${style}"
+        stroke="${stroke}"
+        stroke-opacity="${strokeOpacity}"
+        stroke-width="${strokeWidth}"
+        stroke-linejoin="${strokeLinejoin}"
+        stroke-linecap="${strokeLinecap}"
+        fill="${fill}"
+        fill-opacity="${fillOpacity}"
+    ">`);
+    }
+
+    function Aspect(unit, { aspect = 1.0, fit = 'contain' } = {}) {
+        xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">');
+        xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size;">`);
         if (fit === 'contain') {
             unit.element.style.width = `min(100cqw, calc(100cqh * ${aspect}))`;
         }
@@ -1342,6 +1362,10 @@
             unit.element.style.flexShrink = '0';
             unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
         }
+    }
+
+    function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
+        xnew$1.extend(Aspect, { aspect: width / height, fit });
         const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
         return {
             get canvas() { return canvas.element; },
@@ -1351,26 +1375,19 @@
     //----------------------------------------------------------------------------------------------------
     // controller
     //----------------------------------------------------------------------------------------------------
-    function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
-        xnew$1.nest(`<svg
-        viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
-        stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
-        ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
-    ">`);
-    }
-    function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-        xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
+    const svgTemplate = { viewBox: '0 0 64 64', style: "position: absolute; width: 100%; height: 100%;" };
+    function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, fill = '#FFF', fillOpacity = 0.8 } = {}) {
+        xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+        xnew$1.nest(`<div style="width: 100%; height: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto;">`);
         xnew$1((unit) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+            xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth, fill, fillOpacity }));
             xnew$1('<polygon points="32  7 27 13 37 13">');
             xnew$1('<polygon points="32 57 27 51 37 51">');
             xnew$1('<polygon points=" 7 32 13 27 13 37">');
             xnew$1('<polygon points="57 32 51 27 51 37">');
         });
         const target = xnew$1((unit) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+            xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth, fill, fillOpacity }));
             xnew$1('<circle cx="32" cy="32" r="14">');
         });
         unit.on('dragstart dragmove', ({ type, position }) => {
@@ -1380,24 +1397,18 @@
             const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
             const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
             const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
-            target.element.style.filter = 'brightness(80%)';
-            target.element.style.left = `${vector.x * size / 4}px`;
-            target.element.style.top = `${vector.y * size / 4}px`;
+            Object.assign(target.element.style, { filter: 'brightness(80%)', left: `${vector.x * size / 4}px`, top: `${vector.y * size / 4}px` });
             const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
             xnew$1.emit(nexttype, { vector });
         });
         unit.on('dragend', () => {
-            const size = unit.element.clientWidth;
-            const vector = { x: 0, y: 0 };
-            target.element.style.filter = '';
-            target.element.style.left = `${vector.x * size / 4}px`;
-            target.element.style.top = `${vector.y * size / 4}px`;
-            xnew$1.emit('-up', { vector });
+            Object.assign(target.element.style, { filter: '', left: '0px', top: '0px' });
+            xnew$1.emit('-up', { vector: { x: 0, y: 0 } });
         });
     }
-    function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-        xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
+    function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, fill = '#FFF', fillOpacity = 0.8 } = {}) {
+        xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+        xnew$1.nest(`<div style="width: 100%; height: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto;">`);
         const polygons = [
             '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
             '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1406,12 +1417,12 @@
         ];
         const targets = polygons.map((polygon) => {
             return xnew$1((unit) => {
-                xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
+                xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { fill, fillOpacity }));
                 xnew$1(polygon);
             });
         });
         xnew$1((unit) => {
-            xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+            xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth }));
             xnew$1('<polyline points="23 23 23  4 24  3 40  3 41  4 41 23">');
             xnew$1('<polyline points="23 41 23 60 24 61 40 61 41 60 41 41">');
             xnew$1('<polyline points="23 23  4 23  3 24  3 40  4 41 23 41">');
@@ -1448,17 +1459,15 @@
             xnew$1.emit(nexttype, { vector });
         });
         unit.on('dragend', () => {
-            const vector = { x: 0, y: 0 };
             targets[0].element.style.filter = '';
             targets[1].element.style.filter = '';
             targets[2].element.style.filter = '';
             targets[3].element.style.filter = '';
-            xnew$1.emit('-up', { vector });
+            xnew$1.emit('-up', { vector: { x: 0, y: 0 } });
         });
     }
 
-    const currentColorA = 'color-mix(in srgb, currentColor 70%, transparent)';
-    const currentColorB = 'color-mix(in srgb, currentColor 10%, transparent)';
+    const paleColor$1 = 'color-mix(in srgb, currentColor 20%, transparent)';
     function Panel(unit, { params }) {
         const object = params !== null && params !== void 0 ? params : {};
         return {
@@ -1505,8 +1514,9 @@
         if (name) {
             xnew$1('<div style="height: 2em; margin: 0.125em 0; display: flex; align-items: center; cursor: pointer; user-select: none;">', (unit) => {
                 unit.on('click', () => group.toggle());
-                xnew$1('<svg viewBox="0 0 12 12" style="width: 1em; height: 1em; margin-right: 0.25em;" fill="none" stroke="currentColor">', (unit) => {
-                    xnew$1('<path d="M6 2 10 6 6 10" />');
+                xnew$1((unit) => {
+                    xnew$1.extend(SVG, { viewBox: '0 0 12 12', stroke: 'currentColor', style: 'width: 1em; height: 1em; margin-right: 0.25em;' });
+                    xnew$1('<path d="M6 2 10 6 6 10"/>');
                     group.on('-transition', ({ value }) => unit.element.style.transform = `rotate(${value * 90}deg)`);
                 });
                 xnew$1('<div>', name);
@@ -1518,12 +1528,10 @@
         xnew$1.nest('<button style="margin: 0.125em 0; height: 2em; border: 1px solid; border-radius: 0.25em; cursor: pointer;">');
         unit.element.textContent = key;
         unit.on('pointerover', () => {
-            unit.element.style.background = currentColorB;
-            unit.element.style.borderColor = currentColorA;
+            Object.assign(unit.element.style, { background: paleColor$1, borderColor: 'currentColor' });
         });
         unit.on('pointerout', () => {
-            unit.element.style.background = '';
-            unit.element.style.borderColor = '';
+            Object.assign(unit.element.style, { background: '', borderColor: '' });
         });
         unit.on('pointerdown', () => {
             unit.element.style.filter = 'brightness(0.5)';
@@ -1533,14 +1541,14 @@
         });
     }
     function Separator(unit) {
-        xnew$1.nest(`<div style="margin: 0.5em 0; border-top: 1px solid ${currentColorA};">`);
+        xnew$1.nest(`<div style="margin: 0.5em 0; border-top: 1px solid currentColor;">`);
     }
     function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
         value = value !== null && value !== void 0 ? value : min;
         xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; cursor: pointer; user-select: none;">`);
         // fill bar
         const ratio = (value - min) / (max - min);
-        const fill = xnew$1(`<div style="position: absolute; top: 0; left: 0; bottom: 0; width: ${ratio * 100}%; background: ${currentColorB}; border: 1px solid ${currentColorA}; border-radius: 0.25em; transition: width 0.05s;">`);
+        const fill = xnew$1(`<div style="position: absolute; top: 0; left: 0; bottom: 0; width: ${ratio * 100}%; background: ${paleColor$1}; border: 1px solid currentColor; border-radius: 0.25em; transition: width 0.05s;">`);
         // overlay labels
         const status = xnew$1('<div style="position: absolute; inset: 0; padding: 0 0.5em; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">', (unit) => {
             xnew$1('<div>', key);
@@ -1558,14 +1566,15 @@
     function Checkbox(unit, { key = '', value } = {}) {
         xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`);
         xnew$1('<div style="flex: 1;">', key);
-        const box = xnew$1(`<div style="width: 1.25em; height: 1.25em; border: 1px solid ${currentColorA}; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; transition: background 0.1s;">`, () => {
-            xnew$1(`<svg viewBox="0 0 12 12" style="width: 1.25em; height: 1.25em; opacity: 0; transition: opacity 0.1s;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+        const box = xnew$1(`<div style="width: 1.25em; height: 1.25em; border: 1px solid currentColor; border-radius: 0.25em; display: flex; align-items: center; justify-content: center;">`, () => {
+            xnew$1((unit) => {
+                xnew$1.extend(SVG, { viewBox: '0 0 12 12', style: 'width: 1.25em; height: 1.25em; opacity: 0;', stroke: 'currentColor', strokeWidth: 2 });
                 xnew$1('<path d="M2 6 5 9 10 3" />');
             });
         });
         const check = box.element.querySelector('svg');
         const update = (checked) => {
-            box.element.style.background = checked ? currentColorB : '';
+            box.element.style.background = checked ? paleColor$1 : '';
             check.style.opacity = checked ? '1' : '0';
         };
         update(!!value);
@@ -1584,8 +1593,9 @@
                 xnew$1(`<option value="${item}" ${item === initial ? 'selected' : ''}>`, item);
             }
         });
-        const button = xnew$1(`<div style="height: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid ${currentColorA}; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
-        xnew$1(`<svg viewBox="0 0 12 12" style="position: absolute; right: 1.0em; width: 0.75em; height: 0.75em; pointer-events: none;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+        const button = xnew$1(`<div style="height: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid currentColor; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
+        xnew$1((unit) => {
+            xnew$1.extend(SVG, { viewBox: '0 0 12 12', stroke: 'currentColor', strokeWidth: 2, style: 'position: absolute; right: 1.0em; width: 0.75em; height: 0.75em; pointer-events: none;' });
             xnew$1('<path d="M2 4 6 8 10 4" />');
         });
         button.on('click', () => {
@@ -1600,10 +1610,10 @@
                     list.element.style.background = getEffectiveBg(button.element);
                 });
                 xnew$1.extend(Accordion);
-                xnew$1.nest(`<div style="position: relative; border: 1px solid ${currentColorA}; border-radius: 0.25em; overflow: hidden;">`);
+                xnew$1.nest(`<div style="position: relative; border: 1px solid currentColor; border-radius: 0.25em; overflow: hidden;">`);
                 for (const item of items) {
                     const div = xnew$1(`<div style="height: 2em; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`, item);
-                    div.on('pointerover', () => div.element.style.background = currentColorB);
+                    div.on('pointerover', () => div.element.style.background = paleColor$1);
                     div.on('pointerout', () => div.element.style.background = '');
                     div.on('click', () => {
                         button.element.textContent = item;
@@ -1612,14 +1622,12 @@
                         list.finalize();
                     });
                 }
-                list.on('click.outside', () => {
-                    list.finalize();
-                });
+                list.on('click.outside', () => list.finalize());
             });
         });
         xnew$1.nest(native.element);
-        function getEffectiveBg(el) {
-            let current = el.parentElement;
+        function getEffectiveBg(element) {
+            let current = element.parentElement;
             while (current) {
                 const bg = getComputedStyle(current).backgroundColor;
                 if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent')
@@ -1642,34 +1650,6 @@
         };
     }
 
-    class XImage {
-        constructor(...args) {
-            if (args[0] instanceof HTMLCanvasElement) {
-                this.canvas = args[0];
-            }
-            else {
-                const canvas = document.createElement('canvas');
-                canvas.width = args[0];
-                canvas.height = args[1];
-                this.canvas = canvas;
-            }
-        }
-        crop(x, y, width, height) {
-            var _a;
-            const canvas = document.createElement('canvas');
-            canvas.width = width;
-            canvas.height = height;
-            (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
-            return new XImage(canvas);
-        }
-        download(filename) {
-            const link = document.createElement('a');
-            link.download = filename;
-            link.href = this.canvas.toDataURL('image/png');
-            link.click();
-        }
-    }
-
     const context = new window.AudioContext();
     const master = context.createGain();
     //----------------------------------------------------------------------------------------------------
@@ -1894,7 +1874,87 @@
         }
     }
 
+    const paleColor = 'color-mix(in srgb, currentColor 20%, transparent)';
+    function SpeakerIcon(unit, { muted = false } = {}) {
+        xnew$1.extend(SVG, { viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 });
+        const path = muted
+            ? 'M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9 9 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25z'
+            : 'M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9 9 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25z';
+        xnew$1(`<path d="${path}" />`);
+    }
+    function VolumeController(unit, { anchor = 'left' } = {}) {
+        xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+        unit.on('pointerdown', ({ event }) => event.stopPropagation());
+        const system = xnew$1(OpenAndClose, { open: false, transition: { duration: 250, easing: 'ease' } });
+        const button = xnew$1((unit) => {
+            xnew$1.nest('<div style="width: 100%; height: 100%; cursor: pointer;">');
+            unit.on('click', () => system.toggle());
+            let icon = xnew$1(SpeakerIcon, { muted: master.gain.value === 0 });
+            return {
+                update() {
+                    icon === null || icon === void 0 ? void 0 : icon.finalize();
+                    icon = xnew$1(SpeakerIcon, { muted: master.gain.value === 0 });
+                }
+            };
+        });
+        xnew$1(() => {
+            const isHoriz = anchor === 'left' || anchor === 'right';
+            const unit = isHoriz ? 'cqw' : 'cqh';
+            const fillProp = isHoriz ? 'width' : 'height';
+            const pct = master.gain.value * 100;
+            const outerSize = isHoriz ? `top: 20%; bottom: 20%; width: 0${unit}` : `left: 20%; right: 20%; height: 0${unit}`;
+            const fillSize = isHoriz ? `top: 0; left: 0; bottom: 0; width: ${pct}%; height: 100%` : `bottom: 0; left: 0; right: 0; width: 100%; height: ${pct}%`;
+            const outer = xnew$1.nest(`<div style="position: absolute; ${outerSize};">`);
+            xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%; border: 1px solid currentColor; border-radius: 0.25em; box-sizing: border-box;">`);
+            const fill = xnew$1(`<div style="position: absolute; ${fillSize}; background: ${paleColor};">`);
+            const input = xnew$1(`<input type="range" min="0" max="100" value="${pct}" style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;${isHoriz ? '' : ' writing-mode: vertical-lr; direction: rtl;'}">`);
+            const css = (el) => el.style;
+            input.on('input', ({ event }) => {
+                const v = Number(event.target.value);
+                css(fill.element)[fillProp] = `${v}%`;
+                master.gain.value = v / 100;
+                button.update();
+            });
+            system.on('-transition', ({ value }) => {
+                css(outer)[anchor] = `-${value * 400 + 20}${unit}`;
+                css(outer)[fillProp] = `${value * 400}${unit}`;
+                outer.style.opacity = value.toString();
+                outer.style.pointerEvents = value < 0.9 ? 'none' : 'auto';
+            });
+        });
+        unit.on('click.outside', () => system.close());
+    }
+
+    class XImage {
+        constructor(...args) {
+            if (args[0] instanceof HTMLCanvasElement) {
+                this.canvas = args[0];
+            }
+            else {
+                const canvas = document.createElement('canvas');
+                canvas.width = args[0];
+                canvas.height = args[1];
+                this.canvas = canvas;
+            }
+        }
+        crop(x, y, width, height) {
+            var _a;
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
+            return new XImage(canvas);
+        }
+        download(filename) {
+            const link = document.createElement('a');
+            link.download = filename;
+            link.href = this.canvas.toDataURL('image/png');
+            link.click();
+        }
+    }
+
     const basics = {
+        SVG,
         Screen,
         OpenAndClose,
         AnalogStick,
@@ -1903,6 +1963,7 @@
         Accordion,
         Popup,
         Scene,
+        VolumeController,
     };
     const audio = {
         load(path) {

package/dist/xnew.mjs

@@ -566,7 +566,6 @@ class Unit {
             currentContext: baseContext,
             currentComponent: null,
             afterSnapshot: null,
-            ancestors: parent ? [parent, ...parent._.ancestors] : [],
             children: [],
             nestElements: [],
             promises: [],
@@ -662,44 +661,41 @@ class Unit {
     }
     static extend(unit, Component, props) {
         var _a;
-        if (unit._.Components.includes(Component) === true) {
-            throw new Error(`The Component is already extended.`);
-        }
-        else {
-            const backupComponent = unit._.currentComponent;
-            unit._.currentComponent = Component;
-            if (unit._.parent !== null) {
-                Unit.addContext(unit._.parent, unit, Component, unit);
-            }
-            Unit.addContext(unit, unit, Component, unit);
-            const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
-            unit._.currentComponent = backupComponent;
-            Unit.component2units.add(Component, unit);
-            unit._.Components.push(Component);
-            Object.keys(defines).forEach((key) => {
-                if (unit[key] !== undefined && unit._.defines[key] === undefined) {
-                    throw new Error(`The property "${key}" already exists.`);
-                }
-                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
-                const wrapper = { configurable: true, enumerable: true };
-                const snapshot = Unit.snapshot(unit);
-                if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
-                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
-                        wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
-                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                        wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
-                }
-                else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
-                }
-                else {
-                    throw new Error(`Only function properties can be defined as Component defines. [${key}]`);
-                }
-                Object.defineProperty(unit._.defines, key, wrapper);
-                Object.defineProperty(unit, key, wrapper);
-            });
-            return Object.assign({}, unit._.defines);
-        }
+        const backupComponent = unit._.currentComponent;
+        unit._.currentComponent = Component;
+        if (unit._.parent !== null) {
+            Unit.addContext(unit._.parent, unit, Component, unit);
+        }
+        Unit.addContext(unit, unit, Component, unit);
+        const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
+        unit._.currentComponent = backupComponent;
+        Unit.component2units.add(Component, unit);
+        unit._.Components.push(Component);
+        Object.keys(defines).forEach((key) => {
+            if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                throw new Error(`The property "${key}" already exists.`);
+            }
+            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+            const wrapper = { configurable: true, enumerable: true };
+            const snapshot = Unit.snapshot(unit);
+            if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
+                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
+                    wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
+                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
+                    wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
+            }
+            else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
+            }
+            else {
+                throw new Error(`Only function properties can be defined as Component defines. [${key}]`);
+            }
+            Object.defineProperty(unit._.defines, key, wrapper);
+            Object.defineProperty(unit, key, wrapper);
+        });
+        let clone = {};
+        Object.defineProperties(clone, Object.getOwnPropertyDescriptors(unit._.defines));
+        return clone;
     }
     static start(unit) {
         if (unit._.tostart === false)
@@ -830,10 +826,17 @@ class Unit {
         var _a, _b;
         const current = Unit.currentUnit;
         if (type[0] === '+') {
+            const ancestors = [];
+            for (let u = current._.parent; u !== null; u = u._.parent)
+                ancestors.push(u);
             (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                 var _a;
-                const find = [unit, ...unit._.ancestors].find(u => u._.protected === true);
-                if (find === undefined || current._.ancestors.includes(find) === true || current === find) {
+                let find = undefined;
+                for (let u = unit; u !== null && find === undefined; u = u._.parent) {
+                    if (u._.protected === true)
+                        find = u;
+                }
+                if (find === undefined || ancestors.includes(find) === true || current === find) {
                     (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(props));
                 }
             });
@@ -984,6 +987,9 @@ function (...args) {
             if (Unit.currentUnit._.state !== 'invoked') {
                 throw new Error('xnew.extend can not be called after initialized.');
             }
+            if (Unit.currentUnit._.Components.includes(Component) === true) {
+                console.warn('Component is already extended in this unit:', Component);
+            }
             const defines = Unit.extend(Unit.currentUnit, Component, props);
             return defines;
         }
@@ -1325,10 +1331,24 @@ function Popup(unit) {
     });
 }
 
-function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
-    const aspect = width / height;
-    xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
-    xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
+function SVG(unit, { viewBox = '0 0 64 64', className = '', style = '', stroke = 'none', strokeOpacity = 1, strokeWidth = 1, strokeLinejoin = 'round', strokeLinecap = 'round', fill = 'none', fillOpacity = 1 } = {}) {
+    xnew$1.nest(`<svg
+        viewBox="${viewBox}"
+        class="${className}"
+        style="${style}"
+        stroke="${stroke}"
+        stroke-opacity="${strokeOpacity}"
+        stroke-width="${strokeWidth}"
+        stroke-linejoin="${strokeLinejoin}"
+        stroke-linecap="${strokeLinecap}"
+        fill="${fill}"
+        fill-opacity="${fillOpacity}"
+    ">`);
+}
+
+function Aspect(unit, { aspect = 1.0, fit = 'contain' } = {}) {
+    xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">');
+    xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size;">`);
     if (fit === 'contain') {
         unit.element.style.width = `min(100cqw, calc(100cqh * ${aspect}))`;
     }
@@ -1336,6 +1356,10 @@ function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
         unit.element.style.flexShrink = '0';
         unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
     }
+}
+
+function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
+    xnew$1.extend(Aspect, { aspect: width / height, fit });
     const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
     return {
         get canvas() { return canvas.element; },
@@ -1345,26 +1369,19 @@ function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
 //----------------------------------------------------------------------------------------------------
 // controller
 //----------------------------------------------------------------------------------------------------
-function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
-    xnew$1.nest(`<svg
-        viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
-        stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
-        ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
-    ">`);
-}
-function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-    xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
+const svgTemplate = { viewBox: '0 0 64 64', style: "position: absolute; width: 100%; height: 100%;" };
+function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, fill = '#FFF', fillOpacity = 0.8 } = {}) {
+    xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+    xnew$1.nest(`<div style="width: 100%; height: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto;">`);
     xnew$1((unit) => {
-        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth, fill, fillOpacity }));
         xnew$1('<polygon points="32  7 27 13 37 13">');
         xnew$1('<polygon points="32 57 27 51 37 51">');
         xnew$1('<polygon points=" 7 32 13 27 13 37">');
         xnew$1('<polygon points="57 32 51 27 51 37">');
     });
     const target = xnew$1((unit) => {
-        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth, fill, fillOpacity }));
         xnew$1('<circle cx="32" cy="32" r="14">');
     });
     unit.on('dragstart dragmove', ({ type, position }) => {
@@ -1374,24 +1391,18 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
         const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
         const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
-        target.element.style.filter = 'brightness(80%)';
-        target.element.style.left = `${vector.x * size / 4}px`;
-        target.element.style.top = `${vector.y * size / 4}px`;
+        Object.assign(target.element.style, { filter: 'brightness(80%)', left: `${vector.x * size / 4}px`, top: `${vector.y * size / 4}px` });
         const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
         xnew$1.emit(nexttype, { vector });
     });
     unit.on('dragend', () => {
-        const size = unit.element.clientWidth;
-        const vector = { x: 0, y: 0 };
-        target.element.style.filter = '';
-        target.element.style.left = `${vector.x * size / 4}px`;
-        target.element.style.top = `${vector.y * size / 4}px`;
-        xnew$1.emit('-up', { vector });
+        Object.assign(target.element.style, { filter: '', left: '0px', top: '0px' });
+        xnew$1.emit('-up', { vector: { x: 0, y: 0 } });
     });
 }
-function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-    xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
+function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, fill = '#FFF', fillOpacity = 0.8 } = {}) {
+    xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+    xnew$1.nest(`<div style="width: 100%; height: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto;">`);
     const polygons = [
         '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
         '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1400,12 +1411,12 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
     ];
     const targets = polygons.map((polygon) => {
         return xnew$1((unit) => {
-            xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
+            xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { fill, fillOpacity }));
             xnew$1(polygon);
         });
     });
     xnew$1((unit) => {
-        xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1.extend(SVG, Object.assign(Object.assign({}, svgTemplate), { stroke, strokeOpacity, strokeWidth }));
         xnew$1('<polyline points="23 23 23  4 24  3 40  3 41  4 41 23">');
         xnew$1('<polyline points="23 41 23 60 24 61 40 61 41 60 41 41">');
         xnew$1('<polyline points="23 23  4 23  3 24  3 40  4 41 23 41">');
@@ -1442,17 +1453,15 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
         xnew$1.emit(nexttype, { vector });
     });
     unit.on('dragend', () => {
-        const vector = { x: 0, y: 0 };
         targets[0].element.style.filter = '';
         targets[1].element.style.filter = '';
         targets[2].element.style.filter = '';
         targets[3].element.style.filter = '';
-        xnew$1.emit('-up', { vector });
+        xnew$1.emit('-up', { vector: { x: 0, y: 0 } });
     });
 }
 
-const currentColorA = 'color-mix(in srgb, currentColor 70%, transparent)';
-const currentColorB = 'color-mix(in srgb, currentColor 10%, transparent)';
+const paleColor$1 = 'color-mix(in srgb, currentColor 20%, transparent)';
 function Panel(unit, { params }) {
     const object = params !== null && params !== void 0 ? params : {};
     return {
@@ -1499,8 +1508,9 @@ function Group(group, { name, open = false }) {
     if (name) {
         xnew$1('<div style="height: 2em; margin: 0.125em 0; display: flex; align-items: center; cursor: pointer; user-select: none;">', (unit) => {
             unit.on('click', () => group.toggle());
-            xnew$1('<svg viewBox="0 0 12 12" style="width: 1em; height: 1em; margin-right: 0.25em;" fill="none" stroke="currentColor">', (unit) => {
-                xnew$1('<path d="M6 2 10 6 6 10" />');
+            xnew$1((unit) => {
+                xnew$1.extend(SVG, { viewBox: '0 0 12 12', stroke: 'currentColor', style: 'width: 1em; height: 1em; margin-right: 0.25em;' });
+                xnew$1('<path d="M6 2 10 6 6 10"/>');
                 group.on('-transition', ({ value }) => unit.element.style.transform = `rotate(${value * 90}deg)`);
             });
             xnew$1('<div>', name);
@@ -1512,12 +1522,10 @@ function Button(unit, { key = '' }) {
     xnew$1.nest('<button style="margin: 0.125em 0; height: 2em; border: 1px solid; border-radius: 0.25em; cursor: pointer;">');
     unit.element.textContent = key;
     unit.on('pointerover', () => {
-        unit.element.style.background = currentColorB;
-        unit.element.style.borderColor = currentColorA;
+        Object.assign(unit.element.style, { background: paleColor$1, borderColor: 'currentColor' });
     });
     unit.on('pointerout', () => {
-        unit.element.style.background = '';
-        unit.element.style.borderColor = '';
+        Object.assign(unit.element.style, { background: '', borderColor: '' });
     });
     unit.on('pointerdown', () => {
         unit.element.style.filter = 'brightness(0.5)';
@@ -1527,14 +1535,14 @@ function Button(unit, { key = '' }) {
     });
 }
 function Separator(unit) {
-    xnew$1.nest(`<div style="margin: 0.5em 0; border-top: 1px solid ${currentColorA};">`);
+    xnew$1.nest(`<div style="margin: 0.5em 0; border-top: 1px solid currentColor;">`);
 }
 function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
     value = value !== null && value !== void 0 ? value : min;
     xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; cursor: pointer; user-select: none;">`);
     // fill bar
     const ratio = (value - min) / (max - min);
-    const fill = xnew$1(`<div style="position: absolute; top: 0; left: 0; bottom: 0; width: ${ratio * 100}%; background: ${currentColorB}; border: 1px solid ${currentColorA}; border-radius: 0.25em; transition: width 0.05s;">`);
+    const fill = xnew$1(`<div style="position: absolute; top: 0; left: 0; bottom: 0; width: ${ratio * 100}%; background: ${paleColor$1}; border: 1px solid currentColor; border-radius: 0.25em; transition: width 0.05s;">`);
     // overlay labels
     const status = xnew$1('<div style="position: absolute; inset: 0; padding: 0 0.5em; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">', (unit) => {
         xnew$1('<div>', key);
@@ -1552,14 +1560,15 @@ function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
 function Checkbox(unit, { key = '', value } = {}) {
     xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`);
     xnew$1('<div style="flex: 1;">', key);
-    const box = xnew$1(`<div style="width: 1.25em; height: 1.25em; border: 1px solid ${currentColorA}; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; transition: background 0.1s;">`, () => {
-        xnew$1(`<svg viewBox="0 0 12 12" style="width: 1.25em; height: 1.25em; opacity: 0; transition: opacity 0.1s;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+    const box = xnew$1(`<div style="width: 1.25em; height: 1.25em; border: 1px solid currentColor; border-radius: 0.25em; display: flex; align-items: center; justify-content: center;">`, () => {
+        xnew$1((unit) => {
+            xnew$1.extend(SVG, { viewBox: '0 0 12 12', style: 'width: 1.25em; height: 1.25em; opacity: 0;', stroke: 'currentColor', strokeWidth: 2 });
             xnew$1('<path d="M2 6 5 9 10 3" />');
         });
     });
     const check = box.element.querySelector('svg');
     const update = (checked) => {
-        box.element.style.background = checked ? currentColorB : '';
+        box.element.style.background = checked ? paleColor$1 : '';
         check.style.opacity = checked ? '1' : '0';
     };
     update(!!value);
@@ -1578,8 +1587,9 @@ function Select(_, { key = '', value, items = [] } = {}) {
             xnew$1(`<option value="${item}" ${item === initial ? 'selected' : ''}>`, item);
         }
     });
-    const button = xnew$1(`<div style="height: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid ${currentColorA}; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
-    xnew$1(`<svg viewBox="0 0 12 12" style="position: absolute; right: 1.0em; width: 0.75em; height: 0.75em; pointer-events: none;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+    const button = xnew$1(`<div style="height: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid currentColor; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
+    xnew$1((unit) => {
+        xnew$1.extend(SVG, { viewBox: '0 0 12 12', stroke: 'currentColor', strokeWidth: 2, style: 'position: absolute; right: 1.0em; width: 0.75em; height: 0.75em; pointer-events: none;' });
         xnew$1('<path d="M2 4 6 8 10 4" />');
     });
     button.on('click', () => {
@@ -1594,10 +1604,10 @@ function Select(_, { key = '', value, items = [] } = {}) {
                 list.element.style.background = getEffectiveBg(button.element);
             });
             xnew$1.extend(Accordion);
-            xnew$1.nest(`<div style="position: relative; border: 1px solid ${currentColorA}; border-radius: 0.25em; overflow: hidden;">`);
+            xnew$1.nest(`<div style="position: relative; border: 1px solid currentColor; border-radius: 0.25em; overflow: hidden;">`);
             for (const item of items) {
                 const div = xnew$1(`<div style="height: 2em; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`, item);
-                div.on('pointerover', () => div.element.style.background = currentColorB);
+                div.on('pointerover', () => div.element.style.background = paleColor$1);
                 div.on('pointerout', () => div.element.style.background = '');
                 div.on('click', () => {
                     button.element.textContent = item;
@@ -1606,14 +1616,12 @@ function Select(_, { key = '', value, items = [] } = {}) {
                     list.finalize();
                 });
             }
-            list.on('click.outside', () => {
-                list.finalize();
-            });
+            list.on('click.outside', () => list.finalize());
         });
     });
     xnew$1.nest(native.element);
-    function getEffectiveBg(el) {
-        let current = el.parentElement;
+    function getEffectiveBg(element) {
+        let current = element.parentElement;
         while (current) {
             const bg = getComputedStyle(current).backgroundColor;
             if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent')
@@ -1636,34 +1644,6 @@ function Scene(unit) {
     };
 }
 
-class XImage {
-    constructor(...args) {
-        if (args[0] instanceof HTMLCanvasElement) {
-            this.canvas = args[0];
-        }
-        else {
-            const canvas = document.createElement('canvas');
-            canvas.width = args[0];
-            canvas.height = args[1];
-            this.canvas = canvas;
-        }
-    }
-    crop(x, y, width, height) {
-        var _a;
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
-        return new XImage(canvas);
-    }
-    download(filename) {
-        const link = document.createElement('a');
-        link.download = filename;
-        link.href = this.canvas.toDataURL('image/png');
-        link.click();
-    }
-}
-
 const context = new window.AudioContext();
 const master = context.createGain();
 //----------------------------------------------------------------------------------------------------
@@ -1888,7 +1868,87 @@ class Synthesizer {
     }
 }
 
+const paleColor = 'color-mix(in srgb, currentColor 20%, transparent)';
+function SpeakerIcon(unit, { muted = false } = {}) {
+    xnew$1.extend(SVG, { viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 });
+    const path = muted
+        ? 'M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9 9 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25z'
+        : 'M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9 9 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25z';
+    xnew$1(`<path d="${path}" />`);
+}
+function VolumeController(unit, { anchor = 'left' } = {}) {
+    xnew$1.extend(Aspect, { aspect: 1.0, fit: 'contain' });
+    unit.on('pointerdown', ({ event }) => event.stopPropagation());
+    const system = xnew$1(OpenAndClose, { open: false, transition: { duration: 250, easing: 'ease' } });
+    const button = xnew$1((unit) => {
+        xnew$1.nest('<div style="width: 100%; height: 100%; cursor: pointer;">');
+        unit.on('click', () => system.toggle());
+        let icon = xnew$1(SpeakerIcon, { muted: master.gain.value === 0 });
+        return {
+            update() {
+                icon === null || icon === void 0 ? void 0 : icon.finalize();
+                icon = xnew$1(SpeakerIcon, { muted: master.gain.value === 0 });
+            }
+        };
+    });
+    xnew$1(() => {
+        const isHoriz = anchor === 'left' || anchor === 'right';
+        const unit = isHoriz ? 'cqw' : 'cqh';
+        const fillProp = isHoriz ? 'width' : 'height';
+        const pct = master.gain.value * 100;
+        const outerSize = isHoriz ? `top: 20%; bottom: 20%; width: 0${unit}` : `left: 20%; right: 20%; height: 0${unit}`;
+        const fillSize = isHoriz ? `top: 0; left: 0; bottom: 0; width: ${pct}%; height: 100%` : `bottom: 0; left: 0; right: 0; width: 100%; height: ${pct}%`;
+        const outer = xnew$1.nest(`<div style="position: absolute; ${outerSize};">`);
+        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%; border: 1px solid currentColor; border-radius: 0.25em; box-sizing: border-box;">`);
+        const fill = xnew$1(`<div style="position: absolute; ${fillSize}; background: ${paleColor};">`);
+        const input = xnew$1(`<input type="range" min="0" max="100" value="${pct}" style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;${isHoriz ? '' : ' writing-mode: vertical-lr; direction: rtl;'}">`);
+        const css = (el) => el.style;
+        input.on('input', ({ event }) => {
+            const v = Number(event.target.value);
+            css(fill.element)[fillProp] = `${v}%`;
+            master.gain.value = v / 100;
+            button.update();
+        });
+        system.on('-transition', ({ value }) => {
+            css(outer)[anchor] = `-${value * 400 + 20}${unit}`;
+            css(outer)[fillProp] = `${value * 400}${unit}`;
+            outer.style.opacity = value.toString();
+            outer.style.pointerEvents = value < 0.9 ? 'none' : 'auto';
+        });
+    });
+    unit.on('click.outside', () => system.close());
+}
+
+class XImage {
+    constructor(...args) {
+        if (args[0] instanceof HTMLCanvasElement) {
+            this.canvas = args[0];
+        }
+        else {
+            const canvas = document.createElement('canvas');
+            canvas.width = args[0];
+            canvas.height = args[1];
+            this.canvas = canvas;
+        }
+    }
+    crop(x, y, width, height) {
+        var _a;
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
+        return new XImage(canvas);
+    }
+    download(filename) {
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = this.canvas.toDataURL('image/png');
+        link.click();
+    }
+}
+
 const basics = {
+    SVG,
     Screen,
     OpenAndClose,
     AnalogStick,
@@ -1897,6 +1957,7 @@ const basics = {
     Accordion,
     Popup,
     Scene,
+    VolumeController,
 };
 const audio = {
     load(path) {

package/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.7.3",
+  "version": "0.7.4",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",