tosijs-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Tonio Loewald
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# tosi-ui
+
+<!--{ "pin": "top" }-->
+
+[ui.xinjs.net live demo](https://ui.xinjs.net) | [xinjs](https://xinjs.net) | [discord](https://discord.gg/ramJ9rgky5) | [github](https://github.com/tonioloewald/xinjs-ui#readme) | [npm](https://www.npmjs.com/package/xinjs-ui)
+
+<center>
+  <xin-icon class="logo" icon="tosiUi" size=300></xin-icon>
+</center>
+
+Copyright ©2023-2025 Tonio Loewald
+
+## the xinjs ui library
+
+A set of [web-components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+created with [xinjs](https://xinjs.net), designed to augment what the browser gives you
+for free rather than replace it.
+
+It works beautifully with other web-component libraries, such as [shoelace.style](https://shoelace.style/).
+
+## Quick Start
+
+### Using npm and a bundler
+
+Add xinjs-ui to your project, e.g.
+
+```
+npm add xinjs-ui
+```
+
+Then you can import the component `elementCreator` and create the element any way you
+like, the easiest way being to use the `elementCreator` itself. A `tosijs` `elementCreator`
+is syntax sugar around `document.createElement()`.
+
+```
+import { dataTable } from 'xinjs-ui'
+
+document.body.append(dataTable())
+```
+
+### Using the iife via cdn
+
+The `tosijs-ui` iife build bundles `tosijs`, `tosijs-ui`, and `marked` into
+a single minified javascript source file. You can access `tosijs` and `xinjsui`
+as globals which contain all the things exported by `tosijs` and `tosijs-ui`.
+
+> iife support is new so it may not have propagated to the cdn yet. This
+> example loads the library from ui.xinjs.net for now.
+
+```
+<script src="https://ui.xinjs.net/iife.js"></script>
+<button id="menu">Menu <xin-icon icon="chevronDown"></xin-icon></button>
+<script>
+  const { elements } = tosijs
+  const { popMenu, icons } = tosijsui
+
+  const button = { elements }
+
+  const showMenu = (target) => {
+    popMenu({
+      target,
+      menuItems: [
+        {
+          caption: 'Say hello',
+          action() {
+            alert('hello')
+          }
+        },
+        null,
+        {
+          caption: 'Version',
+          action() {
+            alert(`xinjs ${xinjs.version}\nxinjs-ui ${xinjsui.version}`)
+          }
+        }
+      ]
+    })
+  }
+
+  document.body.append(
+    button(
+      {
+        onClick(event) {
+          showMenu(event.target)
+        }
+      },
+      'Menu',
+      icons.chevronDown()
+    )
+  )
+</script>
+```
+
+[Click here to see a simple iife demo](https://ui.xinjs.net/iife.html)
+
+## custom-elements
+
+The simplest way to use these elements is to simply import the element and then either
+use HTML or the `ElementCreator` function exported.
+
+E.g. to use the markdown viewer:
+
+```
+import { markdownViewer } from 'xinjs-ui'
+document.body.append(markdownViewer('# hello world\nthis is a test'))
+```
+
+```js
+const { markdownViewer } = tosijsui
+
+preview.append(
+  markdownViewer(`
+## hello world
+here is some markdown
+`)
+)
+```
+
+Assuming you import the module somewhere, the HTML will work as well.
+
+```
+<xin-md>
+## hello world
+here is some markdown
+</xin-md>
+```
+
+The big difference with using the `markdownViewer()` function is that the `tosijs` `Component`
+class will automatically pick a new tag if the expected tag is taken (e.g. by a previously
+defined custom-element from another library). `markdownViewer()` will create an element of
+the correct type.
+
+The other thing is that `tosijs` `ElementCreator` functions are convenient and composable,
+allowing you to build DOM elements with less code than pretty much any other option, including
+JSX, TSX, or HTML.
+
+## Philosophy
+
+In general, `tosijs` strives to work _with_ the browser rather than trying to _replace_ it.
+
+In a similar vein, `tosijs-ui` comprises a collection of [web-components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+with the goal of augmenting what _already_ works well, and the components are intended be interoperable as
+similar as possible to things that you already use, such as `<input>` or `<select>` elements.
+E.g. where appropriate, the `value` of an element is its malleable `state`, and when this changes,
+the element emits a `change` event.
+
+Similarly, the xinjs base `Component` class and the components in this collection strive to
+be as similar in operation as possible to DOM elements as makes sense. E.g. binary attributes
+work as expected. Adding the `hidden` attribute makes them disappear. If a component subclass
+has a `value` property then it will be rendered if the value changes (similarly it will be
+rendered if an initialized attribute is changed). Intinsic properties of components will
+default to `null` rather than `undefined`.
+
+Similarly, because web-components are highly interoperable, there's no reason to reinvent
+wheels. In particular, this library won't try to replace existing, excellent libraries
+such as [shoelace.style](https://shoelace.style/) or wrap perfectly functional HTML
+elements, like the venerable `<input>` or `<form>` elements that are already capable
+and accessible.
+
+The goal here is to provide useful components and other utilities that add to what's built
+into HTML5 and CSS3 and to make custom-elements work as much as possible like drop-in replacements
+for an `<input>` or `<textarea>` (while mitigating the historical pathologies of things like
+`<select>` and `<input type="radio">`). E.g. the `<xin-select>` does not suffer from a
+race-condition between having its value set and being given an `<option>` with the intended value
+and you can differentiate between the user picking a value (`action`) and the value changing (`change`).

package/dist/ab-test.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'tosijs';
+export declare class AbTest extends Component {
+    static set conditions(context: {
+        [key: string]: any;
+    });
+    condition: string;
+    not: boolean;
+    static instances: Set<AbTest>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+export declare const abTest: import("tosijs").ElementCreator<Component<import("tosijs").PartsMap>>;

package/dist/ab-test.js

@@ -0,0 +1,116 @@
+/*#
+# 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.d.ts

@@ -0,0 +1,53 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+type B3dCallback = ((element: B3d, BABYLON: any) => void) | ((element: B3d, BABYLON: any) => Promise<void>);
+interface B3dUIOptions {
+    snippetId?: string;
+    jsonUrl?: string;
+    data?: any;
+    size?: number;
+}
+type MeshProcessCallback = (meshes: any[]) => void;
+export declare class B3d extends WebComponent {
+    babylonReady: Promise<any>;
+    BABYLON?: any;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+        };
+        ':host canvas': {
+            width: string;
+            height: string;
+        };
+        ':host .babylonVRicon': {
+            height: number;
+            width: number;
+            backgroundColor: string;
+            filter: string;
+            backgroundImage: string;
+            backgroundPosition: string;
+            backgroundRepeat: string;
+            border: string;
+            borderRadius: number;
+            borderStyle: string;
+            outline: string;
+            transition: string;
+        };
+        ':host .babylonVRicon:hover': {
+            transform: string;
+        };
+    };
+    content: HTMLCanvasElement;
+    constructor();
+    scene: any;
+    engine: any;
+    sceneCreated: B3dCallback;
+    update: B3dCallback;
+    private _update;
+    onResize(): void;
+    loadScene: (path: string, file: string, processCallback?: MeshProcessCallback) => Promise<void>;
+    loadUI: (options: B3dUIOptions) => Promise<any>;
+    connectedCallback(): void;
+}
+export declare const b3d: ElementCreator<B3d>;
+export {};

package/dist/babylon-3d.js

@@ -0,0 +1,292 @@
+/*#
+# 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.d.ts

@@ -0,0 +1,32 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export interface LottieConfig {
+    container?: HTMLElement | ShadowRoot;
+    renderer: 'svg' | 'canvas' | 'html';
+    loop: boolean;
+    autoplay: boolean;
+    animationData?: string;
+    path?: string;
+    [key: string]: any;
+}
+export declare class BodymovinPlayer extends WebComponent {
+    content: null;
+    src: string;
+    json: string;
+    config: LottieConfig;
+    static bodymovinAvailable?: Promise<any>;
+    animation: any;
+    static styleSpec: {
+        ':host': {
+            width: number;
+            height: number;
+            display: string;
+        };
+    };
+    private _loading;
+    get loading(): boolean;
+    constructor();
+    private readonly doneLoading;
+    private readonly load;
+    render(): void;
+}
+export declare const bodymovinPlayer: ElementCreator<BodymovinPlayer>;