@softov/scena 0.1.2

package/dist/ui/campus/CampusView.js

@@ -0,0 +1,420 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { CampusContext, useCampus } from './context.js';
+import { CampusNodus } from './CampusNodus.js';
+import { CampusStratum } from './CampusStratum.js';
+import { CampusVelum } from './CampusVelum.js';
+const DEFAULT_MIN_SCALE = 0.1;
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_ZOOM_STEP = 1.1;
+const PAN_DRAG_THRESHOLD_SQ = 9;
+const FIT_PADDING = 0.95;
+const GRID_STEP_WORLD = 40;
+// Persist the live viewport this long after the last pan/zoom event. Keeps
+// app state / urls in sync without a store write per frame.
+const VIEWPORT_PERSIST_MS = 140;
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function transformOf(v) {
+    return `translate(${v.panX}px, ${v.panY}px) scale(${v.scale})`;
+}
+// Constrain a viewport to the world bounds. When the world is wider than
+// the container at the current scale the pan is clamped so the view sits
+// fully inside the world; when the world is narrower the world is centered
+// (pan = container_dim / 2 places world origin at the view center).
+function clampViewport(v, container, maxDepth, minScale, maxScale) {
+    const scale = clamp(v.scale, minScale, maxScale);
+    if (!isFinite(maxDepth))
+        return { ...v, scale };
+    let { panX, panY } = v;
+    const worldHalfW = maxDepth * scale;
+    const worldHalfH = maxDepth * scale;
+    if (2 * worldHalfW >= container.w) {
+        panX = clamp(panX, container.w - worldHalfW, worldHalfW);
+    }
+    else {
+        panX = container.w / 2;
+    }
+    if (2 * worldHalfH >= container.h) {
+        panY = clamp(panY, container.h - worldHalfH, worldHalfH);
+    }
+    else {
+        panY = container.h / 2;
+    }
+    return { scale, panX, panY };
+}
+export function CampusView({ viewport, onViewportChange, maxDepth = Infinity, minScale = DEFAULT_MIN_SCALE, maxScale = DEFAULT_MAX_SCALE, zoomStep = DEFAULT_ZOOM_STEP, showGrid = true, onBackgroundClick, onBackgroundContextMenu, nodes, nodeTypes, nodeLayers, defaultLayer, onNodeCommit, onNodeSelect, onNodeContextMenu, className, style, children, ref, }) {
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const zoomStepRef = useRef(zoomStep);
+    const minScaleRef = useRef(minScale);
+    const maxScaleRef = useRef(maxScale);
+    const commitViewportThrottledRef = useRef(commitViewportThrottled);
+    // Container size is shared via context so CampusMappa doesn't have to
+    // remeasure independently. ResizeObserver keeps it fresh — important for
+    // fit-to-view math after the surrounding shell resizes.
+    const [container, setContainer] = useState({ w: 0, h: 0 });
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        function measure() {
+            const r = el.getBoundingClientRect();
+            setContainer({ w: r.width, h: r.height });
+        }
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    // ----- Live viewport store -----
+    // The single source of truth for the live viewport. Updated imperatively
+    // (no setState) so a pan never re-renders the node subtree. Initialized
+    // from the prop once; external prop changes are reconciled in an effect.
+    const viewportRef = useRef(viewport);
+    const listenersRef = useRef(new Set());
+    const subscribeViewport = useCallback((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+            listenersRef.current.delete(listener);
+        };
+    }, []);
+    function notify() {
+        listenersRef.current.forEach((l) => l());
+    }
+    function applyWorldTransform(v) {
+        const el = wrapperRef.current;
+        if (el)
+            el.style.transform = transformOf(v);
+    }
+    // Debounced persistence. onViewportChange may change identity each render,
+    // so read it through a ref.
+    const onViewportChangeRef = useRef(onViewportChange);
+    onViewportChangeRef.current = onViewportChange;
+    const persistTimerRef = useRef(null);
+    function schedulePersist() {
+        if (persistTimerRef.current !== null)
+            window.clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = window.setTimeout(() => {
+            persistTimerRef.current = null;
+            onViewportChangeRef.current(viewportRef.current);
+        }, VIEWPORT_PERSIST_MS);
+    }
+    useEffect(() => () => {
+        if (persistTimerRef.current !== null)
+            window.clearTimeout(persistTimerRef.current);
+    }, []);
+    // External viewport changes (programmatic set from outside, persisted-state
+    // reload). Ignore echoes of our own debounced writes (prop === live value),
+    // otherwise re-seat the live viewport and redraw.
+    useEffect(() => {
+        const v = viewportRef.current;
+        if (viewport.scale === v.scale && viewport.panX === v.panX && viewport.panY === v.panY) {
+            return;
+        }
+        viewportRef.current = viewport;
+        applyWorldTransform(viewport);
+        notify();
+    }, [viewport]);
+    // rAF-coalesced viewport commit. A single wheel tick can fire dozens of
+    // events; without coalescing each one would mutate the DOM separately.
+    const pendingRef = useRef(null);
+    const rafRef = useRef(null);
+    function commitViewport(v) {
+        const clamped = clampViewport(v, container, maxDepth, minScale, maxScale);
+        viewportRef.current = clamped;
+        applyWorldTransform(clamped); // imperative: no React re-render
+        notify(); // grid + minimap redraw (only)
+        schedulePersist(); // app-state write, debounced on settle
+    }
+    function commitViewportThrottled(v) {
+        pendingRef.current = v;
+        if (rafRef.current === null) {
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                const next = pendingRef.current;
+                pendingRef.current = null;
+                if (next)
+                    commitViewport(next);
+            });
+        }
+    }
+    // ----- Wheel: ctrl/meta + wheel zooms around cursor, plain wheel pans.
+    // Native listener (not React's onWheel) so we can preventDefault — React's
+    // synthetic wheel is passive and won't suppress the page scroll.
+    useEffect(() => {
+        zoomStepRef.current = zoomStep;
+        minScaleRef.current = minScale;
+        maxScaleRef.current = maxScale;
+        commitViewportThrottledRef.current = commitViewportThrottled;
+        // No dependency array on purpose. This syncs the latest values into refs
+        // that the native wheel listener reads without re-subscribing, so it must
+        // run on every render. `commitViewportThrottled` is redeclared each render,
+        // so the previous array was already "every render" spelled out the long way.
+    });
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        function onWheel(e) {
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const v = viewportRef.current;
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                const mouseX = e.clientX - rect.left;
+                const mouseY = e.clientY - rect.top;
+                const factor = e.deltaY < 0
+                    ? zoomStepRef.current
+                    : 1 / zoomStepRef.current;
+                const newScale = clamp(v.scale * factor, minScaleRef.current, maxScaleRef.current);
+                const worldX = (mouseX - v.panX) / v.scale;
+                const worldY = (mouseY - v.panY) / v.scale;
+                commitViewportThrottledRef.current({
+                    scale: newScale,
+                    panX: mouseX - worldX * newScale,
+                    panY: mouseY - worldY * newScale,
+                });
+            }
+            else {
+                e.preventDefault();
+                const dx = -(e.shiftKey ? e.deltaY : e.deltaX);
+                const dy = -(e.shiftKey ? 0 : e.deltaY);
+                commitViewportThrottledRef.current({
+                    scale: v.scale,
+                    panX: v.panX + dx,
+                    panY: v.panY + dy,
+                });
+            }
+        }
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
+    // ----- Background pan drag -----
+    const panDragRef = useRef(null);
+    function isBackgroundTarget(target) {
+        return target === containerRef.current || target === wrapperRef.current;
+    }
+    function onContainerPointerDown(e) {
+        if (!isBackgroundTarget(e.target))
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const v = viewportRef.current;
+        panDragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startPanX: v.panX,
+            startPanY: v.panY,
+            moved: false,
+        };
+    }
+    function onContainerPointerMove(e) {
+        const p = panDragRef.current;
+        if (!p)
+            return;
+        const dx = e.clientX - p.startX;
+        const dy = e.clientY - p.startY;
+        if (!p.moved && dx * dx + dy * dy < PAN_DRAG_THRESHOLD_SQ)
+            return;
+        if (!p.moved && containerRef.current) {
+            // Cursor is set imperatively: pan doesn't re-render so a style-prop
+            // wouldn't update.
+            containerRef.current.style.cursor = 'grabbing';
+        }
+        p.moved = true;
+        commitViewportThrottled({
+            scale: viewportRef.current.scale,
+            panX: p.startPanX + dx,
+            panY: p.startPanY + dy,
+        });
+    }
+    function onContainerPointerUp(e) {
+        const p = panDragRef.current;
+        if (!p)
+            return;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        panDragRef.current = null;
+        if (containerRef.current)
+            containerRef.current.style.cursor = '';
+        if (!p.moved)
+            onBackgroundClick?.();
+    }
+    // ----- Background right-click -----
+    function onContainerContextMenu(e) {
+        if (!isBackgroundTarget(e.target))
+            return;
+        onBackgroundContextMenu?.(e);
+    }
+    // ----- Imperative controller (consumed via ref) -----
+    useImperativeHandle(ref, () => ({
+        fitToView(bounds) {
+            const c = container;
+            if (c.w === 0 || c.h === 0)
+                return;
+            // Default fit target: the full world box. Consumers usually pass
+            // the union of their node bounds (so empty space at the edges is
+            // ignored even when the world itself is bounded).
+            const target = bounds ?? (isFinite(maxDepth)
+                ? { x: -maxDepth, y: -maxDepth, w: 2 * maxDepth, h: 2 * maxDepth }
+                : { x: 0, y: 0, w: 0, h: 0 });
+            if (target.w <= 0 || target.h <= 0)
+                return;
+            const scale = clamp(Math.min(c.w / target.w, c.h / target.h) * FIT_PADDING, minScale, maxScale);
+            const worldCx = target.x + target.w / 2;
+            const worldCy = target.y + target.h / 2;
+            commitViewport({
+                scale,
+                panX: c.w / 2 - worldCx * scale,
+                panY: c.h / 2 - worldCy * scale,
+            });
+        },
+        centerOn(worldX, worldY) {
+            const c = container;
+            const v = viewportRef.current;
+            if (c.w === 0 || c.h === 0)
+                return;
+            commitViewport({
+                scale: v.scale,
+                panX: c.w / 2 - worldX * v.scale,
+                panY: c.h / 2 - worldY * v.scale,
+            });
+        },
+        resetViewport() {
+            commitViewport({ scale: 1, panX: 0, panY: 0 });
+        },
+        zoomBy(factor) {
+            zoomAroundCenter(viewportRef.current.scale * factor);
+        },
+        zoomToScale(scale) {
+            zoomAroundCenter(scale);
+        },
+    }), 
+    // The handle captures `container` and `maxDepth` so it must re-build
+    // when those change; everything else flows through refs.
+    //
+    // `commitViewport` and `zoomAroundCenter` are intentionally absent. They
+    // read only container/maxDepth/minScale/maxScale plus refs, and all four
+    // are listed here — so the captured closures are never stale. Listing the
+    // functions themselves would rebuild the handle on every render, since
+    // they are redeclared each time, defeating the memo and forcing every
+    // consumer holding the ref to re-run.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [container, maxDepth, minScale, maxScale]);
+    function zoomAroundCenter(rawScale) {
+        const c = container;
+        if (c.w === 0 || c.h === 0)
+            return;
+        const v = viewportRef.current;
+        const next = clamp(rawScale, minScale, maxScale);
+        if (next === v.scale)
+            return;
+        const cx = c.w / 2;
+        const cy = c.h / 2;
+        const worldX = (cx - v.panX) / v.scale;
+        const worldY = (cy - v.panY) / v.scale;
+        commitViewport({
+            scale: next,
+            panX: cx - worldX * next,
+            panY: cy - worldY * next,
+        });
+    }
+    // Bucket nodes into ordered strata. Configured layers come first sorted by
+    // `index`; any layer referenced by a node but not configured (including the
+    // implicit default) is appended after them. Each stratum carries its node
+    // list so the render is a flat strata→nodes walk.
+    const strata = useMemo(() => {
+        const configured = Object.entries(nodeLayers ?? {})
+            .map(([name, config]) => ({ name, config }))
+            .sort((a, b) => a.config.index - b.config.index);
+        const fallback = defaultLayer ?? configured[0]?.name ?? 'default';
+        const buckets = new Map();
+        for (const node of nodes ?? []) {
+            const layer = node.layer && nodeLayers?.[node.layer] ? node.layer : fallback;
+            const bucket = buckets.get(layer);
+            if (bucket)
+                bucket.push(node);
+            else
+                buckets.set(layer, [node]);
+        }
+        const result = [];
+        const seen = new Set();
+        for (const { name, config } of configured) {
+            result.push({ name, config, nodes: buckets.get(name) ?? [] });
+            seen.add(name);
+        }
+        for (const [name, layerNodes] of buckets) {
+            if (seen.has(name))
+                continue;
+            result.push({ name, config: { index: result.length }, nodes: layerNodes });
+        }
+        return result;
+    }, [nodes, nodeLayers, defaultLayer]);
+    // Context is intentionally free of the live viewport so node re-renders
+    // don't track pan/zoom. It changes only on container/maxDepth.
+    const ctxValue = useMemo(() => ({ viewportRef, subscribeViewport, container, maxDepth }), [subscribeViewport, container, maxDepth]);
+    return (_jsx(CampusContext.Provider, { value: ctxValue, children: _jsxs("div", { ref: containerRef, className: ['oo-campus', className].filter(Boolean).join(' '), onPointerDown: onContainerPointerDown, onPointerMove: onContainerPointerMove, onPointerUp: onContainerPointerUp, onContextMenu: onContainerContextMenu, style: {
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden',
+                background: 'var(--oo-color-surface)',
+                touchAction: 'none',
+                cursor: 'default',
+                ...style,
+            }, children: [showGrid ? _jsx(CampusGrid, {}) : null, _jsx("div", { ref: wrapperRef, className: "oo-campus-world", style: {
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        width: 0,
+                        height: 0,
+                        // Initial transform; live updates are imperative (applyWorldTransform).
+                        transform: transformOf(viewportRef.current),
+                        transformOrigin: '0 0',
+                    }, children: strata.map((stratum) => (_jsx(CampusStratum, { zoom: stratum.config.zoom, pan: stratum.config.pan, zIndex: stratum.config.index, children: stratum.nodes.map((node) => {
+                            const Renderer = nodeTypes?.[node.type];
+                            if (!Renderer)
+                                return null;
+                            return (_jsx(CampusNodusFrame, { node: node, onCommit: onNodeCommit, onSelect: onNodeSelect, onContextMenu: onNodeContextMenu, children: _jsx(Renderer, { id: node.id, selected: Boolean(node.selected), data: node.data }) }, node.id));
+                        }) }, stratum.name))) }), _jsx(CampusVelum, { children: children })] }) }));
+}
+function CampusNodusFrame({ node, onCommit, onSelect, onContextMenu, children, }) {
+    return (_jsx(CampusNodus, { bounds: node.bounds, selected: node.selected, resizable: node.resizable, movable: node.movable, onCommit: (next) => onCommit?.(node.id, next), onPointerDownCapture: () => {
+            if (!node.selected)
+                onSelect?.(node.id);
+        }, onContextMenu: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect?.(node.id);
+            onContextMenu?.(node.id, e);
+        }, children: children }));
+}
+// Faint world-space grid background. Two repeating linear gradients (h + v),
+// pinned to the world origin via background-position so the lines stay on
+// integer world coords as the user pans/zooms. Opacity fades at very low
+// zooms (cells smaller than ~6px) and very high zooms (cells filling the
+// viewport) to avoid visual noise.
+//
+// Subscribes to the viewport store directly so it redraws on pan/zoom without
+// CampusView (and therefore the node subtree) re-rendering.
+function CampusGrid() {
+    const { viewportRef, subscribeViewport } = useCampus();
+    const { panX, panY, scale } = useSyncExternalStore(subscribeViewport, () => viewportRef.current);
+    const step = GRID_STEP_WORLD * scale;
+    const opacity = step < 6 ? 0 : step > 200 ? 0.04 : Math.min(0.12, step / 200);
+    if (opacity <= 0)
+        return null;
+    const offX = ((panX % step) + step) % step;
+    const offY = ((panY % step) + step) % step;
+    const stroke = `rgba(128, 128, 128, ${opacity})`;
+    return (_jsx("div", { className: "oo-campus-grid", "aria-hidden": true, style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            backgroundImage: `linear-gradient(to right, ${stroke} 1px, transparent 1px),` +
+                `linear-gradient(to bottom, ${stroke} 1px, transparent 1px)`,
+            backgroundSize: `${step}px ${step}px, ${step}px ${step}px`,
+            backgroundPosition: `${offX}px ${offY}px, ${offX}px ${offY}px`,
+        } }));
+}

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

