@fungi.computer/maosaico 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jamstack Consulting LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,225 @@
-# Temporary Holding Version
+# Maosaico (`@fungi.computer/maosaico`)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Maosaico arranges React panes inside a measured container. It supports floating
+frames and optional tiling while leaving pane content, styling, controls, and
+DOM focus with the host.
+
+## Install or set up
+
+Maosaico is a React tiling layout package. It requires React 17 or newer as a
+peer dependency. From the repository root, build it with:
+
+```sh
+pnpm --filter @fungi.computer/maosaico build
+```
+
+The package exports `MaosaicoRoot`, `useMaosaicoItem`, `useMaosaicoLayout`,
+`MaosaicoLayers`, `useLayer`, and `usePointerDrag` from
+`@fungi.computer/maosaico`.
+
+`usePointerDrag` supplies captured-pointer DOM props for a caller-owned gesture.
+Its `move` callback receives incremental pixel deltas; cancellation and unmount
+release the same capture. An optional third `AbortSignal` lets the caller cancel
+a gesture; Escape policy stays with the caller. Grove uses it with the Caps
+`ResizeHandle` for its conversation rail, without introducing a tiling root for
+one sidebar width.
+
+## Quick start
+
+This illustrative example registers panes and asks Maosaico to tile them within
+the supplied bounds:
+
+```tsx
+import { MaosaicoRoot, useMaosaicoItem } from "@fungi.computer/maosaico";
+
+function Pane({ id }: { id: string }) {
+  const pane = useMaosaicoItem({
+    id,
+    frame: { x: 0, y: 0, width: 320, height: 240 },
+    minima: { width: 180, height: 120 },
+  });
+
+  return (
+    <section
+      hidden={!pane.visible}
+      {...pane.props}
+      style={{
+        position: "absolute",
+        left: pane.frame.x,
+        top: pane.frame.y,
+        width: pane.frame.width,
+        height: pane.frame.height,
+      }}
+    >
+      Pane content stays mounted here.
+    </section>
+  );
+}
+
+function Workspace() {
+  return (
+    <div style={{ position: "relative", width: 1000, height: 600 }}>
+      <MaosaicoRoot bounds={{ width: 1000, height: 600 }} tiling={{ gap: 8 }}>
+        <Pane id="chat" />
+        <Pane id="files" />
+      </MaosaicoRoot>
+    </div>
+  );
+}
+```
+
+This sketch is illustrative; the layout tests exercise the public React boundary
+and pane registration in [`test/tiling.test.tsx`](test/tiling.test.tsx).
+
+## Core concepts
+
+`MaosaicoRoot` owns layout state for one root. Pass its current container size
+as `bounds`. Without `tiling`, panes use floating frames. With `tiling`, the
+first pane is the main pane and the others share the remaining space. A
+preferred `mainSize` is measured in pixels along `axis` (`"x"` by default). The
+layout clamps frames to the container and respects the minima supplied by each
+pane.
+
+`useMaosaicoItem` registers an ID, starting frame, and minimum size. The
+returned binding provides the current frame, visibility, active state, drag
+props, and `focus`, `snap`, and `restore` actions. Keep keyed content mounted
+when a pane is hidden; apply `hidden={!visible}` so hidden content leaves input
+and accessibility navigation. Closing a pane means removing it from the mounted
+list.
+
+### Shell layers
+
+`MaosaicoLayers` renders five isolated sibling overlay roots: `chrome`,
+`popover`, `dialog`, `toast`, `tooltip`. Mount it inside the shell's positioned
+container, outside clipped panes. The host loads Stipe's stylesheet; Maosaico
+consumes its layer tokens. Overlay roots are pointer-transparent; set
+`pointerEvents: "auto"` on their interactive content.
+
+`MaosaicoRegion` supplies the `desktop` and `windows` layers in the host's
+positioned work area. It forwards ordinary div attributes and a ref, keeps the
+host's positioning styles, and owns isolation and the layer token. Inside
+`MaosaicoLayers`, it also registers that region for `useLayer`. A windows region
+is inert while the dialog root contains painted content; closing the dialog
+releases it without remounting windows or desktop content.
+
+`useLayer("popover")` returns the nearest provider's portal container. It is
+`null` until that root mounts, and during server rendering. Outside a provider
+it returns `document.body`, so standalone overlays keep an ordinary portal
+container. Pass the container to the maintained overlay primitive, or use React
+DOM's `createPortal`. Choosing a layer does not implement positioning,
+light-dismiss, focus trapping or iframe occlusion.
+
+Place window content in `<MaosaicoRegion layer="windows">` and merge the
+binding's `stackingStyle` into each window's style. Its rank is dense, starting
+at zero, and follows the layout owner's focus order.
+`useMaosaicoLayout().stackingStyle` ranks divider and snap decorations directly
+above the windows inside the same region. Arbitrarily many ranks stay below
+`chrome` because the windows root owns their stacking context. Each shell's
+roots and window order are independent; portaled content stays mounted when
+other layer roots change.
+
+`useMaosaicoLayout` provides focus and swap commands, zoom and restore, tile
+order, tab groups, divider interaction, and pending snap information. Pass a
+`containerRef` for edge snapping relative to a positioned workspace, such as a
+workbench below a toolbar.
+
+## API reference
+
+The package has no generated API page. See the public
+[exports and types](src/index.ts); implementation details such as state
+collections remain private.
+
+## Examples and checks
+
+The
+[Layouts / Automatic Tiling in the shared workbench](../caps/workbench/maosaico.stories.tsx)
+demonstrates tiling, tabs, divider resizing, floating panes, zoom, focus, and
+swapping. Run the workbench from the repository root with:
+
+```sh
+pnpm workbench:serve
+```
+
+The focused tests cover layout, tiling, pointer contracts, and the public
+boundary:
+
+```sh
+pnpm --filter @fungi.computer/maosaico test
+```
+
+The browser proof also mounts 33 windows through the public bindings, checks
+that chrome receives real pointer clicks before and after raising a window, and
+consumes Stipe's actual CSS rather than reproducing its numbers.
+
+The browser pointer proof is available separately with
+`pnpm --filter @fungi.computer/maosaico browser:contract`; it does not prove a
+mounted Tourtois App.
+
+## Limits and errors
+
+Maosaico stores layout state only for the lifetime of a mounted root. It does
+not persist frames, provide App identity, own keyboard policy, or move/focus the
+caller's content. The host provides bounds, minima, controls, theme, and
+animation. Resize gestures and tiled mode do not offer snap targets.
+
+Bounds, minima, and size preferences are layout measurements and must be finite
+and nonnegative. Maosaico adapts the MaoMaoLabs core gesture and snap behavior;
+see [`LICENSE`](LICENSE) for its MIT license terms and attribution.
+
+## Contribute and license
+
+Maosaico is MIT licensed; see [`LICENSE`](LICENSE).
+
+`MaosaicoLayers onDismiss` reports host-window blur and focus entering the
+windows region. Compose it with Caps `OverlayRoot subscribeDismiss` to retire
+transient popovers and tooltips together; blocking dialogs and toasts stay live.
+
+### Controlled bento grids
+
+`arrangeBento` reflows caller-owned `{ id, col, row, w, h }` placements into 1,
+2 or 4 columns. Spans clamp to the current grid; collisions push occupants down
+and vertical gaps compact deterministically. IDs are unique within a grid.
+`applyBentoOps` accepts move and resize intents without mutating the input.
+`bentoFrames` maps accepted cells to container-relative pixel frames. Every
+accepted move or resize compacts all tiles to an `arrangeBento` fixpoint;
+downward moves pass the intersecting occupant. Cells and their extents must fit
+finite safe integers; duplicate IDs throw. There is no engine product quota on
+tile count or size.
+
+`useMaosaicoBento` takes those placements, measured `width`, `columns`,
+`rowHeight`, `gap` and an `onChange(ops)` callback. Optional `rowHeights`
+provide measured pixel heights for individual rows; missing rows use
+`rowHeight`. Frames and pointer snapping share those row boundaries. Changing
+measurements cancels an in-flight gesture; equal fresh arrays preserve it. These
+measurements never change the integer placements. Its `previewId` names only the
+live gesture tile. Its `frames` include the live pointer preview. Spread
+`bind(id, "move")` or `bind(id, "resize")` onto a focusable handle with
+`touchAction: "none"`. Arrow keys propose one cell; Escape, lost capture,
+disabling, unmount and host geometry changes cancel a pointer gesture. A
+completed drop proposes operations through `onChange`; the host accepts them
+with `applyBentoOps` and supplies the new placements.
+
+The host chooses breakpoints and persists its own placements. Reflow does not
+rewrite storage, and bento does not change `MaosaicoRoot` window behavior. The
+[controlled bento story](../caps/workbench/bento.stories.tsx) composes Caps
+SectionCard and Button. The [browser contract](test/browser/bento.proof.tsx)
+exercises real captured-pointer move, resize, cancellation and keyboard input.
+
+## Native hosts
+
+`@fungi.computer/maosaico/headless` exports `createMaosaicoState` and
+`arrangeTiles` without the React renderer. The native TUI shell uses the same
+focus, grouping, divider and zoom state in terminal cells. Browser bento and
+window geometry keep their existing entrypoints and rules.
+
+## Packed consumer readiness
+
+Run `pnpm run build`, `pnpm run pack` and `pnpm run stranger` in this package.
+The maintained stranger proof installs only package tarballs into a fresh npm
+consumer, checks the exact shipped files, runs the public runtime fixture and
+compiles every JavaScript entrypoint with strict NodeNext and no library-check
+skip. This qualification does not publish npm releases or push a repository
+split.
+
+See [LICENSE](LICENSE) for the license and the package manifest for its public
+repository destination.

