@ikdao/hyp 0.1.0

package/README.md

@@ -0,0 +1,119 @@
+Hyp UI Framework(in dev)
+================
+
+**Hyp** (by [ikdao](https://ikdao.org)) is an **Indie Indic UI/UX/IX Framework** built to experiment with minimal functional UI design patterns, inspired by hyperscript, reactive state, and virtual DOM execution.  
+
+*   **Lightweight**: Pure JS, minimal abstractions.
+    
+*   **Reactive**: Built-in Actor/state, derived Act, and side Act.
+    
+*   **Composable**: Functions are the building blocks.
+    
+*   **Experimental**: Targets SPA, SVG, AR/VR, and beyond.
+    
+
+HYP Core and Essentials 
+----------
+
+## h() — Hyperscript
+
+The h() function structure organs, organelles **virtual DOM node (VNode)**.
+
+Plain text
+`   import { h } from "hyp";  const vnode = h("div", { class: "box" }, "Hello Hyp");   `
+
+*   ty → element type (string tag or component function)
+    
+*   prp → props (attributes, events, class, style, etc.)
+    
+*   chd → children (string, number, VNode, or array)
+
+## Triad E,O,S - living interface
+-----
+### Orchestrater & Directors
+
+**o (Organiser)** - identity and spatial manager, for awaring
+create and organise organs
+
+### e() — Executor - behaviour and renderer
+render, redo organs(vDOM)
+
+**s (Scheduler)** - Temporal Manager, for attending
+run, clear organs, actors lifecycle 
+
+Plain text
+`   import { h, e } from "hyp";  const App = () => h("h1", null, "Hello World");  e(h(App), document.getElementById("root"));   `
+
+Handles:
+
+*   Mounting / unmounting components
+    
+*   Props & event binding
+    
+*   Child diffing (keyed + index-based)
+    
+*   SVG namespace support
+    
+
+Necessaries
+-----------
+
+These are the **core reactive orchestration primitives**.
+
+Hyp States - Actors/Reactor/Interactor  
+
+a() 
+actors are active primitive
+
+dA()/r()  
+derived Actor that act in response to existing act  
+sA()/i() 
+side actor that act in relation to existing act  
+
+n()  
+navigator that match path/query param and route to navigate or for navigating app  
+
+*   const counter = a(0);console.log(counter.get()); // 0counter.set(1);
+    
+*   const double = dA(() => counter.get() \* 2);
+    
+*   sA(() => { console.log("Counter updated:", counter.get());}, () => \[counter.get()\]);
+    
+
+Future Possibilities
+--------------------
+
+The roadmap includes evolving Hyp into a **full SPA framework**:
+
+*   **m()** → custom class modules / extensible components
+     
+*   **hX() / eX()** → AR/VR (XR) support
+    
+*   **SVG rendering** → already supported in e()
+    
+
+Example Counter App
+-------------------
+
+Plain text
+`   import HYP from "hyp";  const { h, e, a, sA } = HYP;  const Counter = () => {    const count = a(0);    return h("div", { class: "counter" },      h("h1", null, () => "Count: " + count.get()),      h("button", { onClick: () => count.set(count.get() + 1) }, "+"),      h("button", { onClick: () => count.set(count.get() - 1) }, "-")    );  };  e(h(Counter), document.getElementById("root"));   `
+
+Support Development
+-------------------
+
+*   **UPI**: hemangtewari@upi
+    
+*   **ETH**: 0x43ffd7C1Ea8AAfdc768c0883F35b2AE433EE4726
+    
+*   **BTC**: bc1qgk84f0dfddqfcww58ftse832udksf2wslnd3cd
+    
+*   **SOL**: DQr1t5uSriiwdu1NwTigJdbNg6WVHSFHijmyHFV27VC1  
+    
+
+License
+-------
+
+**Open Source** under [Zero One One Self License - 011sl](https://legal.ikdao.org/license/011sl)
+
+Plain text
+`   Hyp UI Framework - Hemang Tewari  License: 011sl   `

package/doc.md

@@ -0,0 +1,223 @@
+# HYP UI Framework Documentation
+
+**License:** Zero One One License - [011sl](https://legal/ikdao.org/license/011sl)
+**Author:** Hemang Tewari
+
+---
+
+## Overview
+
+The **HYP UI Framework** is a lightweight, hyperscript-driven UI framework that emphasizes declarative construction, reactive state management, and lifecycle organization. It is structured around the **HYP Triad Architectural Pattern**:
+
+1. **Scheduler (s)** — Temporal layer for efficient task queuing and execution.
+2. **Organiser (o)** — Structural layer for managing component identities, lifecycles, and contexts.
+3. **Executor (e)** — Execution layer for rendering, updating, and unmounting components.
+
+---
+
+## Core Modules
+
+### 1. Hyperscript Function — `h()`
+
+```js
+h(ty, prp, ...chd)
+```
+
+Creates a virtual node (VNode) representation of a UI element. Similar in concept to React's `createElement`.
+
+**Parameters:**
+
+* `ty` — Element type or functional component.
+* `prp` — Properties (attributes, event handlers, styles, refs).
+* `...chd` — Children (strings, numbers, arrays, other VNodes, or Actors).
+
+**Returns:**
+A virtual node object or component output.
+
+**Behavior:**
+
+* Normalizes properties and children.
+* Supports nested arrays and function-based children.
+* If `ty` is a function, executes it as a component.
+
+---
+
+### 2. Scheduler — `s`
+
+Responsible for queuing and flushing asynchronous tasks efficiently using `queueMicrotask`.
+
+**API:**
+
+```js
+s.add(fn, ei)
+s.flush()
+s.clear(ei)
+```
+
+**Usage:**
+
+* Schedules lifecycle hooks, updates, and reactivity changes.
+* Clears scheduled tasks for destroyed components.
+
+---
+
+### 3. Organiser — `o`
+
+Manages **Organs**, the internal representation of component instances. Each organ maintains its state, lifecycle hooks, and effects.
+
+**API:**
+
+```js
+o.create(hi, body)
+o.addLifecycle(ei, phase, fn)
+o.runLifecycle(ei, phase, bodyRef)
+o.addEffect(ei, clear)
+o.destroy(ei)
+o.get(ei)
+o.isAlive(ei)
+```
+
+**Lifecycle Phases:**
+
+* `willMount`, `didMount`
+* `willUpdate`, `didUpdate`
+* `willUnmount`, `didUnmount`
+
+**Responsibilities:**
+
+* Assigns unique execution identities (`ei`).
+* Tracks lifecycles and effects.
+* Cleans up resources upon destruction.
+
+---
+
+### 4. Executor — `e`
+
+Handles rendering, updating, and unmounting of components.
+
+**API:**
+
+```js
+e.render(vnode, body)
+e.patch(dom, oldVNode, newVNode, ei)
+e.unmount(vnode, ei)
+```
+
+**Core Functions:**
+
+* `render()` — Creates DOM from virtual nodes.
+* `patch()` — Efficiently updates DOM trees.
+* `unmount()` — Safely removes elements and triggers cleanup.
+
+**Utilities:**
+
+* `pushEI()`, `popEI()`, `currentEI()` for managing execution context.
+
+---
+
+### 5. Actor — `a()` and `Actor` class
+
+Reactive primitive for state management. Similar to signals or observables.
+
+**Example:**
+
+```js
+const count = a(0);
+count.subscribe(() => console.log(count.get()));
+count.set(1);
+```
+
+**Methods:**
+
+* `get()` — Returns current value.
+* `set(next)` — Updates value and triggers subscriptions.
+* `subscribe(fn)` — Registers reactive listeners.
+
+---
+
+### 6. Derived Actor — `dA()`
+
+Creates computed signals that reactively derive from other actors.
+
+**Example:**
+
+```js
+const first = a('John');
+const last = a('Doe');
+const fullName = dA(() => `${first.get()} ${last.get()}`);
+```
+
+Automatically re-evaluates when dependencies change.
+
+---
+
+### 7. Side Actor — `sA()`
+
+Manages reactive side effects (similar to `useEffect` in React).
+
+**Usage:**
+
+```js
+sA(() => {
+  console.log('Effect ran');
+  return () => console.log('Cleanup');
+}, () => [someActor]);
+```
+
+**Features:**
+
+* Dependency-based re-execution.
+* Automatic cleanup.
+* Tied to component lifecycle.
+
+---
+
+## Design Pattern — HYP Triad
+
+| Layer      | Name              | Role                                       |
+| ---------- | ----------------- | ------------------------------------------ |
+| Temporal   | **Scheduler (s)** | Queues and executes microtasks efficiently |
+| Structural | **Organiser (o)** | Manages organs, lifecycles, and effects    |
+| Execution  | **Executor (e)**  | Handles rendering, patching, and teardown  |
+
+---
+
+## Example Usage
+
+```js
+import HYP, { h, e, a, dA, sA } from './hyp.js';
+
+function Counter() {
+  const count = a(0);
+  const double = dA(() => count.get() * 2);
+
+  sA(() => {
+    console.log('Mounted');
+    return () => console.log('Unmounted');
+  }, []);
+
+  return h('div', {},
+    h('h1', {}, 'Count: ', count),
+    h('p', {}, 'Double: ', double),
+    h('button', { onClick: () => count.set(count.get() + 1) }, 'Increment')
+  );
+}
+
+e.render(h(Counter), document.body);
+```
+
+---
+
+## Key Features
+
+* **Declarative Virtual DOM** — Hyperscript-based structure for UI creation.
+* **Reactive Core** — Lightweight Actor model for state.
+* **Lifecycle Management** — Fine-grained mount/update/unmount hooks.
+* **Scheduler Optimization** — Microtask-based async task management.
+* **Composable Effects** — Derived and side actors for complex reactivity.
+
+---
+
+## License
+
+Licensed under the **Zero One One License (011sl)** — see [legal/ikdao.org/license/011sl](https://legal.ikdao.org/license/011sl).

package/example/counter/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>HYP Counter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <style>
+    body {
+      font-family: sans-serif;
+      background: #f9f9f9;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+    .counter {
+      background: #fff;
+      padding: 24px;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      text-align: center;
+    }
+    .counter button {
+      margin: 6px;
+      padding: 8px 16px;
+      font-size: 16px;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .counter button:hover {
+      background: #eee;
+    }
+    .footer {
+      margin-top: 16px;
+      font-size: 12px;
+      color: #555;
+    }
+  </style>
+
+</head>
+<body>
+  <div id="app"></div>
+ <script type="module" src="https://cdn.jsdelivr.net/gh/ikdao/hyp@main/hyp.js"></script>
+
+  <script type="module">
+    const { h, e, a, sA } = window.HYP;
+
+   
+   function Counter() {
+      const count = a(0);
+
+       sA(
+        () => {
+          console.log("Count changed:", count.get());
+        },
+        () => [count.get()]
+      );
+
+      return h(
+        "div",
+        { className: "counter" },
+        h("h1", {}, "Counter"),
+        h("p", { style: { fontSize: "24px" } }, "Count: ", count),
+        h(
+          "div",
+          {},
+          h("button", { onClick: () => count.set(count.get() + 1) }, "➕ Increment"),
+          h("button", { onClick: () => count.set(count.get() - 1) }, "➖ Decrement"),
+          h("button", { onClick: () => count.set(0) }, "🔄 Reset")
+        ),
+        h("hr", {}),
+        h("div", { className: "footer" },
+          "Powered by HYP UI Framework 🌈 | Built with Ikdao 🩶 | Creator: Hemang Tewari 🛸👽🚀"
+        )
+      );
+    }
+
+    e.render(h(Counter), document.getElementById("app"));
+
+  </script>
+</body>
+</html>

package/example/hello-world/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Hello World - HYP UIIX Framework Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preload stylesheet" as="style" id="style" href="https://cdn.jsdelivr.net/gh/ikdao/style@main/style.css">
+
+</head>
+<body>
+  <!-- App Mount Point -->
+  <div id="app"></div>
+
+  <!-- HYP CDN -->
+  <script type="module" src="https://cdn.jsdelivr.net/gh/ikdao/hyp@main/hyp.js"></script>
+
+  <script type="module">
+    const { h, e } = window.HYP;
+
+    // Simple component
+    function HelloWorld() {
+      return h(
+        "div",
+        { style: { fontFamily: "sans-serif", padding: "20px" } },
+        h("h1", {}, "Hello, World 👋"),
+        h("p", {}, "Powered by HYP UIIX Framework 🌈"),
+        h("p", {}, "Built with Ikdao 🩶"),
+        h("p", {}, "Creator Hemang Tewari 🛸👽🚀"),
+      );
+    }
+
+    // Render into #app
+    const mount = document.getElementById("app");
+    e.render(h(HelloWorld), mount);
+  </script>
+</body>
+</html>

package/helper/file-loader.js

@@ -0,0 +1,19 @@
+export async function loadRoutes(navigator, modules) {
+  for (const path in modules) {
+    const mod = modules[path];
+
+    // normalize path
+    let routePath = path
+      .replace(/^\.\/routes/, "")
+      .replace(/\.js$/, "")
+      .replace(/\/index$/, "/")
+      .replace(/\[([^\]]+)\]/g, ":$1");
+
+    if (routePath === "") routePath = "/";
+
+    navigator.route(routePath, async () => {
+      const m = await mod();
+      return m.default;
+    });
+  }
+}

package/index.js

@@ -0,0 +1,12 @@
+// HYP UI/UX Framework
+// Zero One Self License - 01SL
+// HYP Framework - Hemang Tewari
+
+export { HYP as default } from "/src/hyp.js";
+export { h } from "/src/h.js";
+export { e } from "/src/e.js";
+export { o } from "/src/o.js";
+export { s } from "/src/s.js";
+export { a } from "/src/a.js";
+export { r } from "/src/r.js";
+export { i } from "/src/i.js";

package/license.md

@@ -0,0 +1,4 @@
+Zero One One - Self License - O11SL
+https://legal.ikdao.org/license/011sl
+HYP UI/UX/IX Framework - [Hemang Tewari]
+

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ikdao/hyp",
+  "version": "0.1.0",
+  "description": "HYP is an Indic UI/UX framework from ikdao. It uses living Architecture i.e. evolution to reactive UI/UX Frameworks.",
+  "keywords": [
+    "hyp",
+    "hypui",
+    "hypjs",
+    "frontend",
+    "framework",
+    "ui",
+    "ux",
+    "web",
+    "design"
+  ],
+  "homepage": "https://github.com/ikdao/hyp#readme",
+  "bugs": {
+    "url": "https://github.com/ikdao/hyp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ikdao/hyp.git"
+  },
+  "license": "01SL",
+  "author": "Hemang Tewari",
+  "type": "ESM",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/a.js

@@ -0,0 +1,26 @@
+// Actor a()
+// Self License - 01SL
+// HYP UI Framework 
+// Author: Hemang Tewari
+
+let tr = null;
+export class Actor {
+    constructor(initial) {
+        this.value = initial;
+        this.subs = new Set();
+    }
+    get() {
+        if (tr) this.subs.add(tr);
+        return this.value;
+    }
+    set(next) {
+        if (next === this.value) return;
+        this.value = next;
+        this.subs.forEach(fn => s.add(fn));
+    }
+    subscribe(fn) {
+        this.subs.add(fn);
+        return () => this.subs.delete(fn);
+    }
+}
+export const a = (initial) => new Actor(initial);

package/src/dA.js

@@ -0,0 +1,12 @@
+// Derived Act dA()
+export const dA = (compute) => {
+    const sig = a();
+    const recompute = () => {
+        tr = recompute;
+        const val = compute();
+        tr = null;
+        sig.set(val);
+    };
+    recompute();
+    return sig;
+};