@@ -0,0 +1,13 @@
+import type { MutableRefObject } from 'react';
+import type { CampusViewport } from './types.js';
+export interface CampusContextValue {
+    viewportRef: MutableRefObject<CampusViewport>;
+    subscribeViewport(listener: () => void): () => void;
+    container: {
+        w: number;
+        h: number;
+    };
+    maxDepth: number;
+}
+export declare const CampusContext: import("react").Context<CampusContextValue | null>;
+export declare function useCampus(): CampusContextValue;

package/dist/ui/campus/context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+export const CampusContext = createContext(null);
+// Throws if used outside <CampusView>. Components that absolutely depend on
+// CampusContext (CampusNodus, CampusMappa) should call this so misuse fails
+// loud at mount instead of silently picking up defaults.
+export function useCampus() {
+    const ctx = useContext(CampusContext);
+    if (!ctx) {
+        throw new Error('useCampus() must be used inside <CampusView>');
+    }
+    return ctx;
+}

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

@@ -0,0 +1,14 @@
+export { CampusView } from './CampusView.js';
+export type { CampusViewProps, CampusNodeComponent, CampusNodeTypes, } from './CampusView.js';
+export { CampusNodus } from './CampusNodus.js';
+export type { CampusNodusProps, DragMode, ResizeMode, } from './CampusNodus.js';
+export { CampusStratum } from './CampusStratum.js';
+export type { CampusStratumProps } from './CampusStratum.js';
+export { CampusVelum } from './CampusVelum.js';
+export type { CampusVelumProps } from './CampusVelum.js';
+export { CampusMappa } from './CampusMappa.js';
+export type { CampusMappaProps } from './CampusMappa.js';
+export { useCampus } from './context.js';
+export type { CampusContextValue } from './context.js';
+export { useStratumZoom } from './stratum-context.js';
+export type { CampusBounds, CampusViewport, CampusController, CampusMappaNode, CampusNode, CampusNodeRenderProps, CampusLayerConfig, } from './types.js';

