@noego/wood 0.0.1

package/dist/window/window_state_store.d.cts

@@ -0,0 +1,39 @@
+interface WindowBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    isMaximized: boolean;
+    isFullScreen: boolean;
+}
+type WindowStateFile = Record<string, WindowBounds>;
+/** DI interface for Electron's `screen` module. */
+interface ScreenLike {
+    getAllDisplays(): Array<{
+        bounds: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }>;
+}
+declare class WindowStateStore {
+    private state;
+    private filePath;
+    private screen;
+    private debounceTimers;
+    constructor();
+    setApplicationRoot(path: string): void;
+    setUserDataPath(path: string): void;
+    setScreen(screen: ScreenLike): void;
+    getBounds(windowId: string): WindowBounds | null;
+    updateBoundsDebounced(windowId: string, bounds: WindowBounds): void;
+    saveBoundsSync(windowId: string, bounds: WindowBounds): void;
+    private ensureConfigured;
+    private load;
+    private save;
+    private isVisibleOnAnyDisplay;
+}
+
+export { type ScreenLike, type WindowBounds, type WindowStateFile, WindowStateStore };

package/dist/window/window_state_store.d.ts

@@ -0,0 +1,39 @@
+interface WindowBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    isMaximized: boolean;
+    isFullScreen: boolean;
+}
+type WindowStateFile = Record<string, WindowBounds>;
+/** DI interface for Electron's `screen` module. */
+interface ScreenLike {
+    getAllDisplays(): Array<{
+        bounds: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }>;
+}
+declare class WindowStateStore {
+    private state;
+    private filePath;
+    private screen;
+    private debounceTimers;
+    constructor();
+    setApplicationRoot(path: string): void;
+    setUserDataPath(path: string): void;
+    setScreen(screen: ScreenLike): void;
+    getBounds(windowId: string): WindowBounds | null;
+    updateBoundsDebounced(windowId: string, bounds: WindowBounds): void;
+    saveBoundsSync(windowId: string, bounds: WindowBounds): void;
+    private ensureConfigured;
+    private load;
+    private save;
+    private isVisibleOnAnyDisplay;
+}
+
+export { type ScreenLike, type WindowBounds, type WindowStateFile, WindowStateStore };

package/dist/window/window_state_store.js

@@ -0,0 +1,105 @@
+import { readFileSync, writeFileSync, mkdirSync } from "fs";
+import { join, dirname } from "path";
+import { getLogger } from "@noego/logger";
+import { getApplicationRoot } from "../runtime/application_root.js";
+const logger = getLogger("wood:window-state");
+class WindowStateStore {
+  constructor() {
+    this.state = {};
+    this.filePath = null;
+    this.screen = null;
+    this.debounceTimers = /* @__PURE__ */ new Map();
+    this.ensureConfigured();
+  }
+  setApplicationRoot(path) {
+    this.filePath = join(path, "window-state.json");
+    this.load();
+  }
+  setUserDataPath(path) {
+    this.setApplicationRoot(join(path, "wood-settings"));
+  }
+  setScreen(screen) {
+    this.screen = screen;
+  }
+  getBounds(windowId) {
+    this.ensureConfigured();
+    const bounds = this.state[windowId];
+    if (!bounds) return null;
+    if (!this.isVisibleOnAnyDisplay(bounds)) return null;
+    return bounds;
+  }
+  updateBoundsDebounced(windowId, bounds) {
+    this.ensureConfigured();
+    this.state[windowId] = bounds;
+    const existing = this.debounceTimers.get(windowId);
+    if (existing) clearTimeout(existing);
+    this.debounceTimers.set(
+      windowId,
+      setTimeout(() => {
+        this.debounceTimers.delete(windowId);
+        this.save();
+      }, 300)
+    );
+  }
+  saveBoundsSync(windowId, bounds) {
+    this.ensureConfigured();
+    const existing = this.debounceTimers.get(windowId);
+    if (existing) {
+      clearTimeout(existing);
+      this.debounceTimers.delete(windowId);
+    }
+    this.state[windowId] = bounds;
+    this.save();
+  }
+  ensureConfigured() {
+    if (this.filePath) {
+      return;
+    }
+    const root = getApplicationRoot();
+    if (root) {
+      this.setApplicationRoot(root);
+    }
+  }
+  load() {
+    if (!this.filePath) return;
+    try {
+      const raw = readFileSync(this.filePath, "utf-8");
+      this.state = JSON.parse(raw);
+      logger.debug(`Loaded window state from ${this.filePath}`);
+    } catch {
+      this.state = {};
+    }
+  }
+  save() {
+    if (!this.filePath) return;
+    try {
+      mkdirSync(dirname(this.filePath), { recursive: true });
+      writeFileSync(this.filePath, JSON.stringify(this.state, null, 2), "utf-8");
+    } catch (err) {
+      logger.warn(`Failed to save window state: ${err}`);
+    }
+  }
+  isVisibleOnAnyDisplay(bounds) {
+    if (!this.screen) return true;
+    const displays = this.screen.getAllDisplays();
+    if (displays.length === 0) return true;
+    const MIN_OVERLAP = 100;
+    for (const display of displays) {
+      const db = display.bounds;
+      const overlapX = Math.max(
+        0,
+        Math.min(bounds.x + bounds.width, db.x + db.width) - Math.max(bounds.x, db.x)
+      );
+      const overlapY = Math.max(
+        0,
+        Math.min(bounds.y + bounds.height, db.y + db.height) - Math.max(bounds.y, db.y)
+      );
+      if (overlapX >= MIN_OVERLAP && overlapY >= MIN_OVERLAP) return true;
+    }
+    return false;
+  }
+}
+export {
+  WindowStateStore
+};
+//# sourceMappingURL=window_state_store.js.map