package/dist/bento-binding.d.ts

@@ -0,0 +1,16 @@
+import type { DOMAttributes } from "react";
+import { bentoFrames } from "./bento.js";
+import type { BentoGeometry, BentoOp, BentoPlacement } from "./bento.js";
+export type BentoOptions = BentoGeometry & {
+    placements: readonly BentoPlacement[];
+    onChange: (ops: readonly BentoOp[]) => void;
+    enabled?: boolean;
+};
+export type BentoBinding = {
+    frames: ReturnType<typeof bentoFrames>;
+    preview: boolean;
+    previewId: string | null;
+    bind: (id: string, kind: "move" | "resize") => DOMAttributes<HTMLElement>;
+};
+/** Captured, cell-snapped previews. Only a completed gesture proposes host-owned changes. */
+export declare function useMaosaicoBento(options: BentoOptions): BentoBinding;

package/dist/bento-binding.js

@@ -0,0 +1,120 @@
+import { useRef, useState } from "react";
+import { applyBentoOps, resolveBento, bentoFrames, bentoRowAt, bentoRowOffset, } from "./bento.js";
+import { usePointerDrag } from "./pointer.js";
+function intent(item, kind, dx, dy) {
+    return kind === "move"
+        ? { kind, id: item.id, col: item.col + dx, row: item.row + dy }
+        : { kind, id: item.id, w: item.w + dx, h: item.h + dy };
+}
+function sameGeometry(a, b) {
+    return (a.columns === b.columns &&
+        a.width === b.width &&
+        a.rowHeight === b.rowHeight &&
+        a.gap === b.gap &&
+        (a.rowHeights?.length ?? 0) === (b.rowHeights?.length ?? 0) &&
+        (a.rowHeights ?? []).every((height, index) => height === b.rowHeights?.[index]));
+}
+function samePlacements(a, b) {
+    return (a.length === b.length &&
+        a.every((item, index) => {
+            const other = b[index];
+            return (item.id === other?.id &&
+                item.col === other.col &&
+                item.row === other.row &&
+                item.w === other.w &&
+                item.h === other.h);
+        }));
+}
+/** Captured, cell-snapped previews. Only a completed gesture proposes host-owned changes. */
+export function useMaosaicoBento(options) {
+    const [cancellation, setCancellation] = useState(() => new AbortController());
+    const latest = useRef(options);
+    latest.current = options;
+    const selected = useRef(null);
+    const gesture = useRef(null);
+    const [preview, setPreview] = useState(null);
+    const current = gesture.current;
+    const stale = current !== null &&
+        (!samePlacements(current.source.placements, options.placements) ||
+            !sameGeometry(current.source, options));
+    const pointer = usePointerDrag({
+        begin: () => {
+            const selection = selected.current;
+            const source = latest.current;
+            const item = resolveBento(source.placements, source.columns).find((tile) => tile.id === selection?.id);
+            if (!selection || !item || source.width <= 0 || source.rowHeight <= 0)
+                return false;
+            gesture.current = {
+                source,
+                item,
+                kind: selection.kind,
+                dx: 0,
+                dy: 0,
+                op: null,
+            };
+            return true;
+        },
+        move: (dx, dy) => {
+            const active = gesture.current;
+            if (!active)
+                return;
+            active.dx += dx;
+            active.dy += dy;
+            const { columns, width, gap } = active.source;
+            const anchor = active.item.row + (active.kind === "resize" ? active.item.h : 0);
+            const stride = (width + gap) / columns;
+            active.op = intent(active.item, active.kind, Math.round(active.dx / stride), bentoRowAt(bentoRowOffset(anchor, active.source) + active.dy, active.source) - anchor);
+            setPreview(applyBentoOps(active.source.placements, [active.op], columns));
+        },
+        end: (cancel) => {
+            const active = gesture.current;
+            gesture.current = null;
+            setPreview(null);
+            if (!cancel &&
+                active?.op &&
+                samePlacements(active.source.placements, latest.current.placements) &&
+                sameGeometry(active.source, latest.current)) {
+                latest.current.onChange([active.op]);
+            }
+        },
+    }, options.enabled !== false && !stale, cancellation.signal);
+    return {
+        previewId: stale || preview === null ? null : (current?.item.id ?? null),
+        frames: bentoFrames(stale ? options.placements : (preview ?? options.placements), options),
+        preview: !stale && preview !== null,
+        bind: (id, kind) => ({
+            ...pointer,
+            onPointerDown: (event) => {
+                selected.current = { id, kind };
+                pointer.onPointerDown?.(event);
+            },
+            onKeyDown: (event) => {
+                if (event.key === "Escape" && gesture.current) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    cancellation.abort();
+                    setCancellation(new AbortController());
+                    return;
+                }
+                if (event.defaultPrevented ||
+                    gesture.current ||
+                    options.enabled === false)
+                    return;
+                const delta = event.key === "ArrowLeft"
+                    ? [-1, 0]
+                    : event.key === "ArrowRight"
+                        ? [1, 0]
+                        : event.key === "ArrowUp"
+                            ? [0, -1]
+                            : event.key === "ArrowDown"
+                                ? [0, 1]
+                                : null;
+                const item = resolveBento(options.placements, options.columns).find((tile) => tile.id === id);
+                if (!delta || !item)
+                    return;
+                event.preventDefault();
+                options.onChange([intent(item, kind, delta[0] ?? 0, delta[1] ?? 0)]);
+            },
+        }),
+    };
+}

