@noego/wood 0.0.1

package/src/components/NavigationShell.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { setContext, onDestroy } from 'svelte';
+  import { getNavigation } from '@noego/wood/navigation';
+  import WoodRecursiveRender from './WoodRecursiveRender.svelte';
+
+  type ViewManifestEntry = {
+    key: string;
+    windowName: string;
+    pageName: string;
+    view: any;
+    layouts: any[];
+    [k: string]: unknown;
+  };
+
+  type CreateViewControllerFn = (entry: ViewManifestEntry) => Promise<unknown>;
+  type CreateLayoutControllersFn = (entry: ViewManifestEntry) => Promise<Array<unknown>>;
+  type GetViewManifestEntryFn = (viewKey: string) => ViewManifestEntry | null;
+  type WoodBridgeLike = {
+    __window?: {
+      open?: (windowId: string, options?: Record<string, unknown>) => Promise<unknown>;
+    };
+    __navigate?: (windowId: string, route: string) => Promise<unknown>;
+    on?: (channel: string, callback: (...args: unknown[]) => void) => (() => void);
+  };
+
+  const WOOD_INTERNAL_BRIDGE_KEY = '__NOEGO_WOOD_BRIDGE__';
+
+  let {
+    manifest,
+    initialEntry,
+    initialController,
+    initialLayoutControllers,
+    createViewControllerFn,
+    createLayoutControllersFn,
+    getViewManifestEntryFn,
+  }: {
+    manifest: Record<string, ViewManifestEntry>;
+    initialEntry: ViewManifestEntry;
+    initialController: unknown;
+    initialLayoutControllers: Array<unknown>;
+    createViewControllerFn: CreateViewControllerFn;
+    createLayoutControllersFn: CreateLayoutControllersFn;
+    getViewManifestEntryFn: GetViewManifestEntryFn;
+  } = $props();
+
+  let activeEntry = $state(initialEntry);
+  let activeController = $state(initialController);
+  let activeLayoutControllers: Array<unknown> = $state(initialLayoutControllers);
+  let activeParams: Record<string, unknown> = $state({});
+  let activeQuery: Record<string, unknown> = $state({});
+
+  let activePage = $derived({
+    key: activeEntry.key,
+    windowName: activeEntry.windowName,
+    pageName: activeEntry.pageName,
+    params: activeParams,
+    query: activeQuery,
+  });
+
+  const navigation = getNavigation();
+
+  function getWoodBridge(): WoodBridgeLike | null {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    const bridge = (window as unknown as Record<string, unknown>)[WOOD_INTERNAL_BRIDGE_KEY];
+    if (!bridge || typeof bridge !== 'object') {
+      return null;
+    }
+    return bridge as WoodBridgeLike;
+  }
+
+  async function navigateToAnotherWindow(entry: ViewManifestEntry): Promise<void> {
+    const bridge = getWoodBridge();
+    if (!bridge || !bridge.__window?.open || !bridge.__navigate) {
+      throw new Error(
+        'Wood bridge does not expose __window.open/__navigate. Regenerate preload with the latest @noego/wood.',
+      );
+    }
+
+    await bridge.__window.open(entry.windowName);
+    await bridge.__navigate(entry.windowName, entry.key);
+  }
+
+  async function navigateWithinCurrentWindow(
+    viewKey: string,
+    params?: Record<string, unknown>,
+    options?: { replace?: boolean },
+  ): Promise<void> {
+    const normalizedViewKey = viewKey.replace(',', '.');
+    const entry = getViewManifestEntryFn(normalizedViewKey);
+    if (!entry) {
+      throw new Error(`Unknown route "${normalizedViewKey}" in generated view manifest.`);
+    }
+
+    if (entry.windowName !== activeEntry.windowName) {
+      await navigateToAnotherWindow(entry);
+      return;
+    }
+
+    const p = (params ?? {}) as Record<string, string>;
+    if (options?.replace) {
+      navigation.replace(normalizedViewKey, p);
+    } else {
+      navigation.go(normalizedViewKey, p);
+    }
+  }
+
+  setContext('wood:navigate', (
+    viewKey: string,
+    params?: Record<string, unknown>,
+    options?: { replace?: boolean },
+  ) => {
+    void navigateWithinCurrentWindow(viewKey, params, options).catch((error) => {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error(`[wood] navigation failed: ${message}`);
+    });
+  });
+
+  function parseRoutePayload(payload: unknown): string | null {
+    if (typeof payload === 'string') {
+      return payload;
+    }
+    if (payload && typeof payload === 'object') {
+      const route = (payload as Record<string, unknown>).route;
+      if (typeof route === 'string') {
+        return route;
+      }
+    }
+    return null;
+  }
+
+  let initialFire = true;
+
+  const unsubscribe = navigation.subscribe(async (navEntry) => {
+    if (initialFire) {
+      initialFire = false;
+      if (navEntry) {
+        activeParams = { ...navEntry.params };
+        activeQuery = { ...navEntry.query };
+      }
+      return;
+    }
+
+    if (!navEntry) return;
+
+    const newKey = navEntry.page;
+    const entry = getViewManifestEntryFn(newKey);
+    if (!entry) return;
+
+    if (newKey === activeEntry.key) {
+      activeParams = { ...navEntry.params };
+      activeQuery = { ...navEntry.query };
+      return;
+    }
+
+    const [controller, layoutControllers] = await Promise.all([
+      createViewControllerFn(entry),
+      createLayoutControllersFn(entry),
+    ]);
+
+    activeEntry = entry;
+    activeController = controller;
+    activeLayoutControllers = layoutControllers;
+    activeParams = { ...navEntry.params };
+    activeQuery = { ...navEntry.query };
+  });
+
+  const bridge = getWoodBridge();
+  const unsubscribeWindowNavigate = bridge?.on?.('__navigate', (payload: unknown) => {
+    const route = parseRoutePayload(payload);
+    if (!route) {
+      return;
+    }
+
+    const entry = getViewManifestEntryFn(route);
+    if (!entry) {
+      return;
+    }
+
+    if (entry.windowName !== activeEntry.windowName) {
+      return;
+    }
+
+    navigation.replace(route, {}, {});
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+    unsubscribeWindowNavigate?.();
+  });
+</script>
+
+{#key activeEntry.key}
+  <WoodRecursiveRender
+    layouts={activeEntry.layouts}
+    layoutControllers={activeLayoutControllers}
+    view={activeEntry.view}
+    controller={activeController}
+    params={activeParams}
+    query={activeQuery}
+    page={activePage}
+  />
+{/key}

package/src/components/WoodRecursiveRender.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { PageController } from '../client/controller_contract';
+
+  let {
+    layouts = [],
+    layoutControllers = [],
+    view = null,
+    controller = undefined,
+    params = {},
+    query = {},
+    page = {},
+  } = $props<{
+    layouts?: any[];
+    layoutControllers?: Array<PageController<any, any, any> | undefined>;
+    view?: any;
+    controller?: PageController<any, any, any>;
+    params?: Record<string, unknown>;
+    query?: Record<string, unknown>;
+    page?: Record<string, unknown>;
+  }>();
+
+  let topLayout = $derived(layouts[0]);
+  let childLayouts = $derived(layouts.slice(1));
+  let topLayoutController = $derived(layoutControllers[0]);
+  let childLayoutControllers = $derived(layoutControllers.slice(1));
+  let ViewComponent = $derived(view);
+
+  let topState = $derived(topLayoutController?.state);
+  let topInput = $derived(topLayoutController?.input);
+  let topEvents = $derived(topLayoutController?.events);
+
+  let viewState = $derived(controller?.state);
+  let viewInput = $derived(controller?.input);
+  let viewEvents = $derived(controller?.events);
+</script>
+
+{#if childLayouts.length > 0}
+  {#snippet nestedChild()}
+    <svelte:self
+      layouts={childLayouts}
+      layoutControllers={childLayoutControllers}
+      {view}
+      {controller}
+      {params}
+      {query}
+      {page}
+    />
+  {/snippet}
+  <svelte:component
+    this={topLayout}
+    state={topState}
+    input={topInput}
+    events={topEvents}
+    {params}
+    {query}
+    {page}
+    children={nestedChild}
+  />
+{:else if topLayout}
+  {#snippet viewChild()}
+    <svelte:component
+      this={ViewComponent}
+      state={viewState}
+      input={viewInput}
+      events={viewEvents}
+      {params}
+      {query}
+      {page}
+    />
+  {/snippet}
+  <svelte:component
+    this={topLayout}
+    state={topState}
+    input={topInput}
+    events={topEvents}
+    {params}
+    {query}
+    {page}
+    children={viewChild}
+  />
+{:else}
+  <svelte:component
+    this={ViewComponent}
+    state={viewState}
+    input={viewInput}
+    events={viewEvents}
+    {params}
+    {query}
+    {page}
+  />
+{/if}

package/src/components/contextMenu.ts

@@ -0,0 +1,228 @@
+/**
+ * Svelte action + types for the `use:contextMenu` directive.
+ *
+ * Prevents the native contextmenu event, builds smart defaults when
+ * `defaults: true`, serializes items (storing callbacks in a module-level
+ * map), and calls the internal Wood bridge `__contextMenu.show()`.
+ */
+const WOOD_INTERNAL_BRIDGE_KEY = '__NOEGO_WOOD_BRIDGE__';
+
+type InternalWoodBridge = {
+  __contextMenu: {
+    show(data: { items: unknown[]; position: { x: number; y: number } }): Promise<void>;
+  };
+};
+
+// ── Types ────────────────────────────────────────────────────────────
+
+/** Individual menu entry. */
+export type ContextMenuEntry =
+  | { label: string; action: string; data?: string; disabled?: boolean }
+  | { label: string; action: () => void; disabled?: boolean }
+  | { type: 'separator' };
+
+/** What the developer passes to `use:contextMenu`. */
+/** Overrides applied to default items by action key. */
+export type ContextMenuOverride = { label?: string; disabled?: boolean };
+
+export type ContextMenuParam =
+  | ContextMenuEntry[]
+  | {
+      defaults?: boolean;
+      remove?: string[];
+      overrides?: Record<string, ContextMenuOverride>;
+      items?: ContextMenuEntry[];
+    };
+
+/** Resolved item shape passed to the `menu` snippet. */
+export interface ResolvedMenuItem {
+  label: string;
+  disabled: boolean;
+  type?: 'separator';
+  execute: () => void;
+}
+
+// ── Callback map ─────────────────────────────────────────────────────
+
+const callbacks = new Map<string, () => void>();
+let idCounter = 0;
+
+function nextId(): string {
+  return `__cb_${++idCounter}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+/**
+ * Execute a stored callback by its ID and remove it from the map.
+ * Called from `ContextMenuProvider` when it receives `__contextMenu:callback`.
+ */
+export function executeCallback(id: string): void {
+  const fn = callbacks.get(id);
+  if (fn) {
+    callbacks.delete(id);
+    fn();
+  }
+}
+
+// ── Smart defaults ───────────────────────────────────────────────────
+
+function buildDefaults(e: MouseEvent): ContextMenuEntry[] {
+  const target = e.target as HTMLElement;
+  const selection = document.getSelection()?.toString();
+  const isEditable =
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target.isContentEditable;
+  const linkEl = target.closest('a[href]') as HTMLAnchorElement | null;
+  const items: ContextMenuEntry[] = [];
+
+  if (isEditable) {
+    items.push(
+      { label: 'Cut', action: 'cut' },
+      { label: 'Copy', action: 'copy' },
+      { label: 'Paste', action: 'paste' },
+      { label: 'Select All', action: 'selectAll' },
+    );
+  } else if (selection) {
+    items.push({ label: 'Copy', action: 'copy' });
+  }
+
+  if (linkEl) {
+    if (items.length) items.push({ type: 'separator' });
+    items.push(
+      { label: 'Open Link', action: 'openExternal', data: linkEl.getAttribute('href')! },
+      { label: 'Copy Link Address', action: 'copyText', data: linkEl.getAttribute('href')! },
+    );
+  }
+
+  return items;
+}
+
+// ── Serialization ────────────────────────────────────────────────────
+
+interface SerializedItem {
+  id: string;
+  label?: string;
+  action?: string;
+  data?: string;
+  _callbackId?: string;
+  disabled?: boolean;
+  type?: 'separator';
+}
+
+function serializeItems(entries: ContextMenuEntry[]): SerializedItem[] {
+  return entries.map((entry, i) => {
+    if ('type' in entry && entry.type === 'separator') {
+      return { id: `sep_${i}`, type: 'separator' as const };
+    }
+
+    const e = entry as Exclude<ContextMenuEntry, { type: 'separator' }>;
+
+    if (typeof e.action === 'function') {
+      const cbId = nextId();
+      callbacks.set(cbId, e.action);
+      return {
+        id: cbId,
+        label: e.label,
+        _callbackId: cbId,
+        disabled: e.disabled,
+      };
+    }
+
+    return {
+      id: `${e.action}_${i}`,
+      label: e.label,
+      action: e.action,
+      data: (e as { data?: string }).data,
+      disabled: e.disabled,
+    };
+  });
+}
+
+// ── Svelte action ────────────────────────────────────────────────────
+
+export function contextMenu(node: HTMLElement, param: ContextMenuParam) {
+  let currentParam = param;
+
+  function getBridge(): InternalWoodBridge {
+    const bridge = (window as unknown as Record<string, unknown>)[WOOD_INTERNAL_BRIDGE_KEY];
+    if (!bridge || typeof bridge !== 'object') {
+      throw new Error(`Wood bridge "${WOOD_INTERNAL_BRIDGE_KEY}" not found.`);
+    }
+    return bridge as InternalWoodBridge;
+  }
+
+  function handler(e: MouseEvent) {
+    e.preventDefault();
+
+    let entries: ContextMenuEntry[];
+
+    if (Array.isArray(currentParam)) {
+      entries = currentParam;
+    } else {
+      const cfg = currentParam;
+      let defaults: ContextMenuEntry[] = [];
+
+      if (cfg.defaults) {
+        defaults = buildDefaults(e);
+
+        // Apply remove
+        if (cfg.remove) {
+          const removeSet = new Set(cfg.remove);
+          defaults = defaults.filter(item => {
+            if ('type' in item && item.type === 'separator') return true;
+            const actionKey = typeof (item as any).action === 'string' ? (item as any).action : '';
+            return !removeSet.has(actionKey);
+          });
+        }
+
+        // Apply overrides
+        if (cfg.overrides) {
+          defaults = defaults.map((item): ContextMenuEntry => {
+            if ('type' in item && item.type === 'separator') return item;
+            const entry = item as { label: string; action: string; data?: string; disabled?: boolean };
+            const override = cfg.overrides![entry.action];
+            if (override) {
+              return {
+                ...entry,
+                ...(override.label !== undefined && { label: override.label }),
+                ...(override.disabled !== undefined && { disabled: override.disabled }),
+              };
+            }
+            return item;
+          });
+        }
+      }
+
+      // Append custom items (with separator if both exist)
+      if (cfg.items && cfg.items.length > 0) {
+        if (defaults.length > 0) {
+          entries = [...defaults, { type: 'separator' }, ...cfg.items];
+        } else {
+          entries = cfg.items;
+        }
+      } else {
+        entries = defaults;
+      }
+    }
+
+    if (entries.length === 0) return;
+
+    const serialized = serializeItems(entries);
+
+    getBridge().__contextMenu.show({
+      items: serialized,
+      position: { x: e.clientX, y: e.clientY },
+    });
+  }
+
+  node.addEventListener('contextmenu', handler);
+
+  return {
+    update(newParam: ContextMenuParam) {
+      currentParam = newParam;
+    },
+    destroy() {
+      node.removeEventListener('contextmenu', handler);
+    },
+  };
+}

package/src/components/index.d.ts

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from 'svelte';
+import type { ContextMenuEntry, ContextMenuParam, ResolvedMenuItem } from './contextMenu.js';
+
+export type { ContextMenuEntry, ContextMenuParam, ResolvedMenuItem };
+
+export declare const ContextMenuProvider: Component<{
+  menu?: Snippet<[{ items: ResolvedMenuItem[]; close: () => void }]>;
+  children: Snippet;
+}>;
+
+export declare function contextMenu(
+  node: HTMLElement,
+  param: ContextMenuParam,
+): { update(param: ContextMenuParam): void; destroy(): void };

package/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as ContextMenuProvider } from './ContextMenuProvider.svelte';
+export { contextMenu } from './contextMenu.js';

package/src/stick/WoodRecursiveRender.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // SSR-only recursive layout renderer for stick (wood's visual preview CLI).
+    // Simplified version of Forge's RecursiveRender — no stores, navigation, or error boundaries.
+    let {
+        layouts = [],
+        view = null,
+        data = { layout: [], view: {} },
+        wood = undefined,
+    } = $props<{
+        layouts?: any[];
+        view?: any;
+        data?: { layout?: any[]; view?: any };
+        wood?: any;
+    }>();
+
+    let topLayout = $derived(layouts[0]);
+    let childLayouts = $derived(layouts.slice(1));
+    let topData = $derived((data.layout || [])[0]);
+    let otherData = $derived((data.layout || []).slice(1));
+    let viewData = $derived(data.view);
+    let recursiveChildData = $derived({
+        layout: otherData,
+        view: data.view,
+    });
+</script>
+
+{#if childLayouts.length > 0}
+    {#snippet nested_child()}
+        <svelte:self
+            layouts={childLayouts}
+            view={view}
+            data={recursiveChildData}
+            {wood}
+        />
+    {/snippet}
+    <svelte:component
+        this={topLayout}
+        {...(topData || {})}
+        state={topData?.controller?.state}
+        input={topData?.controller?.input}
+        events={topData?.controller?.events}
+        {wood}
+        children={nested_child}
+    />
+{:else if topLayout}
+    {#snippet view_child()}
+        <svelte:component
+            this={view}
+            {...(viewData || {})}
+            state={viewData?.controller?.state}
+            input={viewData?.controller?.input}
+            events={viewData?.controller?.events}
+            {wood}
+        />
+    {/snippet}
+    <svelte:component
+        this={topLayout}
+        {...(topData || {})}
+        state={topData?.controller?.state}
+        input={topData?.controller?.input}
+        events={topData?.controller?.events}
+        {wood}
+        children={view_child}
+    />
+{:else}
+    <svelte:component
+        this={view}
+        {...(viewData || {})}
+        state={viewData?.controller?.state}
+        input={viewData?.controller?.input}
+        events={viewData?.controller?.events}
+        {wood}
+    />
+{/if}