@mulanjs/mulanjs 1.0.1-dev.20260212143840

package/dist/components/bloch-sphere.js

@@ -0,0 +1,252 @@
+import { effect } from '../core/reactive';
+export class MuBlochSphereElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['size'];
+    }
+    constructor() {
+        super();
+        this._arrow = null;
+        this._container = null;
+        this._disposeEffect = null;
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        if (this._disposeEffect) {
+            this._disposeEffect();
+            this._disposeEffect = null;
+        }
+    }
+    // Property setter for 'qubit' (passed as .qubit="${q}" in Mulan)
+    set qubit(val) {
+        this._qubit = val;
+        this.initReactivity();
+    }
+    get qubit() {
+        return this._qubit;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'size' && this._container) {
+            this._container.style.width = newValue + 'px';
+            this._container.style.height = newValue + 'px';
+        }
+    }
+    initReactivity() {
+        if (this._disposeEffect)
+            this._disposeEffect();
+        if (!this._qubit)
+            return;
+        // MulanJS Effect: Run whenever the qubit state changes
+        this._disposeEffect = effect(() => {
+            const state = this._qubit.value; // Access reactive proxy
+            if (!state || !state.amplitudes)
+                return;
+            // Assume Single Qubit for Visualizer (Index 0 if passed a register)
+            // If passed a register, we visualize the first qubit's logical projection (partial trace simplified)
+            // Or assume input IS a specific qubit projection?
+            // For simplified demo, we assume the register is size 1 OR we visualize Q0 of the register.
+            const amps = state.amplitudes;
+            // Support 1-qubit visualization from N-qubit register requires partial trace.
+            // For now, let's assume the user passes a 1-qubit register OR we visualize index 0.
+            // |psi> = a|0> + b|1>
+            // a = amps[0] (re, im)
+            // b = amps[1] (re, im)
+            // Dealing with multi-qubit registers (naive projection for visualization):
+            // We sum up probabilities for 0xxxx vs 1xxxx to get Z-axis.
+            // This is "marginal probability".
+            let p0 = 0;
+            let p1 = 0;
+            // Calculate Probabilities
+            for (let i = 0; i < amps.length; i++) {
+                const mag = amps[i].re * amps[i].re + amps[i].im * amps[i].im;
+                if ((i & 1) === 0)
+                    p0 += mag;
+                else
+                    p1 += mag;
+            }
+            // Theta from Z-projection
+            // P0 = cos^2(theta/2) -> theta = 2 * acos(sqrt(P0))
+            const theta = 2 * Math.acos(Math.min(1, Math.sqrt(p0)));
+            // Phi?
+            // Phase is relative phase between |0> and |1>.
+            // We can look at the phase of the '1' component relative to '0'.
+            // Simple approach: Look at amps[1] phase vs amps[0] phase.
+            // But with entanglement, pure state phase is tricky.
+            // Let's implement full density matrix if needed, but for now:
+            // naive: atan2(amps[1].im, amps[1].re) - atan2(amps[0].im, amps[0].re)
+            // We use the first pair (0 and 1) as proxy if multiple.
+            const a0 = amps[0];
+            const a1 = amps[1]; // Valid for N>=1
+            const phase0 = Math.atan2(a0.im, a0.re);
+            const phase1 = Math.atan2(a1.im, a1.re);
+            let phi = phase1 - phase0;
+            // Update Arrow
+            this.updateArrow(theta, phi);
+        });
+    }
+    updateArrow(theta, phi) {
+        if (!this._arrow)
+            return;
+        // Convert Quantum Coords (Theta, Phi) to CSS Transforms
+        // Theta 0 = Top (|0>)
+        // Theta PI = Bottom (|1>)
+        // Theta PI/2 = Equator
+        // CSS Rotate sequence:
+        // 1. Start pointing UP (Y or Z axis in CSS?)
+        // Let's say Arrow starts pointing UP (Y-).
+        // Rotate Z by Phi (Azimuth)
+        // Rotate X by Theta (Polar) - No, that's not standard Euler.
+        // Standard Physics:
+        // Z is Up (in Bloch), but CSS 3D Y is usually 'Down' or 'Up'.
+        // Let's Map:
+        // Bloch Z+ (|0>) -> CSS Y- (Top)
+        // Bloch Z- (|1>) -> CSS Y+ (Bottom)
+        // Bloch X+ (|+>) -> CSS Z+ (Front)
+        // Transform:
+        // rotateY(phi) ? No, phi rotates around Z-axis (Vertical).
+        // theta rotates from Z-axis down.
+        // CSS:
+        // rotateY(phi) -> Rotates around Vertical axis.
+        // rotateZ(theta) -> Rotates "down" from up?
+        // Let's simplify:
+        // transform: rotateY(${phi}rad) rotateZ(${theta}rad)
+        // Note: CSS rotations order matters.
+        const degTheta = theta * (180 / Math.PI);
+        const degPhi = phi * (180 / Math.PI);
+        // Adjustment for visual alignment
+        this._arrow.style.transform = `rotateY(${degPhi}deg) rotateZ(${degTheta}deg)`;
+        // Color based on state
+        const isSuperposition = Math.abs(theta - Math.PI / 2) < 0.1;
+        this._arrow.style.backgroundColor = isSuperposition ? '#00ffff' : '#ff00ff';
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        const size = this.getAttribute('size') || '200';
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-block;
+                    perspective: 1000px;
+                }
+                .sphere-container {
+                    width: ${size}px;
+                    height: ${size}px;
+                    position: relative;
+                    transform-style: preserve-3d;
+                    margin: 0 auto;
+                }
+                .sphere {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    position: absolute;
+                    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.8));
+                    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
+                    transform: rotateX(15deg) rotateY(15deg); /* Initial tilt for view */
+                }
+                /* Equator Ring */
+                .equator {
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    border: 1px dashed rgba(255, 255, 255, 0.3);
+                    border-radius: 50%;
+                    transform: rotateX(90deg);
+                    pointer-events: none;
+                }
+                /* Axis Lines */
+                .axis {
+                    position: absolute;
+                    background: rgba(255, 255, 255, 0.1);
+                }
+                .z-axis { width: 2px; height: 100%; left: 50%; top: 0; }
+                
+                /* The Quantum Arrow */
+                .arrow-container {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    width: 0;
+                    height: 0;
+                    transform-style: preserve-3d;
+                    transform: rotateX(15deg) rotateY(15deg); /* Match sphere tilt */
+                }
+                
+                .arrow-pivot {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 4px;
+                    height: 50%; /* Length of radius */
+                    /* Pivot logic: we want to rotate around the center point */
+                    /* CSS Default transform-origin is 50% 50% */
+                    /* We construct the arrow such that it points UP from center */
+                }
+                
+                .arrow-rod {
+                    width: 4px;
+                    height: ${parseInt(size) / 2 - 10}px;
+                    background: #ff00ff;
+                    position: absolute;
+                    bottom: 0;
+                    left: -2px;
+                    transform-origin: bottom center;
+                    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
+                    border-radius: 2px;
+                    box-shadow: 0 0 10px currentColor;
+                }
+                
+                .arrow-head {
+                    width: 0; 
+                    height: 0; 
+                    border-left: 6px solid transparent;
+                    border-right: 6px solid transparent;
+                    border-bottom: 12px solid #ff00ff;
+                    position: absolute;
+                    top: -10px;
+                    left: -6px;
+                }
+                
+                .label {
+                    position: absolute;
+                    color: #aaa;
+                    font-family: monospace;
+                    font-size: 10px;
+                }
+                .label-0 { top: 5px; left: 50%; transform: translateX(-50%); }
+                .label-1 { bottom: 5px; left: 50%; transform: translateX(-50%); }
+            </style>
+            
+            <div class="sphere-container">
+                <div class="sphere">
+                    <div class="equator"></div>
+                    <div class="axis z-axis"></div>
+                    <div class="label label-0">|0></div>
+                    <div class="label label-1">|1></div>
+                </div>
+                
+                <div class="arrow-container">
+                    <!-- The rod is the actual rotating element -->
+                    <div class="arrow-rod">
+                        <div class="arrow-head"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        this._container = this.shadowRoot.querySelector('.sphere-container');
+        this._arrow = this.shadowRoot.querySelector('.arrow-rod');
+        // Re-init reactivity if qubit was set before render
+        if (this._qubit)
+            this.initReactivity();
+    }
+}
+// Register the custom element
+if (typeof customElements !== 'undefined') {
+    customElements.define('mu-bloch-sphere', MuBlochSphereElement);
+}

