@swirls/looms 0.1.0 → 0.2.0

package/dist/debugger/ui/command.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('flex size-full flex-col overflow-hidden', className), ...props }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "border-border flex h-10 items-center gap-2 border-b px-3", children: [_jsx(Search, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": true }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground flex h-full w-full bg-transparent text-[13px] outline-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1', className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn('text-muted-foreground py-8 text-center text-xs', className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('[&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium', className), ...props }));
+}
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn('data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), ...props }));
+}
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };

package/dist/debugger/ui/dropdown-menu.d.ts

@@ -0,0 +1,13 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label>): React.JSX.Element;
+declare function DropdownMenuItem({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, };

package/dist/debugger/ui/dropdown-menu.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const itemClass = 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0';
+function DropdownMenu(props) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 6, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('debugger-pop bg-card text-card-foreground border-border z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-40 overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border p-1 shadow-xl shadow-black/30', className), ...props }) }));
+}
+function DropdownMenuGroup(props) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", className: cn('text-muted-foreground px-2 pt-2 pb-1 text-[11px] font-medium', className), ...props }));
+}
+function DropdownMenuItem({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", className: cn(itemClass, className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn(itemClass, 'pl-7', className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup(props) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn(itemClass, 'pl-7', className), ...props, children: [_jsx("span", { className: "absolute top-2 left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, };

package/dist/debugger/ui/panel.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** Every panel header shares this height so the columns read as one surface. */
+declare function PanelHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PanelTitle({ className, children, meta, ...props }: ComponentProps<'h2'> & {
+    meta?: ReactNode;
+}): import("react").JSX.Element;
+declare function EmptyState({ icon, title, children, className, }: {
+    icon?: ReactNode;
+    title: string;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function Kbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
+export { EmptyState, Kbd, PanelHeader, PanelTitle };

package/dist/debugger/ui/panel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+/** Every panel header shares this height so the columns read as one surface. */
+function PanelHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "panel-header", className: cn('border-border flex h-10 shrink-0 items-center gap-2 border-b px-3', className), ...props }));
+}
+function PanelTitle({ className, children, meta, ...props }) {
+    return (_jsxs("h2", { "data-slot": "panel-title", className: cn('flex min-w-0 items-baseline gap-2 text-[13px] font-medium', className), ...props, children: [_jsx("span", { className: "truncate", children: children }), meta !== undefined && meta !== null ? (_jsx("span", { className: "text-muted-foreground shrink-0 font-mono text-[11px] font-normal tabular-nums", children: meta })) : null] }));
+}
+function EmptyState({ icon, title, children, className, }) {
+    return (_jsxs("div", { className: cn('flex h-full min-h-32 flex-col items-center justify-center gap-2 px-6 text-center', className), children: [icon ? (_jsx("div", { className: "text-muted-foreground/70 border-border bg-card mb-1 flex size-8 items-center justify-center rounded-lg border [&_svg]:size-4", children: icon })) : null, _jsx("p", { className: "text-foreground text-[13px] font-medium", children: title }), children ? (_jsx("p", { className: "text-muted-foreground max-w-60 text-xs leading-relaxed", children: children })) : null] }));
+}
+function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('border-border bg-background/60 text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border px-1 font-sans text-[10px] font-medium', className), ...props }));
+}
+export { EmptyState, Kbd, PanelHeader, PanelTitle };