package/dist/ui/campus/index.js

@@ -0,0 +1,11 @@
+// Campus — generic pan/zoom canvas primitives. Originally extracted from
+// SpatialLayout; reusable for flowchart editors, free-form whiteboards,
+// node-graph views, etc. SpatialLayout is now a thin mount-aware adapter
+// over these.
+export { CampusView } from './CampusView.js';
+export { CampusNodus } from './CampusNodus.js';
+export { CampusStratum } from './CampusStratum.js';
+export { CampusVelum } from './CampusVelum.js';
+export { CampusMappa } from './CampusMappa.js';
+export { useCampus } from './context.js';
+export { useStratumZoom } from './stratum-context.js';

package/dist/ui/campus/stratum-context.d.ts

@@ -0,0 +1,2 @@
+export declare const StratumContext: import("react").Context<number>;
+export declare function useStratumZoom(): number;

package/dist/ui/campus/stratum-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+// Per-stratum effective zoom, published by CampusStratum and read by
+// CampusNodus. A node converts pointer-pixel drag deltas to world pixels by
+// dividing by (viewport.scale × stratumZoom); without the stratum factor a
+// node inside a statically-scaled layer would drift under the cursor.
+// Default 1 means "no extra layer scaling" (the common single-layer case).
+export const StratumContext = createContext(1);
+export function useStratumZoom() {
+    return useContext(StratumContext);
+}

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