package/dist/window/window_state_store.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/window/window_state_store.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync } from 'fs';\nimport { join, dirname } from 'path';\nimport { getLogger } from '@noego/logger';\nimport { getApplicationRoot } from '../runtime/application_root.js';\n\nconst logger = getLogger('wood:window-state');\n\nexport interface WindowBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  isMaximized: boolean;\n  isFullScreen: boolean;\n}\n\nexport type WindowStateFile = Record<string, WindowBounds>;\n\n/** DI interface for Electron's `screen` module. */\nexport interface ScreenLike {\n  getAllDisplays(): Array<{ bounds: { x: number; y: number; width: number; height: number } }>;\n}\n\nexport class WindowStateStore {\n  private state: WindowStateFile = {};\n  private filePath: string | null = null;\n  private screen: ScreenLike | null = null;\n  private debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();\n\n  constructor() {\n    this.ensureConfigured();\n  }\n\n  setApplicationRoot(path: string): void {\n    this.filePath = join(path, 'window-state.json');\n    this.load();\n  }\n\n  setUserDataPath(path: string): void {\n    this.setApplicationRoot(join(path, 'wood-settings'));\n  }\n\n  setScreen(screen: ScreenLike): void {\n    this.screen = screen;\n  }\n\n  getBounds(windowId: string): WindowBounds | null {\n    this.ensureConfigured();\n\n    const bounds = this.state[windowId];\n    if (!bounds) return null;\n    if (!this.isVisibleOnAnyDisplay(bounds)) return null;\n    return bounds;\n  }\n\n  updateBoundsDebounced(windowId: string, bounds: WindowBounds): void {\n    this.ensureConfigured();\n\n    this.state[windowId] = bounds;\n\n    const existing = this.debounceTimers.get(windowId);\n    if (existing) clearTimeout(existing);\n\n    this.debounceTimers.set(\n      windowId,\n      setTimeout(() => {\n        this.debounceTimers.delete(windowId);\n        this.save();\n      }, 300),\n    );\n  }\n\n  saveBoundsSync(windowId: string, bounds: WindowBounds): void {\n    this.ensureConfigured();\n\n    // Flush any pending debounce for this window\n    const existing = this.debounceTimers.get(windowId);\n    if (existing) {\n      clearTimeout(existing);\n      this.debounceTimers.delete(windowId);\n    }\n\n    this.state[windowId] = bounds;\n    this.save();\n  }\n\n  private ensureConfigured(): void {\n    if (this.filePath) {\n      return;\n    }\n\n    const root = getApplicationRoot();\n    if (root) {\n      this.setApplicationRoot(root);\n    }\n  }\n\n  private load(): void {\n    if (!this.filePath) return;\n    try {\n      const raw = readFileSync(this.filePath, 'utf-8');\n      this.state = JSON.parse(raw) as WindowStateFile;\n      logger.debug(`Loaded window state from ${this.filePath}`);\n    } catch {\n      this.state = {};\n    }\n  }\n\n  private save(): void {\n    if (!this.filePath) return;\n    try {\n      mkdirSync(dirname(this.filePath), { recursive: true });\n      writeFileSync(this.filePath, JSON.stringify(this.state, null, 2), 'utf-8');\n    } catch (err) {\n      logger.warn(`Failed to save window state: ${err}`);\n    }\n  }\n\n  private isVisibleOnAnyDisplay(bounds: WindowBounds): boolean {\n    if (!this.screen) return true;\n\n    const displays = this.screen.getAllDisplays();\n    if (displays.length === 0) return true;\n\n    const MIN_OVERLAP = 100;\n\n    for (const display of displays) {\n      const db = display.bounds;\n      const overlapX = Math.max(\n        0,\n        Math.min(bounds.x + bounds.width, db.x + db.width) - Math.max(bounds.x, db.x),\n      );\n      const overlapY = Math.max(\n        0,\n        Math.min(bounds.y + bounds.height, db.y + db.height) - Math.max(bounds.y, db.y),\n      );\n      if (overlapX >= MIN_OVERLAP && overlapY >= MIN_OVERLAP) return true;\n    }\n\n    return false;\n  }\n}\n"],"mappings":"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","names":[]}

package/loaders/loader.mjs

@@ -0,0 +1,46 @@
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import { readFile } from 'fs/promises';
+import { compile } from 'svelte/compiler';
+
+function resolveConsumerSvelteSpecifier(specifier) {
+  try {
+    const consumerRequire = createRequire(path.resolve(process.cwd(), 'package.json'));
+    const resolvedPath = consumerRequire.resolve(specifier);
+    return pathToFileURL(resolvedPath).href;
+  } catch {
+    return null;
+  }
+}
+
+export async function resolve(specifier, context, defaultResolve) {
+  if (specifier === 'svelte' || specifier.startsWith('svelte/')) {
+    const consumerUrl = resolveConsumerSvelteSpecifier(specifier);
+    if (consumerUrl) {
+      return {
+        url: consumerUrl,
+        shortCircuit: true,
+      };
+    }
+  }
+
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function load(url, context, defaultLoad) {
+  if (url.endsWith('.svelte')) {
+    const filePath = new URL(url).pathname;
+    const source = await readFile(filePath, 'utf8');
+    const { js } = compile(source, {
+      filename: filePath,
+      generate: 'ssr', // For server-side rendering
+    });
+    return {
+      format: 'module',
+      source: js.code,
+      shortCircuit: true, // Prevents further loader processing
+    };
+  }
+  return defaultLoad(url, context, defaultLoad);
+}

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@noego/wood",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Shavauhn Gabay",
+  "license": "ISC",
+  "bin": {
+    "axe": "./bin/axe.js",
+    "stick": "./bin/stick.js",
+    "wood": "./bin/wood.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "loaders",
+    "src/stick/WoodRecursiveRender.svelte",
+    "src/components/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./electron": {
+      "types": "./dist/electron/index.d.ts",
+      "require": "./dist/electron/index.cjs",
+      "import": "./dist/electron/index.js",
+      "default": "./dist/electron/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "require": "./dist/testing/index.cjs",
+      "import": "./dist/testing/index.js",
+      "default": "./dist/testing/index.js"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "require": "./dist/client/index.cjs",
+      "import": "./dist/client/index.js",
+      "default": "./dist/client/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "require": "./dist/navigation/index.cjs",
+      "import": "./dist/navigation/index.js",
+      "default": "./dist/navigation/index.js"
+    },
+    "./ipc": {
+      "types": "./dist/ipc/index.d.ts",
+      "require": "./dist/ipc/index.cjs",
+      "import": "./dist/ipc/index.js",
+      "default": "./dist/ipc/index.js"
+    },
+    "./main": {
+      "types": "./dist/main/index.d.ts",
+      "require": "./dist/main/index.cjs",
+      "import": "./dist/main/index.js",
+      "default": "./dist/main/index.js"
+    },
+    "./stick": {
+      "types": "./dist/stick/index.d.ts",
+      "require": "./dist/stick/index.cjs",
+      "import": "./dist/stick/index.js",
+      "default": "./dist/stick/index.js"
+    },
+    "./recursive-render": "./src/components/WoodRecursiveRender.svelte",
+    "./navigation-shell": "./src/components/NavigationShell.svelte",
+    "./components": "./src/components/index.js",
+    "./loader": "./loaders/loader.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build && npm run typecheck && npm test"
+  },
+  "dependencies": {
+    "@noego/ioc": "^0.2.3",
+    "@noego/stitch": "^1.0.3",
+    "@noego/logger": "^0.0.2",
+    "ajv": "^8.x",
+    "ajv-formats": "^3.x",
+    "js-yaml": "^4.x",
+    "chokidar": "^4.x",
+    "rxjs": "^7.x",
+    "path-to-regexp": "^8.x",
+    "glob": "^11.x"
+  },
+  "peerDependencies": {
+    "svelte": "^5.x",
+    "electron": ">=28.0.0",
+    "playwright": "^1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "@types/node": "^20.10.4",
+    "@types/js-yaml": "^4.x",
+    "vitest": "^3.x",
+    "electron-vite": "^2.x",
+    "electron-builder": "^25.x",
+    "esbuild": "^0.25.x",
+    "playwright": "^1.40.0"
+  }
+}

package/src/components/ContextMenuProvider.svelte

@@ -0,0 +1,145 @@
+<script>
+  import { onMount } from 'svelte';
+  import { executeCallback } from './contextMenu.js';
+
+  /** @type {import('svelte').Snippet<[{ items: any[], close: () => void }]> | undefined} */
+  let { menu, children } = $props();
+
+  let visible = $state(false);
+  let position = $state({ x: 0, y: 0 });
+  let items = $state([]);
+  const WOOD_INTERNAL_BRIDGE_KEY = '__NOEGO_WOOD_BRIDGE__';
+
+  function getBridge() {
+    const bridge = window[WOOD_INTERNAL_BRIDGE_KEY];
+    if (!bridge) {
+      throw new Error(`Wood bridge "${WOOD_INTERNAL_BRIDGE_KEY}" not found.`);
+    }
+    return bridge;
+  }
+
+  function close() {
+    visible = false;
+    items = [];
+  }
+
+  function resolveItems(rawItems) {
+    return rawItems.map(item => {
+      if (item.type === 'separator') {
+        return { type: 'separator', label: '', disabled: false, execute: () => {} };
+      }
+      return {
+        label: item.label ?? '',
+        disabled: item.disabled ?? false,
+        execute: () => {
+          if (item._callbackId) {
+            executeCallback(item._callbackId);
+          } else if (item.action) {
+            getBridge().__contextMenu.show({
+              items: [item],
+              position,
+            });
+          }
+          close();
+        },
+      };
+    });
+  }
+
+  onMount(() => {
+    const bridge = getBridge();
+    // Listen for __contextMenu:show push events (custom mode)
+    const unsubShow = bridge.on('__contextMenu:show', (event) => {
+      const data = event;
+      position = data.position;
+      items = resolveItems(data.items);
+      visible = true;
+    });
+
+    // Listen for __contextMenu:callback push events (native mode callback dispatch)
+    const unsubCallback = bridge.on('__contextMenu:callback', (callbackId) => {
+      if (typeof callbackId === 'string') {
+        executeCallback(callbackId);
+      }
+    });
+
+    // Dismiss on click-away
+    function onClickAway() {
+      if (visible) close();
+    }
+    document.addEventListener('click', onClickAway);
+
+    // Dismiss on Escape
+    function onEscape(e) {
+      if (e.key === 'Escape' && visible) close();
+    }
+    document.addEventListener('keydown', onEscape);
+
+    return () => {
+      unsubShow();
+      unsubCallback();
+      document.removeEventListener('click', onClickAway);
+      document.removeEventListener('keydown', onEscape);
+    };
+  });
+</script>
+
+{@render children()}
+
+{#if visible}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="wood-context-menu-overlay"
+    onclick|stopPropagation={close}
+    onkeydown={() => {}}
+    style="position:fixed;inset:0;z-index:999998;"
+  >
+    <div
+      style="position:fixed;left:{position.x}px;top:{position.y}px;z-index:999999;"
+      onclick|stopPropagation={() => {}}
+      onkeydown={() => {}}
+    >
+      {#if menu}
+        {@render menu({ items, close })}
+      {:else}
+        <div class="wood-context-menu-default" style="
+          background: #fff;
+          border: 1px solid #ccc;
+          border-radius: 6px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+          padding: 4px 0;
+          min-width: 160px;
+          font-family: system-ui, sans-serif;
+          font-size: 13px;
+        ">
+          {#each items as item}
+            {#if item.type === 'separator'}
+              <hr style="margin: 4px 0; border: none; border-top: 1px solid #e5e5e5;" />
+            {:else}
+              <button
+                disabled={item.disabled}
+                onclick={() => item.execute()}
+                style="
+                  display: block;
+                  width: 100%;
+                  text-align: left;
+                  padding: 6px 12px;
+                  background: none;
+                  border: none;
+                  cursor: {item.disabled ? 'default' : 'pointer'};
+                  color: {item.disabled ? '#999' : '#333'};
+                  font-size: inherit;
+                  font-family: inherit;
+                "
+                onmouseenter={(e) => { if (!item.disabled) e.currentTarget.style.background = '#f0f0f0'; }}
+                onmouseleave={(e) => { e.currentTarget.style.background = 'none'; }}
+              >
+                {item.label}
+              </button>
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}