package/dist/bento.d.ts

@@ -0,0 +1,43 @@
+import type { Frame } from "./layout.js";
+/** Host-selected responsive grid; Maosaico does not select breakpoints. */
+export type BentoColumns = 1 | 2 | 4;
+/** A caller-owned tile in integer grid cells. IDs are unique within a grid. */
+export type BentoPlacement = Readonly<{
+    id: string;
+    col: number;
+    row: number;
+    w: number;
+    h: number;
+}>;
+/** Intent proposed by the interaction binding and accepted by the host. */
+export type BentoOp = Readonly<{
+    kind: "move";
+    id: string;
+    col: number;
+    row: number;
+}> | Readonly<{
+    kind: "resize";
+    id: string;
+    w: number;
+    h: number;
+}>;
+/** Container-relative pixel geometry supplied by the measured host. */
+export type BentoGeometry = Readonly<{
+    columns: BentoColumns;
+    width: number;
+    rowHeight: number;
+    /** Measured row heights; omitted rows retain rowHeight. Cells stay unchanged. */
+    rowHeights?: readonly number[] | undefined;
+    gap: number;
+}>;
+export declare function resolveBento(placements: readonly BentoPlacement[], columns: BentoColumns, priority?: string): readonly BentoPlacement[];
+/** Reflow spans and compact vertical gaps while retaining stable tile identity/order. */
+export declare function arrangeBento(placements: readonly BentoPlacement[], columns: BentoColumns): readonly BentoPlacement[];
+/** Apply intents in order, reorder downward past occupants, then compact every tile. */
+export declare function applyBentoOps(placements: readonly BentoPlacement[], ops: readonly BentoOp[], columns: BentoColumns): readonly BentoPlacement[];
+/** Pixel origin of an integer row, shared by frames and pointer snapping. */
+export declare function bentoRowOffset(row: number, geometry: BentoGeometry): number;
+/** Nearest row boundary for a pointer; remaining rows use the uniform stride. */
+export declare function bentoRowAt(y: number, geometry: BentoGeometry): number;
+/** Map cells to frames; content and scrolling remain with the host. */
+export declare function bentoFrames(placements: readonly BentoPlacement[], geometry: BentoGeometry): ReadonlyMap<string, Frame>;

