@fungi.computer/maosaico 0.0.0-stage → 0.0.1

package/dist/layers.js

@@ -0,0 +1,118 @@
+import { createContext, createElement, forwardRef, useEffect, useRef, useImperativeHandle, useCallback, useContext, useMemo, useState, } from "react";
+const layers = [
+    "chrome",
+    "popover",
+    "dialog",
+    "toast",
+    "tooltip",
+];
+const Context = createContext(null);
+/**
+ * Mount inside the shell's positioned container, outside clipped panes.
+ * Roots are pointer-transparent; interactive portal content enables pointers.
+ * The host supplies Stipe's stylesheet and retains content and focus ownership.
+ */
+export function MaosaicoLayers({ children, onDismiss, }) {
+    const [roots, setRoots] = useState(() => new Map());
+    const update = useCallback((name, element) => {
+        setRoots((current) => {
+            if ((current.get(name) ?? null) === element)
+                return current;
+            const next = new Map(current);
+            if (element)
+                next.set(name, element);
+            else
+                next.delete(name);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        if (!onDismiss)
+            return;
+        window.addEventListener("blur", onDismiss);
+        return () => {
+            window.removeEventListener("blur", onDismiss);
+        };
+    }, [onDismiss]);
+    const refs = useMemo(() => new Map(layers.map((name) => [
+        name,
+        (element) => {
+            update(name, element);
+        },
+    ])), [update]);
+    return createElement(Context.Provider, {
+        value: useMemo(() => ({ roots, update, dismiss: onDismiss }), [roots, update, onDismiss]),
+    }, children, layers.map((name) => createElement("div", {
+        key: name,
+        ref: refs.get(name),
+        "data-maosaico-layer": name,
+        style: {
+            position: "absolute",
+            inset: 0,
+            isolation: "isolate",
+            pointerEvents: "none",
+            zIndex: `var(--stipe-layer-${name})`,
+        },
+    })));
+}
+/** Null until the shell root mounts (also during SSR); body outside a shell. */
+export function useLayer(layer) {
+    const roots = useContext(Context);
+    if (roots !== null)
+        return roots.roots.get(layer) ?? null;
+    return Object.hasOwn(globalThis, "document") ? document.body : null;
+}
+/** The host positions the region; Maosaico owns its isolated layer and modality. */
+export const MaosaicoRegion = forwardRef(function MaosaicoRegion({ layer, style, children, ...props }, forwardedRef) {
+    const context = useContext(Context);
+    const update = context?.update;
+    const dialog = context?.roots.get("dialog");
+    const [modal, setModal] = useState(false);
+    useEffect(() => {
+        if (!dialog)
+            return;
+        const refresh = () => {
+            setModal(Array.from(dialog.querySelectorAll("*")).some((element) => {
+                const rect = element.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0;
+            }));
+        };
+        refresh();
+        const observer = new MutationObserver(refresh);
+        observer.observe(dialog, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [dialog]);
+    const elementRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => elementRef.current);
+    const ref = useCallback((element) => {
+        elementRef.current = element;
+        update?.(layer, element);
+    }, [update, layer]);
+    return createElement("div", {
+        ...props,
+        ref,
+        onFocusCapture: (event) => {
+            // React bubbles focus from portaled overlays through this region; only
+            // focus that really lands in a window dismisses open overlays.
+            if (layer === "windows" &&
+                event.target instanceof Node &&
+                event.currentTarget.contains(event.target))
+                context?.dismiss?.();
+            props.onFocusCapture?.(event);
+        },
+        "data-maosaico-layer": layer,
+        inert: layer === "windows" && modal ? "" : undefined,
+        style: {
+            position: "relative",
+            ...style,
+            isolation: "isolate",
+            zIndex: `var(--stipe-layer-${layer})`,
+        },
+    }, children);
+});

package/dist/layout.d.ts

@@ -0,0 +1,60 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+export type Frame = Point & Size;
+export type Bounds = Size;
+export type Minima = Size;
+export type SnapSide = "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type Gesture = {
+    kind: "frame";
+    id: string;
+    pointerId: number;
+    start: Frame;
+    snap?: {
+        side: SnapSide;
+        frame: Frame;
+    } | null;
+} | {
+    kind: "divider";
+    pointerId: number;
+    start: number | undefined;
+};
+export type State = {
+    frames: Map<string, Frame>;
+    order: string[];
+    tiles: string[];
+    minima: Map<string, Minima>;
+    participating: Set<string>;
+    mainSize: number | undefined;
+    zoomed: string | null;
+    gesture: Gesture | null;
+    restore: Map<string, Frame>;
+};
+export declare const clampFrame: (frame: Frame, bounds: Bounds, minima: Minima) => Frame;
+export type MaosaicoState = Readonly<State> & {
+    readonly version: number;
+    subscribe: (listener: () => void) => () => void;
+    register: (id: string, frame: Frame, minima: Minima) => void;
+    setParticipation: (id: string, participating: boolean) => void;
+    setMinima: (id: string, minima: Minima) => void;
+    unregister: (id: string) => void;
+    begin: (id: string, pointerId: number) => void;
+    move: (id: string, pointerId: number, frame: Frame, bounds: Bounds, minima: Minima, snapSide?: SnapSide | null) => void;
+    end: (id: string, pointerId: number) => void;
+    cancel: (id: string, pointerId: number) => void;
+    snap: (id: string, side: SnapSide, bounds: Bounds, minima: Minima) => void;
+    restoreFrame: (id: string, bounds: Bounds, minima: Minima) => void;
+    focus: (id: string) => void;
+    swap: (first: string, second: string) => void;
+    zoom: (id: string | null) => void;
+    resizeMain: (size: number) => void;
+    beginDivider: (pointerId: number) => boolean;
+    finishDivider: (pointerId: number, cancel: boolean) => void;
+    destroy: () => void;
+};
+export declare const createMaosaicoState: () => MaosaicoState;

package/dist/layout.js

@@ -0,0 +1,336 @@
+import { atom, createStore } from "jotai/vanilla";
+const stateAtom = atom({
+    frames: new Map(),
+    order: [],
+    tiles: [],
+    minima: new Map(),
+    participating: new Set(),
+    mainSize: undefined,
+    zoomed: null,
+    gesture: null,
+    restore: new Map(),
+});
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+export const clampFrame = (frame, bounds, minima) => {
+    const width = clamp(frame.width, minima.width, Math.max(minima.width, bounds.width));
+    const height = clamp(frame.height, minima.height, Math.max(minima.height, bounds.height));
+    return {
+        width,
+        height,
+        x: clamp(frame.x, 0, Math.max(0, bounds.width - width)),
+        y: clamp(frame.y, 0, Math.max(0, bounds.height - height)),
+    };
+};
+const snapFrame = (side, bounds, minima) => {
+    const halfWidth = bounds.width / 2;
+    const halfHeight = bounds.height / 2;
+    const frame = side === "left"
+        ? { x: 0, y: 0, width: halfWidth, height: bounds.height }
+        : side === "right"
+            ? { x: halfWidth, y: 0, width: halfWidth, height: bounds.height }
+            : side === "top-left"
+                ? { x: 0, y: 0, width: halfWidth, height: halfHeight }
+                : side === "top-right"
+                    ? { x: halfWidth, y: 0, width: halfWidth, height: halfHeight }
+                    : side === "bottom-left"
+                        ? { x: 0, y: halfHeight, width: halfWidth, height: halfHeight }
+                        : {
+                            x: halfWidth,
+                            y: halfHeight,
+                            width: halfWidth,
+                            height: halfHeight,
+                        };
+    return clampFrame(frame, bounds, minima);
+};
+export const createMaosaicoState = () => {
+    const store = createStore();
+    const read = () => store.get(stateAtom);
+    let version = 0;
+    const update = (change) => {
+        version += 1;
+        store.set(stateAtom, change(read()));
+    };
+    const touch = (id, frame, minima) => {
+        update((state) => {
+            const frames = new Map(state.frames);
+            frames.set(id, frame);
+            return {
+                ...state,
+                frames,
+                participating: new Set(state.participating).add(id),
+                tiles: state.tiles.includes(id) ? state.tiles : [...state.tiles, id],
+                minima: new Map(state.minima).set(id, minima),
+                order: state.order.includes(id)
+                    ? state.order
+                    : [
+                        ...state.order.filter((value) => value !== state.zoomed),
+                        id,
+                        ...(state.zoomed ? [state.zoomed] : []),
+                    ],
+            };
+        });
+    };
+    const registered = (id) => read().frames.has(id);
+    const ownsFrame = (id, pointerId) => {
+        const gesture = read().gesture;
+        return (gesture?.kind === "frame" &&
+            gesture.id === id &&
+            gesture.pointerId === pointerId);
+    };
+    return {
+        get version() {
+            return version;
+        },
+        get frames() {
+            return read().frames;
+        },
+        get order() {
+            return read().order;
+        },
+        get tiles() {
+            return read().tiles;
+        },
+        get minima() {
+            return read().minima;
+        },
+        get participating() {
+            return read().participating;
+        },
+        get mainSize() {
+            return read().mainSize;
+        },
+        get zoomed() {
+            return read().zoomed;
+        },
+        get gesture() {
+            return read().gesture;
+        },
+        get restore() {
+            return read().restore;
+        },
+        subscribe: (listener) => store.sub(stateAtom, listener),
+        register: touch,
+        setParticipation: (id, participating) => {
+            if (!read().frames.has(id))
+                return;
+            update((state) => {
+                const current = state.participating.has(id);
+                if (current === participating)
+                    return state;
+                const participants = new Set(state.participating);
+                if (participating)
+                    participants.add(id);
+                else
+                    participants.delete(id);
+                const tiles = participating
+                    ? state.tiles.includes(id)
+                        ? state.tiles
+                        : [...state.tiles, id]
+                    : state.tiles.filter((value) => value !== id);
+                const order = participating
+                    ? state.order.includes(id)
+                        ? state.order
+                        : [...state.order, id]
+                    : state.order.filter((value) => value !== id);
+                return {
+                    ...state,
+                    participating: participants,
+                    tiles,
+                    order,
+                    zoomed: participating || state.zoomed !== id ? state.zoomed : null,
+                    gesture: !participating &&
+                        state.gesture?.kind === "frame" &&
+                        state.gesture.id === id
+                        ? null
+                        : state.gesture,
+                };
+            });
+        },
+        setMinima: (id, minima) => {
+            const previous = read().minima.get(id);
+            if (!previous ||
+                (previous.width === minima.width && previous.height === minima.height))
+                return;
+            update((state) => ({
+                ...state,
+                minima: new Map(state.minima).set(id, minima),
+            }));
+        },
+        unregister: (id) => {
+            update((state) => {
+                if (!state.frames.has(id))
+                    return state;
+                const frames = new Map(state.frames);
+                frames.delete(id);
+                const restore = new Map(state.restore);
+                restore.delete(id);
+                const order = state.order.filter((value) => value !== id);
+                const tiles = state.tiles.filter((value) => value !== id);
+                const minima = new Map(state.minima);
+                minima.delete(id);
+                const participating = new Set(state.participating);
+                participating.delete(id);
+                const gesture = state.gesture?.kind === "frame" && state.gesture.id === id
+                    ? null
+                    : state.gesture;
+                return {
+                    ...state,
+                    frames,
+                    restore,
+                    order,
+                    tiles,
+                    minima,
+                    participating,
+                    gesture,
+                    zoomed: state.zoomed === id ? null : state.zoomed,
+                };
+            });
+        },
+        begin: (id, pointerId) => {
+            if (!registered(id) || !read().participating.has(id))
+                return;
+            update((state) => ({
+                ...state,
+                gesture: {
+                    kind: "frame",
+                    id,
+                    pointerId,
+                    start: state.frames.get(id) ?? { x: 0, y: 0, width: 0, height: 0 },
+                },
+                order: [...state.order.filter((value) => value !== id), id],
+            }));
+        },
+        move: (id, pointerId, frame, bounds, minima, snapSide = null) => {
+            if (registered(id) &&
+                read().participating.has(id) &&
+                ownsFrame(id, pointerId)) {
+                update((state) => ({
+                    ...state,
+                    frames: new Map(state.frames).set(id, clampFrame(frame, bounds, minima)),
+                    gesture: state.gesture?.kind === "frame"
+                        ? {
+                            ...state.gesture,
+                            snap: snapSide
+                                ? {
+                                    side: snapSide,
+                                    frame: snapFrame(snapSide, bounds, minima),
+                                }
+                                : null,
+                        }
+                        : state.gesture,
+                }));
+            }
+        },
+        end: (id, pointerId) => {
+            if (ownsFrame(id, pointerId))
+                update((state) => {
+                    const gesture = state.gesture;
+                    if (gesture?.kind !== "frame" || !gesture.snap)
+                        return { ...state, gesture: null };
+                    return {
+                        ...state,
+                        frames: new Map(state.frames).set(id, gesture.snap.frame),
+                        restore: new Map(state.restore).set(id, state.restore.get(id) ?? gesture.start),
+                        gesture: null,
+                    };
+                });
+        },
+        cancel: (id, pointerId) => {
+            const gesture = read().gesture;
+            if (gesture?.kind === "frame" &&
+                gesture.id === id &&
+                gesture.pointerId === pointerId)
+                update((state) => {
+                    const frames = new Map(state.frames);
+                    frames.set(id, gesture.start);
+                    return { ...state, frames, gesture: null };
+                });
+        },
+        snap: (id, side, bounds, minima) => {
+            if (!registered(id) || !read().participating.has(id))
+                return;
+            update((state) => {
+                const restore = new Map(state.restore);
+                restore.set(id, state.frames.get(id) ?? snapFrame(side, bounds, minima));
+                const frames = new Map(state.frames);
+                frames.set(id, snapFrame(side, bounds, minima));
+                return {
+                    ...state,
+                    frames,
+                    restore,
+                    order: [...state.order.filter((value) => value !== id), id],
+                };
+            });
+        },
+        restoreFrame: (id, bounds, minima) => {
+            if (!registered(id) || !read().participating.has(id))
+                return;
+            update((state) => {
+                const frame = state.restore.get(id);
+                if (!frame)
+                    return state;
+                const frames = new Map(state.frames);
+                frames.set(id, clampFrame(frame, bounds, minima));
+                const restore = new Map(state.restore);
+                restore.delete(id);
+                return { ...state, frames, restore };
+            });
+        },
+        focus: (id) => {
+            if (!registered(id))
+                return;
+            update((state) => ({
+                ...state,
+                order: [...state.order.filter((value) => value !== id), id],
+                zoomed: state.zoomed === null ? null : id,
+            }));
+        },
+        swap: (first, second) => {
+            if (!registered(first) ||
+                !registered(second) ||
+                !read().participating.has(first) ||
+                !read().participating.has(second))
+                return;
+            update((state) => ({
+                ...state,
+                tiles: state.tiles.map((id) => id === first ? second : id === second ? first : id),
+            }));
+        },
+        zoom: (id) => {
+            if (id !== null && (!registered(id) || !read().participating.has(id)))
+                return;
+            update((state) => ({
+                ...state,
+                zoomed: id,
+                order: id === null
+                    ? state.order
+                    : [...state.order.filter((value) => value !== id), id],
+            }));
+        },
+        resizeMain: (size) => {
+            update((state) => ({ ...state, mainSize: size }));
+        },
+        beginDivider: (pointerId) => {
+            if (read().gesture)
+                return false;
+            update((state) => ({
+                ...state,
+                gesture: { kind: "divider", pointerId, start: state.mainSize },
+            }));
+            return true;
+        },
+        finishDivider: (pointerId, cancel) => {
+            const gesture = read().gesture;
+            if (gesture?.kind !== "divider" || gesture.pointerId !== pointerId)
+                return;
+            update((state) => ({
+                ...state,
+                gesture: null,
+                mainSize: cancel ? gesture.start : state.mainSize,
+            }));
+        },
+        destroy: () => {
+            update((state) => ({ ...state, gesture: null, restore: new Map() }));
+        },
+    };
+};

package/dist/pointer.d.ts

@@ -0,0 +1,7 @@
+import type { DOMAttributes, PointerEvent } from "react";
+/** One captured pointer; cancellation and unmount share the same release path. */
+export declare function usePointerDrag(handlers: {
+    begin: (event: PointerEvent<HTMLElement>) => boolean;
+    move: (dx: number, dy: number, event: PointerEvent<HTMLElement>) => void;
+    end: (cancel: boolean) => void;
+}, enabled?: boolean, signal?: AbortSignal): DOMAttributes<HTMLElement>;

package/dist/pointer.js

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from "react";
+/** One captured pointer; cancellation and unmount share the same release path. */
+export function usePointerDrag(handlers, enabled = true, signal) {
+    const latest = useRef(handlers);
+    latest.current = handlers;
+    const pointer = useRef(null);
+    useEffect(() => {
+        if (!enabled)
+            pointer.current?.release(true);
+        return () => pointer.current?.release(true);
+    }, [enabled]);
+    useEffect(() => {
+        const cancel = () => {
+            pointer.current?.release(true);
+        };
+        signal?.addEventListener("abort", cancel);
+        return () => {
+            signal?.removeEventListener("abort", cancel);
+        };
+    }, [signal]);
+    return {
+        onPointerDown: (event) => {
+            if (!enabled ||
+                signal?.aborted ||
+                pointer.current ||
+                (event.pointerType === "mouse" && event.button !== 0))
+                return;
+            const { currentTarget: element, pointerId: id } = event;
+            // Capture before mutating geometry, so a failed capture cannot strand a gesture.
+            element.setPointerCapture(id);
+            if (!latest.current.begin(event)) {
+                element.releasePointerCapture(id);
+                return;
+            }
+            const end = latest.current.end;
+            const lost = () => {
+                release(true);
+            };
+            const release = (cancel) => {
+                element.removeEventListener("lostpointercapture", lost);
+                pointer.current = null;
+                end(cancel);
+                if (element.hasPointerCapture(id))
+                    element.releasePointerCapture(id);
+            };
+            pointer.current = {
+                id,
+                element,
+                x: event.clientX,
+                y: event.clientY,
+                release,
+            };
+            element.addEventListener("lostpointercapture", lost);
+        },
+        onPointerMove: (event) => {
+            const current = pointer.current;
+            if (current?.id !== event.pointerId)
+                return;
+            latest.current.move(event.clientX - current.x, event.clientY - current.y, event);
+            current.x = event.clientX;
+            current.y = event.clientY;
+        },
+        onPointerUp: (event) => {
+            if (pointer.current?.id === event.pointerId)
+                pointer.current.release(false);
+        },
+        onPointerCancel: (event) => {
+            if (pointer.current?.id === event.pointerId)
+                pointer.current.release(true);
+        },
+    };
+}

package/dist/provider.d.ts

@@ -0,0 +1,60 @@
+import type React from "react";
+import { type Bounds, type Frame, type Minima, type SnapSide } from "./layout.js";
+import { type TilingOptions } from "./tiling.js";
+export type MaosaicoItem = {
+    id: string;
+    frame: Frame;
+    minima: Minima;
+};
+export type MaosaicoItemOptions = {
+    kind?: "drag" | "resize";
+    participating?: boolean;
+};
+export type MaosaicoItemBinding = {
+    frame: Frame;
+    /** Merge into the window's style, inside the windows layer. */
+    stackingStyle: Pick<React.CSSProperties, "zIndex">;
+    visible: boolean;
+    active: boolean;
+    props: React.DOMAttributes<HTMLElement>;
+    focus: () => void;
+    snap: (side: SnapSide) => void;
+    restore: () => void;
+};
+/** Omit tiling to retain floating frames. Width is a preference, in pixels. */
+export declare function MaosaicoRoot({ bounds, tiling, containerRef, children, }: {
+    bounds: Bounds;
+    tiling?: TilingOptions | undefined;
+    /** The positioned workspace element; supplying it enables container-relative edge snapping. */
+    containerRef?: React.RefObject<HTMLElement | null>;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Layout commands keep content and DOM ownership with the caller. */
+export declare function useMaosaicoLayout(): {
+    /** Decorations rank immediately above every window, inside the windows region. */
+    stackingStyle: {
+        zIndex: number;
+    };
+    mode: "tiled" | "floating";
+    order: readonly string[];
+    interacting: boolean;
+    snapPreview: {
+        side: SnapSide;
+        frame: Frame;
+    } | null;
+    activeId: string | null;
+    zoomedId: string | null;
+    tabGroups: string[][];
+    divider: {
+        props: React.DOMAttributes<HTMLElement>;
+        axis: "x" | "y";
+        position: number;
+        min: number;
+        max: number;
+    } | null;
+    focus: (id: string) => void;
+    swap: (first: string, second: string) => void;
+    zoom: (id: string | null) => void;
+    resizeMain: (size: number) => void;
+};
+export declare function useMaosaicoItem(item: MaosaicoItem, options?: MaosaicoItemOptions): MaosaicoItemBinding;