@@ -0,0 +1,47 @@
+export interface CampusBounds {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface CampusViewport {
+    scale: number;
+    panX: number;
+    panY: number;
+}
+export interface CampusController {
+    fitToView(bounds?: CampusBounds): void;
+    centerOn(worldX: number, worldY: number): void;
+    resetViewport(): void;
+    zoomBy(factor: number): void;
+    zoomToScale(scale: number): void;
+}
+export interface CampusMappaNode {
+    id: string;
+    bounds: CampusBounds;
+    color?: string;
+    selected?: boolean;
+}
+export interface CampusNode {
+    id: string;
+    type: string;
+    bounds: CampusBounds;
+    layer?: string;
+    selected?: boolean;
+    resizable?: boolean;
+    movable?: boolean;
+    data?: unknown;
+}
+export interface CampusLayerConfig {
+    index: number;
+    zoom?: number;
+    pan?: {
+        x: number;
+        y: number;
+    };
+}
+export interface CampusNodeRenderProps {
+    id: string;
+    selected: boolean;
+    data: unknown;
+}

package/dist/ui/campus/types.js

@@ -0,0 +1,4 @@
+// Public surface for the Campus primitives (CampusView/CampusNodus/
+// CampusMappa). Kept in its own file so consumers can `import type` without
+// pulling in the React components.
+export {};

package/dist/ui/chart/BarChart.css

@@ -0,0 +1,53 @@
+.oo-barchart {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.oo-barchart__track {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  width: 100%;
+}
+.oo-barchart__bar {
+  flex: 1;
+  min-width: 2px;
+  border-radius: 2px 2px 0 0;
+}
+.oo-barchart__bar--stacked {
+  display: flex;
+  flex-direction: column-reverse;
+  overflow: hidden;
+}
+.oo-barchart__bar--grouped {
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  height: 100%;
+}
+.oo-barchart__bar--grouped .oo-barchart__seg {
+  flex: 1;
+  border-radius: 2px 2px 0 0;
+}
+.oo-barchart__seg {
+  width: 100%;
+}
+.oo-barchart__labels {
+  display: flex;
+  gap: 2px;
+}
+.oo-barchart__label {
+  flex: 1;
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oo-barchart--empty {
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+  font-style: italic;
+}

package/dist/ui/chart/BarChart.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+import './BarChart.css';
+export interface BarChartSegment {
+    value: number;
+    color: string;
+    label?: string;
+}
+export interface BarChartBar {
+    key: string;
+    value?: number;
+    segments?: BarChartSegment[];
+    title?: string;
+    label?: string;
+}
+export interface BarChartProps {
+    bars: BarChartBar[];
+    height?: number;
+    mode?: 'stacked' | 'grouped';
+    showLabels?: boolean;
+    emptyLabel?: string;
+    color?: string;
+    style?: CSSProperties;
+}
+export declare function BarChart({ bars, height, mode, showLabels, emptyLabel, color, style, }: BarChartProps): import("react").JSX.Element;

package/dist/ui/chart/BarChart.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './BarChart.css';
+const DEFAULT_COLOR = 'var(--oo-color-accent)';
+function segmentsOf(bar, color) {
+    if (bar.segments && bar.segments.length > 0)
+        return bar.segments;
+    return [{ value: bar.value ?? 0, color }];
+}
+function totalOf(segs) {
+    return segs.reduce((sum, s) => sum + s.value, 0);
+}
+export function BarChart({ bars, height = 64, mode = 'stacked', showLabels, emptyLabel, color = DEFAULT_COLOR, style, }) {
+    // Bound props can resolve to undefined before their store path is seeded.
+    bars = bars ?? [];
+    if (bars.length === 0) {
+        return (_jsx("div", { className: "oo-barchart oo-barchart--empty", style: style, children: emptyLabel ?? 'No data' }));
+    }
+    // Scale: grouped compares individual segments; stacked compares bar totals.
+    const max = Math.max(1, ...bars.map((b) => {
+        const segs = segmentsOf(b, color);
+        return mode === 'grouped' ? Math.max(0, ...segs.map((s) => s.value)) : totalOf(segs);
+    }));
+    return (_jsxs("div", { className: "oo-barchart", style: style, children: [_jsx("div", { className: "oo-barchart__track", style: { height }, children: bars.map((bar) => {
+                    const segs = segmentsOf(bar, color);
+                    const total = totalOf(segs);
+                    const title = bar.title ?? `${bar.label ?? bar.key}: ${total}`;
+                    if (mode === 'grouped') {
+                        return (_jsx("div", { className: "oo-barchart__bar oo-barchart__bar--grouped", title: title, children: segs.map((s, i) => (_jsx("div", { className: "oo-barchart__seg", title: s.label, style: { height: `${(s.value / max) * 100}%`, background: s.color, opacity: s.value === 0 ? 0.25 : 1 } }, i))) }, bar.key));
+                    }
+                    return (_jsx("div", { className: "oo-barchart__bar oo-barchart__bar--stacked", title: title, style: { height: `${(total / max) * 100}%`, opacity: total === 0 ? 0.25 : 1 }, children: segs.map((s, i) => (_jsx("div", { className: "oo-barchart__seg", title: s.label, style: { height: total > 0 ? `${(s.value / total) * 100}%` : '0%', background: s.color } }, i))) }, bar.key));
+                }) }), showLabels ? (_jsx("div", { className: "oo-barchart__labels", children: bars.map((bar) => (_jsx("div", { className: "oo-barchart__label", children: bar.label ?? bar.key }, bar.key))) })) : null] }));
+}

package/dist/ui/chart/Donut.css

@@ -0,0 +1,15 @@
+.oo-donut {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+.oo-donut__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--oo-font-size-sm);
+  font-weight: 600;
+  color: var(--oo-color-text);
+}