package/dist/bento.js

@@ -0,0 +1,165 @@
+const overlaps = (a, b) => a.col < b.col + b.w &&
+    a.col + a.w > b.col &&
+    a.row < b.row + b.h &&
+    a.row + a.h > b.row;
+function cell(value) {
+    const rounded = Math.round(value);
+    if (!Number.isFinite(value) || !Number.isSafeInteger(rounded))
+        throw new RangeError("Bento cells must be finite safe integers");
+    return rounded;
+}
+const normalize = (item, columns) => {
+    const w = Math.max(1, Math.min(columns, cell(item.w)));
+    return {
+        ...item,
+        w,
+        h: Math.max(1, cell(item.h)),
+        col: Math.max(0, Math.min(columns - w, cell(item.col))),
+        row: Math.max(0, cell(item.row)),
+    };
+};
+export function resolveBento(placements, columns, priority) {
+    if (new Set(placements.map((item) => item.id)).size !== placements.length)
+        throw new RangeError("Bento IDs must be unique");
+    const ordered = placements
+        .map((item) => normalize(item, columns))
+        .sort((a, b) => Number(b.id === priority) - Number(a.id === priority) ||
+        a.row - b.row ||
+        a.col - b.col);
+    const pushed = [];
+    for (const item of ordered) {
+        let next = item;
+        // Each jump passes at least one occupant; work is bounded by the tile count,
+        // rather than by a persisted row number.
+        for (let attempt = 0; attempt <= pushed.length; attempt += 1) {
+            const collisions = pushed.filter((other) => overlaps(next, other));
+            if (collisions.length === 0)
+                break;
+            next = {
+                ...next,
+                row: Math.max(...collisions.map((other) => other.row + other.h)),
+            };
+        }
+        if (!Number.isSafeInteger(next.row + next.h))
+            throw new RangeError("Bento extent exceeds safe integer cells");
+        pushed.push(next);
+    }
+    const byId = new Map(pushed.map((item) => [item.id, item]));
+    return placements.map((item) => byId.get(item.id) ?? item);
+}
+function settle(placements, columns, priority) {
+    const pushed = resolveBento(placements, columns, priority);
+    const chosen = pushed.find((item) => item.id === priority);
+    const packed = chosen ? [chosen] : [];
+    for (const item of [...pushed].sort((a, b) => a.row - b.row || a.col - b.col)) {
+        if (item.id === priority)
+            continue;
+        const rows = [
+            ...new Set([0, ...packed.map((other) => other.row + other.h)]),
+        ]
+            .filter((row) => row <= item.row)
+            .sort((a, b) => a - b);
+        const row = rows.find((candidate) => !packed.some((other) => overlaps({ ...item, row: candidate }, other)));
+        packed.push({ ...item, row: row ?? item.row });
+    }
+    if (chosen) {
+        const others = packed.filter((item) => item.id !== chosen.id);
+        const rows = [...new Set([0, ...others.map((item) => item.row + item.h)])]
+            .filter((row) => row <= chosen.row)
+            .sort((a, b) => a - b);
+        const row = rows.find((candidate) => !others.some((item) => overlaps({ ...chosen, row: candidate }, item)));
+        return settle(placements.map((item) => item.id === chosen.id
+            ? { ...chosen, row: row ?? chosen.row }
+            : (others.find((other) => other.id === item.id) ?? item)), columns);
+    }
+    const byId = new Map(packed.map((item) => [item.id, item]));
+    return placements.map((item) => byId.get(item.id) ?? item);
+}
+/** Reflow spans and compact vertical gaps while retaining stable tile identity/order. */
+export function arrangeBento(placements, columns) {
+    return settle(placements, columns);
+}
+function downwardTarget(item, op, placements, columns) {
+    const target = normalize({ ...item, col: op.col, row: op.row }, columns);
+    if (target.row <= item.row)
+        return target;
+    const occupants = placements.filter((other) => other.id !== item.id && overlaps(target, other));
+    return {
+        ...target,
+        row: Math.max(target.row, ...occupants.map((other) => other.row + other.h - item.h)),
+    };
+}
+/** Apply intents in order, reorder downward past occupants, then compact every tile. */
+export function applyBentoOps(placements, ops, columns) {
+    let result = resolveBento(placements, columns);
+    for (const op of ops) {
+        if (op.kind === "move") {
+            const item = result.find((item) => item.id === op.id);
+            const target = item
+                ? normalize({ ...item, col: op.col, row: op.row }, columns)
+                : undefined;
+            const occupant = target && item && target.col !== item.col
+                ? result.find((other) => other.id !== item.id &&
+                    overlaps(target, other) &&
+                    other.row === target.row &&
+                    other.w === item.w &&
+                    other.h === item.h)
+                : undefined;
+            if (item && target && occupant) {
+                result = settle(result.map((other) => other.id === item.id
+                    ? { ...target, col: occupant.col, row: occupant.row }
+                    : other.id === occupant.id
+                        ? { ...other, col: item.col, row: item.row }
+                        : other), columns);
+                continue;
+            }
+        }
+        result = settle(result.map((item) => item.id !== op.id
+            ? item
+            : op.kind === "move"
+                ? downwardTarget(item, op, result, columns)
+                : { ...item, w: op.w, h: op.h }), columns, op.id);
+    }
+    return result;
+}
+/** Pixel origin of an integer row, shared by frames and pointer snapping. */
+export function bentoRowOffset(row, geometry) {
+    const measured = geometry.rowHeights ?? [];
+    const count = Math.min(row, measured.length);
+    return (measured
+        .slice(0, count)
+        .reduce((sum, height) => sum + height + geometry.gap, 0) +
+        (row - count) * (geometry.rowHeight + geometry.gap));
+}
+/** Nearest row boundary for a pointer; remaining rows use the uniform stride. */
+export function bentoRowAt(y, geometry) {
+    let offset = 0;
+    const measured = geometry.rowHeights ?? [];
+    for (let row = 0; row < measured.length; row += 1) {
+        const stride = (measured[row] ?? geometry.rowHeight) + geometry.gap;
+        if (y < offset + stride / 2)
+            return row;
+        offset += stride;
+    }
+    const stride = geometry.rowHeight + geometry.gap;
+    return (measured.length +
+        (stride > 0 ? Math.max(0, Math.round((y - offset) / stride)) : 0));
+}
+/** Map cells to frames; content and scrolling remain with the host. */
+export function bentoFrames(placements, geometry) {
+    const { columns, width, rowHeight, gap } = geometry;
+    if (![width, rowHeight, gap, ...(geometry.rowHeights ?? [])].every((value) => Number.isFinite(value) && value >= 0))
+        throw new RangeError("Bento pixel geometry must be finite and nonnegative");
+    const cellWidth = Math.max(0, width - gap * (columns - 1)) / columns;
+    return new Map(resolveBento(placements, columns).map((item) => [
+        item.id,
+        {
+            x: item.col * (cellWidth + gap),
+            y: bentoRowOffset(item.row, geometry),
+            width: item.w * cellWidth + (item.w - 1) * gap,
+            height: bentoRowOffset(item.row + item.h, geometry) -
+                bentoRowOffset(item.row, geometry) -
+                gap,
+        },
+    ]));
+}

