onejs-core 1.0.8 → 1.0.11

package/dist/dom/index.d.ts

@@ -0,0 +1,3 @@
+export { DocumentWrapper } from './document';
+export { DomWrapper } from './dom';
+export { DomStyleWrapper } from './dom-style';

package/dist/dom/index.js

@@ -0,0 +1,3 @@
+export { DocumentWrapper } from './document';
+export { DomWrapper } from './dom';
+export { DomStyleWrapper } from './dom-style';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../definitions/index.d.ts" />
 import { DocumentWrapper } from "./dom/document";
 import { DomWrapper } from "./dom/dom";
 /**

package/dist/index.js

@@ -1,3 +1,4 @@
+/// <reference path="./definitions/index.d.ts" />
 import { DocumentWrapper } from "./dom/document";
 /**
  * OneJS's own h function. Use this to quickly create elements in jsx-like syntax

package/dom/document.ts

@@ -0,0 +1,55 @@
+import { DomWrapper } from "./dom"
+
+interface ElementCreationOptions {
+    is?: string
+}
+
+export class DocumentWrapper {
+    public get _doc(): CS.OneJS.Dom.Document { return this.#doc }
+
+    #doc: CS.OneJS.Dom.Document;
+    #body: DomWrapper | null;
+
+    /**
+     * The body/root element of the document. Will be null for Editor documents.
+     */
+    public get body(): DomWrapper | null { return this.#body }
+
+    constructor(doc: CS.OneJS.Dom.Document) {
+        this.#doc = doc
+        this.#body = doc.body ? new DomWrapper(doc.body) : null
+    }
+
+    addRuntimeUSS(uss: string): void {
+        this.#doc.addRuntimeUSS(uss)
+    }
+
+    clearRuntimeStyleSheets(): void {
+        this.#doc.clearRuntimeStyleSheets()
+    }
+
+    createElement(tagName: string, options?: ElementCreationOptions): DomWrapper {
+        return new DomWrapper(this.#doc.createElement(tagName))
+    }
+
+    createElementNS(ns: string, tagName: string, options?: ElementCreationOptions): DomWrapper {
+        return new DomWrapper(this.#doc.createElement(tagName))
+    }
+
+    createTextNode(text: string): DomWrapper {
+        return new DomWrapper(this.#doc.createTextNode(text))
+    }
+
+    getElementById(id: string): DomWrapper {
+        return new DomWrapper(this.#doc.getElementById(id))
+    }
+
+    querySelectorAll(selector: string): DomWrapper[] {
+        let doms = this.#doc.querySelectorAll(selector)
+        let res = [] as any[]
+        for (let i = 0; i < doms.Length; i++) {
+            res.push(new DomWrapper(doms.get_Item(i)))
+        }
+        return res;
+    }
+}

package/dom/dom-style.ts

@@ -0,0 +1,31 @@
+
+
+export class DomStyleWrapper implements CS.OneJS.Dom.DomStyle {
+    _domStyle: CS.OneJS.Dom.DomStyle // Making this public so that Proxy's setProperty can access it
+
+    constructor(domStyle: CS.OneJS.Dom.DomStyle) {
+        this._domStyle = domStyle
+
+        return new Proxy(this, {
+            set(target, prop, value) {
+                target.setProperty(prop as string, value);
+                return true;
+            },
+            get(target, prop) {
+                return target.getProperty(prop as string);
+            }
+        })
+    }
+
+    getProperty(name: string) {
+        return this._domStyle.getProperty(name)
+    }
+
+    setProperty(name: string, value: any) {
+        this._domStyle.setProperty(name, value)
+    }
+}
+
+export interface DomStyleWrapper extends CS.OneJS.Dom.DomStyle {
+    [key: string | symbol]: any;
+}

package/dom/dom.ts

@@ -0,0 +1,267 @@
+import { EventBase } from "UnityEngine/UIElements";
+import { DomStyleWrapper } from "./dom-style"
+
+export class DomWrapper {
+    public get _dom(): CS.OneJS.Dom.Dom { return this.dom }
+    public get ve(): CS.UnityEngine.UIElements.VisualElement { return this.dom.ve }
+    public get childNodes(): DomWrapper[] {
+        if (this.cachedChildNodes) return this.cachedChildNodes
+        this.cachedChildNodes = new Array(this.dom.childNodes.Length) as DomWrapper[];
+        var i = this.dom.childNodes.Length;
+        while (i--) {
+            this.cachedChildNodes[i] = new DomWrapper(this.dom.childNodes.get_Item(i));
+        }
+        return this.cachedChildNodes
+    }
+    public get firstChild(): DomWrapper | null {
+        return this.dom.firstChild ? new DomWrapper(this.dom.firstChild) : null;
+    }
+    public get parentNode(): DomWrapper | null {
+        return this.dom.parentNode ? new DomWrapper(this.dom.parentNode) : null;
+    }
+    public get nextSibling(): DomWrapper | null {
+        return this.dom.nextSibling ? new DomWrapper(this.dom.nextSibling) : null;
+    }
+
+    public get nodeType(): number { return this.dom.nodeType }
+    public get style(): DomStyleWrapper { return this.domStyleWrapper }
+    public get Id(): string { return this.dom.Id }
+    public set Id(value: string) { this.dom.Id = value }
+    public get key(): string { return this.dom.key }
+    public set key(value: string) { this.dom.key = value }
+    public get value(): any { return this.dom.value }
+    public get checked(): boolean { return this.dom.checked }
+    public get data(): any { return this.dom.data }
+    public set data(value: any) { this.dom.data = value }
+
+    public get classname(): string { return this.dom.classname }
+    public set classname(value: string) { this.dom.classname = value }
+
+    /**
+     * Not using private fields because of issues with the `#private;` line
+     * generated by tsc
+     */
+    dom: CS.OneJS.Dom.Dom
+    domStyleWrapper: DomStyleWrapper
+
+    cachedChildNodes: DomWrapper[] | null = null
+    boundListeners = new WeakMap();
+
+    constructor(dom: CS.OneJS.Dom.Dom) {
+        this.dom = dom
+        this.domStyleWrapper = new DomStyleWrapper(dom.style)
+    }
+
+    appendChild(child: DomWrapper) {
+        if (!child) return
+        this.dom.appendChild(child.dom)
+        this.cachedChildNodes = null
+    }
+
+    removeChild(child: DomWrapper) {
+        if (!child) return
+        this.dom.removeChild(child.dom)
+        this.cachedChildNodes = null
+    }
+
+    insertBefore(a: DomWrapper, b: DomWrapper) {
+        this.dom.insertBefore(a?._dom, b?._dom)
+        this.cachedChildNodes = null
+    }
+
+    insertAfter(a: DomWrapper, b: DomWrapper) {
+        this.dom.insertAfter(a?._dom, b?._dom)
+        this.cachedChildNodes = null
+    }
+
+    contains(child: DomWrapper) {
+        if (!child) return false
+        return this.dom.contains(child._dom)
+    }
+
+    clearChildren() {
+        this.dom.clearChildren()
+        this.cachedChildNodes = null
+    }
+
+    focus() {
+        this.dom.focus()
+    }
+
+    addEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
+        let boundListener = this.boundListeners.get(listener);
+        if (!boundListener) {
+            boundListener = listener.bind(this);
+            this.boundListeners.set(listener, boundListener);
+        }
+        this.dom.addEventListener(type, boundListener, useCapture ? true : false)
+    }
+
+    removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
+        const boundListener = this.boundListeners.get(listener);
+        if (boundListener) {
+            this.dom.removeEventListener(type, boundListener, useCapture ? true : false)
+            this.boundListeners.delete(listener); // isn't strictly necessary for WeakMap, but still good practice
+        }
+    }
+
+    setAttribute(name: string, value: any) {
+        this.dom.setAttribute(name, value)
+    }
+
+    removeAttribute(name: string) {
+        this.dom.removeAttribute(name)
+    }
+
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector: string): DomWrapper[] {
+        const selectorInfo = parseSelector(selector);
+        const results: DomWrapper[] = [];
+
+        function traverse(element: DomWrapper) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                results.push(element);
+            }
+
+            for (const child of element.childNodes) {
+                traverse(child);
+            }
+        }
+
+        traverse(this);
+        return results;
+    }
+
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector: string): DomWrapper | null {
+        const selectorInfo = parseSelector(selector);
+
+        function traverse(element: DomWrapper): DomWrapper | null {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                return element;
+            }
+
+            for (const child of element.childNodes) {
+                const match = traverse(child);
+                if (match) {
+                    return match;
+                }
+            }
+
+            return null;
+        }
+
+        return traverse(this);
+    }
+}
+
+interface SelectorInfo {
+    tag?: string;
+    id?: string;
+    classes: string[];
+}
+
+function parseSelector(selector: string): SelectorInfo {
+    const selectorInfo: SelectorInfo = {
+        classes: []
+    };
+
+    // Handle ID
+    const idMatch = selector.match(/#([^.#\s]+)/);
+    if (idMatch) {
+        selectorInfo.id = idMatch[1];
+        selector = selector.replace(idMatch[0], '');
+    }
+
+    // Handle classes
+    const classMatches = selector.match(/\.([^.#\s]+)/g);
+    if (classMatches) {
+        selectorInfo.classes = classMatches.map(c => c.substring(1));
+        selector = selector.replace(/\.[^.#\s]+/g, '');
+    }
+
+    // Handle tag name (what's left after removing id and classes)
+    const tagName = selector.trim();
+    if (tagName) {
+        selectorInfo.tag = tagName.toLowerCase();
+    }
+
+    return selectorInfo;
+}
+
+function elementMatchesSelector(element: DomWrapper, selectorInfo: SelectorInfo): boolean {
+    // Check tag name
+    if (selectorInfo.tag && element.ve.name.toLowerCase() !== selectorInfo.tag) {
+        return false;
+    }
+
+    // Check ID
+    if (selectorInfo.id && element.Id !== selectorInfo.id) {
+        return false;
+    }
+
+    // Check classes
+    if (selectorInfo.classes.length > 0) {
+        const elementClasses = element.classname.split(' ').filter(c => c);
+        for (const className of selectorInfo.classes) {
+            if (!elementClasses.includes(className)) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+}
+
+export function querySelectorAll(root: DomWrapper, selector: string): DomWrapper[] {
+    const results: DomWrapper[] = [];
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            results.push(element);
+        }
+
+        // Recursively check children
+        for (const child of element.childNodes) {
+            traverse(child);
+        }
+    }
+
+    traverse(root);
+    return results;
+}
+
+export function querySelector(root: DomWrapper, selector: string): DomWrapper | null {
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper): DomWrapper | null {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            return element;
+        }
+
+        // Recursively check children
+        for (const child of element.childNodes) {
+            const match = traverse(child);
+            if (match) {
+                return match;
+            }
+        }
+
+        return null;
+    }
+
+    return traverse(root);
+}

package/dom/index.ts

@@ -0,0 +1,3 @@
+export { DocumentWrapper } from './document';
+export { DomWrapper } from './dom';
+export { DomStyleWrapper } from './dom-style';

package/index.ts

@@ -0,0 +1,53 @@
+/// <reference path="./definitions/index.d.ts" />
+import { DocumentWrapper } from "./dom/document";
+import { DomWrapper } from "./dom/dom";
+
+/**
+ * OneJS's own h function. Use this to quickly create elements in jsx-like syntax
+ * @param type
+ * @param props
+ * @param children
+ * @returns
+ */
+export function h(type: any, props: any, ...children: any[]): any {
+    const element = typeof type === "string" ? document.createElement(type) : type;
+
+    // Assign properties to the element
+    for (const [key, value] of Object.entries(props || {})) {
+        if (key.startsWith("on") && typeof value === "function") {
+            element.addEventListener(key.substring(2).toLowerCase(), value);
+        } else if (key === "style" && typeof value === "object") {
+            Object.assign(element.style, value);
+        } else {
+            element.setAttribute(key, value);
+        }
+    }
+
+    // Append children
+    for (const child of children) {
+        if (typeof child === "string") {
+            element.appendChild(document.createTextNode(child));
+        } else {
+            element.appendChild(child);
+        }
+    }
+
+    return element;
+}
+
+export { emo } from "./styling/index"
+
+declare global {
+    interface Document extends DocumentWrapper { }
+    interface Element extends DomWrapper {
+        classname: string
+        nodeType: number
+        ve: CS.UnityEngine.UIElements.VisualElement
+    }
+}
+
+// @ts-ignore
+if (typeof ___document != "undefined") {
+    // @ts-ignore
+    globalThis.document = new DocumentWrapper(___document)
+}

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "onejs-core",
     "description": "The JS part of OneJS, a UI framework and Scripting Engine for Unity.",
-    "version": "1.0.8",
+    "version": "1.0.11",
     "main": "./dist/index.js",
-    "types": "./typings.d.ts",
+    "types": "./dist/index.d.ts",
     "dependencies": {
         "css-flatten": "^2.0.0",
         "css-simple-parser": "^3.0.0"

package/preloads/inject.ts

@@ -0,0 +1,44 @@
+
+
+export function btoa(text: string): string {
+	// return CS.OneJS.CommonGlobals.btoa(text);
+	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+	let str = text;
+	let output = '';
+
+	for (let i = 0; i < str.length; i += 3) {
+		let block = (str.charCodeAt(i) << 16) | ((i + 1 < str.length ? str.charCodeAt(i + 1) : 0) << 8) | (i + 2 < str.length ? str.charCodeAt(i + 2) : 0);
+		output += chars[(block >> 18) & 0x3F] +
+			chars[(block >> 12) & 0x3F] +
+			(i + 1 < str.length ? chars[(block >> 6) & 0x3F] : '=') +
+			(i + 2 < str.length ? chars[block & 0x3F] : '=');
+	}
+
+	return output;
+}
+
+// function uint8ArrayToString(uint8Array) {
+//     const chars: any = [];
+//     for (let i = 0; i < uint8Array.length; i++) {
+//         chars.push(String.fromCharCode(uint8Array[i]));
+//     }
+//     return chars.join('');
+// }
+
+export function atob(base64: string): string {
+	// return CS.OneJS.CommonGlobals.atob(base64);
+	// return CS.System.Text.Encoding.UTF8.GetString(CS.System.Convert.FromBase64String(base64))
+	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+	let str = base64.replace(/=+$/, '');
+	let output = '';
+
+	if (str.length % 4 == 1) {
+		throw new Error('Invalid base64 string');
+	}
+
+	for (let bc = 0, bs = 0, buffer, idx = 0; buffer = str.charAt(idx++); ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer, bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0) {
+		buffer = chars.indexOf(buffer);
+	}
+
+	return output;
+}

package/styling/index.tsx

@@ -0,0 +1,32 @@
+import flatten from "css-flatten"
+import generateComponentId from "./utils/generateComponentId"
+
+const _pastCompIds = new Set<string>()
+
+export function hashAndAddRuntimeUSS(style: string) {
+    let compId = generateComponentId(style)
+    if (_pastCompIds.has(compId))
+        return compId
+    style = `.${compId} {${style}}`
+    style = flatten(style)
+    document.addRuntimeUSS(style)
+    _pastCompIds.add(compId)
+
+    return compId
+}
+
+/**
+ * Similar to the Emotion api, this function takes a template string and returns
+ * a class name that can be used to style an element.
+ * @param strings
+ * @param values
+ * @returns
+ */
+export const emo = function (strings: TemplateStringsArray, ...values: any[]): string {
+    let style = values.reduce((result, expr, index) => {
+        const value = expr
+        return result + (value ? value : "") + strings[index + 1]
+    }, strings[0])
+
+    return hashAndAddRuntimeUSS(style)
+}

package/styling/utils/generateAlphabeticName.ts

@@ -0,0 +1,21 @@
+const AD_REPLACER_R = /(a)(d)/gi
+
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+const charsLength = 52
+
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+const getAlphabeticChar = (code: number) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+/* input a number, usually a hash and convert it to base-52 */
+export default function generateAlphabeticName(code: number) {
+    let name = ''
+    let x
+
+    /* get a char and divide by alphabet-length */
+    for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+        name = getAlphabeticChar(x % charsLength) + name
+    }
+
+    return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2')
+}

package/styling/utils/generateComponentId.ts

@@ -0,0 +1,6 @@
+import generateAlphabeticName from './generateAlphabeticName'
+import { hash } from './hash'
+
+export default function generateComponentId(str: string) {
+    return generateAlphabeticName(hash(str) >>> 0)
+}

package/styling/utils/hash.ts

@@ -0,0 +1,46 @@
+export const SEED = 5381;
+
+// When we have separate strings it's useful to run a progressive
+// version of djb2 where we pretend that we're still looping over
+// the same string
+export const phash = (h: number, x: string) => {
+    let i = x.length;
+
+    while (i) {
+        h = (h * 33) ^ x.charCodeAt(--i);
+    }
+
+    return h;
+};
+
+// This is a djb2 hashing function
+export const hash = (x: string) => {
+    return phash(SEED, x);
+};
+
+const AD_REPLACER_R = /(a)(d)/gi
+
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+const charsLength = 52
+
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+const getAlphabeticChar = (code: number) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+/* input a number, usually a hash and convert it to base-52 */
+export function generateAlphabeticName(code: number) {
+    let name = ''
+    let x
+
+    /* get a char and divide by alphabet-length */
+    for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+        name = getAlphabeticChar(x % charsLength) + name
+    }
+
+    return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2')
+}
+
+export default function generateComponentId(str: string) {
+    return generateAlphabeticName(hash(str) >>> 0)
+}
+

package/tsconfig.json

@@ -11,7 +11,7 @@
         "skipLibCheck": false,
         "forceConsistentCasingInFileNames": true,
         "declaration": true,
-        "typeRoots": [ "./definitions/**/*" ],
+        "typeRoots": [ "./definitions" ],
     },
     "include": [
         "./**/*"

package/typings.d.ts

@@ -1,3 +1,5 @@
+// This typing file is not used anymore
+
 /// <reference path="./definitions/index.d.ts" />
 /// <reference path="./dist/index.d.ts" />
 

package/utils/color-palettes.ts

@@ -0,0 +1,3 @@
+let palettes = [["#69d2e7", "#a7dbd8", "#e0e4cc", "#f38630", "#fa6900"], ["#fe4365", "#fc9d9a", "#f9cdad", "#c8c8a9", "#83af9b"], ["#ecd078", "#d95b43", "#c02942", "#542437", "#53777a"], ["#556270", "#4ecdc4", "#c7f464", "#ff6b6b", "#c44d58"], ["#774f38", "#e08e79", "#f1d4af", "#ece5ce", "#c5e0dc"], ["#e8ddcb", "#cdb380", "#036564", "#033649", "#031634"], ["#490a3d", "#bd1550", "#e97f02", "#f8ca00", "#8a9b0f"], ["#594f4f", "#547980", "#45ada8", "#9de0ad", "#e5fcc2"], ["#00a0b0", "#6a4a3c", "#cc333f", "#eb6841", "#edc951"], ["#e94e77", "#d68189", "#c6a49a", "#c6e5d9", "#f4ead5"], ["#3fb8af", "#7fc7af", "#dad8a7", "#ff9e9d", "#ff3d7f"], ["#d9ceb2", "#948c75", "#d5ded9", "#7a6a53", "#99b2b7"], ["#ffffff", "#cbe86b", "#f2e9e1", "#1c140d", "#cbe86b"], ["#efffcd", "#dce9be", "#555152", "#2e2633", "#99173c"], ["#343838", "#005f6b", "#008c9e", "#00b4cc", "#00dffc"], ["#413e4a", "#73626e", "#b38184", "#f0b49e", "#f7e4be"], ["#ff4e50", "#fc913a", "#f9d423", "#ede574", "#e1f5c4"], ["#99b898", "#fecea8", "#ff847c", "#e84a5f", "#2a363b"], ["#655643", "#80bca3", "#f6f7bd", "#e6ac27", "#bf4d28"], ["#00a8c6", "#40c0cb", "#f9f2e7", "#aee239", "#8fbe00"], ["#351330", "#424254", "#64908a", "#e8caa4", "#cc2a41"], ["#554236", "#f77825", "#d3ce3d", "#f1efa5", "#60b99a"], ["#5d4157", "#838689", "#a8caba", "#cad7b2", "#ebe3aa"], ["#8c2318", "#5e8c6a", "#88a65e", "#bfb35a", "#f2c45a"], ["#fad089", "#ff9c5b", "#f5634a", "#ed303c", "#3b8183"], ["#ff4242", "#f4fad2", "#d4ee5e", "#e1edb9", "#f0f2eb"], ["#f8b195", "#f67280", "#c06c84", "#6c5b7b", "#355c7d"], ["#d1e751", "#ffffff", "#000000", "#4dbce9", "#26ade4"], ["#1b676b", "#519548", "#88c425", "#bef202", "#eafde6"], ["#5e412f", "#fcebb6", "#78c0a8", "#f07818", "#f0a830"], ["#bcbdac", "#cfbe27", "#f27435", "#f02475", "#3b2d38"], ["#452632", "#91204d", "#e4844a", "#e8bf56", "#e2f7ce"], ["#eee6ab", "#c5bc8e", "#696758", "#45484b", "#36393b"], ["#f0d8a8", "#3d1c00", "#86b8b1", "#f2d694", "#fa2a00"], ["#2a044a", "#0b2e59", "#0d6759", "#7ab317", "#a0c55f"], ["#f04155", "#ff823a", "#f2f26f", "#fff7bd", "#95cfb7"], ["#b9d7d9", "#668284", "#2a2829", "#493736", "#7b3b3b"], ["#bbbb88", "#ccc68d", "#eedd99", "#eec290", "#eeaa88"], ["#b3cc57", "#ecf081", "#ffbe40", "#ef746f", "#ab3e5b"], ["#a3a948", "#edb92e", "#f85931", "#ce1836", "#009989"], ["#300030", "#480048", "#601848", "#c04848", "#f07241"], ["#67917a", "#170409", "#b8af03", "#ccbf82", "#e33258"], ["#aab3ab", "#c4cbb7", "#ebefc9", "#eee0b7", "#e8caaf"], ["#e8d5b7", "#0e2430", "#fc3a51", "#f5b349", "#e8d5b9"], ["#ab526b", "#bca297", "#c5ceae", "#f0e2a4", "#f4ebc3"], ["#607848", "#789048", "#c0d860", "#f0f0d8", "#604848"], ["#b6d8c0", "#c8d9bf", "#dadabd", "#ecdbbc", "#fedcba"], ["#a8e6ce", "#dcedc2", "#ffd3b5", "#ffaaa6", "#ff8c94"], ["#3e4147", "#fffedf", "#dfba69", "#5a2e2e", "#2a2c31"], ["#fc354c", "#29221f", "#13747d", "#0abfbc", "#fcf7c5"], ["#cc0c39", "#e6781e", "#c8cf02", "#f8fcc1", "#1693a7"], ["#1c2130", "#028f76", "#b3e099", "#ffeaad", "#d14334"], ["#a7c5bd", "#e5ddcb", "#eb7b59", "#cf4647", "#524656"], ["#dad6ca", "#1bb0ce", "#4f8699", "#6a5e72", "#563444"], ["#5c323e", "#a82743", "#e15e32", "#c0d23e", "#e5f04c"], ["#edebe6", "#d6e1c7", "#94c7b6", "#403b33", "#d3643b"], ["#fdf1cc", "#c6d6b8", "#987f69", "#e3ad40", "#fcd036"], ["#230f2b", "#f21d41", "#ebebbc", "#bce3c5", "#82b3ae"], ["#b9d3b0", "#81bda4", "#b28774", "#f88f79", "#f6aa93"], ["#3a111c", "#574951", "#83988e", "#bcdea5", "#e6f9bc"], ["#5e3929", "#cd8c52", "#b7d1a3", "#dee8be", "#fcf7d3"], ["#1c0113", "#6b0103", "#a30006", "#c21a01", "#f03c02"], ["#000000", "#9f111b", "#b11623", "#292c37", "#cccccc"], ["#382f32", "#ffeaf2", "#fcd9e5", "#fbc5d8", "#f1396d"], ["#e3dfba", "#c8d6bf", "#93ccc6", "#6cbdb5", "#1a1f1e"], ["#f6f6f6", "#e8e8e8", "#333333", "#990100", "#b90504"], ["#1b325f", "#9cc4e4", "#e9f2f9", "#3a89c9", "#f26c4f"], ["#a1dbb2", "#fee5ad", "#faca66", "#f7a541", "#f45d4c"], ["#c1b398", "#605951", "#fbeec2", "#61a6ab", "#accec0"], ["#5e9fa3", "#dcd1b4", "#fab87f", "#f87e7b", "#b05574"], ["#951f2b", "#f5f4d7", "#e0dfb1", "#a5a36c", "#535233"], ["#8dccad", "#988864", "#fea6a2", "#f9d6ac", "#ffe9af"], ["#2d2d29", "#215a6d", "#3ca2a2", "#92c7a3", "#dfece6"], ["#413d3d", "#040004", "#c8ff00", "#fa023c", "#4b000f"], ["#eff3cd", "#b2d5ba", "#61ada0", "#248f8d", "#605063"], ["#ffefd3", "#fffee4", "#d0ecea", "#9fd6d2", "#8b7a5e"], ["#cfffdd", "#b4dec1", "#5c5863", "#a85163", "#ff1f4c"], ["#9dc9ac", "#fffec7", "#f56218", "#ff9d2e", "#919167"], ["#4e395d", "#827085", "#8ebe94", "#ccfc8e", "#dc5b3e"], ["#a8a7a7", "#cc527a", "#e8175d", "#474747", "#363636"], ["#f8edd1", "#d88a8a", "#474843", "#9d9d93", "#c5cfc6"], ["#046d8b", "#309292", "#2fb8ac", "#93a42a", "#ecbe13"], ["#f38a8a", "#55443d", "#a0cab5", "#cde9ca", "#f1edd0"], ["#a70267", "#f10c49", "#fb6b41", "#f6d86b", "#339194"], ["#ff003c", "#ff8a00", "#fabe28", "#88c100", "#00c176"], ["#ffedbf", "#f7803c", "#f54828", "#2e0d23", "#f8e4c1"], ["#4e4d4a", "#353432", "#94ba65", "#2790b0", "#2b4e72"], ["#0ca5b0", "#4e3f30", "#fefeeb", "#f8f4e4", "#a5b3aa"], ["#4d3b3b", "#de6262", "#ffb88c", "#ffd0b3", "#f5e0d3"], ["#fffbb7", "#a6f6af", "#66b6ab", "#5b7c8d", "#4f2958"], ["#edf6ee", "#d1c089", "#b3204d", "#412e28", "#151101"], ["#9d7e79", "#ccac95", "#9a947c", "#748b83", "#5b756c"], ["#fcfef5", "#e9ffe1", "#cdcfb7", "#d6e6c3", "#fafbe3"], ["#9cddc8", "#bfd8ad", "#ddd9ab", "#f7af63", "#633d2e"], ["#30261c", "#403831", "#36544f", "#1f5f61", "#0b8185"], ["#aaff00", "#ffaa00", "#ff00aa", "#aa00ff", "#00aaff"], ["#d1313d", "#e5625c", "#f9bf76", "#8eb2c5", "#615375"], ["#ffe181", "#eee9e5", "#fad3b2", "#ffba7f", "#ff9c97"], ["#73c8a9", "#dee1b6", "#e1b866", "#bd5532", "#373b44"], ["#805841", "#dcf7f3", "#fffcdd", "#ffd8d8", "#f5a2a2"]]
+
+export { palettes }

package/utils/color-parser.ts

@@ -0,0 +1,249 @@
+// import { float4, float3, quaternion } from "Unity/Mathematics" // JSR prepends a "./" to this, which messes things up
+// import { Color } from "UnityEngine" // TODO Somehow this bypasses unity-import-transform and leads to esbuild error
+
+type float4 = CS.Unity.Mathematics.float4
+const { float4: f4, float3: f3, PI } = CS.Unity.Mathematics.math
+const { Color } = CS.UnityEngine
+
+/*
+https://github.com/deanm/css-color-parser-js
+
+Minor changes were made for TS compatibility. Original License below:
+
+(c) Dean McNamee <dean@gmail.com>, 2012.
+
+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.
+*/
+
+var kCSSColorTable = {
+    "transparent": [0, 0, 0, 0], "aliceblue": [240, 248, 255, 1],
+    "antiquewhite": [250, 235, 215, 1], "aqua": [0, 255, 255, 1],
+    "aquamarine": [127, 255, 212, 1], "azure": [240, 255, 255, 1],
+    "beige": [245, 245, 220, 1], "bisque": [255, 228, 196, 1],
+    "black": [0, 0, 0, 1], "blanchedalmond": [255, 235, 205, 1],
+    "blue": [0, 0, 255, 1], "blueviolet": [138, 43, 226, 1],
+    "brown": [165, 42, 42, 1], "burlywood": [222, 184, 135, 1],
+    "cadetblue": [95, 158, 160, 1], "chartreuse": [127, 255, 0, 1],
+    "chocolate": [210, 105, 30, 1], "coral": [255, 127, 80, 1],
+    "cornflowerblue": [100, 149, 237, 1], "cornsilk": [255, 248, 220, 1],
+    "crimson": [220, 20, 60, 1], "cyan": [0, 255, 255, 1],
+    "darkblue": [0, 0, 139, 1], "darkcyan": [0, 139, 139, 1],
+    "darkgoldenrod": [184, 134, 11, 1], "darkgray": [169, 169, 169, 1],
+    "darkgreen": [0, 100, 0, 1], "darkgrey": [169, 169, 169, 1],
+    "darkkhaki": [189, 183, 107, 1], "darkmagenta": [139, 0, 139, 1],
+    "darkolivegreen": [85, 107, 47, 1], "darkorange": [255, 140, 0, 1],
+    "darkorchid": [153, 50, 204, 1], "darkred": [139, 0, 0, 1],
+    "darksalmon": [233, 150, 122, 1], "darkseagreen": [143, 188, 143, 1],
+    "darkslateblue": [72, 61, 139, 1], "darkslategray": [47, 79, 79, 1],
+    "darkslategrey": [47, 79, 79, 1], "darkturquoise": [0, 206, 209, 1],
+    "darkviolet": [148, 0, 211, 1], "deeppink": [255, 20, 147, 1],
+    "deepskyblue": [0, 191, 255, 1], "dimgray": [105, 105, 105, 1],
+    "dimgrey": [105, 105, 105, 1], "dodgerblue": [30, 144, 255, 1],
+    "firebrick": [178, 34, 34, 1], "floralwhite": [255, 250, 240, 1],
+    "forestgreen": [34, 139, 34, 1], "fuchsia": [255, 0, 255, 1],
+    "gainsboro": [220, 220, 220, 1], "ghostwhite": [248, 248, 255, 1],
+    "gold": [255, 215, 0, 1], "goldenrod": [218, 165, 32, 1],
+    "gray": [128, 128, 128, 1], "green": [0, 128, 0, 1],
+    "greenyellow": [173, 255, 47, 1], "grey": [128, 128, 128, 1],
+    "honeydew": [240, 255, 240, 1], "hotpink": [255, 105, 180, 1],
+    "indianred": [205, 92, 92, 1], "indigo": [75, 0, 130, 1],
+    "ivory": [255, 255, 240, 1], "khaki": [240, 230, 140, 1],
+    "lavender": [230, 230, 250, 1], "lavenderblush": [255, 240, 245, 1],
+    "lawngreen": [124, 252, 0, 1], "lemonchiffon": [255, 250, 205, 1],
+    "lightblue": [173, 216, 230, 1], "lightcoral": [240, 128, 128, 1],
+    "lightcyan": [224, 255, 255, 1], "lightgoldenrodyellow": [250, 250, 210, 1],
+    "lightgray": [211, 211, 211, 1], "lightgreen": [144, 238, 144, 1],
+    "lightgrey": [211, 211, 211, 1], "lightpink": [255, 182, 193, 1],
+    "lightsalmon": [255, 160, 122, 1], "lightseagreen": [32, 178, 170, 1],
+    "lightskyblue": [135, 206, 250, 1], "lightslategray": [119, 136, 153, 1],
+    "lightslategrey": [119, 136, 153, 1], "lightsteelblue": [176, 196, 222, 1],
+    "lightyellow": [255, 255, 224, 1], "lime": [0, 255, 0, 1],
+    "limegreen": [50, 205, 50, 1], "linen": [250, 240, 230, 1],
+    "magenta": [255, 0, 255, 1], "maroon": [128, 0, 0, 1],
+    "mediumaquamarine": [102, 205, 170, 1], "mediumblue": [0, 0, 205, 1],
+    "mediumorchid": [186, 85, 211, 1], "mediumpurple": [147, 112, 219, 1],
+    "mediumseagreen": [60, 179, 113, 1], "mediumslateblue": [123, 104, 238, 1],
+    "mediumspringgreen": [0, 250, 154, 1], "mediumturquoise": [72, 209, 204, 1],
+    "mediumvioletred": [199, 21, 133, 1], "midnightblue": [25, 25, 112, 1],
+    "mintcream": [245, 255, 250, 1], "mistyrose": [255, 228, 225, 1],
+    "moccasin": [255, 228, 181, 1], "navajowhite": [255, 222, 173, 1],
+    "navy": [0, 0, 128, 1], "oldlace": [253, 245, 230, 1],
+    "olive": [128, 128, 0, 1], "olivedrab": [107, 142, 35, 1],
+    "orange": [255, 165, 0, 1], "orangered": [255, 69, 0, 1],
+    "orchid": [218, 112, 214, 1], "palegoldenrod": [238, 232, 170, 1],
+    "palegreen": [152, 251, 152, 1], "paleturquoise": [175, 238, 238, 1],
+    "palevioletred": [219, 112, 147, 1], "papayawhip": [255, 239, 213, 1],
+    "peachpuff": [255, 218, 185, 1], "peru": [205, 133, 63, 1],
+    "pink": [255, 192, 203, 1], "plum": [221, 160, 221, 1],
+    "powderblue": [176, 224, 230, 1], "purple": [128, 0, 128, 1],
+    "rebeccapurple": [102, 51, 153, 1],
+    "red": [255, 0, 0, 1], "rosybrown": [188, 143, 143, 1],
+    "royalblue": [65, 105, 225, 1], "saddlebrown": [139, 69, 19, 1],
+    "salmon": [250, 128, 114, 1], "sandybrown": [244, 164, 96, 1],
+    "seagreen": [46, 139, 87, 1], "seashell": [255, 245, 238, 1],
+    "sienna": [160, 82, 45, 1], "silver": [192, 192, 192, 1],
+    "skyblue": [135, 206, 235, 1], "slateblue": [106, 90, 205, 1],
+    "slategray": [112, 128, 144, 1], "slategrey": [112, 128, 144, 1],
+    "snow": [255, 250, 250, 1], "springgreen": [0, 255, 127, 1],
+    "steelblue": [70, 130, 180, 1], "tan": [210, 180, 140, 1],
+    "teal": [0, 128, 128, 1], "thistle": [216, 191, 216, 1],
+    "tomato": [255, 99, 71, 1], "turquoise": [64, 224, 208, 1],
+    "violet": [238, 130, 238, 1], "wheat": [245, 222, 179, 1],
+    "white": [255, 255, 255, 1], "whitesmoke": [245, 245, 245, 1],
+    "yellow": [255, 255, 0, 1], "yellowgreen": [154, 205, 50, 1]
+}
+
+function clamp_css_byte(i: number) {  // Clamp to integer 0 .. 255.
+    i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
+    return i < 0 ? 0 : i > 255 ? 255 : i;
+}
+
+function clamp_css_float(f: number) {  // Clamp to float 0.0 .. 1.0.
+    return f < 0 ? 0 : f > 1 ? 1 : f;
+}
+
+function parse_css_int(str: string) {  // int or percentage.
+    if (str[str.length - 1] === '%')
+        return clamp_css_byte(parseFloat(str) / 100 * 255);
+    return clamp_css_byte(parseInt(str));
+}
+
+function parse_css_float(str: string) {  // float or percentage.
+    if (str[str.length - 1] === '%')
+        return clamp_css_float(parseFloat(str) / 100);
+    return clamp_css_float(parseFloat(str));
+}
+
+function css_hue_to_rgb(m1: number, m2: number, h: number) {
+    if (h < 0) h += 1;
+    else if (h > 1) h -= 1;
+
+    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+    if (h * 2 < 1) return m2;
+    if (h * 3 < 2) return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+    return m1;
+}
+
+function parseCSSColor(css_str: string): number[] | null {
+    // Remove all whitespace, not compliant, but should just be more accepting.
+    var str = css_str.replace(/ /g, '').toLowerCase();
+
+    // Color keywords (and transparent) lookup.
+    if (str in kCSSColorTable) return (kCSSColorTable as { [key: string]: number[] })[str].slice();  // dup.
+
+    // #abc and #abc123 syntax.
+    if (str[0] === '#') {
+        if (str.length === 4) {
+            var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+            if (!(iv >= 0 && iv <= 0xfff)) return null;  // Covers NaN.
+            return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
+            (iv & 0xf0) | ((iv & 0xf0) >> 4),
+            (iv & 0xf) | ((iv & 0xf) << 4),
+                1];
+        } else if (str.length === 7) {
+            var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+            if (!(iv >= 0 && iv <= 0xffffff)) return null;  // Covers NaN.
+            return [(iv & 0xff0000) >> 16,
+            (iv & 0xff00) >> 8,
+            iv & 0xff,
+                1];
+        }
+
+        return null;
+    }
+
+    var op = str.indexOf('('), ep = str.indexOf(')');
+    if (op !== -1 && ep + 1 === str.length) {
+        var fname = str.substr(0, op);
+        var params = str.substr(op + 1, ep - (op + 1)).split(',');
+        var alpha = 1;  // To allow case fallthrough.
+        switch (fname) {
+            case 'rgba':
+                if (params.length !== 4) return null;
+                alpha = parse_css_float(params.pop() as string);
+            // Fall through.
+            case 'rgb':
+                if (params.length !== 3) return null;
+                return [parse_css_int(params[0]),
+                parse_css_int(params[1]),
+                parse_css_int(params[2]),
+                    alpha];
+            case 'hsla':
+                if (params.length !== 4) return null;
+                alpha = parse_css_float(params.pop() as string);
+            // Fall through.
+            case 'hsl':
+                if (params.length !== 3) return null;
+                var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360;  // 0 .. 1
+                // NOTE(deanm): According to the CSS spec s/l should only be
+                // percentages, but we don't bother and let float or percentage.
+                var s = parse_css_float(params[1]);
+                var l = parse_css_float(params[2]);
+                var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+                var m1 = l * 2 - m2;
+                return [clamp_css_byte(css_hue_to_rgb(m1, m2, h + 1 / 3) * 255),
+                clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
+                clamp_css_byte(css_hue_to_rgb(m1, m2, h - 1 / 3) * 255),
+                    alpha];
+            default:
+                return null;
+        }
+    }
+
+    return null;
+}
+
+function namedColor(name: keyof typeof kCSSColorTable): Color {
+    var c = kCSSColorTable[name]
+    return new Color(c[0] / 255, c[1] / 255, c[2] / 255, c[3])
+}
+
+function namedColors(...names: (keyof typeof kCSSColorTable)[]): Color[] {
+    let res = [] as Color[]
+    for (const name of names) {
+        res.push(namedColor(name))
+    }
+    return res
+}
+
+export function colorStrToF4(str: string): float4 {
+    var c = parseCSSColor(str)
+    if (c == null)
+        throw `Color ${str} cannot be parsed`
+
+    return f4(c[0] / 255, c[1] / 255, c[2] / 255, c[3])
+}
+
+/**
+ * Can parse any css color, array of 4 values [0 to 1.0], or a plain float4
+ */
+export function parseColor(input: string | number[] | float4): Color {
+    if (Array.isArray(input)) {
+        return new Color(input[0], input[1], input[2], input[3])
+    } else if (typeof input === "string") {
+        var c = parseCSSColor(input)
+        if (c !== null) {
+            return new Color(c[0] / 255, c[1] / 255, c[2] / 255, c[3])
+        }
+        return new Color(0, 0, 0, 0)
+    }
+    return new Color(input.x, input.y, input.z, input.w)
+}
+
+export { parseCSSColor, namedColor, namedColors }

package/utils/float-parser.ts

@@ -0,0 +1,31 @@
+// import { float2, float3, float4 } from "Unity/Mathematics" // JSR prepends a "./" to this, which messes things up
+
+type float2 = CS.Unity.Mathematics.float2
+type float3 = CS.Unity.Mathematics.float3
+type float4 = CS.Unity.Mathematics.float4
+
+const { clamp, float2: f2, float3: f3, float4: f4 } = CS.Unity.Mathematics.math
+
+export function parseFloat2(input: any): float2 {
+    if (!input)
+        return f2(0, 0)
+    if (Array.isArray(input))
+        input = f2(input[0] ?? 0, input[1] ?? 0)
+    return f2(input.x ?? 0, input.y ?? 0)
+}
+
+export function parseFloat3(input: any): float3 {
+    if (!input)
+        return f3(0, 0, 0)
+    if (Array.isArray(input))
+        input = f3(input[0] ?? 0, input[1] ?? 0, input[2] ?? 0)
+    return f3(input.x ?? 0, input.y ?? 0, input.z ?? 0)
+}
+
+export function parseFloat4(input: any): float4 {
+    if (!input)
+        return f4(0, 0, 0, 0)
+    if (Array.isArray(input))
+        input = f4(input[0] ?? 0, input[1] ?? 0, input[2] ?? 0, input[3] ?? 0)
+    return f4(input.x ?? 0, input.y ?? 0, input.z ?? 0, input.w ?? 0)
+}

package/utils/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @module utils
+ * 
+ * This module contains some commonly-used utility functions.
+ */
+
+// @ts-ignore - prevent `allowImportingTsExtensions` error
+export { parseColor, parseCSSColor, colorStrToF4, namedColor, namedColors } from "./color-parser"
+// @ts-ignore - prevent `allowImportingTsExtensions` error
+export { palettes } from "./color-palettes"
+// @ts-ignore - prevent `allowImportingTsExtensions` error
+export { parseFloat2, parseFloat3, parseFloat4 } from "./float-parser"