@signal9/era-ui 1.12.2 → 1.13.0

package/dist/os/wm.svelte.d.ts

@@ -0,0 +1,99 @@
+import { type Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+export type WindowState = 'normal' | 'minimized' | 'maximized';
+/** Snap targets: the four edges (halves), four corners (quadrants), or full. */
+export type SnapZone = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'maximize';
+/** Props every app body receives — its own window record and the manager, so it
+ *  can read its state and drive the desktop (close itself, spawn more…). */
+export type AppProps = {
+    window: AppWindow;
+    wm: WindowManager;
+};
+/** What a window renders as its body. */
+export type AppComponent = Component<AppProps>;
+/** A registered "app": the template every window of that app is spawned from. */
+export interface AppDefinition {
+    id: string;
+    title: string;
+    icon?: Component<IconProps> | null;
+    /** Body renderer. Omit for a chromeless/placeholder window. */
+    component?: AppComponent;
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /** Only one live instance; opening again focuses the existing one. */
+    singleton?: boolean;
+    /** Show a resize grip (default true). */
+    resizable?: boolean;
+}
+/** A live window instance in the registry. */
+export interface AppWindow {
+    id: string;
+    appId: string;
+    title: string;
+    icon?: Component<IconProps> | null;
+    /** neodrag offset — bound straight to Pane.Root's `position`. */
+    pos: {
+        x: number;
+        y: number;
+    };
+    /** Explicit size once set — bound to Pane.Root's `size`. */
+    size: {
+        width: number;
+        height: number;
+    } | null;
+    /** Stacking order within the desktop (higher = nearer the front). */
+    z: number;
+    state: WindowState;
+    /** Geometry snapshot to restore to after un-maximize / un-snap. */
+    restore: {
+        pos: {
+            x: number;
+            y: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        } | null;
+    } | null;
+    component?: AppComponent;
+    resizable: boolean;
+}
+/**
+ * The source of truth for the desktop: which windows exist, their geometry, and
+ * their stacking / focus order. Everything visual (Desktop, Window, Taskbar,
+ * Alt-Tab, …) is a pure view of this. Runes-based, shared via context.
+ */
+export declare class WindowManager {
+    #private;
+    /** Every live window. Order is spawn order; paint order is by `z`. */
+    windows: AppWindow[];
+    /** Registered app templates, keyed by id. */
+    apps: Record<string, AppDefinition>;
+    /** Desktop viewport size — set by the Desktop host; drives maximize / snap. */
+    bounds: {
+        width: number;
+        height: number;
+    };
+    /** The focused window = the top-most non-minimized one. */
+    focusedId: string | null;
+    register(app: AppDefinition): void;
+    registerMany(apps: AppDefinition[]): void;
+    /** Spawn a window for an app (or focus the existing one if it's a singleton). */
+    open(appId: string, overrides?: Partial<Pick<AppWindow, 'title' | 'pos' | 'size' | 'resizable'>>): string | null;
+    close(id: string): void;
+    /** Bring a window to the front (and un-minimize it if needed). */
+    focus(id: string): void;
+    minimize(id: string): void;
+    /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
+    toggleMinimize(id: string): void;
+    maximize(id: string): void;
+    /** Un-maximize / un-snap back to the pre-change geometry (or just un-minimize). */
+    restore(id: string): void;
+    toggleMaximize(id: string): void;
+    /** Half / quadrant tiling against the desktop bounds. */
+    snap(id: string, zone: SnapZone): void;
+}
+export declare function setWindowManagerContext(wm: WindowManager): WindowManager;
+export declare function getWindowManager(): WindowManager;

package/dist/os/wm.svelte.js

@@ -0,0 +1,172 @@
+import { getContext, setContext } from 'svelte';
+const DEFAULT_SIZE = { width: 480, height: 320 };
+/**
+ * The source of truth for the desktop: which windows exist, their geometry, and
+ * their stacking / focus order. Everything visual (Desktop, Window, Taskbar,
+ * Alt-Tab, …) is a pure view of this. Runes-based, shared via context.
+ */
+export class WindowManager {
+    /** Every live window. Order is spawn order; paint order is by `z`. */
+    windows = $state([]);
+    /** Registered app templates, keyed by id. */
+    apps = $state.raw({});
+    /** Desktop viewport size — set by the Desktop host; drives maximize / snap. */
+    bounds = $state({ width: 0, height: 0 });
+    #z = 0;
+    #seq = 0;
+    /** The focused window = the top-most non-minimized one. */
+    focusedId = $derived.by(() => {
+        let top = null;
+        for (const w of this.windows) {
+            if (w.state === 'minimized')
+                continue;
+            if (!top || w.z > top.z)
+                top = w;
+        }
+        return top?.id ?? null;
+    });
+    register(app) {
+        this.apps = { ...this.apps, [app.id]: app };
+    }
+    registerMany(apps) {
+        this.apps = { ...this.apps, ...Object.fromEntries(apps.map((a) => [a.id, a])) };
+    }
+    #find(id) {
+        return this.windows.find((w) => w.id === id);
+    }
+    /** Spawn a window for an app (or focus the existing one if it's a singleton). */
+    open(appId, overrides) {
+        const app = this.apps[appId];
+        if (!app)
+            return null;
+        if (app.singleton) {
+            const existing = this.windows.find((w) => w.appId === appId);
+            if (existing) {
+                this.restore(existing.id);
+                return existing.id;
+            }
+        }
+        const id = `${appId}#${++this.#seq}`;
+        // Cascade so stacked spawns don't land exactly on top of each other.
+        const n = this.windows.length % 8;
+        const win = {
+            id,
+            appId,
+            title: overrides?.title ?? app.title,
+            icon: app.icon,
+            pos: overrides?.pos ?? { x: 48 + n * 28, y: 48 + n * 28 },
+            size: overrides?.size ?? app.defaultSize ?? { ...DEFAULT_SIZE },
+            z: ++this.#z,
+            state: 'normal',
+            restore: null,
+            component: app.component,
+            resizable: overrides?.resizable ?? app.resizable ?? true
+        };
+        this.windows.push(win);
+        return id;
+    }
+    close(id) {
+        this.windows = this.windows.filter((w) => w.id !== id);
+    }
+    /** Bring a window to the front (and un-minimize it if needed). */
+    focus(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.state === 'minimized')
+            w.state = 'normal';
+        if (w.z <= this.#z)
+            w.z = ++this.#z;
+    }
+    minimize(id) {
+        const w = this.#find(id);
+        if (w)
+            w.state = 'minimized';
+    }
+    /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
+    toggleMinimize(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.state === 'minimized')
+            this.focus(id);
+        else if (this.focusedId === id)
+            w.state = 'minimized';
+        else
+            this.focus(id);
+    }
+    maximize(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.state !== 'maximized') {
+            w.restore = { pos: { ...w.pos }, size: w.size ? { ...w.size } : null };
+        }
+        w.pos = { x: 0, y: 0 };
+        w.size = { width: this.bounds.width, height: this.bounds.height };
+        w.state = 'maximized';
+        this.focus(id);
+    }
+    /** Un-maximize / un-snap back to the pre-change geometry (or just un-minimize). */
+    restore(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.restore) {
+            w.pos = w.restore.pos;
+            w.size = w.restore.size;
+            w.restore = null;
+        }
+        w.state = 'normal';
+        this.focus(id);
+    }
+    toggleMaximize(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.state === 'maximized')
+            this.restore(id);
+        else
+            this.maximize(id);
+    }
+    /** Half / quadrant tiling against the desktop bounds. */
+    snap(id, zone) {
+        if (zone === 'maximize')
+            return this.maximize(id);
+        const w = this.#find(id);
+        if (!w)
+            return;
+        const { width: W, height: H } = this.bounds;
+        const halfW = Math.round(W / 2);
+        const halfH = Math.round(H / 2);
+        const rects = {
+            left: [0, 0, halfW, H],
+            right: [halfW, 0, W - halfW, H],
+            top: [0, 0, W, halfH],
+            bottom: [0, halfH, W, H - halfH],
+            'top-left': [0, 0, halfW, halfH],
+            'top-right': [halfW, 0, W - halfW, halfH],
+            'bottom-left': [0, halfH, halfW, H - halfH],
+            'bottom-right': [halfW, halfH, W - halfW, H - halfH]
+        };
+        const [x, y, width, height] = rects[zone];
+        if (w.state !== 'maximized' && !w.restore) {
+            w.restore = { pos: { ...w.pos }, size: w.size ? { ...w.size } : null };
+        }
+        w.pos = { x, y };
+        w.size = { width, height };
+        w.state = 'normal';
+        this.focus(id);
+    }
+}
+const WM_KEY = Symbol('era-wm');
+export function setWindowManagerContext(wm) {
+    setContext(WM_KEY, wm);
+    return wm;
+}
+export function getWindowManager() {
+    const wm = getContext(WM_KEY);
+    if (!wm)
+        throw new Error('getWindowManager() must be used inside a <Desktop>.');
+    return wm;
+}

package/dist/ui/pane/pane-root.svelte

@@ -285,6 +285,11 @@
 		// would fight the drag (the handle bar already has select-none; the content
 		// doesn't). Resize handles keep their own resize cursors (more specific).
 		ctrlHeld && !resizing ? 'cursor-grab select-none' : '',
+		// ...and tabs stop responding to the pointer: bits-ui activates a tab on
+		// click AND focus, so a ctrl-press would switch tabs instead of grabbing.
+		// pointer-events-none means no focus/click reaches the tab (no activation)
+		// and the press falls through to drag the pane.
+		ctrlHeld ? '[&_[role=tab]]:pointer-events-none' : '',
 		// Promote to its own compositor layer only while dragging, so moves
 		// repaint the layer instead of the page; dropped back to auto at idle.
 		// neodrag animates the `translate` CSS property (not `transform`), so the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "1.12.2",
+	"version": "1.13.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",