package/dist/headless.d.ts

@@ -0,0 +1,5 @@
+/** Layout state shared by browser and native hosts; renderers own containers. */
+export { createMaosaicoState } from "./layout.js";
+export type { MaosaicoState, Frame, Bounds, Minima } from "./layout.js";
+export { arrangeTiles } from "./tiling.js";
+export type { Arrangement, TilingOptions } from "./tiling.js";

package/dist/headless.js

@@ -0,0 +1,3 @@
+/** Layout state shared by browser and native hosts; renderers own containers. */
+export { createMaosaicoState } from "./layout.js";
+export { arrangeTiles } from "./tiling.js";

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { MaosaicoRoot, useMaosaicoItem, useMaosaicoLayout, } from "./provider.js";
+export { MaosaicoLayers, MaosaicoRegion, useLayer } from "./layers.js";
+export type { MaosaicoLayer } from "./layers.js";
+export type { TilingOptions } from "./tiling.js";
+export type { MaosaicoItem, MaosaicoItemOptions, MaosaicoItemBinding, } from "./provider.js";
+export type { Point, Size, Frame, Bounds, Minima, SnapSide } from "./layout.js";
+export { usePointerDrag } from "./pointer.js";
+export { arrangeBento, applyBentoOps, bentoFrames } from "./bento.js";
+export type { BentoColumns, BentoPlacement, BentoOp, BentoGeometry, } from "./bento.js";
+export { useMaosaicoBento } from "./bento-binding.js";
+export type { BentoOptions, BentoBinding } from "./bento-binding.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { MaosaicoRoot, useMaosaicoItem, useMaosaicoLayout, } from "./provider.js";
+export { MaosaicoLayers, MaosaicoRegion, useLayer } from "./layers.js";
+export { usePointerDrag } from "./pointer.js";
+export { arrangeBento, applyBentoOps, bentoFrames } from "./bento.js";
+export { useMaosaicoBento } from "./bento-binding.js";

package/dist/layers.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode, type ReactElement, type HTMLAttributes } from "react";
+/** Shell paint order. Window ranks are local to the windows root. */
+export type MaosaicoLayer = "desktop" | "windows" | "chrome" | "popover" | "dialog" | "toast" | "tooltip";
+/**
+ * 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 declare function MaosaicoLayers({ children, onDismiss, }: {
+    children?: ReactNode;
+    /** Light-dismiss transient overlays on host blur or focus entering a window. */
+    onDismiss?: () => void;
+}): ReactElement;
+/** Null until the shell root mounts (also during SSR); body outside a shell. */
+export declare function useLayer(layer: MaosaicoLayer): HTMLElement | null;
+/** The host positions the region; Maosaico owns its isolated layer and modality. */
+export declare const MaosaicoRegion: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    layer: "desktop" | "windows";
+} & import("react").RefAttributes<HTMLDivElement>>;