@softov/scena 0.1.2

package/dist/ui/campus/CampusMappa.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { useCampus } from './context.js';
+import { resolveColorAlpha } from '../../types/colors.js';
+const DEFAULT_W = 160;
+const DEFAULT_H = 110;
+const DEFAULT_PADDING = 12;
+const DEFAULT_ANCHOR = { bottom: 12, right: 12 };
+export function CampusMappa({ nodes, onJumpTo, width = DEFAULT_W, height = DEFAULT_H, padding = DEFAULT_PADDING, anchor = DEFAULT_ANCHOR, className, style, }) {
+    const { viewportRef, subscribeViewport, container } = useCampus();
+    // Subscribe to viewport commits so the minimap redraws as the user pans/
+    // zooms — without re-rendering the node subtree (which reads the ref).
+    const viewport = useSyncExternalStore(subscribeViewport, () => viewportRef.current);
+    if (container.w === 0 || container.h === 0)
+        return null;
+    // World bounding box of all nodes.
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+        minX = Math.min(minX, n.bounds.x);
+        minY = Math.min(minY, n.bounds.y);
+        maxX = Math.max(maxX, n.bounds.x + n.bounds.w);
+        maxY = Math.max(maxY, n.bounds.y + n.bounds.h);
+    }
+    // Always include the viewport rect so the user can see where they are
+    // even when no nodes exist (or all are off-screen).
+    const viewLeft = -viewport.panX / viewport.scale;
+    const viewTop = -viewport.panY / viewport.scale;
+    const viewRight = viewLeft + container.w / viewport.scale;
+    const viewBottom = viewTop + container.h / viewport.scale;
+    if (!isFinite(minX)) {
+        minX = viewLeft;
+        minY = viewTop;
+        maxX = viewRight;
+        maxY = viewBottom;
+    }
+    else {
+        minX = Math.min(minX, viewLeft);
+        minY = Math.min(minY, viewTop);
+        maxX = Math.max(maxX, viewRight);
+        maxY = Math.max(maxY, viewBottom);
+    }
+    const worldW = Math.max(1, maxX - minX);
+    const worldH = Math.max(1, maxY - minY);
+    const innerW = width - padding * 2;
+    const innerH = height - padding * 2;
+    const scale = Math.min(innerW / worldW, innerH / worldH);
+    function worldToMini(x, y) {
+        return [padding + (x - minX) * scale, padding + (y - minY) * scale];
+    }
+    function onMiniClick(e) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const miniX = e.clientX - rect.left;
+        const miniY = e.clientY - rect.top;
+        const wx = (miniX - padding) / scale + minX;
+        const wy = (miniY - padding) / scale + minY;
+        onJumpTo(wx, wy);
+    }
+    const [vx, vy] = worldToMini(viewLeft, viewTop);
+    const vw = (viewRight - viewLeft) * scale;
+    const vh = (viewBottom - viewTop) * scale;
+    return (_jsxs("div", { className: ['oo-campus-mappa', className].filter(Boolean).join(' '), onClick: onMiniClick, onPointerDown: (e) => e.stopPropagation(), style: {
+            position: 'absolute',
+            ...anchor,
+            width,
+            height,
+            // Opt back into pointer events: the CampusVelum overlay that hosts
+            // the minimap is pointer-transparent so it doesn't block the canvas.
+            pointerEvents: 'auto',
+            background: 'rgba(20, 20, 24, 0.75)',
+            backdropFilter: 'blur(6px)',
+            WebkitBackdropFilter: 'blur(6px)',
+            borderRadius: 'var(--oo-radius-sm, 4px)',
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.32)',
+            cursor: 'crosshair',
+            zIndex: 40,
+            overflow: 'hidden',
+            ...style,
+        }, children: [nodes.map((n) => {
+                const [mx, my] = worldToMini(n.bounds.x, n.bounds.y);
+                const mw = Math.max(2, n.bounds.w * scale);
+                const mh = Math.max(2, n.bounds.h * scale);
+                return (_jsx("div", { title: n.id, style: {
+                        position: 'absolute',
+                        left: mx,
+                        top: my,
+                        width: mw,
+                        height: mh,
+                        background: resolveColorAlpha(n.color, 0.85),
+                        border: n.selected
+                            ? '1px solid rgba(255, 255, 255, 0.9)'
+                            : '1px solid rgba(255, 255, 255, 0.18)',
+                        borderRadius: 2,
+                        boxSizing: 'border-box',
+                    } }, n.id));
+            }), _jsx("div", { style: {
+                    position: 'absolute',
+                    left: vx,
+                    top: vy,
+                    width: vw,
+                    height: vh,
+                    border: '1px solid rgba(255, 255, 255, 0.9)',
+                    background: 'rgba(255, 255, 255, 0.06)',
+                    pointerEvents: 'none',
+                    boxSizing: 'border-box',
+                } })] }));
+}

