Slot grid

The geometry behind the window system: nine fixed slots around the edges of the viewport, leaving the center free for the orb.

import {
    computeSlot,
    computeAllSlots,
    slotAtPoint,
    SLOT_IDS,
    TOP_BAR_HEIGHT,
    SLOT_MARGIN,
    COLUMN_WIDTH,
    BOTTOM_STRIP_HEIGHT,
} from 'jarvis-react-ui';
import type { SlotId, SlotRect } from 'jarvis-react-ui';

Layout

Left column L1–L3 and right column R1–R3, each COLUMN_WIDTH (316px) wide.
Bottom strip B1–B3, BOTTOM_STRIP_HEIGHT (140px) high.
TOP_BAR_HEIGHT (60px) stays free for a TopBar; SLOT_MARGIN (12px) is the gap between slots and edges.

import type { CSSProperties } from 'react';
import { computeAllSlots, SLOT_IDS } from 'jarvis-react-ui';

// Slot geometry for a 1280 × 800 viewport, drawn at 40 % scale.
const VIEWPORT = { w: 1280, h: 800 };
const SCALE = 0.4;

export default function SlotMap() {
    const slots = computeAllSlots(VIEWPORT.w, VIEWPORT.h);

    return (
        <div
            className="relative w-[var(--w)] h-[var(--h)] border border-border bg-bg"
            style={
                {
                    '--w': `${VIEWPORT.w * SCALE}px`,
                    '--h': `${VIEWPORT.h * SCALE}px`,
                } as CSSProperties
            }
        >
            {SLOT_IDS.map((id) => {
                const r = slots[id];
                return (
                    <div
                        key={id}
                        className="absolute left-[var(--x)] top-[var(--y)] w-[var(--sw)] h-[var(--sh)] flex items-center justify-center border border-accent-dim bg-[rgba(76,168,232,0.06)] text-[9px] tracking-[1px] text-accent"
                        style={
                            {
                                '--x': `${r.x * SCALE}px`,
                                '--y': `${r.y * SCALE}px`,
                                '--sw': `${r.w * SCALE}px`,
                                '--sh': `${r.h * SCALE}px`,
                            } as CSSProperties
                        }
                    >
                        {id}
                    </div>
                );
            })}
        </div>
    );
}

Functions

Function	Returns	Description
`computeSlot(id, width, height)`	`SlotRect`	Rectangle of one slot for a viewport size.
`computeAllSlots(width, height)`	`Record<SlotId, SlotRect>`	All nine rectangles.
`slotAtPoint(x, y, rects)`	`SlotId \| null`	The slot containing a point, e.g. the pointer.

SlotRect is { x, y, w, h } in pixels relative to the viewport (or the container the window system fills). SLOT_IDS lists the ids in visual order.