@wenathlan/saddle 2.0.151 → 2.0.152

package/dist/Sol/shell/Shell.js

@@ -0,0 +1,335 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// the saddle shell of the theme.
+// Shell — the app surface of the saddle, answering the FAMILY STANDALONE
+// LAW: an app accessed by its own url (wenathlan.github.io/devthink/
+// saddle/) is the normal application, one hundred percent — it renders
+// FULL-BLEED, the routed stage owning the whole viewport with the page
+// rail of SECTIONS as the app's own navigation (no window chrome of its
+// own: no title bar, no caption buttons, no resize handles, no inactive
+// grayscale, no entry scale). The WINDOW (the draggable frame with the
+// captions and the eight handles) exists ONLY when the app is embedded
+// inside the DevThink OS power clip — the framed contract below renders
+// the SAME surface tree under the shell--embedded seat: the sectioned
+// rail and the routed stage answer in both seats so the design is
+// IDENTICAL at the direct url and inside the os window (the window-era
+// law), and the OS draws the window chrome around it. The file also
+// exports every shared primitive the page
+// folders import from "./shell/Shell" (or "@/shell/Shell"): PageShell,
+// SaddleMark, SectionRail, ThemeProvider, useTheme, ErrorBoundary, Button,
+// buttonVariants, the Card family, the Tooltip family and the Toaster.
+// Nothing shared lives loose at the theme root; page-specific components
+// live in the page folder that owns them.
+import { Slot } from '@radix-ui/react-slot';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cva } from 'class-variance-authority';
+import { WarningRegular as AlertTriangle, WindowAppsRegular as AppWindow, BookOpenRegular as BookOpen, BoxMultipleRegular as Boxes, BrainCircuitRegular as Cpu, BeakerRegular as FlaskConical, GaugeRegular as Gauge, TableRegular as LayoutDashboard, ArrowEnterLeftRegular as LogIn, WeatherMoonRegular as Moon, PlugConnectedRegular as PlugZap, ArrowCounterclockwiseRegular as RotateCcw, WeatherSunnyRegular as Sun, WindowConsoleRegular as TerminalSquare, PersonAddRegular as UserPlus, } from '@fluentui/react-icons';
+import { useTheme as useNextTheme } from 'next-themes';
+import { Component, createContext, useContext, useEffect, useState, } from 'react';
+import { Toaster as Sonner } from 'sonner';
+import { Link, useLocation } from 'wouter';
+import { familyrow } from '../../family.ts';
+import { familyurl } from '../../familyurl.ts';
+import { label } from '../../labels.ts';
+import { cn } from '../../utils.ts';
+const ThemeContext = createContext(undefined);
+export function ThemeProvider({ children, defaultTheme = 'light', switchable = false, }) {
+    const [theme, setTheme] = useState(() => {
+        if (switchable) {
+            const stored = localStorage.getItem('theme');
+            return stored || defaultTheme;
+        }
+        return defaultTheme;
+    });
+    useEffect(() => {
+        const root = document.documentElement;
+        if (theme === 'dark') {
+            root.classList.add('dark');
+        }
+        else {
+            root.classList.remove('dark');
+        }
+        if (switchable) {
+            localStorage.setItem('theme', theme);
+        }
+    }, [theme, switchable]);
+    const toggleTheme = switchable
+        ? () => {
+            setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+        }
+        : undefined;
+    return (_jsx(ThemeContext.Provider, { value: { theme, toggleTheme, switchable }, children: children }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return context;
+}
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsx("div", { className: "flex items-center justify-center min-h-screen p-8 bg-background", children: _jsxs("div", { className: "flex flex-col items-center w-full max-w-2xl p-8", children: [_jsx(AlertTriangle, { fontSize: 48, className: "text-destructive mb-6 flex-shrink-0" }), _jsx("h2", { className: "text-xl mb-4", children: "An unexpected error occurred." }), _jsx("div", { className: "p-4 w-full rounded bg-muted overflow-auto mb-6", children: _jsx("pre", { className: "text-sm text-muted-foreground whitespace-break-spaces", children: this.state.error?.stack }) }), _jsxs("button", { type: "button", onClick: () => window.location.reload(), className: cn('flex items-center gap-2 px-4 py-2 rounded-lg', 'bg-primary text-primary-foreground', 'hover:opacity-90 cursor-pointer'), children: [_jsx(RotateCcw, { fontSize: 16 }), "Reload Page"] })] }) }));
+        }
+        return this.props.children;
+    }
+}
+/* =============================== brand mark ============================ */
+/**
+ * SaddleMark — the premium drawn icon of the theme, rebuilt in the house
+ * icon spirit (the devthink Sol/shell/app.icons.tsx standard): a gradient
+ * squircle face over the saddle tan-leather story, a soft top gloss, a mid
+ * layer of story orbs over a pedestal band, two blurred inner contours, a
+ * contact ellipse, a discrete film grain and the glyph in thick ivory
+ * strokes over a translucent backing. The finishing (glow breathing,
+ * perspective tilt, glyph lift, one sheen sweep on hover) is animated by
+ * Sol/sol.css — plain transform/opacity/filter transitions, guarded for
+ * reduced motion and coarse pointers. Sized by the caller class or by the
+ * chrome CSS (.dt-nav__start .sol-mark, .dt-start__foot .sol-mark).
+ */
+/** the tan-leather story of saddle: face gradient top, glow and orb */
+const MARK_STORY = '#d6b483';
+/** the deep shade the face gradient settles into */
+const MARK_DEEP = '#8f6b3c';
+/** the warm subtone of the mid layer, contours and contact ellipse */
+const MARK_SOFT = '#f2e3c8';
+/** the warm ivory of the glyph strokes */
+const MARK_IVORY = '#fbf5ea';
+/** the translucent backing of the outlined glyph shapes */
+const MARK_BACKING = 'rgba(255,255,255,.14)';
+/** the asymmetric squircle of the face: tighter shoulders, heavier base */
+const MARK_SQUIRCLE = 'M22 0 L74 0 Q96 0 96 22 L96 66 Q96 96 66 96 L30 96 Q0 96 0 66 L0 22 Q0 0 22 0 Z';
+/** The sandbox engine glyph: the crate drawn in light isometric. */
+function MarkGlyph() {
+    return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M31 42.5 L40 33 H65 L56 42.5 Z", fill: MARK_BACKING }), _jsx("path", { d: "M56 42.5 L65 33 V56 L56 65.5 Z", fill: "rgba(255,255,255,.09)" }), _jsx("rect", { x: "31", y: "42.5", width: "25", height: "23", rx: "2.5", fill: MARK_BACKING })] }));
+}
+export function SaddleMark({ className, label = 'Saddle', size, hidden, flow }) {
+    const a11y = label && !hidden
+        ? { role: 'img', 'aria-label': label }
+        : { 'aria-hidden': true };
+    const sized = size ? { width: size, height: size } : undefined;
+    return (_jsxs("span", { className: cn('sol-mark', flow && 'sol-mark--flow', className), style: sized, ...a11y, children: [_jsx("span", { className: "sol-mark__glow" }), _jsxs("svg", { className: "sol-mark__svg", viewBox: "0 0 96 96", "aria-hidden": "true", focusable: "false", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "sdlm-bg", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: MARK_STORY }), _jsx("stop", { offset: ".6", stopColor: MARK_STORY }), _jsx("stop", { offset: "1", stopColor: MARK_DEEP })] }), _jsxs("linearGradient", { id: "sdlm-gloss", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "#ffffff", stopOpacity: ".32" }), _jsx("stop", { offset: "1", stopColor: "#ffffff", stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "sdlm-orb", cx: ".5", cy: ".5", r: ".5", children: [_jsx("stop", { offset: "0", stopColor: MARK_SOFT, stopOpacity: ".9" }), _jsx("stop", { offset: ".35", stopColor: MARK_SOFT, stopOpacity: ".5" }), _jsx("stop", { offset: "1", stopColor: MARK_SOFT, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "sdlm-edge-l", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: MARK_SOFT, stopOpacity: "0" }), _jsx("stop", { offset: ".45", stopColor: MARK_SOFT, stopOpacity: ".3" }), _jsx("stop", { offset: "1", stopColor: MARK_SOFT, stopOpacity: ".7" })] }), _jsxs("linearGradient", { id: "sdlm-edge-d", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: MARK_SOFT, stopOpacity: "0" }), _jsx("stop", { offset: ".5", stopColor: MARK_SOFT, stopOpacity: ".22" }), _jsx("stop", { offset: "1", stopColor: MARK_SOFT, stopOpacity: ".55" })] }), _jsxs("linearGradient", { id: "sdlm-sheen", x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "#ffffff", stopOpacity: "0" }), _jsx("stop", { offset: ".45", stopColor: "#ffffff", stopOpacity: ".5" }), _jsx("stop", { offset: ".55", stopColor: "#ffffff", stopOpacity: ".5" }), _jsx("stop", { offset: "1", stopColor: "#ffffff", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "sdlm-flow-band", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: MARK_SOFT, stopOpacity: "0" }), _jsx("stop", { offset: ".5", stopColor: MARK_SOFT, stopOpacity: ".95" }), _jsx("stop", { offset: "1", stopColor: MARK_SOFT, stopOpacity: "0" })] }), _jsx("filter", { id: "sdlm-soft", x: "-40%", y: "-40%", width: "180%", height: "180%", children: _jsx("feGaussianBlur", { stdDeviation: "3" }) }), _jsx("filter", { id: "sdlm-wide", x: "-60%", y: "-60%", width: "220%", height: "220%", children: _jsx("feGaussianBlur", { stdDeviation: "8" }) }), _jsx("filter", { id: "sdlm-lift", x: "-40%", y: "-40%", width: "180%", height: "180%", children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "2", floodColor: MARK_DEEP, floodOpacity: ".38" }) }), _jsxs("filter", { id: "sdlm-grain", x: "0%", y: "0%", width: "100%", height: "100%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.9", numOctaves: "2", stitchTiles: "stitch", result: "n" }), _jsx("feColorMatrix", { in: "n", type: "saturate", values: "0" }), _jsx("feComposite", { operator: "in", in2: "SourceGraphic" })] }), _jsx("clipPath", { id: "sdlm-clip", children: _jsx("path", { d: MARK_SQUIRCLE }) })] }), _jsx("path", { d: MARK_SQUIRCLE, fill: "url(#sdlm-bg)" }), _jsx("path", { d: MARK_SQUIRCLE, fill: "url(#sdlm-gloss)", opacity: ".5" }), _jsxs("g", { clipPath: "url(#sdlm-clip)", children: [_jsxs("g", { className: "sol-mark__mid", children: [_jsx("circle", { cx: "48", cy: "40", r: "25", fill: "url(#sdlm-orb)", filter: "url(#sdlm-wide)", opacity: ".85" }), _jsx("rect", { x: "-12", y: "56", width: "120", height: "44", fill: MARK_SOFT, opacity: ".3", filter: "url(#sdlm-soft)" })] }), _jsx("path", { d: MARK_SQUIRCLE, fill: "none", stroke: "url(#sdlm-edge-d)", strokeWidth: "6", filter: "url(#sdlm-wide)", opacity: ".55", transform: "translate(1.4 1.9) scale(0.97)" }), _jsx("path", { d: MARK_SQUIRCLE, fill: "none", stroke: "url(#sdlm-edge-l)", strokeWidth: "2.5", filter: "url(#sdlm-soft)", opacity: ".5" }), _jsx("ellipse", { cx: "48", cy: "94", rx: "30", ry: "7", fill: "url(#sdlm-orb)", filter: "url(#sdlm-soft)", opacity: ".55" }), _jsx("g", { className: "sol-mark__sheen", children: _jsx("rect", { x: "-11", y: "-24", width: "26", height: "144", fill: "url(#sdlm-sheen)", transform: "skewX(-16)" }) }), _jsx("path", { d: MARK_SQUIRCLE, fill: "#ffffff", filter: "url(#sdlm-grain)", opacity: ".08" })] }), _jsx("g", { filter: "url(#sdlm-lift)", children: _jsx("g", { className: "sol-mark__glyph", fill: "none", stroke: MARK_IVORY, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(MarkGlyph, {}) }) }), flow ? (_jsx("g", { className: "sol-mark__flow", fill: "none", stroke: "url(#sdlm-flow-band)", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(MarkGlyph, {}) })) : null] })] }));
+}
+export function SectionRail({ number, label }) {
+    return (_jsxs("div", { className: "section-rail", role: "group", "aria-label": `${number} ${label}`, children: [_jsx("span", { className: "rail-number", children: number }), _jsx("span", { className: "rail-line" }), _jsx("span", { className: "rail-label", children: label })] }));
+}
+/** the rail of the app, SECTIONED: workspace, platform, library and
+ * account — one entry per page route, the apex home first. exported for
+ * the onboarding copy beside this folder. */
+export const NAV_SECTIONS = [
+    {
+        id: 'workspace',
+        label: 'workspace',
+        apps: [
+            { href: '/', label: 'home', detail: 'the thesis and the machine', icon: LayoutDashboard },
+            {
+                href: '/dashboard',
+                label: 'dashboard',
+                detail: 'sessions, users and the admin panel',
+                icon: Gauge,
+            },
+            { href: '/console', label: 'console', detail: 'operations and events', icon: TerminalSquare },
+            {
+                href: '/playground',
+                label: 'playground',
+                detail: 'map requests, never run them',
+                icon: FlaskConical,
+            },
+        ],
+    },
+    {
+        id: 'platform',
+        label: 'platform',
+        apps: [
+            { href: '/compute', label: 'compute', detail: 'execution layers and tiers', icon: Cpu },
+            {
+                href: '/integrations',
+                label: 'integrations',
+                detail: 'surfaces and bridges',
+                icon: PlugZap,
+            },
+            {
+                href: '/agent-browser',
+                label: 'agentbrowser',
+                detail: "the agent's own browser",
+                icon: AppWindow,
+            },
+        ],
+    },
+    {
+        id: 'library',
+        label: 'library',
+        apps: [
+            { href: '/docs', label: 'docs', detail: 'the working notes', icon: BookOpen },
+            {
+                href: '/architecture',
+                label: 'architecture',
+                detail: 'repo, CI, pages, buckets',
+                icon: Boxes,
+            },
+        ],
+    },
+    {
+        id: 'account',
+        label: 'account',
+        apps: [
+            { href: '/login', label: 'login', detail: 'sign in to the node', icon: LogIn },
+            { href: '/register', label: 'register', detail: 'create the local account', icon: UserPlus },
+        ],
+    },
+];
+/** the pages the window hosts, flattened (the onboarding facts read this). */
+export const START_APPS = NAV_SECTIONS.flatMap((section) => section.apps);
+/** one accent-dotted family link of the rail foot (spec §12): the sibling
+ * deploy units beside saddle, each linked by the familyurl contract with the
+ * accent dot riding the shared family.ts table — the same row the node:test
+ * suite pins, so the rail foot can never drift from the landing footer. */
+function FamilyRail() {
+    return (_jsx("div", { className: "winapp__family", children: familyrow().map((member) => (_jsxs("a", { className: "winapp__famlink", href: familyurl(member.slug), target: "_blank", rel: "noreferrer", title: `${member.slug} — opens in a new tab`, "aria-label": `open ${member.slug} in a new tab`, style: { '--fam-dot': member.accent }, children: [_jsx("span", { className: "winapp__famdot", "aria-hidden": "true" }), _jsx("span", { className: "winapp__famlabel", children: member.slug })] }, member.slug))) }));
+}
+/**
+ * the theme flip of the rail foot: flips the document theme class,
+ * stores nothing (the in-memory doctrine of the app surface).
+ *
+ * @returns the toggle element.
+ */
+function ThemeToggle() {
+    const [theme, setTheme] = useState(() => typeof document === 'undefined' || document.documentElement.classList.contains('dark')
+        ? 'dark'
+        : 'light');
+    /** flips the dark class on the root and mirrors it into the label. */
+    function toggle() {
+        const next = theme === 'dark' ? 'light' : 'dark';
+        document.documentElement.classList.toggle('dark', next === 'dark');
+        setTheme(next);
+    }
+    return (_jsxs("button", { type: "button", className: "winapp__theme", "aria-label": "toggle theme", onClick: toggle, children: [theme === 'dark' ? (_jsx(Sun, { fontSize: 14, "aria-hidden": "true" })) : (_jsx(Moon, { fontSize: 14, "aria-hidden": "true" })), theme] }));
+}
+/**
+ * the app surface: the SECTIONED page rail and the routed stage beside it,
+ * owning the whole viewport.
+ *
+ * @param children the routed page.
+ * @returns the app surface element.
+ */
+export function Shell({ children, themeButton = true }) {
+    // the embedded contract: inside the os power clip the app rides the host
+    // window chrome — the seat class answers the mount, the surface tree
+    // never changes between the two doors (the window-era law: one design)
+    const framed = (() => {
+        try {
+            return window.self !== window.top;
+        }
+        catch {
+            return true;
+        }
+    })();
+    const [location] = useLocation();
+    // the active rail entry: the bare path owns home, every other page owns its route
+    const isActive = (href) => href === '/' ? location === '/' : location === href || location.startsWith(`${href}/`);
+    // the embedded seat: inside the os power clip the app rides the host
+    // window chrome, but the SURFACE stays the same — the seat class
+    // answers the mount so differential styles (if any) can find it, the
+    // tree never changes between the two doors (the window-era law: one
+    // design)
+    const seat = framed ? 'shell--embedded' : 'shell--standalone';
+    // the surface pass: the direct url answers full-bleed — the window
+    // chrome exists only inside the os power clip, so the app owns the whole
+    // viewport; the SECTIONED page rail stays as the app's own navigation
+    // and the routed stage fills the rest of the screen
+    return (_jsx("div", { className: `shell ${seat}`, children: _jsxs("div", { className: "winapp__body", children: [_jsxs("nav", { className: "winapp__rail", "aria-label": "Pages", children: [NAV_SECTIONS.map((section) => (_jsxs("div", { className: "winapp__section", children: [_jsx("p", { className: "winapp__sectionlabel", "aria-hidden": "true", children: section.label }), section.apps.map((app) => {
+                                    const Icon = app.icon;
+                                    return (_jsxs(Link, { href: app.href, className: "winapp__raillink", title: app.detail, "aria-label": app.label, "aria-current": isActive(app.href) ? 'page' : undefined, children: [_jsx(Icon, { fontSize: 16, strokeWidth: 1.7, "aria-hidden": "true" }), _jsx("span", { className: "winapp__raillabel", children: app.label })] }, app.href));
+                                })] }, section.id))), _jsxs("div", { className: "winapp__railfoot", children: [_jsx("p", { className: "winapp__familyhead", "aria-hidden": "true", children: "family" }), _jsx(FamilyRail, {}), themeButton ? _jsx(ThemeToggle, {}) : null] })] }), _jsx("div", { className: "winapp__stage", children: _jsx("main", { className: "shell", children: children }) })] }) }));
+}
+export default Shell;
+// the prop keeps its public name `label` for every caller; the local
+// binding answers `pagelabel` so the label store accessor the footer
+// reads stays in scope (the copy law — no shadow, no hardcoded string).
+export function PageShell({ section, label: pagelabel, title, intro, children, media }) {
+    return (_jsxs("div", { className: "site-frame", children: [_jsxs("main", { children: [_jsxs("section", { className: "page-intro halftone container", children: [_jsx(SectionRail, { number: section, label: pagelabel }), _jsxs("div", { className: "page-intro-copy", children: [_jsxs("p", { className: "eyebrow", children: ["saddle \u00B7 ", pagelabel] }), _jsx("h1", { className: "page-title", children: title }), _jsx("p", { className: "page-intro-text", children: intro })] }), media && (_jsx("figure", { className: "page-intro-art media-area", style: { aspectRatio: media.ratio }, "aria-label": "media area", children: _jsxs("figcaption", { children: [_jsx("span", { children: media.label }), _jsx("span", { children: media.caption })] }) }))] }), _jsx("div", { className: "page-content container", children: children })] }), _jsxs("footer", { className: "site-footer container", children: [_jsx("span", { children: label('home.footer.copyright') }), _jsx("span", { className: "mono-label", children: label('home.footer.mono') })] })] }));
+}
+/* ================================== button ============================= */
+const buttonVariants = cva(
+// biome-ignore lint/security/noSecrets: the cva base string is a tailwind utility list, not a credential
+"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'border bg-transparent shadow-xs hover:bg-accent dark:bg-transparent dark:border-input dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+/* =================================== card ============================== */
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props });
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
+}
+/* ================================= tooltip ============================= */
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
+}
+/* ================================== sonner ============================= */
+const Toaster = ({ ...props }) => {
+    const { theme = 'system' } = useNextTheme();
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", style: {
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+        }, ...props }));
+};
+/* ================================ exports ============================== */
+export { Button, buttonVariants, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, };

