@fungi.computer/maosaico 0.0.0-stage → 0.0.1

package/dist/provider.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, } from "react";
+import { createMaosaicoState, clampFrame, } from "./layout.js";
+import { arrangeTiles, } from "./tiling.js";
+import { usePointerDrag } from "./pointer.js";
+import { detectSnap } from "./snap.js";
+const Context = createContext(null);
+/** Omit tiling to retain floating frames. Width is a preference, in pixels. */
+export function MaosaicoRoot({ bounds, tiling, containerRef, children, }) {
+    const state = useMemo(createMaosaicoState, []);
+    useSyncExternalStore(state.subscribe, () => state.version, () => state.version);
+    useEffect(() => () => {
+        state.destroy();
+    }, [state]);
+    const options = { ...tiling };
+    if (state.mainSize !== undefined)
+        options.mainSize = state.mainSize;
+    const arrangement = tiling
+        ? arrangeTiles(state.tiles, state.minima, state.order, bounds, options)
+        : {
+            frames: new Map([...state.frames]
+                .filter(([id]) => state.participating.has(id))
+                .map(([id, frame]) => [
+                id,
+                clampFrame(frame, bounds, state.minima.get(id) ?? { width: 0, height: 0 }),
+            ])),
+            tabGroups: [],
+            divider: null,
+        };
+    if (state.zoomed && state.participating.has(state.zoomed)) {
+        arrangement.frames = new Map([[state.zoomed, { x: 0, y: 0, ...bounds }]]);
+        arrangement.divider = null;
+        arrangement.tabGroups = [];
+    }
+    return (_jsx(Context.Provider, { value: {
+            state,
+            bounds,
+            tiled: tiling !== undefined,
+            arrangement,
+            containerRef,
+        }, children: children }));
+}
+function useRoot() {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error("Maosaico hooks must be used within MaosaicoRoot");
+    return context;
+}
+/** Layout commands keep content and DOM ownership with the caller. */
+export function useMaosaicoLayout() {
+    const { state, arrangement, tiled } = useRoot();
+    const order = state.tiles;
+    const start = useRef({ pointer: 0, position: 0 });
+    const divider = arrangement.divider;
+    const dividerProps = usePointerDrag({
+        begin: (event) => {
+            if (!divider || !state.beginDivider(event.pointerId))
+                return false;
+            start.current = {
+                pointer: event.pointerId,
+                position: divider.position,
+            };
+            return true;
+        },
+        move: (dx, dy) => {
+            if (!divider)
+                return;
+            start.current.position = Math.min(divider.max, Math.max(divider.min, start.current.position + (divider.axis === "x" ? dx : dy)));
+            state.resizeMain(start.current.position);
+        },
+        end: (cancel) => {
+            state.finishDivider(start.current.pointer, cancel);
+        },
+    }, divider !== null);
+    return {
+        /** Decorations rank immediately above every window, inside the windows region. */
+        stackingStyle: { zIndex: state.order.length },
+        mode: tiled ? "tiled" : "floating",
+        order,
+        interacting: state.gesture !== null,
+        snapPreview: !tiled && !state.zoomed && state.gesture?.kind === "frame"
+            ? (state.gesture.snap ?? null)
+            : null,
+        activeId: state.order.at(-1) ?? null,
+        zoomedId: state.zoomed,
+        tabGroups: arrangement.tabGroups,
+        divider: divider && { ...divider, props: dividerProps },
+        focus: state.focus,
+        swap: state.swap,
+        zoom: state.zoom,
+        resizeMain: (size) => {
+            if (divider)
+                state.resizeMain(Math.min(divider.max, Math.max(divider.min, size)));
+        },
+    };
+}
+export function useMaosaicoItem(item, options = {}) {
+    const { state, bounds, tiled, arrangement, containerRef } = useRoot();
+    // Frame seeds a mounted identity; later layout changes use commands, not remounts.
+    useEffect(() => {
+        state.register(item.id, item.frame, item.minima);
+        return () => {
+            state.unregister(item.id);
+        };
+    }, [state, item.id]);
+    useEffect(() => {
+        state.setMinima(item.id, item.minima);
+    }, [state, item.id, item.minima.width, item.minima.height]);
+    const participating = options.participating ?? true;
+    useLayoutEffect(() => {
+        state.setParticipation(item.id, participating);
+    }, [state, item.id, participating]);
+    const pointer = useRef(0);
+    const props = usePointerDrag({
+        begin: (event) => {
+            if (!state.frames.has(item.id) || state.gesture)
+                return false;
+            pointer.current = event.pointerId;
+            state.begin(item.id, event.pointerId);
+            return true;
+        },
+        move: (dx, dy, event) => {
+            const container = containerRef?.current?.getBoundingClientRect();
+            const side = container && options.kind !== "resize"
+                ? detectSnap({
+                    x: event.clientX - container.left,
+                    y: event.clientY - container.top,
+                }, bounds)
+                : null;
+            const frame = clampFrame(state.frames.get(item.id) ?? item.frame, bounds, item.minima);
+            state.move(item.id, pointer.current, options.kind === "resize"
+                ? { ...frame, width: frame.width + dx, height: frame.height + dy }
+                : { ...frame, x: frame.x + dx, y: frame.y + dy }, bounds, item.minima, side);
+        },
+        end: (cancel) => {
+            if (cancel)
+                state.cancel(item.id, pointer.current);
+            else
+                state.end(item.id, pointer.current);
+        },
+    }, participating && !tiled && !state.zoomed);
+    return {
+        frame: arrangement.frames.get(item.id) ??
+            state.frames.get(item.id) ??
+            item.frame,
+        stackingStyle: { zIndex: Math.max(0, state.order.indexOf(item.id)) },
+        visible: arrangement.frames.has(item.id),
+        active: participating && state.order.at(-1) === item.id,
+        props,
+        focus: () => {
+            if (participating)
+                state.focus(item.id);
+        },
+        snap: (side) => {
+            if (participating && !tiled)
+                state.snap(item.id, side, bounds, item.minima);
+        },
+        restore: () => {
+            if (participating && !tiled)
+                state.restoreFrame(item.id, bounds, item.minima);
+        },
+    };
+}