package/dist/core/component.js

@@ -0,0 +1,145 @@
+import { render } from './renderer';
+import { setCurrentInstance } from './hooks';
+import { effect } from './reactive';
+// Or a simple component that returns an object of state/methods used by template? 
+// For Mulan 2.0, let's say functional component returns a template string render function explicitly.
+export class MuComponent {
+    constructor(container) {
+        this._hooks = {};
+        this._effects = [];
+        this._isDestroyed = false;
+        this._propsQueue = [];
+        this._eventQueue = [];
+        this.container = container;
+        this.state = {};
+        this.$uid = 'mu_' + Math.random().toString(36).substr(2, 9);
+        // MULAN INSIGHT: Global Registry for Debugging
+        if (typeof window !== 'undefined') {
+            const global = window;
+            global.__MULAN_INSIGHT__ = global.__MULAN_INSIGHT__ || { components: new Map() };
+            global.__MULAN_INSIGHT__.components.set(this.$uid, this);
+        }
+        // Setup context for hooks
+        setCurrentInstance(this);
+        this.setup();
+        setCurrentInstance(null);
+    }
+    // Optional setup method for class components wanting to use hooks
+    setup() { }
+    onMount() {
+        var _a, _c;
+        // Mulan Cycle: Init
+        (_a = this._hooks.onMuInit) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+        // Mulan Cycle: Mount (Simulated immediately after init for now in this version)
+        (_c = this._hooks.onMuMount) === null || _c === void 0 ? void 0 : _c.forEach(fn => fn());
+    }
+    onUpdate() { }
+    onDestroy() {
+        var _a, _c;
+        if (this._isDestroyed)
+            return;
+        this._isDestroyed = true;
+        console.log(`[Mulan Cycle] Destroying component ${this.$uid} (${this.constructor.name})`);
+        // MULAN INSIGHT: Cleanup
+        if (typeof window !== 'undefined') {
+            const global = window;
+            (_a = global.__MULAN_INSIGHT__) === null || _a === void 0 ? void 0 : _a.components.delete(this.$uid);
+        }
+        // Mulan Cycle: Stop all effects to prevent leaks
+        console.log(`[Mulan Cycle] Stopping ${this._effects.length} effects for ${this.$uid}`);
+        this._effects.forEach(stop => stop());
+        this._effects = [];
+        // Mulan Cycle: Destroy hooks
+        (_c = this._hooks.onMuDestroy) === null || _c === void 0 ? void 0 : _c.forEach(fn => fn());
+    }
+    // Helper for compiler to register property bindings
+    _b(id, prop, value) {
+        this._propsQueue.push([id, prop, value]);
+        return "";
+    }
+    // Helper for compiler to register event bindings
+    _e(id, type, handler) {
+        this._eventQueue.push([id, type, handler]);
+        return "";
+    }
+    mount() {
+        console.log(`[Mulan Cycle] Mounting component ${this.$uid}`);
+        const stop = effect(() => {
+            console.log(`[Mulan Reactivity] Triggering update for ${this.$uid}`);
+            this.update();
+        });
+        this._effects.push(stop);
+        this.onMount();
+    }
+    update() {
+        if (this._isDestroyed) {
+            console.warn(`[Mulan Warning] Update called on destroyed component ${this.$uid}. Blocking render.`);
+            return;
+        }
+        // Clear queues before render
+        this._propsQueue = [];
+        this._eventQueue = [];
+        const template = this.template();
+        // Render HTML
+        render(template, this.container);
+        // Flush Side Effects
+        this.flushProps();
+        this.flushEvents();
+        this.onUpdate();
+    }
+    flushProps() {
+        for (const [id, prop, value] of this._propsQueue) {
+            const el = this.container.querySelector(`[data-mu-id="${id}"]`);
+            if (el) {
+                // @ts-ignore
+                el[prop] = value;
+            }
+        }
+        this._propsQueue = [];
+    }
+    flushEvents() {
+        for (const [id, type, handler] of this._eventQueue) {
+            const el = this.container.querySelector(`[data-mu-id="${id}"]`);
+            if (el) {
+                // Bind handler to this component instance to ensure 'this' works in methods
+                el.addEventListener(type, handler.bind(this));
+            }
+        }
+        this._eventQueue = [];
+    }
+}
+// Helper to create functional components wrapped in the class system
+// Helper to create functional components wrapped in the class system
+// Supports both () => render and { setup() } signatures
+export function defineComponent(optionsOrSetup) {
+    return class UniversalComponent extends MuComponent {
+        constructor(container) {
+            super(container);
+            // setup() is called by super constructor
+        }
+        setup() {
+            let setupResult;
+            if (typeof optionsOrSetup === 'function') {
+                // It's a setup function returning render fn
+                setupResult = optionsOrSetup.call(this);
+            }
+            else if (typeof optionsOrSetup === 'object' && optionsOrSetup.setup) {
+                // It's an options object with setup()
+                setupResult = optionsOrSetup.setup.call(this);
+            }
+            // Handle result
+            if (typeof setupResult === 'function') {
+                // It's a render function
+                this.template = setupResult;
+            }
+            else if (setupResult && typeof setupResult === 'object') {
+                // It's bindings
+                Object.assign(this, setupResult);
+                // We assume template is assigned to prototype by compiler
+            }
+        }
+        template() {
+            return '';
+        }
+    };
+}