package/dist/debugger/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/debugger/ui/popover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+function Popover(props) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger(props) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor(props) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 6, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('debugger-pop bg-card text-card-foreground border-border z-50 w-72 rounded-lg border p-3 shadow-xl shadow-black/30 outline-none', className), ...props }) }));
+}
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/debugger/ui/resizable.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+declare function ResizablePanelGroup({ className, ...props }: ComponentProps<typeof Group>): import("react").JSX.Element;
+declare function ResizablePanel(props: ComponentProps<typeof Panel>): import("react").JSX.Element;
+/** A hairline divider with a wider invisible hit area that brightens while hovered or dragged. */
+declare function ResizableHandle({ className, ...props }: ComponentProps<typeof Separator>): import("react").JSX.Element;
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/debugger/ui/resizable.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { cn } from '../lib/cn.js';
+function ResizablePanelGroup({ className, ...props }) {
+    return (_jsx(Group, { "data-slot": "resizable-panel-group", className: cn('flex size-full aria-[orientation=vertical]:flex-col', className), ...props }));
+}
+function ResizablePanel(props) {
+    return _jsx(Panel, { "data-slot": "resizable-panel", ...props });
+}
+/** A hairline divider with a wider invisible hit area that brightens while hovered or dragged. */
+function ResizableHandle({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn('bg-border relative w-px shrink-0 outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2', 'data-[separator=active]:bg-ring data-[separator=focus]:bg-ring data-[separator=hover]:bg-ring/60 transition-colors duration-150', className), ...props }));
+}
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/debugger/ui/scroll-area.d.ts

@@ -1,7 +1,8 @@
 import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 import type { ComponentProps, Ref, UIEventHandler } from 'react';
-declare function ScrollArea({ className, children, viewportRef, onViewportScroll, horizontal, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+declare function ScrollArea({ className, children, viewportRef, viewportClassName, onViewportScroll, horizontal, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Root> & {
     viewportRef?: Ref<HTMLDivElement>;
+    viewportClassName?: string;
     onViewportScroll?: UIEventHandler<HTMLDivElement>;
     horizontal?: boolean;
 }): import("react").JSX.Element;

package/dist/debugger/ui/scroll-area.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 import { cn } from '../lib/cn.js';
-function ScrollArea({ className, children, viewportRef, onViewportScroll, horizontal = false, ...props }) {
-    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", type: "always", className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: viewportRef, "data-slot": "scroll-area-viewport", className: "size-full [scrollbar-width:none] rounded-[inherit] [&::-webkit-scrollbar]:hidden", onScroll: onViewportScroll, children: children }), _jsx(ScrollBar, {}), horizontal ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, _jsx(ScrollAreaPrimitive.Corner, {})] }));
+function ScrollArea({ className, children, viewportRef, viewportClassName, onViewportScroll, horizontal = false, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", type: "hover", scrollHideDelay: 400, className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: viewportRef, "data-slot": "scroll-area-viewport", className: cn(
+                // Radix wraps content in `display: table`, which lets long lines widen the viewport.
+                'size-full overscroll-contain rounded-[inherit] outline-none [&>div]:block!', viewportClassName), onScroll: onViewportScroll, children: children }), _jsx(ScrollBar, {}), horizontal ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, _jsx(ScrollAreaPrimitive.Corner, {})] }));
 }
 function ScrollBar({ className, orientation = 'vertical', ...props }) {
-    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none p-px select-none', orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent', orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('z-10 flex touch-none p-px transition-opacity duration-150 select-none data-[state=hidden]:opacity-0', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-foreground/15 hover:bg-foreground/25 relative flex-1 rounded-full transition-colors" }) }));
 }
 export { ScrollArea, ScrollBar };

package/dist/debugger/ui/select.d.ts

@@ -0,0 +1,10 @@
+import { Select as SelectPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>): React.JSX.Element;
+declare function SelectContent({ className, children, position, sideOffset, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+declare function SelectItem({ className, children, description, ...props }: React.ComponentProps<typeof SelectPrimitive.Item> & {
+    description?: string;
+}): React.JSX.Element;
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };

package/dist/debugger/ui/select.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from 'lucide-react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+function Select(props) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue(props) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn('text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 data-[state=open]:bg-accent data-[state=open]:text-foreground flex h-7 items-center gap-1 rounded-md px-2 text-xs whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "size-3 opacity-60" }) })] }));
+}
+function SelectContent({ className, children, position = 'popper', sideOffset = 6, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", position: position, sideOffset: sideOffset, className: cn('debugger-pop bg-card text-card-foreground border-border z-50 min-w-40 overflow-hidden rounded-lg border p-1 shadow-xl shadow-black/30', className), ...props, children: _jsx(SelectPrimitive.Viewport, { children: children }) }) }));
+}
+function SelectItem({ className, children, description, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn('focus:bg-accent relative flex cursor-default flex-col items-start rounded-sm py-1.5 pr-2 pl-7 text-xs outline-none select-none data-disabled:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute top-2 left-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-3.5" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children }), description ? (_jsx("span", { className: "text-muted-foreground text-[11px]", children: description })) : null] }));
+}
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };

package/dist/debugger/ui/tabs.js

@@ -6,10 +6,10 @@ function Tabs({ className, ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn('flex flex-col gap-2', className), ...props }));
 }
 function TabsList({ className, ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('bg-secondary text-muted-foreground inline-flex h-8 w-fit items-center justify-center rounded-md p-0.5', className), ...props }));
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('bg-secondary/70 text-muted-foreground inline-flex h-7 w-fit shrink-0 items-center justify-center rounded-md p-0.5', className), ...props }));
 }
 function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn('focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex h-7 items-center justify-center rounded-sm px-2.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50', className), ...props }));
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn('focus-visible:ring-ring/50 hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex h-6 items-center justify-center rounded-sm px-2 text-[11px] font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm', className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('min-h-0 flex-1 outline-none', className), ...props }));