package/dist/snap.d.ts

@@ -0,0 +1,3 @@
+import type { Bounds, Point, SnapSide } from "./layout.js";
+/** MaoMao v1.1.0 edge zones, measured in the owning container rather than viewport. */
+export declare function detectSnap(point: Point, bounds: Bounds): SnapSide | null;

package/dist/snap.js

@@ -0,0 +1,19 @@
+/** MaoMao v1.1.0 edge zones, measured in the owning container rather than viewport. */
+export function detectSnap(point, bounds) {
+    const threshold = 20;
+    if (point.x < threshold) {
+        if (point.y < threshold)
+            return "top-left";
+        if (point.y > bounds.height - threshold)
+            return "bottom-left";
+        return "left";
+    }
+    if (point.x > bounds.width - threshold) {
+        if (point.y < threshold)
+            return "top-right";
+        if (point.y > bounds.height - threshold)
+            return "bottom-right";
+        return "right";
+    }
+    return null;
+}

package/dist/tiling.d.ts

@@ -0,0 +1,19 @@
+import type { Bounds, Frame, Minima } from "./layout.js";
+export type TilingOptions = {
+    axis?: "x" | "y";
+    mainSize?: number;
+    gap?: number;
+};
+export type Divider = {
+    axis: "x" | "y";
+    position: number;
+    min: number;
+    max: number;
+};
+export type Arrangement = {
+    frames: Map<string, Frame>;
+    tabGroups: string[][];
+    divider: Divider | null;
+};
+/** Main + companions. The caller renders tabs for groups that cannot fit. */
+export declare function arrangeTiles(order: readonly string[], minima: ReadonlyMap<string, Minima>, recent: readonly string[], bounds: Bounds, options: TilingOptions): Arrangement;

package/dist/tiling.js

@@ -0,0 +1,78 @@
+/** Main + companions. The caller renders tabs for groups that cannot fit. */
+export function arrangeTiles(order, minima, recent, bounds, options) {
+    if (options.axis === "y") {
+        const transverse = arrangeAlongX(order, new Map([...minima].map(([id, size]) => [
+            id,
+            { width: size.height, height: size.width },
+        ])), recent, { width: bounds.height, height: bounds.width }, options);
+        return {
+            frames: new Map([...transverse.frames].map(([id, frame]) => [
+                id,
+                {
+                    x: frame.y,
+                    y: frame.x,
+                    width: frame.height,
+                    height: frame.width,
+                },
+            ])),
+            tabGroups: transverse.tabGroups,
+            divider: transverse.divider && {
+                ...transverse.divider,
+                axis: "y",
+            },
+        };
+    }
+    return arrangeAlongX(order, minima, recent, bounds, options);
+}
+function arrangeAlongX(order, minima, recent, bounds, options) {
+    const frames = new Map();
+    const tabGroups = [];
+    const whole = { x: 0, y: 0, ...bounds };
+    const [main, ...companions] = order;
+    const tabs = (ids, frame) => {
+        const selected = [...recent].reverse().find((id) => ids.includes(id)) ?? ids[0];
+        if (selected)
+            frames.set(selected, frame);
+        if (ids.length > 1)
+            tabGroups.push(ids);
+    };
+    if (!main)
+        return { frames, tabGroups, divider: null };
+    if (!companions.length) {
+        frames.set(main, whole);
+        return { frames, tabGroups, divider: null };
+    }
+    const gap = Math.max(0, options.gap ?? 8);
+    const mainMin = minima.get(main)?.width ?? 0;
+    const stackMin = Math.max(...companions.map((id) => minima.get(id)?.width ?? 0));
+    const max = bounds.width - gap - stackMin;
+    if (mainMin > max) {
+        tabs([...order], whole);
+        return { frames, tabGroups, divider: null };
+    }
+    const width = Math.min(max, Math.max(mainMin, options.mainSize ?? bounds.width / 2));
+    const divider = {
+        axis: "x",
+        position: width,
+        min: mainMin,
+        max,
+    };
+    frames.set(main, { ...whole, width });
+    const stack = { ...whole, x: width + gap, width: bounds.width - width - gap };
+    const heights = companions.map((id) => minima.get(id)?.height ?? 0);
+    const required = heights.reduce((sum, height) => sum + height, 0) +
+        gap * (companions.length - 1);
+    if (required > bounds.height) {
+        tabs(companions, stack);
+    }
+    else {
+        const spare = (bounds.height - required) / companions.length;
+        let y = 0;
+        for (const id of companions) {
+            const height = (minima.get(id)?.height ?? 0) + spare;
+            frames.set(id, { ...stack, y, height });
+            y += height + gap;
+        }
+    }
+    return { frames, tabGroups, divider };
+}

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@fungi.computer/maosaico",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "author": "Levi <levi@technomancy.dev>",
+  "private": false,
+  "description": "container-relative layout and pointer ownership",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./bento": {
+      "types": "./dist/bento.d.ts",
+      "import": "./dist/bento.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "dependencies": {
+    "jotai": "2.20.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fungi-computer/maosaico.git"
+  }
 }