juxscript 1.0.62 → 1.0.63

package/lib/componentsv2/base/State.js

@@ -0,0 +1,68 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+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 _State_instances, _State_value, _State_subscribers, _State_history, _State_future, _State_notify;
+/**
+ * REGINALD'S LEDGER
+ * A protected reactive container for atomic state management.
+ */
+export class State {
+    constructor(initialValue) {
+        _State_instances.add(this);
+        _State_value.set(this, void 0);
+        _State_subscribers.set(this, new Set());
+        _State_history.set(this, []);
+        _State_future.set(this, []);
+        __classPrivateFieldSet(this, _State_value, initialValue, "f");
+    }
+    get value() {
+        return JSON.parse(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f")));
+    }
+    /**
+     * Access the timeline of past states (The Ledger).
+     */
+    get history() {
+        return [...__classPrivateFieldGet(this, _State_history, "f")];
+    }
+    set(newValue) {
+        // Snap state serially before change
+        __classPrivateFieldGet(this, _State_history, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f")));
+        __classPrivateFieldSet(this, _State_future, [], "f"); // Clear future timeline on new divergence
+        __classPrivateFieldSet(this, _State_value, newValue, "f");
+        __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
+    }
+    rollback() {
+        const previous = __classPrivateFieldGet(this, _State_history, "f").pop();
+        if (previous !== undefined) {
+            __classPrivateFieldGet(this, _State_future, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f"))); // Save current for redo
+            __classPrivateFieldSet(this, _State_value, JSON.parse(previous), "f");
+            __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
+        }
+    }
+    rollforward() {
+        const next = __classPrivateFieldGet(this, _State_future, "f").pop();
+        if (next !== undefined) {
+            __classPrivateFieldGet(this, _State_history, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f"))); // Save current for undo
+            __classPrivateFieldSet(this, _State_value, JSON.parse(next), "f");
+            __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
+        }
+    }
+    subscribe(callback) {
+        __classPrivateFieldGet(this, _State_subscribers, "f").add(callback);
+        callback(this.value); // Immediate handshake
+        return () => __classPrivateFieldGet(this, _State_subscribers, "f").delete(callback);
+    }
+}
+_State_value = new WeakMap(), _State_subscribers = new WeakMap(), _State_history = new WeakMap(), _State_future = new WeakMap(), _State_instances = new WeakSet(), _State_notify = function _State_notify() {
+    const currentValue = this.value;
+    __classPrivateFieldGet(this, _State_subscribers, "f").forEach(callback => callback(currentValue));
+};
+//# sourceMappingURL=State.js.map

package/lib/componentsv2/base/State.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.js","sourceRoot":"","sources":["State.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;GAGG;AACH,MAAM,OAAO,KAAK;IAMd,YAAY,YAAe;;QAL3B,+BAAU;QACV,6BAAwC,IAAI,GAAG,EAAE,EAAC;QAClD,yBAAqB,EAAE,EAAC;QACxB,wBAAoB,EAAE,EAAC;QAGnB,uBAAA,IAAI,gBAAU,YAAY,MAAA,CAAC;IAC/B,CAAC;IAED,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAC,CAAC;IACnD,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACP,OAAO,CAAC,GAAG,uBAAA,IAAI,sBAAS,CAAC,CAAC;IAC9B,CAAC;IAED,GAAG,CAAC,QAAW;QACX,oCAAoC;QACpC,uBAAA,IAAI,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAC,CAAC;QAChD,uBAAA,IAAI,iBAAW,EAAE,MAAA,CAAC,CAAC,0CAA0C;QAC7D,uBAAA,IAAI,gBAAU,QAAQ,MAAA,CAAC;QACvB,uBAAA,IAAI,uCAAQ,MAAZ,IAAI,CAAU,CAAC;IACnB,CAAC;IAED,QAAQ;QACJ,MAAM,QAAQ,GAAG,uBAAA,IAAI,sBAAS,CAAC,GAAG,EAAE,CAAC;QACrC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YACzB,uBAAA,IAAI,qBAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAC,CAAC,CAAC,wBAAwB;YACxE,uBAAA,IAAI,gBAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAA,CAAC;YACnC,uBAAA,IAAI,uCAAQ,MAAZ,IAAI,CAAU,CAAC;QACnB,CAAC;IACL,CAAC;IAED,WAAW;QACP,MAAM,IAAI,GAAG,uBAAA,IAAI,qBAAQ,CAAC,GAAG,EAAE,CAAC;QAChC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACrB,uBAAA,IAAI,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAC,CAAC,CAAC,wBAAwB;YACzE,uBAAA,IAAI,gBAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAA,CAAC;YAC/B,uBAAA,IAAI,uCAAQ,MAAZ,IAAI,CAAU,CAAC;QACnB,CAAC;IACL,CAAC;IAED,SAAS,CAAC,QAA4B;QAClC,uBAAA,IAAI,0BAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,sBAAsB;QAC5C,OAAO,GAAG,EAAE,CAAC,uBAAA,IAAI,0BAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC;CAMJ;;IAHO,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;IAChC,uBAAA,IAAI,0BAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;AAClE,CAAC"}

package/lib/componentsv2/base/State.ts

@@ -0,0 +1,62 @@
+/**
+ * REGINALD'S LEDGER
+ * A protected reactive container for atomic state management.
+ */
+export class State<T> {
+    #value: T;
+    #subscribers: Set<(value: T) => void> = new Set();
+    #history: string[] = [];
+    #future: string[] = [];
+
+    constructor(initialValue: T) {
+        this.#value = initialValue;
+    }
+
+    get value(): T {
+        return JSON.parse(JSON.stringify(this.#value));
+    }
+
+    /**
+     * Access the timeline of past states (The Ledger).
+     */
+    get history(): string[] {
+        return [...this.#history];
+    }
+
+    set(newValue: T): void {
+        // Snap state serially before change
+        this.#history.push(JSON.stringify(this.#value));
+        this.#future = []; // Clear future timeline on new divergence
+        this.#value = newValue;
+        this.#notify();
+    }
+
+    rollback(): void {
+        const previous = this.#history.pop();
+        if (previous !== undefined) {
+            this.#future.push(JSON.stringify(this.#value)); // Save current for redo
+            this.#value = JSON.parse(previous);
+            this.#notify();
+        }
+    }
+
+    rollforward(): void {
+        const next = this.#future.pop();
+        if (next !== undefined) {
+            this.#history.push(JSON.stringify(this.#value)); // Save current for undo
+            this.#value = JSON.parse(next);
+            this.#notify();
+        }
+    }
+
+    subscribe(callback: (value: T) => void): () => void {
+        this.#subscribers.add(callback);
+        callback(this.value); // Immediate handshake
+        return () => this.#subscribers.delete(callback);
+    }
+
+    #notify(): void {
+        const currentValue = this.value;
+        this.#subscribers.forEach(callback => callback(currentValue));
+    }
+}

package/lib/componentsv2/grid/component.js

@@ -0,0 +1,41 @@
+import { GridEngine } from './engine.js';
+import { GridSkin } from './skin.js';
+export function Grid(id, options = {}) {
+    const engine = new GridEngine(id, options);
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+    const skin = new GridSkin(engine);
+    // Dynamic Augmentation
+    // @ts-ignore
+    engine.render = (targetId) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target)
+            skin.renderSkin(target);
+        return engine;
+    };
+    // @ts-ignore
+    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
+    // --- Structural API ---
+    // @ts-ignore
+    engine.rows = (config) => { engine.setRows(config); return engine; };
+    // @ts-ignore
+    engine.columns = (config) => { engine.setColumns(config); return engine; };
+    // @ts-ignore
+    engine.gap = (gap) => { engine.setGap(gap); return engine; };
+    // @ts-ignore
+    engine.width = (w) => { engine.setWidth(w); return engine; };
+    // @ts-ignore
+    engine.height = (h) => { engine.setHeight(h); return engine; };
+    // --- Tools ---
+    // @ts-ignore
+    engine.gridder = (active) => { engine.toggleGridder(active); return engine; };
+    // --- Helpers ---
+    // @ts-ignore
+    engine.getCellId = (row, col) => `${id}-${row}-${col}`;
+    return engine;
+}
+//# sourceMappingURL=component.js.map

package/lib/componentsv2/grid/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAoBrC,MAAM,UAAU,IAAI,CAAC,EAAU,EAAE,UAAuB,EAAE;IACtD,MAAM,MAAM,GAAG,IAAI,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAE3C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,aAAa;QACb,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;QAC5C,aAAa;QACb,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElC,uBAAuB;IAEvB,aAAa;IACb,MAAM,CAAC,MAAM,GAAG,CAAC,QAA8B,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3F,IAAI,MAAM;YAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACpC,OAAO,MAAuB,CAAC;IACnC,CAAC,CAAC;IAEF,aAAa;IACb,MAAM,CAAC,SAAS,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IAExD,yBAAyB;IACzB,aAAa;IACb,MAAM,CAAC,IAAI,GAAG,CAAC,MAAiB,EAAE,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IAChF,aAAa;IACb,MAAM,CAAC,OAAO,GAAG,CAAC,MAAiB,EAAE,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IACtF,aAAa;IACb,MAAM,CAAC,GAAG,GAAG,CAAC,GAAW,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IACrE,aAAa;IACb,MAAM,CAAC,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IACrE,aAAa;IACb,MAAM,CAAC,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IAEvE,gBAAgB;IAChB,aAAa;IACb,MAAM,CAAC,OAAO,GAAG,CAAC,MAAgB,EAAE,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IAExF,kBAAkB;IAClB,aAAa;IACb,MAAM,CAAC,SAAS,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;IAEvE,OAAO,MAAuB,CAAC;AACnC,CAAC"}

package/lib/componentsv2/grid/component.ts

@@ -0,0 +1,67 @@
+import { GridEngine, GridOptions, GridInput } from './engine.js';
+import { GridSkin } from './skin.js';
+
+export type GridComponent = GridEngine & {
+    render: (targetId: string | HTMLElement) => GridComponent;
+    injectCSS: (id: string, cssContent: string) => void;
+
+    // Structure
+    rows: (config: GridInput) => GridComponent;
+    columns: (config: GridInput) => GridComponent;
+    gap: (gap: string) => GridComponent;
+    width: (width: string) => GridComponent;
+    height: (height: string) => GridComponent;
+
+    // Tools
+    gridder: (active?: boolean) => GridComponent;
+
+    // Helpers
+    getCellId: (row: number, col: number) => string;
+};
+
+export function Grid(id: string, options: GridOptions = {}): GridComponent {
+    const engine = new GridEngine(id, options);
+
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+
+    const skin = new GridSkin(engine);
+
+    // Dynamic Augmentation
+
+    // @ts-ignore
+    engine.render = (targetId: string | HTMLElement) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target) skin.renderSkin(target);
+        return engine as GridComponent;
+    };
+
+    // @ts-ignore
+    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
+
+    // --- Structural API ---
+    // @ts-ignore
+    engine.rows = (config: GridInput) => { engine.setRows(config); return engine; };
+    // @ts-ignore
+    engine.columns = (config: GridInput) => { engine.setColumns(config); return engine; };
+    // @ts-ignore
+    engine.gap = (gap: string) => { engine.setGap(gap); return engine; };
+    // @ts-ignore
+    engine.width = (w: string) => { engine.setWidth(w); return engine; };
+    // @ts-ignore
+    engine.height = (h: string) => { engine.setHeight(h); return engine; };
+
+    // --- Tools ---
+    // @ts-ignore
+    engine.gridder = (active?: boolean) => { engine.toggleGridder(active); return engine; };
+
+    // --- Helpers ---
+    // @ts-ignore
+    engine.getCellId = (row: number, col: number) => `${id}-${row}-${col}`;
+
+    return engine as GridComponent;
+}

package/lib/componentsv2/grid/engine.js

@@ -0,0 +1,73 @@
+import { BaseEngine } from '../base/BaseEngine.js';
+export class GridEngine extends BaseEngine {
+    constructor(id, options = {}) {
+        super(id, options);
+    }
+    prepareState(id, options) {
+        return {
+            id,
+            classes: ['jux-grid'],
+            visible: true,
+            disabled: false,
+            loading: false,
+            attributes: {},
+            // FIX: Use standard private method instead of JS private '#' to allow access during super() call
+            rows: this.normalizeTracks(options.rows || 1),
+            columns: this.normalizeTracks(options.columns || 1),
+            gap: options.gap || '0',
+            boundaryWidth: options.width || '100%',
+            boundaryHeight: options.height || '100%',
+            gridder: options.gridder || false
+        };
+    }
+    // --- Helpers ---
+    /**
+     * helper: Normalizes simple numbers into full config arrays.
+     * Changed from #normalizeTracks to private normalizeTracks to avoid initialization errors
+     * when called via BaseEngine constructor -> prepareState.
+     */
+    normalizeTracks(input) {
+        if (typeof input === 'number') {
+            // Default to '1fr' for equal distribution
+            return Array(input).fill({ size: '1fr' });
+        }
+        return input.map(t => ({
+            size: t.size || '1fr',
+            style: t.style,
+            class: t.class
+        }));
+    }
+    // --- Mutators ---
+    setRows(input) {
+        this.updateState({ rows: this.normalizeTracks(input) });
+        this.emit('layout:rows', { rows: this.state.rows });
+        return this;
+    }
+    setColumns(input) {
+        this.updateState({ columns: this.normalizeTracks(input) });
+        this.emit('layout:columns', { columns: this.state.columns });
+        return this;
+    }
+    setGap(gap) {
+        this.updateState({ gap });
+        this.emit('layout:gap', { gap });
+        return this;
+    }
+    setWidth(width) {
+        this.updateState({ boundaryWidth: width });
+        this.emit('layout:resize', { width });
+        return this;
+    }
+    setHeight(height) {
+        this.updateState({ boundaryHeight: height });
+        this.emit('layout:resize', { height });
+        return this;
+    }
+    toggleGridder(active) {
+        const next = active !== undefined ? active : !this.state.gridder;
+        this.updateState({ gridder: next });
+        this.emit('debug:gridder', { active: next });
+        return this;
+    }
+}
+//# sourceMappingURL=engine.js.map

package/lib/componentsv2/grid/engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["engine.ts"],"names":[],"mappings":"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"}

package/lib/componentsv2/grid/engine.ts

@@ -0,0 +1,110 @@
+import { BaseEngine, BaseState } from '../base/BaseEngine.js';
+
+export interface GridTrackConfig {
+    size?: string;  // CSS size (e.g. "20%", "1fr", "100px")
+    style?: string; // Inline styles for cells in this track
+    class?: string; // Classes for cells in this track
+}
+
+// Input can be a simple number (count) or array of configs
+export type GridInput = number | GridTrackConfig[];
+
+export interface GridState extends BaseState {
+    rows: GridTrackConfig[];
+    columns: GridTrackConfig[];
+    gap: string;
+    boundaryWidth: string;
+    boundaryHeight: string;
+    gridder: boolean; // Debug/Blueprinting mode
+}
+
+export interface GridOptions {
+    rows?: GridInput;
+    columns?: GridInput;
+    gap?: string;
+    width?: string;
+    height?: string;
+    gridder?: boolean;
+}
+
+export class GridEngine extends BaseEngine<GridState, GridOptions> {
+    constructor(id: string, options: GridOptions = {}) {
+        super(id, options);
+    }
+
+    protected prepareState(id: string, options: GridOptions): GridState {
+        return {
+            id,
+            classes: ['jux-grid'],
+            visible: true,
+            disabled: false,
+            loading: false,
+            attributes: {},
+            // FIX: Use standard private method instead of JS private '#' to allow access during super() call
+            rows: this.normalizeTracks(options.rows || 1),
+            columns: this.normalizeTracks(options.columns || 1),
+            gap: options.gap || '0',
+            boundaryWidth: options.width || '100%',
+            boundaryHeight: options.height || '100%',
+            gridder: options.gridder || false
+        };
+    }
+
+    // --- Helpers ---
+
+    /**
+     * helper: Normalizes simple numbers into full config arrays.
+     * Changed from #normalizeTracks to private normalizeTracks to avoid initialization errors
+     * when called via BaseEngine constructor -> prepareState.
+     */
+    private normalizeTracks(input: GridInput): GridTrackConfig[] {
+        if (typeof input === 'number') {
+            // Default to '1fr' for equal distribution
+            return Array(input).fill({ size: '1fr' });
+        }
+        return input.map(t => ({
+            size: t.size || '1fr',
+            style: t.style,
+            class: t.class
+        }));
+    }
+
+    // --- Mutators ---
+
+    setRows(input: GridInput): this {
+        this.updateState({ rows: this.normalizeTracks(input) });
+        this.emit('layout:rows', { rows: this.state.rows });
+        return this;
+    }
+
+    setColumns(input: GridInput): this {
+        this.updateState({ columns: this.normalizeTracks(input) });
+        this.emit('layout:columns', { columns: this.state.columns });
+        return this;
+    }
+
+    setGap(gap: string): this {
+        this.updateState({ gap });
+        this.emit('layout:gap', { gap });
+        return this;
+    }
+
+    setWidth(width: string): this {
+        this.updateState({ boundaryWidth: width });
+        this.emit('layout:resize', { width });
+        return this;
+    }
+
+    setHeight(height: string): this {
+        this.updateState({ boundaryHeight: height });
+        this.emit('layout:resize', { height });
+        return this;
+    }
+
+    toggleGridder(active?: boolean): this {
+        const next = active !== undefined ? active : !this.state.gridder;
+        this.updateState({ gridder: next });
+        this.emit('debug:gridder', { active: next });
+        return this;
+    }
+}

package/lib/componentsv2/grid/skin.js

@@ -0,0 +1,95 @@
+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 _GridSkin_cells;
+import { BaseSkin } from '../base/BaseSkin.js';
+export class GridSkin extends BaseSkin {
+    constructor(engine) {
+        super(engine);
+        _GridSkin_cells.set(this, new Map());
+    }
+    // ✅ Implements Contract: Points to ./structure.css at runtime
+    get structureCss() {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+    bindEvents(root) {
+        root.addEventListener('click', (e) => {
+            if (this.engine.state.gridder) {
+                const cell = e.target.closest('.jux-grid-cell');
+                if (cell && cell.id) {
+                    console.log(`[Ordinal Grid] Targeted Cell: #${cell.id}`);
+                }
+            }
+        });
+    }
+    updateSkin(state) {
+        if (!this.root)
+            return;
+        this.applySkinAttributes(this.root, state);
+        this.root.className = state.classes.join(' ');
+        // 1. Container Styles
+        this.root.style.width = state.boundaryWidth;
+        this.root.style.height = state.boundaryHeight;
+        this.root.style.gap = state.gap;
+        // CSS Grid Definitions
+        const rowSizes = state.rows.map(r => r.size).join(' ');
+        const colSizes = state.columns.map(c => c.size).join(' ');
+        this.root.style.gridTemplateRows = rowSizes;
+        this.root.style.gridTemplateColumns = colSizes;
+        // Toggle Debug Class
+        if (state.gridder) {
+            this.root.classList.add('jux-gridder-active');
+        }
+        else {
+            this.root.classList.remove('jux-gridder-active');
+        }
+        // 2. Structural Reconciliation
+        const validIds = new Set();
+        state.rows.forEach((rowConfig, rIndex) => {
+            state.columns.forEach((colConfig, cIndex) => {
+                const cellId = `${state.id}-${rIndex}-${cIndex}`;
+                validIds.add(cellId);
+                let cell = __classPrivateFieldGet(this, _GridSkin_cells, "f").get(cellId);
+                if (!cell) {
+                    cell = document.createElement('div');
+                    cell.id = cellId;
+                    cell.className = 'jux-grid-cell';
+                    cell.dataset.row = String(rIndex);
+                    cell.dataset.col = String(cIndex);
+                    const label = document.createElement('span');
+                    label.className = 'jux-grid-ordinal-label';
+                    label.textContent = `#${rIndex}-${cIndex}`;
+                    cell.appendChild(label);
+                    __classPrivateFieldGet(this, _GridSkin_cells, "f").set(cellId, cell);
+                    if (!this.root.contains(cell)) {
+                        this.root.appendChild(cell);
+                    }
+                }
+                cell.style.cssText = '';
+                cell.className = 'jux-grid-cell';
+                if (rowConfig.style)
+                    cell.style.cssText += rowConfig.style;
+                if (colConfig.style)
+                    cell.style.cssText += colConfig.style;
+                if (rowConfig.class)
+                    cell.classList.add(rowConfig.class);
+                if (colConfig.class)
+                    cell.classList.add(colConfig.class);
+            });
+        });
+        // 3. Cleanup Orphans
+        __classPrivateFieldGet(this, _GridSkin_cells, "f").forEach((cell, id) => {
+            if (!validIds.has(id)) {
+                cell.remove();
+                __classPrivateFieldGet(this, _GridSkin_cells, "f").delete(id);
+            }
+        });
+    }
+    createRoot() {
+        return document.createElement('div');
+    }
+}
+_GridSkin_cells = new WeakMap();
+//# sourceMappingURL=skin.js.map

package/lib/componentsv2/grid/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["skin.ts"],"names":[],"mappings":"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"}

package/lib/componentsv2/grid/skin.ts

@@ -0,0 +1,105 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { GridEngine, GridState } from './engine.js';
+
+export class GridSkin extends BaseSkin<GridState, GridEngine> {
+
+    #cells = new Map<string, HTMLElement>();
+
+    constructor(engine: GridEngine) {
+        super(engine);
+    }
+
+    // ✅ Implements Contract: Points to ./structure.css at runtime
+    protected get structureCss(): string {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+
+    protected bindEvents(root: HTMLElement): void {
+        root.addEventListener('click', (e) => {
+            if (this.engine.state.gridder) {
+                const cell = (e.target as HTMLElement).closest('.jux-grid-cell');
+                if (cell && cell.id) {
+                    console.log(`[Ordinal Grid] Targeted Cell: #${cell.id}`);
+                }
+            }
+        });
+    }
+
+    protected updateSkin(state: GridState): void {
+        if (!this.root) return;
+        this.applySkinAttributes(this.root, state);
+
+        this.root.className = state.classes.join(' ');
+
+        // 1. Container Styles
+        this.root.style.width = state.boundaryWidth;
+        this.root.style.height = state.boundaryHeight;
+        this.root.style.gap = state.gap;
+
+        // CSS Grid Definitions
+        const rowSizes = state.rows.map(r => r.size).join(' ');
+        const colSizes = state.columns.map(c => c.size).join(' ');
+
+        this.root.style.gridTemplateRows = rowSizes;
+        this.root.style.gridTemplateColumns = colSizes;
+
+        // Toggle Debug Class
+        if (state.gridder) {
+            this.root.classList.add('jux-gridder-active');
+        } else {
+            this.root.classList.remove('jux-gridder-active');
+        }
+
+        // 2. Structural Reconciliation
+        const validIds = new Set<string>();
+
+        state.rows.forEach((rowConfig, rIndex) => {
+            state.columns.forEach((colConfig, cIndex) => {
+                const cellId = `${state.id}-${rIndex}-${cIndex}`;
+                validIds.add(cellId);
+
+                let cell = this.#cells.get(cellId);
+
+                if (!cell) {
+                    cell = document.createElement('div');
+                    cell.id = cellId;
+                    cell.className = 'jux-grid-cell';
+                    cell.dataset.row = String(rIndex);
+                    cell.dataset.col = String(cIndex);
+
+                    const label = document.createElement('span');
+                    label.className = 'jux-grid-ordinal-label';
+                    label.textContent = `#${rIndex}-${cIndex}`;
+                    cell.appendChild(label);
+
+                    this.#cells.set(cellId, cell);
+
+                    if (!this.root!.contains(cell)) {
+                        this.root!.appendChild(cell);
+                    }
+                }
+
+                cell.style.cssText = '';
+                cell.className = 'jux-grid-cell';
+
+                if (rowConfig.style) cell.style.cssText += rowConfig.style;
+                if (colConfig.style) cell.style.cssText += colConfig.style;
+
+                if (rowConfig.class) cell.classList.add(rowConfig.class);
+                if (colConfig.class) cell.classList.add(colConfig.class);
+            });
+        });
+
+        // 3. Cleanup Orphans
+        this.#cells.forEach((cell, id) => {
+            if (!validIds.has(id)) {
+                cell.remove();
+                this.#cells.delete(id);
+            }
+        });
+    }
+
+    protected createRoot(): HTMLElement {
+        return document.createElement('div');
+    }
+}