package/dist/debugger/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+export { Textarea };

package/dist/debugger/ui/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-[13px] leading-relaxed transition-[border-color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+}
+export { Textarea };

package/dist/react/store.d.ts

@@ -45,7 +45,7 @@ export interface LoomsClientStore<TEvent extends AnyEventEnvelope = RegisteredEv
     project<S>(definition: ProjectionDefinition<S>): S;
     fold<S>(definition: EventFoldDefinition<S, TEvent>): S;
     flush: () => void;
-    commit: (event: EventInput) => Promise<void>;
+    commit: (event: EventInput | readonly EventInput[]) => Promise<void>;
     sync: () => Promise<void>;
     dispose: () => void;
 }

package/dist/react/store.js

@@ -302,7 +302,7 @@ export function createLoomsStore(options) {
                 try: (signal) => fetchFn(`${endpoint}/runs/${encodeURIComponent(options.storeId)}/events`, {
                     method: 'POST',
                     headers: { 'content-type': 'application/json' },
-                    body: stringifyJson(event),
+                    body: stringifyJson(Array.isArray(event) ? { events: event } : event),
                     signal,
                 }),
                 catch: (cause) => new LoomsStoreError('Run signal failed', cause),

package/dist/runtime/looms.d.ts

@@ -1,4 +1,4 @@
-import { type AnyRuntimeModule, type DefinitionInput, type DefinitionRef, type EventEnvelope, type EventInput, type EventStore, type EventStoreTrimCoverage, type JsonValue, type SnapshotStore, type ProjectionDefinition, type ReplayStep, type RunState } from '@swirls/looms/core';
+import { type AnyRuntimeModule, type DebuggerHost, type DefinitionInput, type DefinitionRef, type EventEnvelope, type EventInput, type EventStore, type EventStoreTrimCoverage, type JsonValue, type SnapshotStore, type ProjectionDefinition, type ReplayStep, type RunState } from '@swirls/looms/core';
 import type { RuntimeObserver } from './observer';
 import { type EffectWorker, type LoomsRuntime, type RunOperationalStatus, type WakeScheduler, type WorkerCallbackInput } from './runtime';
 import { type Authorize, type RunningServer } from './server';
@@ -33,8 +33,16 @@ export interface CreateLoomsOptions {
     /**
      * Authorizes HTTP API requests. Without it, run reads and writes are open while worker callback
      * and operations routes return 503; `bearerAuth({ worker, operations })` enables them.
+     *
+     * A mounted debugger is authorized as `{ access: 'read', name: 'debugger' }`. Bearer tokens on
+     * reads block browser navigation, so hosts that need auth should use a cookie or session policy.
      */
     readonly authorize?: Authorize;
+    /**
+     * Serves a debugger UI under `debugger.basePath` (for example `/debugger`). The runtime does not
+     * bundle a UI; pass `debuggerUi()` from `@swirls/looms/debugger/server`.
+     */
+    readonly debugger?: DebuggerHost;
 }
 export interface StartResult {
     readonly runId: string;

package/dist/runtime/looms.js

@@ -1,7 +1,7 @@
 import { Data, Effect, Predicate } from 'effect';
 import { EventStoreTag, makeMemoryEventStore, snapshotStoreOf, SnapshotStoreTag, } from '@swirls/looms/core';
 import { createRuntime, } from './runtime.js';
-import { createFetchHandler, isLoomsApiPath, serveHttp, } from './server.js';
+import { createFetchHandler, handlesPath, mountDebugger, serveHttp, } from './server.js';
 class LoomsInitializationError extends Data.TaggedError('LoomsInitializationError') {
     constructor(cause) {
         super({
@@ -13,6 +13,7 @@ class LoomsInitializationError extends Data.TaggedError('LoomsInitializationErro
 }
 export function createLooms(options = {}) {
     const modules = options.modules ?? [];
+    const debuggerMount = options.debugger ? mountDebugger(options.debugger) : undefined;
     let initPromise;
     let runningServer;
     const getInit = () => {
@@ -52,6 +53,7 @@ export function createLooms(options = {}) {
                     runtime,
                     store,
                     authorize: options.authorize,
+                    debugger: debuggerMount,
                 });
                 return { runtime, store, snapshotStore: snapshotStoreOf(store), fetchHandler };
             }));
@@ -98,7 +100,7 @@ export function createLooms(options = {}) {
         cancel: (runId, threadId) => runEffect((i) => i.runtime.cancel(runId, threadId)),
         workerCallback: (runId, input) => runEffect((i) => i.runtime.workerCallback(runId, input)),
         fetch: (req) => {
-            if (!isLoomsApiPath(new URL(req.url).pathname)) {
+            if (!handlesPath(new URL(req.url).pathname, debuggerMount)) {
                 return Promise.resolve(null);
             }
             return getInit().then(({ fetchHandler }) => fetchHandler(req));

package/dist/runtime/repository.js

@@ -1,5 +1,5 @@
 import { Clock, Data, Effect, Option } from 'effect';
-import { advanceCursor, assignSequences, createCoalescingAppender, emptyCursor, EventStoreTrimmedError, hashRunState, trimEventStoreSafely, } from '@swirls/looms/core';
+import { advanceCursor, assignSequences, createCoalescingAppender, emptyCursor, EventStoreTrimmedError, hashRunState, summarizeRun, trimEventStoreSafely, } from '@swirls/looms/core';
 import { RuntimeExecutionError } from './errors.js';
 import { stripSeq } from './helpers.js';
 import { notifyObserver } from './observer.js';
@@ -36,7 +36,18 @@ function readRemaining(store, runId, events, expectedTail) {
 }
 export function createRuntimeRepository(options) {
     const { registry, snapshotStore, trimAfterSnapshot, keepSnapshots, runCache, executionContexts } = options;
+    const headerFingerprints = new Map();
     const observe = (event) => notifyObserver(options.observer, event);
+    const rememberHeader = (state) => {
+        const header = summarizeRun(state);
+        const fingerprint = `${header.status}\0${header.kind ?? ''}\0${header.definitionName ?? ''}`;
+        if (headerFingerprints.get(header.runId) === fingerprint) {
+            return Effect.void;
+        }
+        return snapshotStore.saveHeader(header).pipe(Effect.tap(() => Effect.sync(() => {
+            headerFingerprints.set(header.runId, fingerprint);
+        })), Effect.catch((error) => Effect.logWarning(`Run header persistence failed for "${header.runId}"`, error)));
+    };
     const appendObserved = (store, runId, events, appendOptions) => Effect.suspend(() => {
         const startedAt = currentTimeMillis();
         return store.append(runId, events, appendOptions).pipe(Effect.tap(() => Effect.sync(() => observe({
@@ -156,6 +167,7 @@ export function createRuntimeRepository(options) {
                 return yield* loadCursorCold(store, runId);
             }
             if (tail === cached.seq) {
+                yield* rememberHeader(cached.state);
                 return cached;
             }
             const next = yield* catchUp(store, runId, cached, tail).pipe(Effect.catchTag('EventStoreTrimmedError', () => {
@@ -163,10 +175,12 @@ export function createRuntimeRepository(options) {
                 return loadCursorCold(store, runId);
             }));
             runCache.set(runId, next);
+            yield* rememberHeader(next.state);
             return next;
         }
         const next = yield* loadCursorCold(store, runId);
         runCache.set(runId, next);
+        yield* rememberHeader(next.state);
         return next;
     });
     /**
@@ -241,6 +255,7 @@ export function createRuntimeRepository(options) {
             next = yield* catchUp(store, runId, next, appendResult.tail);
         }
         runCache.set(runId, next);
+        yield* rememberHeader(next.state);
         return next;
     });
     /**

package/dist/runtime/runtime.js

@@ -1,5 +1,5 @@
 import { Clock, Effect, ManagedRuntime, Predicate } from 'effect';
-import { composeModules, createEvent, createThreadId, createRunId, DEFAULT_DEFINITION_VERSION, DEFAULT_SNAPSHOT_EVERY, definitionKey, EventStoreTag, foldRun, project, replayTo, } from '@swirls/looms/core';
+import { composeModules, createEvent, createThreadId, createRunId, DEFAULT_DEFINITION_VERSION, DEFAULT_SNAPSHOT_EVERY, definitionKey, EventStoreTag, foldRun, project, replayTo, summarizeRun, } from '@swirls/looms/core';
 import { createCancellation } from './cancellation.js';
 import { nextRuntimeDeadline } from './deadline-transition-planner.js';
 import { RuntimeExecutionError } from './errors.js';
@@ -134,6 +134,21 @@ export function createRuntime(options) {
             const store = yield* EventStoreTag;
             return yield* store.listRuns;
         }),
+        listRunSummaries: Effect.gen(function* () {
+            const store = yield* EventStoreTag;
+            const runIds = yield* store.listRuns;
+            const indexed = yield* snapshotStore.listHeaders;
+            const byId = new Map(indexed.map((header) => [header.runId, header]));
+            const missing = runIds.filter((runId) => !byId.has(runId));
+            const filled = yield* Effect.forEach(missing, (runId) => runtime.getRun(runId).pipe(Effect.map(summarizeRun)), { concurrency: 8 });
+            for (const header of filled) {
+                byId.set(header.runId, header);
+            }
+            return runIds.flatMap((runId) => {
+                const header = byId.get(runId);
+                return header ? [header] : [];
+            });
+        }),
         getEvents: (runId, readOptions) => Effect.gen(function* () {
             const store = yield* EventStoreTag;
             return yield* store.read(runId, readOptions);

package/dist/runtime/server/auth.d.ts

@@ -22,6 +22,7 @@ export type AuthDecision = {
 export type Authorize = (request: Request, route: RouteInfo) => Effect.Effect<AuthDecision>;
 export declare const authAllowed: AuthDecision;
 export declare function authDenied(status: number, error: string): AuthDecision;
+export declare function authResponse(decision: AuthDecision): Response | null;
 /**
  * Used when a host supplies no `authorize`: run reads and writes stay open, while worker callbacks
  * and operational endpoints are unavailable until a host opts in.

package/dist/runtime/server/auth.js

@@ -3,6 +3,11 @@ export const authAllowed = { allowed: true };
 export function authDenied(status, error) {
     return { allowed: false, status, error };
 }
+export function authResponse(decision) {
+    return decision.allowed
+        ? null
+        : Response.json({ error: decision.error }, { status: decision.status });
+}
 const unauthorized = authDenied(401, 'Unauthorized');
 function notConfigured(access) {
     return authDenied(503, access === 'worker'

package/dist/runtime/server/debugger-host.d.ts

@@ -0,0 +1,11 @@
+import { Effect } from 'effect';
+import type { DebuggerHost } from '@swirls/looms/core';
+import { type Authorize } from './auth';
+export interface DebuggerMount {
+    readonly basePath: string;
+    readonly host: DebuggerHost;
+}
+export declare function mountDebugger(host: DebuggerHost): DebuggerMount;
+/** Path below the mount, or null when `pathname` is outside it. */
+export declare function debuggerPath(mount: DebuggerMount, pathname: string): string | null;
+export declare function serveDebugger(req: Request, mount: DebuggerMount, path: string, authorize: Authorize): Effect.Effect<Response | null>;

package/dist/runtime/server/debugger-host.js

@@ -0,0 +1,32 @@
+import { Effect } from 'effect';
+import { authResponse } from './auth.js';
+import { isLoomsApiPath } from './http.js';
+export function mountDebugger(host) {
+    const path = host.basePath;
+    if (!path.startsWith('/') || path.includes('//') || path.split('/').includes('..')) {
+        throw new Error(`debugger basePath must be an absolute URL path: ${path}`);
+    }
+    const basePath = path.endsWith('/') ? path.slice(0, -1) : path;
+    if (basePath === '') {
+        throw new Error('debugger basePath must not be /');
+    }
+    if (isLoomsApiPath(basePath)) {
+        throw new Error(`debugger basePath overlaps the HTTP API: ${basePath}`);
+    }
+    return { basePath, host };
+}
+/** Path below the mount, or null when `pathname` is outside it. */
+export function debuggerPath(mount, pathname) {
+    if (pathname === mount.basePath) {
+        return '';
+    }
+    return pathname.startsWith(`${mount.basePath}/`) ? pathname.slice(mount.basePath.length) : null;
+}
+export function serveDebugger(req, mount, path, authorize) {
+    return authorize(req, { access: 'read', name: 'debugger' }).pipe(Effect.flatMap((decision) => {
+        const denied = authResponse(decision);
+        return denied
+            ? Effect.succeed(denied)
+            : Effect.promise(() => mount.host.fetch(req, { basePath: mount.basePath, path }));
+    }));
+}

package/dist/runtime/server/fetch-handler.d.ts

@@ -1,6 +1,7 @@
 import type { EventStore } from '@swirls/looms/core';
 import type { LoomsRuntime } from '../runtime';
 import { type Authorize } from './auth';
+import { type DebuggerMount } from './debugger-host';
 export interface FetchHandlerOptions {
     readonly runtime: LoomsRuntime;
     readonly store: EventStore;
@@ -9,6 +10,9 @@ export interface FetchHandlerOptions {
      * operations routes unavailable; use `bearerAuth` or your own policy to change that.
      */
     readonly authorize?: Authorize;
+    /** Debugger UI served beside the API and authorized as `{ access: 'read', name: 'debugger' }`. */
+    readonly debugger?: DebuggerMount;
 }
-export declare function isLoomsApiPath(path: string): boolean;
+/** Whether the fetch handler answers `pathname`: the HTTP API or the debugger mount. */
+export declare function handlesPath(pathname: string, mount: DebuggerMount | undefined): boolean;
 export declare function createFetchHandler(options: FetchHandlerOptions): (req: Request) => Promise<Response | null>;

package/dist/runtime/server/fetch-handler.js

@@ -1,12 +1,19 @@
 import { Effect, Predicate } from 'effect';
-import { defaultAuthorize } from './auth.js';
-import { acceptsEventStream, toErrorResponse } from './http.js';
+import { authResponse, defaultAuthorize } from './auth.js';
+import { debuggerPath, serveDebugger } from './debugger-host.js';
+import { acceptsEventStream, isLoomsApiPath, toErrorResponse } from './http.js';
 import { matchRoute } from './route-table.js';
+import { definitionRoutes } from './routes/definitions.js';
 import { effectRoutes } from './routes/effects.js';
 import { operationRoutes } from './routes/operations.js';
 import { runRoutes } from './routes/runs.js';
 function createRoutes(options) {
-    return [...runRoutes(options), ...effectRoutes(options), ...operationRoutes(options)];
+    return [
+        ...definitionRoutes(options),
+        ...runRoutes(options),
+        ...effectRoutes(options),
+        ...operationRoutes(options),
+    ];
 }
 function authorizeRoute(req, matched, authorize) {
     const { access, name } = matched.route;
@@ -14,21 +21,22 @@ function authorizeRoute(req, matched, authorize) {
         return Effect.succeed(null);
     }
     const runId = matched.params.runId;
-    return authorize(req, Predicate.isString(runId) ? { access, name, runId } : { access, name }).pipe(Effect.map((decision) => decision.allowed
-        ? null
-        : Response.json({ error: decision.error }, { status: decision.status })));
+    return authorize(req, Predicate.isString(runId) ? { access, name, runId } : { access, name }).pipe(Effect.map(authResponse));
 }
-export function isLoomsApiPath(path) {
-    return (path === '/health' ||
-        path === '/runs' ||
-        path.startsWith('/runs/') ||
-        path.startsWith('/operations/'));
+/** Whether the fetch handler answers `pathname`: the HTTP API or the debugger mount. */
+export function handlesPath(pathname, mount) {
+    return isLoomsApiPath(pathname) || (mount !== undefined && debuggerPath(mount, pathname) !== null);
 }
 export function createFetchHandler(options) {
     const routes = createRoutes(options);
     const authorize = options.authorize ?? defaultAuthorize;
+    const mount = options.debugger;
     return (req) => {
         const url = new URL(req.url);
+        const mountedPath = mount ? debuggerPath(mount, url.pathname) : null;
+        if (mount && mountedPath !== null) {
+            return respond(serveDebugger(req, mount, mountedPath, authorize));
+        }
         if (!isLoomsApiPath(url.pathname)) {
             return Promise.resolve(null);
         }
@@ -36,7 +44,7 @@ export function createFetchHandler(options) {
         if (req.method === 'GET' && accept.includes('text/html') && !acceptsEventStream(req)) {
             return Promise.resolve(null);
         }
-        return Effect.runPromise(Effect.gen(function* () {
+        return respond(Effect.gen(function* () {
             const matched = matchRoute(routes, req.method, url.pathname);
             if (!matched) {
                 return new Response('Not Found', { status: 404 });
@@ -46,6 +54,9 @@ export function createFetchHandler(options) {
                 return denied;
             }
             return yield* matched.route.handle({ req, url, params: matched.params });
-        }).pipe(Effect.catch((error) => Effect.succeed(toErrorResponse(error))), Effect.catchCause((cause) => Effect.logError('[@swirls/looms/runtime] request failed', cause).pipe(Effect.as(Response.json({ error: 'Internal server error' }, { status: 500 }))))));
+        }));
     };
 }
+function respond(effect) {
+    return Effect.runPromise(effect.pipe(Effect.catch((error) => Effect.succeed(toErrorResponse(error))), Effect.catchCause((cause) => Effect.logError('[@swirls/looms/runtime] request failed', cause).pipe(Effect.as(Response.json({ error: 'Internal server error' }, { status: 500 }))))));
+}

package/dist/runtime/server/http.d.ts

@@ -26,6 +26,7 @@ export declare const EventInputBodySchema: Schema.Struct<{
     readonly payload: Schema.Codec<Schema.Json, Schema.Json, never, never>;
     readonly threadId: Schema.optional<Schema.NullOr<Schema.String>>;
 }>;
+export declare function isLoomsApiPath(path: string): boolean;
 export declare function provideStore<A, E>(effect: Effect.Effect<A, E, EventStoreTag>, store: EventStore): Effect.Effect<A, E>;
 export declare const readJson: (req: Request) => Effect.Effect<JsonValue, RequestBodyError>;
 export declare function extractIdempotencyKey(req: Request, bodyKey?: string): string | undefined;

package/dist/runtime/server/http.js

@@ -14,6 +14,10 @@ export const EventInputBodySchema = Schema.Struct({
     payload: JsonValueSchema,
     threadId: Schema.optional(Schema.NullOr(Schema.String)),
 });
+const LOOMS_API_ROOTS = ['/health', '/runs', '/definitions', '/operations'];
+export function isLoomsApiPath(path) {
+    return LOOMS_API_ROOTS.some((root) => path === root || path.startsWith(`${root}/`));
+}
 export function provideStore(effect, store) {
     return Effect.provideService(effect, EventStoreTag, store);
 }

package/dist/runtime/server/routes/definitions.d.ts

@@ -0,0 +1,3 @@
+import type { RouteOptions } from '../http';
+import { type Route } from '../route-table';
+export declare function definitionRoutes({ runtime }: RouteOptions): readonly Route[];