package/dist/ui/campus/CampusNodus.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
+import type { CampusBounds } from './types.js';
+export type ResizeMode = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export type DragMode = 'move' | ResizeMode;
+export interface CampusNodusProps {
+    bounds: CampusBounds;
+    onCommit(next: CampusBounds): void;
+    minSize?: {
+        w: number;
+        h: number;
+    };
+    resizable?: boolean;
+    movable?: boolean;
+    dragHandle?: string;
+    selected?: boolean;
+    zIndex?: number;
+    children?: ReactNode;
+    onPointerDownCapture?(e: ReactPointerEvent<HTMLDivElement>): void;
+    onClick?(e: ReactMouseEvent<HTMLDivElement>): void;
+    onContextMenu?(e: ReactMouseEvent<HTMLDivElement>): void;
+    className?: string;
+    style?: CSSProperties;
+    bodyStyle?: CSSProperties;
+}
+export declare function CampusNodus({ bounds, onCommit, minSize, resizable, movable, dragHandle, selected, zIndex, children, onPointerDownCapture, onClick, onContextMenu, className, style, bodyStyle, }: CampusNodusProps): import("react").JSX.Element;

package/dist/ui/campus/CampusNodus.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { useCampus } from './context.js';
+import { useStratumZoom } from './stratum-context.js';
+const RESIZE_CURSORS = {
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+};
+const DEFAULT_MIN_SIZE = { w: 80, h: 60 };
+function applyResize(mode, start, dx, dy, min, maxDepth) {
+    let x = start.x;
+    let y = start.y;
+    let w = start.w;
+    let h = start.h;
+    if (mode.includes('w')) {
+        x = start.x + dx;
+        w = start.w - dx;
+    }
+    if (mode.includes('e')) {
+        w = start.w + dx;
+    }
+    if (mode.includes('n')) {
+        y = start.y + dy;
+        h = start.h - dy;
+    }
+    if (mode.includes('s')) {
+        h = start.h + dy;
+    }
+    // Min-size clamp preserves the anchored edge.
+    if (w < min.w) {
+        if (mode.includes('w'))
+            x = start.x + (start.w - min.w);
+        w = min.w;
+    }
+    if (h < min.h) {
+        if (mode.includes('n'))
+            y = start.y + (start.h - min.h);
+        h = min.h;
+    }
+    // World-bounds clamp. Origin can be negative; only enforced when
+    // maxDepth is finite. The west/north edges clamp to -maxDepth; the
+    // east/south edges clamp to +maxDepth, with width/height adjusted to
+    // keep the anchored edge stable.
+    if (isFinite(maxDepth)) {
+        if (x < -maxDepth) {
+            if (mode.includes('w'))
+                w = start.x + start.w - (-maxDepth);
+            x = -maxDepth;
+        }
+        if (y < -maxDepth) {
+            if (mode.includes('n'))
+                h = start.y + start.h - (-maxDepth);
+            y = -maxDepth;
+        }
+        if (x + w > maxDepth)
+            w = maxDepth - x;
+        if (y + h > maxDepth)
+            h = maxDepth - y;
+    }
+    return { x, y, w, h };
+}
+function clampMove(start, dx, dy, maxDepth) {
+    let x = start.x + dx;
+    let y = start.y + dy;
+    if (isFinite(maxDepth)) {
+        x = Math.max(-maxDepth, Math.min(maxDepth - start.w, x));
+        y = Math.max(-maxDepth, Math.min(maxDepth - start.h, y));
+    }
+    return { ...start, x, y };
+}
+export function CampusNodus({ bounds, onCommit, minSize = DEFAULT_MIN_SIZE, resizable = true, movable = true, dragHandle = '[data-campus-drag]', selected = false, zIndex, children, onPointerDownCapture, onClick, onContextMenu, className, style, bodyStyle, }) {
+    const { viewportRef, maxDepth } = useCampus();
+    const stratumZoom = useStratumZoom();
+    // Live local bounds during drag (so React state updates ~1×/frame instead
+    // of every pointermove). `null` means "no drag in progress; render the
+    // controlled `bounds` prop directly".
+    const [live, setLive] = useState(null);
+    const dragRef = useRef(null);
+    const rafRef = useRef(null);
+    const pendingRef = useRef(null);
+    // Reset live state whenever controlled bounds change from outside (e.g.,
+    // parent committed our previous drag, or layout snapshotted everything).
+    useEffect(() => {
+        setLive(null);
+    }, [bounds.x, bounds.y, bounds.w, bounds.h]);
+    // Drag math reads the live EFFECTIVE scale (viewport × this stratum's
+    // static zoom) straight from the campus viewport ref inside pointer
+    // handlers — so a wheel-zoom mid-drag stays 1:1, dragging stays 1:1 inside
+    // a scaled layer, AND this node never re-renders on pan/zoom.
+    function flush() {
+        if (pendingRef.current) {
+            setLive(pendingRef.current);
+            pendingRef.current = null;
+        }
+        rafRef.current = null;
+    }
+    function startDrag(mode, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragRef.current = {
+            mode,
+            startX: e.clientX,
+            startY: e.clientY,
+            start: live ?? bounds,
+        };
+    }
+    // Move drag starts from the root, but only when the pointerdown lands
+    // inside the `dragHandle` region of the node content. Resize handles
+    // stopPropagation in their own pointerdown, so they never reach here.
+    function onRootPointerDown(e) {
+        if (!movable)
+            return;
+        const target = e.target;
+        if (!target || !target.closest(dragHandle))
+            return;
+        startDrag('move', e);
+    }
+    function onPointerMove(e) {
+        const d = dragRef.current;
+        if (!d)
+            return;
+        const s = (viewportRef.current.scale * stratumZoom) || 1;
+        const dx = (e.clientX - d.startX) / s;
+        const dy = (e.clientY - d.startY) / s;
+        const next = d.mode === 'move'
+            ? clampMove(d.start, dx, dy, maxDepth)
+            : applyResize(d.mode, d.start, dx, dy, minSize, maxDepth);
+        pendingRef.current = next;
+        if (rafRef.current === null)
+            rafRef.current = requestAnimationFrame(flush);
+    }
+    function endDrag(e) {
+        if (!dragRef.current)
+            return;
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            flush();
+        }
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        const final = pendingRef.current ?? live ?? bounds;
+        pendingRef.current = null;
+        dragRef.current = null;
+        onCommit(final);
+    }
+    const visible = live ?? bounds;
+    const rootStyle = {
+        position: 'absolute',
+        left: visible.x,
+        top: visible.y,
+        width: visible.w,
+        height: visible.h,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        zIndex: zIndex ?? (selected ? 10 : 1),
+        background: 'var(--oo-color-canvas)',
+        border: `1px solid ${selected ? 'var(--oo-color-accent)' : 'var(--oo-color-border)'}`,
+        borderRadius: 'var(--oo-radius-sm)',
+        boxShadow: selected ? 'var(--oo-shadow-lg)' : 'var(--oo-shadow-md)',
+        ...style,
+    };
+    return (_jsxs("div", { className: ['oo-campus-nodus', className].filter(Boolean).join(' '), "data-selected": selected, style: rootStyle, onPointerDownCapture: onPointerDownCapture, onPointerDown: onRootPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onClick: onClick, onContextMenu: onContextMenu, children: [_jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', ...bodyStyle }, children: children }), resizable ? (_jsxs(_Fragment, { children: [_jsx(ResizeHandle, { mode: "n", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "s", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "e", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "w", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "nw", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "ne", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "sw", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag }), _jsx(ResizeHandle, { mode: "se", startDrag: startDrag, onPointerMove: onPointerMove, endDrag: endDrag })] })) : null] }));
+}
+function ResizeHandle({ mode, startDrag, onPointerMove, endDrag }) {
+    const HANDLE_THICKNESS = 6;
+    const CORNER_SIZE = 12;
+    const isCorner = mode.length === 2;
+    let style;
+    if (isCorner) {
+        style = {
+            position: 'absolute',
+            width: CORNER_SIZE,
+            height: CORNER_SIZE,
+            cursor: RESIZE_CURSORS[mode],
+            touchAction: 'none',
+            zIndex: 1,
+            ...(mode.includes('n') ? { top: -CORNER_SIZE / 2 } : { bottom: -CORNER_SIZE / 2 }),
+            ...(mode.includes('w') ? { left: -CORNER_SIZE / 2 } : { right: -CORNER_SIZE / 2 }),
+        };
+    }
+    else {
+        const horizontal = mode === 'n' || mode === 's';
+        style = {
+            position: 'absolute',
+            cursor: RESIZE_CURSORS[mode],
+            touchAction: 'none',
+            zIndex: 1,
+            ...(horizontal
+                ? {
+                    left: CORNER_SIZE,
+                    right: CORNER_SIZE,
+                    height: HANDLE_THICKNESS,
+                    ...(mode === 'n' ? { top: -HANDLE_THICKNESS / 2 } : { bottom: -HANDLE_THICKNESS / 2 }),
+                }
+                : {
+                    top: CORNER_SIZE,
+                    bottom: CORNER_SIZE,
+                    width: HANDLE_THICKNESS,
+                    ...(mode === 'w' ? { left: -HANDLE_THICKNESS / 2 } : { right: -HANDLE_THICKNESS / 2 }),
+                }),
+        };
+    }
+    return (_jsx("div", { className: `oo-campus-nodus-resize oo-campus-nodus-resize--${mode}`, onPointerDown: (e) => startDrag(mode, e), onPointerMove: onPointerMove, onPointerUp: endDrag, style: style }));
+}

package/dist/ui/campus/CampusStratum.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface CampusStratumProps {
+    zoom?: number;
+    pan?: {
+        x: number;
+        y: number;
+    };
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare function CampusStratum({ zoom, pan, zIndex, className, style, children, }: CampusStratumProps): import("react").JSX.Element;

package/dist/ui/campus/CampusStratum.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StratumContext } from './stratum-context.js';
+export function CampusStratum({ zoom = 1, pan, zIndex, className, style, children, }) {
+    const tx = pan?.x ?? 0;
+    const ty = pan?.y ?? 0;
+    const transform = tx !== 0 || ty !== 0 || zoom !== 1
+        ? `translate(${tx}px, ${ty}px) scale(${zoom})`
+        : undefined;
+    return (_jsx(StratumContext.Provider, { value: zoom, children: _jsx("div", { className: ['oo-campus-stratum', className].filter(Boolean).join(' '), style: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: 0,
+                height: 0,
+                transformOrigin: '0 0',
+                transform,
+                zIndex,
+                ...style,
+            }, children: children }) }));
+}

package/dist/ui/campus/CampusVelum.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface CampusVelumProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare function CampusVelum({ className, style, children }: CampusVelumProps): import("react").JSX.Element | null;

package/dist/ui/campus/CampusVelum.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CampusVelum({ className, style, children }) {
+    if (children == null || children === false)
+        return null;
+    return (_jsx("div", { className: ['oo-campus-velum', className].filter(Boolean).join(' '), style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            zIndex: 30,
+            ...style,
+        }, children: children }));
+}

package/dist/ui/campus/CampusView.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactNode, type Ref } from 'react';
+import type { CampusBounds, CampusController, CampusLayerConfig, CampusNode, CampusNodeRenderProps, CampusViewport } from './types.js';
+export type CampusNodeComponent = (props: CampusNodeRenderProps) => ReactNode;
+export type CampusNodeTypes = Record<string, CampusNodeComponent>;
+export interface CampusViewProps {
+    viewport: CampusViewport;
+    onViewportChange(next: CampusViewport): void;
+    maxDepth?: number;
+    minScale?: number;
+    maxScale?: number;
+    zoomStep?: number;
+    showGrid?: boolean;
+    onBackgroundClick?(): void;
+    onBackgroundContextMenu?(e: ReactMouseEvent<HTMLDivElement>): void;
+    nodes?: CampusNode[];
+    nodeTypes?: CampusNodeTypes;
+    nodeLayers?: Record<string, CampusLayerConfig>;
+    defaultLayer?: string;
+    onNodeCommit?(id: string, bounds: CampusBounds): void;
+    onNodeSelect?(id: string): void;
+    onNodeContextMenu?(id: string, e: ReactMouseEvent<HTMLDivElement>): void;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    ref?: Ref<CampusController>;
+}
+export declare function CampusView({ viewport, onViewportChange, maxDepth, minScale, maxScale, zoomStep, showGrid, onBackgroundClick, onBackgroundContextMenu, nodes, nodeTypes, nodeLayers, defaultLayer, onNodeCommit, onNodeSelect, onNodeContextMenu, className, style, children, ref, }: CampusViewProps): import("react").JSX.Element;