oxiui-lib 0.2.0

package/dist/core/signals.d.ts

@@ -0,0 +1,13 @@
+export declare class Signal<T> {
+    #private;
+    initial: T;
+    constructor(initial: T);
+    private state;
+    private cursor;
+    get value(): T;
+    set value(v: T);
+    private static clearReaders;
+    private static getCurrentReaderWithCursorId;
+    private static getReadersWithCursor;
+    static create<T>(initial: T): [() => T, (v: T) => void];
+}

package/dist/core/signals.js

@@ -0,0 +1,77 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _a, _Signal_memory, _Signal_readers;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Signal = void 0;
+const renderer_js_1 = require("./renderer.js");
+const scheduler_js_1 = require("./scheduler.js");
+const tree_js_1 = require("./tree.js");
+class Signal {
+    constructor(initial) {
+        this.initial = initial;
+        this.cursor = (0, renderer_js_1.nextCursor)();
+        if (!__classPrivateFieldGet(_a, _a, "f", _Signal_memory).has(this.cursor)) {
+            __classPrivateFieldGet(_a, _a, "f", _Signal_memory).set(this.cursor, { value: initial });
+        }
+        this.state = __classPrivateFieldGet(_a, _a, "f", _Signal_memory).get(this.cursor);
+    }
+    get value() {
+        const reader = _a.getCurrentReaderWithCursorId(this.cursor);
+        if (!__classPrivateFieldGet(_a, _a, "f", _Signal_readers).has(reader)) {
+            __classPrivateFieldGet(_a, _a, "f", _Signal_readers).add(reader);
+        }
+        return this.state.value;
+    }
+    set value(v) {
+        this.state.value = v;
+        if (this.cursor) {
+            (0, scheduler_js_1.rerender)(`${this.cursor}`, _a.getReadersWithCursor(this.cursor));
+            console.log(this.cursor, (0, tree_js_1.current)());
+        }
+        _a.clearReaders();
+    }
+    static clearReaders() {
+        __classPrivateFieldGet(_a, _a, "f", _Signal_readers).clear();
+    }
+    static getCurrentReaderWithCursorId(cursor) {
+        var _b, _c, _d;
+        const callee = (0, tree_js_1.current)();
+        (_b = callee === null || callee === void 0 ? void 0 : callee.cursors) === null || _b === void 0 ? void 0 : _b.add(cursor.toString());
+        const c = ((_d = (_c = callee === null || callee === void 0 ? void 0 : callee.down) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) - 1;
+        return `${callee === null || callee === void 0 ? void 0 : callee.index}.${(c < 0 ? 0 : c).toString()}-${cursor}`;
+    }
+    static getReadersWithCursor(cursor) {
+        return new Set(Array.from(__classPrivateFieldGet(_a, _a, "f", _Signal_readers))
+            .filter((r) => r.endsWith(`-${cursor}`))
+            .map((v) => v.split("-")[0])
+            .filter((v) => v !== undefined));
+    }
+    static create(initial) {
+        const cursor = (0, renderer_js_1.nextCursor)();
+        if (!__classPrivateFieldGet(_a, _a, "f", _Signal_memory).has(cursor)) {
+            __classPrivateFieldGet(_a, _a, "f", _Signal_memory).set(cursor, { value: initial });
+        }
+        const state = __classPrivateFieldGet(_a, _a, "f", _Signal_memory).get(cursor);
+        const read = () => {
+            const reader = _a.getCurrentReaderWithCursorId(cursor);
+            if (!__classPrivateFieldGet(_a, _a, "f", _Signal_readers).has(reader)) {
+                __classPrivateFieldGet(_a, _a, "f", _Signal_readers).add(reader);
+            }
+            return state.value;
+        };
+        const write = (v) => {
+            state.value = v;
+            (0, scheduler_js_1.rerender)(`${cursor}`, _a.getReadersWithCursor(cursor));
+            _a.clearReaders();
+        };
+        return [read, write];
+    }
+}
+exports.Signal = Signal;
+_a = Signal;
+_Signal_memory = { value: new Map() };
+_Signal_readers = { value: new Set() };

package/dist/core/tree.d.ts

@@ -0,0 +1,5 @@
+import type { IComponent } from "./types/component";
+import type { IntrinsicElements } from "./types/html";
+export declare function current(): IComponent<keyof IntrinsicElements>;
+export declare function open(component: IComponent<any>): void;
+export declare function close(): void;

package/dist/core/tree.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.current = current;
+exports.open = open;
+exports.close = close;
+const stack = [];
+function current() {
+    return stack[stack.length - 1];
+}
+function _open(component) {
+    stack.push(component);
+}
+function open(component) {
+    stack.push(component);
+}
+function close() {
+    stack.pop();
+}

package/dist/core/types/component.d.ts

@@ -0,0 +1,21 @@
+import type { IntrinsicElements } from "./html.js";
+export type StyleProp<P> = P extends {
+    style?: infer ST;
+} ? ST : string | Partial<CSSStyleDeclaration>;
+export interface IComponent<K extends keyof IntrinsicElements> {
+    index: string;
+    props: IntrinsicElements[K];
+    cursors: Set<string>;
+    type: K;
+    down: IComponent<keyof IntrinsicElements>[];
+    up?: IComponent<keyof IntrinsicElements>;
+    view?: () => void;
+    body(fn: (component: this) => void): this;
+    onAppear(fn: (component: this) => void): this;
+    withProps<T extends Partial<IntrinsicElements[K]>>(newProps: T): this;
+    withStyle(style: StyleProp<IntrinsicElements[K]>): this;
+    withExtension(extension: (component: this) => void): this;
+}
+export interface IScreen<K extends keyof IntrinsicElements> extends IComponent<K> {
+    render(): void;
+}

package/dist/core/types/component.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/core/types/html.d.ts

@@ -0,0 +1,66 @@
+export type EventHandler<E = Event> = (event: E) => void;
+export type CommonProps = {
+    id?: string;
+    class?: string;
+    style?: Partial<CSSStyleDeclaration>;
+    title?: string;
+    hidden?: boolean;
+    onClick?: EventHandler<MouseEvent>;
+    onInput?: EventHandler<InputEvent>;
+    onChange?: EventHandler<Event>;
+    onFocus?: EventHandler<FocusEvent>;
+    onBlur?: EventHandler<FocusEvent>;
+    onKeyDown?: EventHandler<KeyboardEvent>;
+    onKeyUp?: EventHandler<KeyboardEvent>;
+    content?: string | number | (() => string | number);
+};
+export type ButtonProps = CommonProps & {
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+};
+export type InputProps = CommonProps & {
+    type?: "text" | "email" | "password" | "number" | "date" | "time" | "datetime-local" | "month" | "week" | "url" | "search" | "tel" | "color";
+    value?: string | number;
+    placeholder?: string;
+    required?: boolean;
+    onTextChange?: EventHandler<string>;
+};
+export type SemanticText = {
+    h1: CommonProps;
+    h2: CommonProps;
+    h3: CommonProps;
+    h4: CommonProps;
+    h5: CommonProps;
+    body: CommonProps;
+    p: CommonProps;
+    span: CommonProps;
+};
+export type IntrinsicElements = {
+    root: CommonProps;
+    div: CommonProps;
+    span: CommonProps;
+    semanticText: {
+        type: keyof SemanticText;
+        props: CommonProps;
+    };
+    animation: CommonProps;
+    button: ButtonProps;
+    input: InputProps;
+    form: CommonProps;
+    label: CommonProps;
+    a: CommonProps & {
+        href?: string;
+        target?: string;
+    };
+    img: CommonProps & {
+        src: string;
+        alt?: string;
+    };
+    textarea: CommonProps & {
+        value?: string;
+    };
+    text: {
+        text: string;
+    };
+};
+export declare function isCommonProps(props: unknown): props is CommonProps;

package/dist/core/types/html.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCommonProps = isCommonProps;
+function isObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isCommonProps(props) {
+    if (!isObject(props))
+        return false;
+    if ("id" in props && typeof props.id !== "string")
+        return false;
+    if ("class" in props && typeof props.class !== "string")
+        return false;
+    if ("title" in props && typeof props.title !== "string")
+        return false;
+    if ("hidden" in props && typeof props.hidden !== "boolean")
+        return false;
+    if ("content" in props) {
+        const c = props.content;
+        const valid = typeof c === "string" ||
+            typeof c === "number" ||
+            typeof c === "function";
+        if (!valid)
+            return false;
+    }
+    return true;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./core/elements";
+export * from "./core/scheduler";
+export * from "./core/signals";

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./core/elements"), exports);
+__exportStar(require("./core/scheduler"), exports);
+__exportStar(require("./core/signals"), exports);

package/lefthook.yml

@@ -0,0 +1,6 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
+      stage_fixed: true

package/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "oxiui-lib",
+	"version": "0.2.0",
+	"module": "src/index.ts",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"type": "module",
+	"scripts": {
+		"build": "tsc",
+		"biome": "biome format . --write"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.4.4",
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"@types/node": "^25.3.0",
+		"lefthook": "^2.1.1"
+	}
+}

package/src/core/elements/Animation.ts

@@ -0,0 +1,80 @@
+import { intrinsic } from "./OxiComponent.js";
+
+export class Animation extends intrinsic("div") {
+	#transforms = new Map<string, string>();
+
+	#applyTransforms() {
+		if (this.#transforms.size === 0) {
+			this.withStyle({ transform: undefined });
+		} else {
+			const transformString = Array.from(this.#transforms.values()).join(" ");
+			this.withStyle({ transform: transformString });
+		}
+	}
+
+	transition(sec: number, type: "ease" | "ease-in-out") {
+		this.withStyle({
+			transition: `all ${sec}s ${type}`,
+		});
+		return this;
+	}
+
+	translate(
+		direction: "vertical" | "horizontal" | "perpendicular",
+		target: number,
+	) {
+		let key: string;
+		let value: string;
+		if (direction === "horizontal") {
+			key = "translateX";
+			value = `translateX(${target}px)`;
+		} else if (direction === "vertical") {
+			key = "translateY";
+			value = `translateY(${target}px)`;
+		} else {
+			key = "translateZ";
+			value = `translateZ(${target}px)`;
+		}
+		this.#transforms.set(key, value);
+		this.#applyTransforms();
+		return this;
+	}
+
+	// Convenience methods
+	translateX(target: number) {
+		return this.translate("horizontal", target);
+	}
+
+	translateY(target: number) {
+		return this.translate("vertical", target);
+	}
+
+	translateZ(target: number) {
+		return this.translate("perpendicular", target);
+	}
+
+	rotate(deg: number) {
+		this.#transforms.set("rotate", `rotate(${deg}deg)`);
+		this.#applyTransforms();
+		return this;
+	}
+
+	scale(factor: number) {
+		this.#transforms.set("scale", `scale(${factor})`);
+		this.#applyTransforms();
+		return this;
+	}
+
+	skew(xDeg: number, yDeg?: number) {
+		const y = yDeg !== undefined ? yDeg : 0;
+		this.#transforms.set("skew", `skew(${xDeg}deg, ${y}deg)`);
+		this.#applyTransforms();
+		return this;
+	}
+
+	// Optional: manually trigger transform application (useful if you've manipulated the map directly)
+	applyTransforms() {
+		this.#applyTransforms();
+		return this;
+	}
+}

package/src/core/elements/Button.ts

@@ -0,0 +1,14 @@
+import type { ButtonProps } from "../types/html.js";
+import { intrinsic } from "./OxiComponent.js";
+
+export class Button extends intrinsic("button") {
+	constructor(text?: string, props?: ButtonProps) {
+		super();
+		this.withProps({ content: text ?? props?.content });
+	}
+
+	onClick(callback: () => void): this {
+		this.withProps({ onClick: callback });
+		return this;
+	}
+}

package/src/core/elements/HRow.ts

@@ -0,0 +1,8 @@
+import { Stack } from "./Stack.js";
+
+export class HRow extends Stack {
+	constructor() {
+		super();
+		this.horizontal().expand();
+	}
+}

package/src/core/elements/InputText.ts

@@ -0,0 +1,25 @@
+import { intrinsic } from "./OxiComponent.js";
+
+export class TextInput extends intrinsic("input") {
+	value(value: string | number) {
+		this.props.value = value;
+		return this;
+	}
+
+	placeholder(text: string) {
+		this.props.placeholder = text;
+		return this;
+	}
+
+	required(required: boolean = true) {
+		this.props.required = required;
+		return this;
+	}
+
+	onChangeText(fn: (value: string) => void) {
+		this.props.onTextChange = (text: string) => {
+			fn(text);
+		};
+		return this;
+	}
+}

package/src/core/elements/OxiComponent.ts

@@ -0,0 +1,143 @@
+import { scheduleEffect } from "../scheduler.js";
+import { Signal } from "../signals.js";
+import { close, current, open } from "../tree.js";
+import type { IComponent, StyleProp } from "../types/component.js";
+import type { CommonProps, IntrinsicElements } from "../types/html.js";
+
+export class OxiComponent<K extends keyof IntrinsicElements>
+	implements IComponent<K>
+{
+	#__states = new Map<string | symbol, Signal<unknown>>();
+	type: K;
+	props: IntrinsicElements[K];
+	up?: IComponent<keyof IntrinsicElements>;
+	down: IComponent<keyof IntrinsicElements>[] = [];
+	cursors: Set<string> = new Set();
+	index: string;
+	view?: (() => void) | undefined;
+
+	constructor(type: K, props?: IntrinsicElements[K]) {
+		const parent = current() as IComponent<keyof IntrinsicElements> | undefined;
+
+		this.type = type;
+		this.props = props ?? ({} as IntrinsicElements[K]);
+		this.up = parent;
+
+		const position = parent ? parent.down.length : 0;
+		this.index = parent ? `${parent.index}.${position}` : "0";
+
+		parent?.down.push(this as IComponent<K>);
+	}
+
+	body(fn?: (component: this) => void) {
+		open(this);
+
+		if (this.view) {
+			this.view();
+		} else {
+			fn?.(this);
+		}
+
+		close();
+		return this;
+	}
+
+	onAppear(fn: (component: this) => void) {
+		open(this);
+		scheduleEffect(() => fn(this));
+		close();
+		return this;
+	}
+
+	withProps<T extends Partial<IntrinsicElements[K]>>(newProps: T) {
+		open(this);
+		this.props = { ...this.props, ...newProps };
+		close();
+		return this;
+	}
+
+	withStyle(style: StyleProp<IntrinsicElements[K]>) {
+		open(this);
+
+		const currentStyle = (this.props as CommonProps).style;
+
+		if (typeof style === "object" && typeof currentStyle === "object") {
+			this.props = {
+				...this.props,
+				style: { ...currentStyle, ...style },
+			};
+		} else {
+			this.props = {
+				...this.props,
+				style,
+			};
+		}
+
+		close();
+		return this;
+	}
+
+	withExtension(extension: (component: this) => void): this {
+		open(this);
+		extension(this);
+		close();
+		return this;
+	}
+
+	withState(): this {
+		return new Proxy(this, {
+			get(target, prop, receiver) {
+				if (typeof prop === "string" && prop.startsWith("$")) {
+					let signal = target.#__states.get(prop);
+
+					if (!signal) {
+						open(target);
+						signal = new Signal(Reflect.get(target, prop, receiver));
+						target.#__states.set(prop, signal);
+						close();
+					}
+
+					return signal.value;
+				}
+
+				return Reflect.get(target, prop, receiver);
+			},
+
+			set(target, prop, value, receiver) {
+				if (typeof prop === "string" && prop.startsWith("$")) {
+					let signal = target.#__states.get(prop);
+
+					open(target);
+					if (!signal) {
+						signal = new Signal(value);
+						target.#__states.set(prop, signal);
+					} else {
+						signal.value = value;
+					}
+					close();
+					return true;
+				}
+
+				return Reflect.set(target, prop, value, receiver);
+			},
+		}) as this;
+	}
+}
+
+export function intrinsic<K extends keyof IntrinsicElements>(type: K) {
+	return class extends OxiComponent<K> {
+		constructor(props?: IntrinsicElements[K]) {
+			super(type, props);
+		}
+	};
+}
+
+export function intrinsicState<K extends keyof IntrinsicElements>(type: K) {
+	return class extends OxiComponent<K> {
+		constructor(props?: IntrinsicElements[K]) {
+			super(type, props);
+			// biome-ignore lint: correctness/noConstructorReturn
+			return this.withState();
+		}
+	};
+}

package/src/core/elements/OxiStateFull.ts

@@ -0,0 +1,3 @@
+import { intrinsic } from "./OxiComponent.js";
+
+export class DivContainer extends intrinsic("div") {}

package/src/core/elements/Stack.ts

@@ -0,0 +1,44 @@
+import { intrinsic } from "./OxiComponent.js";
+
+export class Stack extends intrinsic("div") {
+	constructor() {
+		super();
+		this.withStyle({
+			display: "flex",
+		});
+	}
+
+	verticalAlignment(value: "top" | "center" | "bottom"): this {
+		return this.withStyle({
+			alignItems:
+				value === "top"
+					? "flex-start"
+					: value === "center"
+						? "center"
+						: "flex-end",
+		});
+	}
+
+	horizontalAlignment(value: "left" | "center" | "right"): this {
+		return this.withStyle({
+			justifyContent:
+				value === "left"
+					? "flex-start"
+					: value === "center"
+						? "center"
+						: "flex-end",
+		});
+	}
+
+	expand(): this {
+		return this.withStyle({ flex: "1" });
+	}
+
+	horizontal(): this {
+		return this.withStyle({ flexDirection: "row" });
+	}
+
+	vertical(): this {
+		return this.withStyle({ flexDirection: "column" });
+	}
+}

package/src/core/elements/Text.ts

@@ -0,0 +1,53 @@
+import type { SemanticText } from "../types/html.js";
+import { intrinsic } from "./OxiComponent.js";
+
+export class Text extends intrinsic("semanticText") {
+	constructor(text: string | number | (() => string | number)) {
+		super();
+
+		this.props = {
+			type: "span",
+			props: {
+				content: text,
+			},
+		};
+	}
+
+	override withStyle(style: string | Partial<CSSStyleDeclaration>): this {
+		this.props.props.style = style;
+		return this;
+	}
+
+	private setType(type: keyof SemanticText) {
+		this.props.type = type;
+		return this;
+	}
+
+	asTitle() {
+		return this.setType("h1");
+	}
+
+	asSubtitle() {
+		return this.setType("h2");
+	}
+
+	asH3() {
+		return this.setType("h3");
+	}
+
+	asH4() {
+		return this.setType("h4");
+	}
+
+	asH5() {
+		return this.setType("h5");
+	}
+
+	asBody() {
+		return this.setType("body");
+	}
+
+	asParagraph() {
+		return this.setType("p");
+	}
+}

package/src/core/elements/VRow.ts

@@ -0,0 +1,8 @@
+import { Stack } from "./Stack.js";
+
+export class VRow extends Stack {
+	constructor() {
+		super();
+		this.vertical().expand();
+	}
+}