package/dist/core/hooks.js

@@ -0,0 +1,229 @@
+import { reactive, effect } from './reactive';
+import { persistent } from './vault';
+// Global context to track the current component instance
+let currentInstance = null;
+export function setCurrentInstance(instance) {
+    currentInstance = instance;
+}
+export function getCurrentInstance() {
+    return currentInstance;
+}
+// --- Mulan Unique Reactivity Hooks ---
+export function muState(initialValue) {
+    if (typeof initialValue === 'object' && initialValue !== null) {
+        return reactive(initialValue);
+    }
+    // Core reactive state container for primitives
+    return reactive({ value: initialValue });
+}
+export function muMemo(computeFn) {
+    const signal = reactive({ value: undefined });
+    const stop = effect(() => {
+        signal.value = computeFn();
+    });
+    const instance = getCurrentInstance();
+    if (instance) {
+        if (!instance._effects)
+            instance._effects = [];
+        instance._effects.push(stop);
+    }
+    return signal;
+}
+export function muEffect(fn) {
+    const stop = effect(fn);
+    const instance = getCurrentInstance();
+    if (instance) {
+        if (!instance._effects)
+            instance._effects = [];
+        instance._effects.push(stop);
+    }
+}
+// --- The "Mulan Cycle" (Lifecycle) ---
+export function onMuInit(fn) {
+    const instance = getCurrentInstance();
+    if (instance) {
+        if (!instance._hooks)
+            instance._hooks = {};
+        if (!instance._hooks.onMuInit)
+            instance._hooks.onMuInit = [];
+        instance._hooks.onMuInit.push(fn);
+    }
+    else {
+        console.warn('onMuInit called outside of component setup context.');
+    }
+}
+export function onMuMount(fn) {
+    // New hook for when component is actually in DOM (simulated for now via update)
+    const instance = getCurrentInstance();
+    if (instance) {
+        if (!instance._hooks)
+            instance._hooks = {};
+        if (!instance._hooks.onMuMount)
+            instance._hooks.onMuMount = [];
+        instance._hooks.onMuMount.push(fn);
+    }
+}
+export function onMuDestroy(fn) {
+    const instance = getCurrentInstance();
+    if (instance) {
+        if (!instance._hooks)
+            instance._hooks = {};
+        if (!instance._hooks.onMuDestroy)
+            instance._hooks.onMuDestroy = [];
+        instance._hooks.onMuDestroy.push(fn);
+    }
+}
+/**
+ * onMuIdle - The "Environment Life" Hook.
+ * Executes heavy logic ONLY when the browser is taking a nap (idle).
+ */
+export function onMuIdle(fn) {
+    const instance = getCurrentInstance();
+    // Polyfill for Safari/Old Browsers
+    const requestIdleCallback = window.requestIdleCallback || function (cb) {
+        return setTimeout(() => {
+            cb({
+                didTimeout: false,
+                timeRemaining: function () { return 50; }
+            });
+        }, 1);
+    };
+    const cancelIdleCallback = window.cancelIdleCallback || function (id) {
+        clearTimeout(id);
+    };
+    const idleId = requestIdleCallback(() => {
+        fn();
+    });
+    // Auto-cleanup if component dies before idle time
+    if (instance) {
+        onMuDestroy(() => {
+            cancelIdleCallback(idleId);
+        });
+    }
+}
+/**
+ * onMuResume - The "Tab Life" Hook.
+ * Executes when the user switches BACK to this tab.
+ * Perfect for refreshing data or resuming animations to save battery.
+ */
+export function onMuResume(fn) {
+    const handler = () => {
+        if (document.visibilityState === 'visible') {
+            fn();
+        }
+    };
+    document.addEventListener('visibilitychange', handler);
+    onMuDestroy(() => document.removeEventListener('visibilitychange', handler));
+}
+/**
+ * onMuShake - The "Physical Life" Hook.
+ * Executes when the device is shaken.
+ * Usage: Undo, Refresh, or "Rage Quit" easter eggs.
+ */
+export function onMuShake(fn) {
+    // Threshold for shake detection
+    const threshold = 15;
+    let lastX = 0, lastY = 0, lastZ = 0;
+    let lastTime = 0;
+    const handler = (e) => {
+        const current = e.accelerationIncludingGravity;
+        if (!current)
+            return;
+        const time = Date.now();
+        if ((time - lastTime) > 100) {
+            const diffTime = time - lastTime;
+            lastTime = time;
+            const x = current.x || 0;
+            const y = current.y || 0;
+            const z = current.z || 0;
+            const speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
+            if (speed > threshold) {
+                fn();
+            }
+            lastX = x;
+            lastY = y;
+            lastZ = z;
+        }
+    };
+    if (window.DeviceMotionEvent) {
+        window.addEventListener('devicemotion', handler);
+        onMuDestroy(() => window.removeEventListener('devicemotion', handler));
+    }
+    else {
+        console.warn("[MulanJS] Device Motion not supported on this device.");
+    }
+}
+/**
+ * onMuVoice - The "Sound Life" Hook.
+ * Executes when a specific word is spoken.
+ * @param command The word to listen for (e.g., "save", "next")
+ * @param fn The action to take
+ */
+export function onMuVoice(command, fn) {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+        console.warn("[MulanJS] Voice Control (Web Speech API) not supported in this browser.");
+        return;
+    }
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.lang = 'en-US';
+    recognition.interimResults = false;
+    recognition.onresult = (event) => {
+        const last = event.results.length - 1;
+        const spoken = event.results[last][0].transcript.trim().toLowerCase();
+        console.log(`[Mulan Voice] Heard: "${spoken}"`);
+        if (spoken.includes(command.toLowerCase())) {
+            fn();
+        }
+    };
+    recognition.start();
+    // Auto-restart if it stops (Continuous listening)
+    recognition.onend = () => {
+        // Simple check to see if we should still be listening
+        // In a real app we might want more control
+        // recognition.start(); 
+    };
+    onMuDestroy(() => {
+        recognition.stop();
+    });
+}
+// --- "Outside The Box" Hooks (Mulan Exclusives) ---
+/**
+ * muGeom - Tracks window or element dimensions reactively.
+ */
+export function muGeom() {
+    const dims = muState({ width: window.innerWidth, height: window.innerHeight });
+    const handler = () => {
+        dims.width = window.innerWidth;
+        dims.height = window.innerHeight;
+    };
+    window.addEventListener('resize', handler);
+    // Auto-cleanup
+    onMuDestroy(() => {
+        window.removeEventListener('resize', handler);
+    });
+    return dims;
+}
+/**
+ * muPulse - Reactive network status.
+ */
+export function muPulse() {
+    const status = muState({ online: navigator.onLine });
+    const setOnline = () => status.online = true;
+    const setOffline = () => status.online = false;
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+    onMuDestroy(() => {
+        window.removeEventListener('online', setOnline);
+        window.removeEventListener('offline', setOffline);
+    });
+    return status;
+}
+/**
+ * muVault - Secure reactive LocalStorage wrapper.
+ * Powered by the Iron Fortress persistent primitive.
+ */
+export function muVault(key, initial, options = {}) {
+    return persistent(key, initial, options);
+}