package/dist/Sol/wingets/ComputeBootladder.d.ts

@@ -0,0 +1,6 @@
+/**
+ * the boot ladder strip: one tile per boot class with the ceiling the
+ * records state — while the plan loads the tiles skeleton, when the engine
+ * does not answer the tiles say unreached instead of inventing numbers.
+ */
+export default function ComputeBootladder(): import("react").JSX.Element;

package/dist/Sol/wingets/ComputeBootladder.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Signal & Ledger: the boot ladder — the three boot classes with the
+// ceilings the records themselves state. The winget fetches the plan on
+// mount and computes the hot / warm / cold floors and ceilings from the
+// fetched records; no number in this file is fixed.
+import { TimerRegular as Ladder } from "@fluentui/react-icons";
+import { useEffect, useState } from "react";
+import { fetchmodalities } from "../../api.ts";
+/** the three boot classes of the plan: the class names are the ladder
+ * shape (ui scaffolding), every number comes from the fetched records. */
+const classes = ["hot", "warm", "cold"];
+/** computes the rungs from the fetched records: min / max bootms per class,
+ * empty classes stay out of the ladder. */
+function rungsof(plan) {
+    return classes
+        .map((boot) => {
+        const times = plan.records.filter((record) => record.boot === boot).map((record) => record.bootms);
+        return {
+            boot,
+            count: times.length,
+            floor: times.length > 0 ? Math.min(...times) : 0,
+            ceiling: times.length > 0 ? Math.max(...times) : 0,
+        };
+    })
+        .filter((rung) => rung.count > 0);
+}
+/**
+ * the boot ladder strip: one tile per boot class with the ceiling the
+ * records state — while the plan loads the tiles skeleton, when the engine
+ * does not answer the tiles say unreached instead of inventing numbers.
+ */
+export default function ComputeBootladder() {
+    const [plan, setplan] = useState(null);
+    const [failed, setfailed] = useState(false);
+    /** the ladder mount: read the plan once; null means the engine slept. */
+    useEffect(() => {
+        let cancelled = false;
+        fetchmodalities()
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result === null) {
+                setfailed(true);
+                return;
+            }
+            setfailed(false);
+            setplan(result);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setfailed(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const rungs = plan === null ? [] : rungsof(plan);
+    const loading = plan === null && !failed;
+    return (_jsxs("section", { className: "content-section", "aria-label": "the boot ladder of the engine plan", children: [_jsxs("div", { className: "content-section-heading", children: [_jsx("p", { className: "eyebrow", children: "BOOT LADDER / CLASSES" }), _jsxs("span", { className: "mono-label", children: [_jsx(Ladder, { fontSize: 12, "aria-hidden": "true" }), " ", failed ? "engine unreachable" : "ceilings from the records"] })] }), _jsx("div", { className: "metric-strip", children: classes.map((boot) => {
+                    const rung = rungs.find((entry) => entry.boot === boot);
+                    return (_jsxs("div", { className: "metric", children: [_jsx("span", { className: "metric-value", children: loading ? _jsx("span", { className: "dash-skeleton" }) : rung === undefined ? "—" : `${rung.ceiling} ms` }), _jsx("span", { className: "metric-label", children: failed
+                                    ? `${boot} · unreached`
+                                    : rung === undefined
+                                        ? `${boot} · empty class`
+                                        : `${boot} · boot ceiling` }), _jsx("span", { className: "metric-detail", children: failed
+                                    ? "the engine did not answer"
+                                    : rung === undefined
+                                        ? "the plan carries no member"
+                                        : `floor ${rung.floor} ms · ${rung.count} modalities` })] }, boot));
+                }) })] }));
+}

package/dist/Sol/wingets/ComputeModalitycatalog.d.ts

@@ -0,0 +1,7 @@
+/**
+ * the modality catalog surface: the plan counts strip, then one row per
+ * record the engine serves — loading renders skeleton rows, an unreachable
+ * engine renders the honest single line, an empty plan renders the empty
+ * caption.
+ */
+export default function ComputeModalitycatalog(): import("react").JSX.Element;

package/dist/Sol/wingets/ComputeModalitycatalog.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Signal & Ledger: the compute face — the modality catalog the engine
+// states about itself. The winget carries zero fixed records: the plan
+// counts and every table row arrive from /api/v1/modalities on mount (the
+// wingets consume the db through the api, never a shipped array), and
+// when the engine does not answer the surface says so in one line
+// instead of painting rows it does not have.
+import { TableSimpleRegular as Catalog } from "@fluentui/react-icons";
+import { useEffect, useState } from "react";
+import { fetchmodalities } from "../../api.ts";
+/** the plan-state tones ride the house chip system: live keeps the success
+ * ink, host the neutral chip, planned the muted one — no new colors. */
+const statetone = {
+    live: "dash-chip online",
+    host: "dash-chip",
+    planned: "dash-chip off",
+};
+/** the static legend: ui copy, not data — what each plan state means. */
+const legend = "live runs on the edge engine today · host answers when the guest host provides the lane · planned seats wait in the roadmap";
+/** the honest error line: the engine is the only source of rows. */
+const unreachable = "the engine is unreachable — the catalog rides the saddle api";
+/** the skeleton row widths while the plan loads (a descending ladder so
+ * the shimmer reads as rows, not bars). */
+const skeletonwidths = [94, 88, 82, 76, 70, 64];
+/** the lane flags of one record as one mono cell (gpu / network). */
+function laneflags(record) {
+    const flags = [record.gpu ? "gpu" : "", record.network ? "net" : ""].filter(Boolean);
+    return flags.length > 0 ? flags.join(" · ") : "—";
+}
+/** one honest tile of the plan counts strip. */
+function Count({ value, label, detail }) {
+    return (_jsxs("div", { className: "metric", children: [_jsx("span", { className: "metric-value", children: value === "load" ? _jsx("span", { className: "dash-skeleton" }) : value }), _jsx("span", { className: "metric-label", children: label }), _jsx("span", { className: "metric-detail", children: detail })] }));
+}
+/**
+ * the modality catalog surface: the plan counts strip, then one row per
+ * record the engine serves — loading renders skeleton rows, an unreachable
+ * engine renders the honest single line, an empty plan renders the empty
+ * caption.
+ */
+export default function ComputeModalitycatalog() {
+    const [plan, setplan] = useState(null);
+    const [failed, setfailed] = useState(false);
+    /** the catalog mount: read the plan once; null means the engine slept. */
+    useEffect(() => {
+        let cancelled = false;
+        fetchmodalities()
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result === null) {
+                setfailed(true);
+                return;
+            }
+            setfailed(false);
+            setplan(result);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setfailed(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const records = plan === null ? [] : plan.records;
+    const loading = plan === null && !failed;
+    return (_jsxs("section", { className: "content-section", "aria-label": "the modality catalog served by the saddle api", children: [_jsxs("div", { className: "content-section-heading", children: [_jsx("p", { className: "eyebrow", children: "MODALITY CATALOG / THE PLAN" }), _jsxs("span", { className: "mono-label", children: [_jsx(Catalog, { fontSize: 12, "aria-hidden": "true" }), " served by the engine api"] })] }), failed ? (_jsx("p", { className: "dash-panelerror", children: unreachable })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "metric-strip", children: [_jsx(Count, { value: loading ? "load" : (plan?.plancount ?? 0), label: "modalities", detail: "the plan total" }), _jsx(Count, { value: loading ? "load" : (plan?.live ?? 0), label: "live", detail: "running on the edge engine" }), _jsx(Count, { value: loading ? "load" : (plan?.host ?? 0), label: "host", detail: "host-gated lanes" }), _jsx(Count, { value: loading ? "load" : (plan?.planned ?? 0), label: "planned", detail: "roadmap seats" })] }), _jsx("section", { className: "dash-tablescroll", 
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: deliberate wcag scrollable-region pattern: the tabIndex keeps the overflowing catalog keyboard-scrollable; the table itself only presents rows
+                        tabIndex: 0, "aria-label": "the modality catalog table", children: _jsxs("table", { children: [loading && _jsx("caption", { className: "dash-empty", children: "reading the plan from the engine\u2026" }), !loading && records.length === 0 && (_jsx("caption", { className: "dash-empty", children: "the engine carries no records yet" })), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "id" }), _jsx("th", { scope: "col", children: "label" }), _jsx("th", { scope: "col", children: "family" }), _jsx("th", { scope: "col", children: "state" }), _jsx("th", { scope: "col", children: "boot" }), _jsx("th", { scope: "col", children: "lanes" })] }) }), _jsxs("tbody", { children: [loading &&
+                                            skeletonwidths.map((width) => (_jsx("tr", { children: _jsx("td", { colSpan: 6, children: _jsx("span", { className: "dash-skeleton", style: { width: `${width}%` } }) }) }, `skeleton-${width}`))), records.map((record) => (_jsxs("tr", { children: [_jsx("td", { className: "wrapcell", children: record.id }), _jsx("td", { children: record.label }), _jsx("td", { children: record.family }), _jsx("td", { children: _jsx("span", { className: statetone[record.state], children: record.state }) }), _jsxs("td", { children: [record.boot, " \u00B7 ", record.bootms, " ms"] }), _jsx("td", { children: laneflags(record) })] }, record.id)))] })] }) }), _jsx("p", { className: "dash-statusnote", children: legend })] }))] }));
+}

