tosijs-ui 1.0.0 → 1.0.2

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.0.0";
+export declare const version = "1.0.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "simple robust web-components for use with xinjs or anything else",
   "scripts": {
     "start": "bun --watch bin/dev.ts",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@playwright/test": "^1.54.1",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.16.3",
+    "@types/node": "^22.16.4",
     "@types/react": "^19.1.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",

package/dist/ab-test.js

@@ -1,116 +0,0 @@
-/*#
-# ab-test
-
-`<xin-ab>` provides a simple method for implementing A|B-testing.
-
-```js
-const { AbTest } = xinjsui
-
-function randomize() {
-  const conditions = {
-    testA: Math.random() < 0.5,
-    testB: Math.random() < 0.5,
-    testC: Math.random() < 0.5
-  }
-
-  AbTest.conditions = conditions
-
-  preview.querySelector('pre').innerText = JSON.stringify(conditions, null, 2)
-}
-
-preview.querySelector('.randomize-conditions').addEventListener('click', randomize)
-
-randomize()
-```
-```html
-<div style="display: flex; gap: 10px; align-items: center;">
-  <div style="display: flex; flex-direction: column; gap: 10px;">
-    <xin-ab class="a" condition="testA">
-      <p>testA</p>
-    </xin-ab>
-    <xin-ab class="not-a" not condition="testA">
-      <p>not testA</p>
-    </xin-ab>
-    <xin-ab class="b" condition="testB">
-      <p>testB</p>
-    </xin-ab>
-    <xin-ab class="not-b" not condition="testB">
-      <p>not testB</p>
-    </xin-ab>
-    <xin-ab class="c" condition="testC">
-      <p>testC</p>
-    </xin-ab>
-    <xin-ab class="not-c" not condition="testC">
-      <p>not testC</p>
-    </xin-ab>
-  </div>
-  <pre>
-  </pre>
-</div>
-<button class="randomize-conditions">Randomize</button>
-```
-```css
-.preview {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-}
-.preview p {
-  background: #44c;
-  color: white;
-  display: block;
-  border-radius: 99px;
-  padding: 4px 10px;
-  margin: 0;
-}
-
-.preview xin-ab[not] p {
-  background: red;
-}
-```
-
-- Set `AbTest.conditions` to anything you like.
-- Use `<xin-ab>` elements to display conditional content.
-- `condition` attribute determines which value in `AbTest.conditions` controls the element
-- `not` reverses the condition (so `<xin-ab not condition="foo">` will be visible if `conditions.foo` is `false`)
-*/
-import { Component, xinProxy } from 'xinjs';
-const { abTestConditions } = xinProxy({
-    abTestConditions: {},
-});
-export class AbTest extends Component {
-    static set conditions(context) {
-        Object.assign(abTestConditions, context);
-        for (const abTest of [...AbTest.instances]) {
-            abTest.queueRender();
-        }
-    }
-    condition = '';
-    not = false;
-    static instances = new Set();
-    constructor() {
-        super();
-        this.initAttributes('condition', 'not');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        AbTest.instances.add(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        AbTest.instances.delete(this);
-    }
-    render() {
-        if (this.condition !== '' &&
-            (this.not
-                ? abTestConditions[this.condition] !== true
-                : abTestConditions[this.condition] === true)) {
-            this.toggleAttribute('hidden', false);
-        }
-        else {
-            this.toggleAttribute('hidden', true);
-        }
-    }
-}
-export const abTest = AbTest.elementCreator({ tag: 'xin-ab' });

package/dist/babylon-3d.js

@@ -1,292 +0,0 @@
-/*#
-# 3d
-
-A [babylonjs](https://www.babylonjs.com/) wrapper.
-
-A `<xin-3d>` element is initialized with an `engine`, `canvas`, `scene`, and an update-loop.
-
-If you view this example with an XR-enabled device, such as the
-[Meta Quest 3](https://www.meta.com/quest/quest-3/), then you should be able to view this
-as an AR scene.
-
-```js
-const { b3d, gamepadText, xrControllers, xrControllersText } = xinjsui
-
-preview.append(b3d({
-  async sceneCreated(element, BABYLON) {
-    const camera = new BABYLON.FreeCamera(
-      'camera',
-      new BABYLON.Vector3(0, 1, -4),
-      element.scene
-    )
-    camera.attachControl(element.parts.canvas, true)
-
-    new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0.25, 1, -0.5))
-
-    this.loadScene('/', 'xin3d.glb')
-
-    const size = 1024
-    const textTexture = new BABYLON.DynamicTexture('Text', size, element.scene)
-    const textContext = textTexture.getContext()
-    textTexture.update()
-
-    const textMaterial = new BABYLON.StandardMaterial('Text', element.scene)
-    textMaterial.diffuseTexture = textTexture
-    textMaterial.emissiveTexture = textTexture
-    textMaterial.backfaceCulling = false
-
-    const plaque = BABYLON.MeshBuilder.CreatePlane('Plaque', {size: 1}, element.scene)
-    plaque.position.x = 0
-    plaque.position.y = 2
-    plaque.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL
-    plaque.material = textMaterial
-
-    let controllers
-    if (navigator.xr) {
-      const xrHelper = await element.scene.createDefaultXRExperienceAsync({
-        uiOptions: {
-          sessionMode: 'immersive-ar'
-        }
-      })
-      controllers = xrControllers(xrHelper)
-    }
-
-    const interval = setInterval(() => {
-      if (document.body.contains(element)) {
-        textContext.fillStyle = '#204020'
-        textContext.fillRect(0, 0, size, size)
-        const text = gamepadText() + '\n' + xrControllersText(controllers)
-        const lines = text.split('\n')
-        textContext.fillStyle = '#afa'
-        textContext.font = '32px monospace'
-        for(let i = 0; i < lines.length; i++) {
-          const line = lines[i]
-          textContext.fillText(line, 40, 70 + i * 40)
-        }
-        textContext.fillStyle = '#bbb'
-        textContext.fillText('xinjs-xr — debug info', 40, 984)
-        textTexture.update()
-      } else {
-        clearInterval(interval)
-      }
-    }, 100)
-  },
-}))
-```
-```css
-.preview xin-3d {
-  width: 100%;
-  height: 100%;
-}
-```
-
-You can access the `scene` and `engine` properties. You can also assign `sceneCreated`
-and `update` callbacks that will be executed when the scene is first initialized and
-before each update, respectively. (See the example, it does both.)
-
-Both `sceneCreated` and `update` may be `async`. The component will `await` `sceneCreated`
-before starting the renderLoop, but `update` is simply passed to babylon, so be careful.
-
-By default, this component loads `babylon.js` from the [babylonjs CDN](https://doc.babylonjs.com/setup/frameworkPackages/CDN),
-but if `BABYLON` is already defined (e.g. if you've bundled it) then it will use that instead.
-
-If you need additional libraries, e.g. `https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js` for loading models such as `gltf` and `glb` files, you should load those in `sceneCreated`.
-
-Here's a simple example of a terrain mesh comprising 125k triangles, 50% of which is being scaled using a `profileScale` function that
-takes an array of numbers that use a linear profile to change the landform.
-
-```js
-const { b3d } = xinjsui
-const { MoreMath } = xinjs
-
-const debugCutoff = 0.5
-const defaultProfile = [0, 1, 5, 8, 10].map(x => x/10)
-
-const { clamp } = MoreMath
-function profileScale(t = 0, bypass = false, profile = defaultProfile) {
-  if (bypass) {
-    return t
-  }
-  const count = profile.length - 1
-  if (count < 1) {
-    throw new Error('profile must be of length ≥ 2')
-  }
-
-  const s = clamp(0, (t + 1) / 2, 1)
-  const index = Math.floor(s * count)
-  const dt = (s - index / count) * count
-  const min = profile[index]
-  const max = profile[index + 1]
-  const p = dt * (max - min) + min
-  return 2 * p - 1
-}
-
-preview.append(b3d({
-  async sceneCreated(element, BABYLON) {
-    const { scene } = element
-    const { createNoise2D } = await import('https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/+esm')
-
-    new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0.25, 1, 2))
-
-    const terrain = new BABYLON.Mesh('terrain', scene)
-    const vertexData = new BABYLON.VertexData()
-
-    const noise2D = createNoise2D()
-    const positions = []
-    const indices = []
-    const gridSize = 100
-    const gridResolution = 250
-    const gridPoints = gridResolution + 1
-    const noiseScale = 0.03
-    const heightScale = 4.5
-    terrain.position.y = -5
-    const scale = t => t * gridSize / gridResolution - gridSize * 0.5
-    for(let x = 0; x <= gridResolution; x++) {
-      for(let z = 0; z <= gridResolution; z++) {
-        const y =  profileScale(noise2D(scale(x) * noiseScale, scale(z) * noiseScale), x < gridResolution * debugCutoff)
-        positions.push(scale(x), y * heightScale, scale(z))
-        if (x > 0 && z > 0) {
-          const i = x * gridPoints + z
-          indices.push(
-            i, i - gridPoints - 1, i - 1,
-            i, i - gridPoints, i - gridPoints - 1,
-          )
-        }
-      }
-    }
-    const normals = []
-    BABYLON.VertexData.ComputeNormals(positions, indices, normals);
-
-    vertexData.positions = positions
-    vertexData.indices = indices
-    vertexData.normals = normals
-    vertexData.applyToMesh(terrain)
-  },
-}))
-```
-
-## loadScene
-
-`<xin-3d>.loadScene(path: string, file: string, callBack(meshes: any[]): void)` can
-be used to load `.glb` files.
-
-## loadUI
-
-`<xin-3d>.loadUI(options: B3dUIOptions)` loads babylonjs guis, which you can create programmatically or using the [babylonjs gui tool](https://gui.babylonjs.com/).
-*/
-import { Component as WebComponent, elements } from 'xinjs';
-import { scriptTag } from './via-tag';
-import { icons, svg2DataUrl } from './icons';
-const noop = () => {
-    /* do not care */
-};
-export class B3d extends WebComponent {
-    babylonReady;
-    BABYLON;
-    static styleSpec = {
-        ':host': {
-            display: 'block',
-            position: 'relative',
-        },
-        ':host canvas': {
-            width: '100%',
-            height: '100%',
-        },
-        ':host .babylonVRicon': {
-            height: 50,
-            width: 80,
-            backgroundColor: 'transparent',
-            filter: 'drop-shadow(0 0 4px #000c)',
-            backgroundImage: svg2DataUrl(icons.xrColor()),
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            border: 'none',
-            borderRadius: 5,
-            borderStyle: 'none',
-            outline: 'none',
-            transition: 'transform 0.125s ease-out',
-        },
-        ':host .babylonVRicon:hover': {
-            transform: 'scale(1.1)',
-        },
-    };
-    content = elements.canvas({ part: 'canvas' });
-    constructor() {
-        super();
-        this.babylonReady = (async () => {
-            const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/babylon.js', 'BABYLON');
-            return BABYLON;
-        })();
-    }
-    scene;
-    engine;
-    sceneCreated = noop;
-    update = noop;
-    _update = () => {
-        if (this.scene) {
-            if (this.update !== undefined) {
-                this.update(this, this.BABYLON);
-            }
-            if (this.scene.activeCamera !== undefined) {
-                this.scene.render();
-            }
-        }
-    };
-    onResize() {
-        if (this.engine) {
-            this.engine.resize();
-        }
-    }
-    loadScene = async (path, file, processCallback) => {
-        const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js', 'BABYLON');
-        BABYLON.SceneLoader.Append(path, file, this.scene, processCallback);
-    };
-    loadUI = async (options) => {
-        const { BABYLON } = await scriptTag('https://cdn.babylonjs.com/gui/babylon.gui.min.js', 'BABYLON');
-        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('GUI', true, this.scene);
-        const { snippetId, jsonUrl, data, size } = options;
-        if (size) {
-            advancedTexture.idealWidth = size;
-            advancedTexture.renderAtIdealSize = true;
-        }
-        // edit or create your own snippet here
-        // https://gui.babylonjs.com/
-        let gui;
-        if (snippetId) {
-            gui = await advancedTexture.parseFromSnippetAsync(snippetId);
-        }
-        else if (jsonUrl) {
-            gui = await advancedTexture.parseFromURLAsync(jsonUrl);
-        }
-        else if (data) {
-            gui = advancedTexture.parseContent(data);
-        }
-        else {
-            return null;
-        }
-        const root = advancedTexture.getChildren()[0];
-        const widgets = root.children.reduce((map, widget) => {
-            map[widget.name] = widget;
-            return map;
-        }, {});
-        return { advancedTexture, gui, root, widgets };
-    };
-    connectedCallback() {
-        super.connectedCallback();
-        const { canvas } = this.parts;
-        this.babylonReady.then(async (BABYLON) => {
-            this.BABYLON = BABYLON;
-            this.engine = new BABYLON.Engine(canvas, true);
-            this.scene = new BABYLON.Scene(this.engine);
-            if (this.sceneCreated) {
-                await this.sceneCreated(this, BABYLON);
-            }
-            if (this.scene.activeCamera === undefined) {
-                const camera = new BABYLON.ArcRotateCamera('default-camera', -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
-                camera.attachControl(this.parts.canvas, true);
-            }
-            this.engine.runRenderLoop(this._update);
-        });
-    }
-}
-export const b3d = B3d.elementCreator({ tag: 'xin-3d' });

package/dist/bodymovin-player.js

@@ -1,172 +0,0 @@
-/*#
-# lottie / bodymovin
-
-A [lottie](https://airbnb.io/lottie/#/web) (a.k.a. **bodymovin**) player.
-
-It's designed to work like an `<img>` element (just set its `src` attribute).
-
-```js
-const { xinProxy } = xinjs
-const { icons, popFloat } = xinjsui
-const { div, label, input, select, option, span } = xinjs.elements
-
-const rocket = preview.querySelector('xin-lottie')
-setTimeout(
-  () => {
- preview.append(
-   popFloat({
-     content: [
-       { class: 'panel', drag: true },
-       div({ class: 'panel-header' }, 'Player Controls' ),
-       label(
-         { class: 'no-drag' },
-         'speed',
-         input({ type: 'range', min: -1, max: 1, step: 0.1, value: 0, onInput(event) {
-           const speed = Math.pow(5, Number(event.target.value))
-           rocket.animation.setSpeed(speed)
-           event.target.nextSibling.textContent = (speed * 100).toFixed(0) + '%'
-         } }),
-         span('100%', {style: { textAlign: 'right', width: '40px'}})
-       ),
-       label(
-         { class: 'no-drag' },
-         'direction',
-         select(
-           option('Forwards', {value: 1, selected: true}),
-           option('Backwards', {value: -1}),
-           {
-             onChange(event) {
-               rocket.animation.setDirection(event.target.value)
-             }
-           }
-         ),
-         icons.chevronDown(),
-       )
-     ],
-     target: rocket,
-     position: 's'
-   })
- )
-  },
-  500
-)
-```
-```html
-<xin-lottie
-  style="height: 100%; max-width: 100%"
-  src="88140-rocket-livetrade.json"
-></xin-lottie>
-<div class="caption">
-  Animation by <a target="_blank" href="https://lottiefiles.com/dvskjbicfc">chiến lê hồng</a>
-</div>
-```
-```css
-.preview {
-  padding: var(--spacing);
-  text-align: center;
-}
-
-.preview .panel {
-  padding: 10px;
-  border-radius: 5px;
-  gap: 5px;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.preview .caption {
-  position: absolute;
-  right: 5px;
-  bottom: 5px;
-}
-
-.preview .panel-header {
-  margin: 0;
-  text-align: center;
-  font-weight: bold;
-  background: var(--brand-color);
-  color: white;
-  padding: 5px;
-  margin: -10px -10px 0 -10px;
-  cursor: move;
-}
-```
-
-You can also directly set its `json` property to the content of a `lottie.json` file.
-
-And of course just access the element's `animation` property to [use the bodymovin API](https://airbnb.io/lottie/#/web).
-
-Also see the [documentation for advanced interactions](https://lottiefiles.github.io/lottie-docs/advanced_interactions/)
-*/
-import { Component as WebComponent } from 'xinjs';
-import { scriptTag } from './via-tag';
-export class BodymovinPlayer extends WebComponent {
-    content = null;
-    src = '';
-    json = '';
-    config = {
-        renderer: 'svg',
-        loop: true,
-        autoplay: true,
-    };
-    static bodymovinAvailable;
-    animation;
-    static styleSpec = {
-        ':host': {
-            width: 400,
-            height: 400,
-            display: 'inline-block',
-        },
-    };
-    _loading = false;
-    get loading() {
-        return this._loading;
-    }
-    constructor() {
-        super();
-        this.initAttributes('src', 'json');
-        if (BodymovinPlayer.bodymovinAvailable === undefined) {
-            BodymovinPlayer.bodymovinAvailable = scriptTag('https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js', 'bodymovin');
-        }
-    }
-    doneLoading = () => {
-        this._loading = false;
-    };
-    load = ({ bodymovin }) => {
-        this._loading = true;
-        this.config.container =
-            this.shadowRoot !== null ? this.shadowRoot : undefined;
-        if (this.json !== '') {
-            this.config.animationData = this.json;
-            delete this.config.path;
-        }
-        else if (this.src !== '') {
-            delete this.config.animationData;
-            this.config.path = this.src;
-        }
-        else {
-            console.log('%c<xin-lottie>%c expected either %cjson%c (animation data) or %csrc% c(url) but found neither.', 'color: #44f; background: #fff; padding: 0 5px', 'color: default', 'color: #44f; background: #fff; padding: 0 5px', 'color: default', 'color: #44f; background: #fff; padding: 0 5px', 'color: default');
-        }
-        if (this.animation) {
-            this.animation.destroy();
-            const root = this.shadowRoot;
-            if (root !== null) {
-                root.querySelector('svg')?.remove();
-            }
-        }
-        this.animation = bodymovin.loadAnimation(this.config);
-        this.animation.addEventListener('DOMLoaded', this.doneLoading);
-    };
-    render() {
-        super.render();
-        BodymovinPlayer.bodymovinAvailable.then(this.load).catch((e) => {
-            console.error(e);
-        });
-    }
-}
-export const bodymovinPlayer = BodymovinPlayer.elementCreator({
-    tag: 'xin-lottie',
-});

package/dist/bp-loader.js

@@ -1,26 +0,0 @@
-export {};
-/*#
-# blueprint loading
-
-<center>
-  <xin-icon icon="blueprint" class="logo" size=256></xin-icon>
-</center>
-
-`<xin-loader>` and `<xin-blueprint>` are simple elements provided by `xinjs` for the dynamic loading
-of component **blueprints**.
-
-```html
-<xin-loader>
-  <xin-blueprint tag="swiss-clock" src="https://tonioloewald.github.io/xin-clock/dist/blueprint.js"></xin-blueprint>
-</xin-loader>
-<swiss-clock></swiss-clock>
-```
-
-## Attributes
-
-- `blueprint` is the url of the `blueprint` javascript module (required)
-- `tag` is the tagName you wish to use. If the name of the blueprint is
-  hyphenated, then that will be used by default
-- `property` if the blueprint module exports the blueprint function as
-  a property, you can specify the property here.
-*/