package/dist/Sol/wingets/ConsoleApibadge.d.ts

@@ -0,0 +1,7 @@
+type ApiBadgeProps = {
+    apion: boolean;
+    label: string;
+};
+/** the engine-mode badge ("api connected (v..., uptime ...s)" or local). */
+export default function ApiBadge({ apion, label }: ApiBadgeProps): import("react").JSX.Element;
+export {};

package/dist/Sol/wingets/ConsoleApibadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** the engine-mode badge ("api connected (v..., uptime ...s)" or local). */
+export default function ApiBadge({ apion, label }) {
+    return (_jsx("span", { className: apion ? 'api-badge apion' : 'api-badge', "aria-live": "polite", children: label }));
+}

package/dist/Sol/wingets/ConsoleEdgelaw.d.ts

@@ -0,0 +1,6 @@
+/**
+ * the edge-law band: a single slim line above the console content — the
+ * shield, the law sentence and, once the engine answers, the live / host /
+ * planned micro-counts of the modality plan.
+ */
+export default function ConsoleEdgelaw(): import("react").JSX.Element;

package/dist/Sol/wingets/ConsoleEdgelaw.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The Law Banner: the console states the execution law — every pass runs
+// on the saddle edge engine over the internet, never on the visitor
+// machine (no visitor browser, gpu or cpu). The micro-counts (live / host
+// / planned) arrive from /api/v1/modalities on mount; while they load the
+// sentence stands alone.
+import { ShieldTaskRegular as Shield } from "@fluentui/react-icons";
+import { useEffect, useState } from "react";
+import { fetchmodalities } from "../../api.ts";
+/** the law the console carries: one sentence, lowercase english. */
+const lawsentence = "the saddle edge engine executes every pass — nothing runs on the visitor machine";
+/**
+ * the edge-law band: a single slim line above the console content — the
+ * shield, the law sentence and, once the engine answers, the live / host /
+ * planned micro-counts of the modality plan.
+ */
+export default function ConsoleEdgelaw() {
+    const [plan, setplan] = useState(null);
+    /** the banner mount: read the plan once; silence keeps the sentence alone. */
+    useEffect(() => {
+        let cancelled = false;
+        fetchmodalities()
+            .then((result) => {
+            if (!cancelled && result !== null) {
+                setplan(result);
+            }
+        })
+            .catch(() => {
+            /* the sentence alone is the honest floor when the engine sleeps */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    return (_jsxs("p", { className: "r3-declared-ribbon", role: "note", children: [_jsx(Shield, { fontSize: 13, "aria-hidden": "true" }), " ", lawsentence, plan !== null && ` · live ${plan.live} · host ${plan.host} · planned ${plan.planned}`] }));
+}

package/dist/Sol/wingets/ConsoleEventstimeline.d.ts

@@ -0,0 +1,19 @@
+/** timeline entry kinds tinting the left border. */
+export type SandboxEventKind = 'lifecycle' | 'exec' | 'snapshot';
+/** one bus event row: stamp, sequence, topic and detail. */
+export type SandboxEvent = {
+    id: number;
+    time: string;
+    topic: string;
+    detail: string;
+    kind: SandboxEventKind;
+};
+type EventsTimelineProps = {
+    events: SandboxEvent[];
+};
+/**
+ * the bus event timeline (role=log, polite aria-live); the empty state
+ * matches the static page ("no events yet; start the sandbox.").
+ */
+export default function EventsTimeline({ events }: EventsTimelineProps): import("react").JSX.Element;
+export {};

package/dist/Sol/wingets/ConsoleEventstimeline.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Events timeline: faithful absorption of the console.html bus events aside —
+// the newest event on top, kind-tinted left borders and a 50 entry cap
+// maintained by the console page.
+import { label } from '../../labels.ts';
+/**
+ * the bus event timeline (role=log, polite aria-live); the empty state
+ * matches the static page ("no events yet; start the sandbox.").
+ */
+export default function EventsTimeline({ events }) {
+    return (_jsxs("aside", { className: "events-panel", "aria-labelledby": "eventstitle", children: [_jsx("h2", { className: "sandbox-panel-title", id: "eventstitle", children: label('console.events.title') }), _jsx("ol", { className: "events-list", role: "log", "aria-live": "polite", "aria-label": label('console.events.aria'), children: events.length === 0 ? (_jsx("li", { className: "events-empty", children: label('console.events.empty') })) : (events.map((event) => (_jsxs("li", { className: event.kind, children: [_jsx("span", { className: "event-time", children: `${event.time} #${event.id} ` }), _jsx("span", { className: "event-topic", children: event.topic }), _jsx("span", { className: "event-detail", children: event.detail })] }, event.id)))) })] }));
+}

package/dist/Sol/wingets/ConsoleSnapshotcontrols.d.ts

@@ -0,0 +1,8 @@
+type SnapshotControlsProps = {
+    running: boolean;
+    onsnapshot: () => void;
+    onstop: () => void;
+};
+/** the snapshot and teardown buttons of the running sandbox. */
+export default function SnapshotControls({ running, onsnapshot, onstop }: SnapshotControlsProps): import("react").JSX.Element;
+export {};

package/dist/Sol/wingets/ConsoleSnapshotcontrols.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Snapshot controls: faithful absorption of the console.html snapshot/stop
+// buttons — both stay disabled until a sandbox is running.
+import { label } from '../../labels.ts';
+/** the snapshot and teardown buttons of the running sandbox. */
+export default function SnapshotControls({ running, onsnapshot, onstop }) {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "button", type: "button", disabled: !running, onClick: onsnapshot, "aria-label": label('console.snapshotAria'), children: label('console.snapshot') }), _jsx("button", { className: "button", type: "button", disabled: !running, onClick: onstop, "aria-label": label('console.stopAria'), children: label('console.stop') })] }));
+}