@swirls/looms 0.0.2 → 0.2.0

package/dist/debugger/shell/schema-form.d.ts

@@ -0,0 +1,31 @@
+import { type JsonValue } from '@swirls/looms/core';
+export interface FormField {
+    readonly name: string;
+    readonly label: string;
+    readonly type: 'string' | 'number' | 'boolean';
+    readonly defaultValue: string;
+}
+/** How a definition's input is edited: one text box, flat scalar fields, or raw JSON. */
+export type InputForm = {
+    readonly kind: 'text';
+} | {
+    readonly kind: 'fields';
+    readonly fields: readonly FormField[];
+} | {
+    readonly kind: 'json';
+};
+export interface FormValues {
+    /** Field values by name, for the `fields` form. */
+    readonly fields: Readonly<Record<string, string>>;
+    /** Text for the `text` form, or JSON source for the `json` form. */
+    readonly source: string;
+}
+/** Flat object fields, or undefined when the schema needs the raw JSON editor. */
+export declare function formFields(schema: JsonValue | undefined): readonly FormField[] | undefined;
+export declare function inputForm(schema: JsonValue | undefined): InputForm;
+export declare function initialValues(form: InputForm): FormValues;
+export declare function valuesToInput(fields: readonly FormField[], values: Readonly<Record<string, string>>): JsonValue;
+/** Input for the form's current values. Throws when the JSON source does not parse. */
+export declare function formInput(form: InputForm, values: FormValues): JsonValue;
+/** Input carrying a single chat message, when the form has exactly one string to put it in. */
+export declare function messageInput(form: InputForm, message: string): JsonValue | undefined;

package/dist/debugger/shell/schema-form.js

@@ -0,0 +1,117 @@
+import { Predicate } from 'effect';
+import { cleanUndefined, isJsonNumber, isJsonObject, isJsonString, } from '@swirls/looms/core';
+function fieldType(value) {
+    if (value === 'string') {
+        return 'string';
+    }
+    if (value === 'number' || value === 'integer') {
+        return 'number';
+    }
+    if (value === 'boolean') {
+        return 'boolean';
+    }
+    return undefined;
+}
+/** Flat object fields, or undefined when the schema needs the raw JSON editor. */
+export function formFields(schema) {
+    if (!isJsonObject(schema) || schema.type !== 'object' || !isJsonObject(schema.properties)) {
+        return undefined;
+    }
+    const fields = [];
+    for (const [name, property] of Object.entries(schema.properties)) {
+        if (!isJsonObject(property) || !isJsonString(property.type)) {
+            return undefined;
+        }
+        const type = fieldType(property.type);
+        if (!type) {
+            return undefined;
+        }
+        const fallback = property.default;
+        const defaultValue = isJsonString(fallback) || isJsonNumber(fallback) || Predicate.isBoolean(fallback)
+            ? String(fallback)
+            : '';
+        fields.push({
+            name,
+            label: isJsonString(property.title) ? property.title : name,
+            type,
+            defaultValue,
+        });
+    }
+    return fields;
+}
+export function inputForm(schema) {
+    if (isJsonObject(schema) && schema.type === 'string') {
+        return { kind: 'text' };
+    }
+    const fields = formFields(schema);
+    return fields ? { kind: 'fields', fields } : { kind: 'json' };
+}
+export function initialValues(form) {
+    switch (form.kind) {
+        case 'text':
+            return { fields: {}, source: '' };
+        case 'fields':
+            return {
+                fields: Object.fromEntries(form.fields.map((field) => [field.name, field.defaultValue])),
+                source: '',
+            };
+        case 'json':
+            return { fields: {}, source: '{}' };
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+export function valuesToInput(fields, values) {
+    const input = {};
+    for (const field of fields) {
+        const raw = values[field.name] ?? field.defaultValue;
+        if (field.type === 'number') {
+            const parsed = Number(raw);
+            input[field.name] = Number.isFinite(parsed) ? parsed : 0;
+            continue;
+        }
+        if (field.type === 'boolean') {
+            input[field.name] = raw === 'true';
+            continue;
+        }
+        input[field.name] = raw;
+    }
+    return input;
+}
+/** Input for the form's current values. Throws when the JSON source does not parse. */
+export function formInput(form, values) {
+    switch (form.kind) {
+        case 'text':
+            return values.source;
+        case 'fields':
+            return valuesToInput(form.fields, values.fields);
+        case 'json':
+            return cleanUndefined(JSON.parse(values.source));
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+/** Input carrying a single chat message, when the form has exactly one string to put it in. */
+export function messageInput(form, message) {
+    switch (form.kind) {
+        case 'text':
+            return message;
+        case 'fields': {
+            const strings = form.fields.filter((field) => field.type === 'string');
+            const [only] = strings;
+            return strings.length === 1 && only
+                ? valuesToInput(form.fields, { [only.name]: message })
+                : undefined;
+        }
+        case 'json':
+            return undefined;
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}

package/dist/debugger/shell/start-form.d.ts

@@ -0,0 +1,3 @@
+import type { WorkspaceContext } from '../plugin';
+/** Starts a run from a form built from the definition's input schema, then shows its result. */
+export declare function StartForm(context: WorkspaceContext): import("react").JSX.Element;

package/dist/debugger/shell/start-form.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from 'lucide-react';
+import { useState } from 'react';
+import { isJsonObject, isJsonString } from '@swirls/looms/core';
+import { useRunEvents, useRunStore, useRunSummary, useThreadTree } from '@swirls/looms/react';
+import { JsonTree } from '../components/json-tree.js';
+import { StatusBadge } from '../components/status-dot.js';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
+import { Input } from '../ui/input.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { Textarea } from '../ui/textarea.js';
+import { formInput, initialValues, inputForm, } from './schema-form.js';
+import { useStartRun } from './use-start-run.js';
+function RunResult({ runId }) {
+    const store = useRunStore(runId);
+    const summary = useRunSummary(store);
+    const tree = useThreadTree(store);
+    const events = useRunEvents(store);
+    const rootThreadId = tree.root?.threadId;
+    const completed = events.find((event) => event.type === 'runtime.thread.completed' && event.threadId === rootThreadId);
+    const failed = events.find((event) => event.type === 'runtime.thread.failed' && event.threadId === rootThreadId);
+    const output = completed && isJsonObject(completed.payload) ? completed.payload.output : undefined;
+    const failure = failed && isJsonObject(failed.payload) ? failed.payload.error : undefined;
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Status" }), _jsx(StatusBadge, { status: summary.status })] }), output !== undefined ? (_jsxs("section", { className: "border-border bg-card rounded-lg border p-3", children: [_jsx("h3", { className: "text-muted-foreground mb-1.5 text-[11px] font-medium", children: "Output" }), _jsx(JsonTree, { value: output, defaultExpandDepth: 2 })] })) : null, isJsonString(failure) ? (_jsx("p", { className: "text-status-failed bg-status-failed/10 rounded-md px-3 py-2 text-xs", children: failure })) : null] }));
+}
+function FieldInput({ field, value, onChange, }) {
+    switch (field.type) {
+        case 'boolean':
+            return (_jsx(Checkbox, { checked: value === 'true', onCheckedChange: (checked) => onChange(String(checked === true)) }));
+        case 'number':
+            return (_jsx(Input, { type: "number", className: "h-8 font-mono text-xs", value: value, onChange: (event) => onChange(event.target.value) }));
+        case 'string':
+            return (_jsx(Input, { className: "h-8 text-[13px]", value: value, onChange: (event) => onChange(event.target.value) }));
+        default: {
+            const exhaustive = field.type;
+            return exhaustive;
+        }
+    }
+}
+function InputFields({ form, values, onChange, }) {
+    switch (form.kind) {
+        case 'text':
+            return (_jsx(Textarea, { className: "max-h-64 min-h-20", value: values.source, onChange: (event) => onChange({ ...values, source: event.target.value }), "aria-label": "Input" }));
+        case 'fields':
+            return form.fields.map((field) => (_jsxs("label", { className: field.type === 'boolean' ? 'flex items-center gap-2 text-xs' : 'grid gap-1.5 text-xs', children: [_jsx("span", { className: "text-foreground font-medium", children: field.label }), _jsx(FieldInput, { field: field, value: values.fields[field.name] ?? '', onChange: (value) => onChange({ ...values, fields: { ...values.fields, [field.name]: value } }) })] }, field.name)));
+        case 'json':
+            return (_jsx(Textarea, { className: "max-h-80 min-h-28 font-mono text-xs", value: values.source, onChange: (event) => onChange({ ...values, source: event.target.value }), "aria-label": "JSON input", spellCheck: false }));
+        default: {
+            const exhaustive = form;
+            return exhaustive;
+        }
+    }
+}
+/** Starts a run from a form built from the definition's input schema, then shows its result. */
+export function StartForm(context) {
+    const form = inputForm(context.definition.inputSchema);
+    const [values, setValues] = useState(() => initialValues(form));
+    const { start, fail, pending, error } = useStartRun(context);
+    function submit() {
+        let input;
+        try {
+            input = formInput(form, values);
+        }
+        catch (cause) {
+            fail(cause);
+            return;
+        }
+        start(input);
+    }
+    return (_jsx(ScrollArea, { className: "h-full", children: _jsxs("div", { className: "p-4", children: [context.runId ? (_jsx(RunResult, { runId: context.runId })) : (_jsxs("form", { className: "grid gap-4", onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsxs("div", { children: [_jsx("p", { className: "text-[13px] font-medium", children: "Input" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Fields come from the definition's input schema." })] }), _jsx(InputFields, { form: form, values: values, onChange: setValues }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: pending, children: [_jsx(Play, {}), "Start run"] }), error ? _jsx("p", { className: "text-status-failed min-w-0 text-[11px]", children: error }) : null] })] })), context.runId && error ? (_jsx("p", { className: "text-status-failed mt-3 text-[11px]", children: error })) : null] }) }));
+}

package/dist/debugger/shell/use-start-run.d.ts

@@ -0,0 +1,14 @@
+import { type JsonValue } from '@swirls/looms/core';
+import type { WorkspaceContext } from '../plugin';
+export interface StartedRun {
+    readonly runId: string;
+    readonly threadId: string;
+}
+export interface StartRun {
+    /** Starts a run of the workspace definition, then runs `after` once the start is accepted. */
+    readonly start: <T>(input: JsonValue, after?: (started: StartedRun) => Promise<T>) => void;
+    readonly fail: (cause: unknown) => void;
+    readonly pending: boolean;
+    readonly error: string | null;
+}
+export declare function useStartRun({ definition, onStarted }: WorkspaceContext): StartRun;

package/dist/debugger/shell/use-start-run.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { createRunId } from '@swirls/looms/core';
+import { useDebugger } from '../context.js';
+import { errorMessage } from '../lib/cn.js';
+export function useStartRun({ definition, onStarted }) {
+    const { client } = useDebugger();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    function start(input, after) {
+        const runId = createRunId();
+        setPending(true);
+        setError(null);
+        onStarted(runId);
+        client
+            .startRun({
+            kind: definition.kind,
+            definitionName: definition.name,
+            definitionVersion: definition.version,
+            input,
+            runId,
+        })
+            .then((result) => after?.({ runId: result.runId, threadId: result.threadId }))
+            .catch((cause) => setError(errorMessage(cause)))
+            .finally(() => setPending(false));
+    }
+    return {
+        start,
+        fail: (cause) => setError(errorMessage(cause)),
+        pending,
+        error,
+    };
+}

package/dist/debugger/shell/workspace.d.ts

@@ -0,0 +1,6 @@
+import type { PublishedDefinition } from '@swirls/looms/core';
+export declare function Workspace({ definition, runId, onStarted, }: {
+    definition: PublishedDefinition | undefined;
+    runId?: string;
+    onStarted: (runId: string) => void;
+}): import("react").JSX.Element;

package/dist/debugger/shell/workspace.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MousePointerClick } from 'lucide-react';
+import { useDebugger } from '../context.js';
+import { workspaceFor } from '../plugin.js';
+import { EmptyState, PanelHeader } from '../ui/panel.js';
+import { definitionKey } from './definition-key.js';
+import { StartForm } from './start-form.js';
+export function Workspace({ definition, runId, onStarted, }) {
+    const { plugins } = useDebugger();
+    if (!definition) {
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(PanelHeader, {}), _jsx(EmptyState, { icon: _jsx(MousePointerClick, {}), title: "Pick a run type", children: "Choose one from the run type menu to start a run, or press \u2318K to open a past run." })] }));
+    }
+    const View = workspaceFor(plugins, definition)?.component ?? StartForm;
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(PanelHeader, { children: _jsxs("h2", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 text-[13px] font-medium", children: definition.name }), definition.description ? (_jsx("span", { className: "text-muted-foreground truncate text-xs", title: definition.description, children: definition.description })) : null] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(View, { definition: definition, runId: runId, onStarted: onStarted }, definitionKey(definition)) })] }));
+}

package/dist/debugger/styles.css

@@ -1,31 +1,129 @@
-@source "./**/*.{ts,tsx}";
+@source "./**/*.js";
+@source "../agent/debugger/**/*.js";
+@source "../workflow/debugger/**/*.js";
+@source "../approval/debugger/**/*.js";
 
 @theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
   --color-status-running: var(--status-running);
   --color-status-waiting: var(--status-waiting);
   --color-status-completed: var(--status-completed);
   --color-status-failed: var(--status-failed);
   --color-status-cancelled: var(--status-cancelled);
-  --color-family-runtime: var(--family-runtime);
-  --color-family-agent: var(--family-agent);
-  --color-family-workflow: var(--family-workflow);
-  --color-family-approval: var(--family-approval);
-  --color-family-payments: var(--family-payments);
-  --color-family-wait: var(--family-wait);
+  --color-json-key: var(--json-key);
+  --color-json-string: var(--json-string);
+  --color-json-number: var(--json-number);
+  --color-json-boolean: var(--json-boolean);
+  --color-json-null: var(--json-null);
+  --ease-snappy: var(--debugger-ease);
+}
+
+/* Layered so a host's own unlayered :root theme (for example shadcn/ui) takes precedence. */
+@layer base {
+  :root {
+    --background: oklch(0.16 0.005 260);
+    --foreground: oklch(0.93 0.01 260);
+    --card: oklch(0.19 0.006 260);
+    --card-foreground: oklch(0.93 0.01 260);
+    --primary: oklch(0.93 0.01 260);
+    --primary-foreground: oklch(0.2 0.006 260);
+    --secondary: oklch(0.24 0.008 260);
+    --secondary-foreground: oklch(0.93 0.01 260);
+    --muted: oklch(0.24 0.008 260);
+    --muted-foreground: oklch(0.68 0.015 260);
+    --accent: oklch(0.26 0.01 260);
+    --accent-foreground: oklch(0.95 0.01 260);
+    --destructive: oklch(0.65 0.18 25);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 12%);
+    --ring: oklch(0.55 0.02 260);
+    --sidebar: oklch(0.18 0.006 260);
+    --sidebar-foreground: oklch(0.93 0.01 260);
+  }
+
+  :where(.looms-debugger, .debugger-pop),
+  :where(.looms-debugger, .debugger-pop) *,
+  :where(.looms-debugger, .debugger-pop) ::before,
+  :where(.looms-debugger, .debugger-pop) ::after {
+    border-color: var(--color-border);
+  }
 }
 
 :root {
+  --debugger-ease: cubic-bezier(0.23, 1, 0.32, 1);
   --status-running: oklch(0.74 0.12 240);
   --status-waiting: oklch(0.8 0.14 85);
   --status-completed: oklch(0.76 0.13 155);
   --status-failed: oklch(0.68 0.18 25);
   --status-cancelled: oklch(0.62 0.01 260);
-  --family-runtime: oklch(0.76 0.13 155);
-  --family-agent: oklch(0.74 0.12 240);
-  --family-workflow: oklch(0.76 0.12 300);
-  --family-approval: oklch(0.8 0.14 85);
-  --family-payments: oklch(0.78 0.1 175);
-  --family-wait: oklch(0.8 0.14 85);
+  --json-key: oklch(0.8 0.06 280);
+  --json-string: oklch(0.8 0.1 150);
+  --json-number: oklch(0.8 0.1 230);
+  --json-boolean: oklch(0.82 0.11 70);
+  --json-null: oklch(0.6 0.01 260);
+}
+
+@keyframes debugger-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+@keyframes debugger-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Anchored overlays grow from their trigger; keyboard-opened ones appear instantly. */
+.debugger-pop {
+  transform-origin: var(--radix-popper-transform-origin);
+  animation: debugger-pop-in 150ms var(--debugger-ease);
+}
+
+.debugger-pop[data-instant] {
+  animation: none;
+}
+
+.debugger-float-in {
+  transition:
+    opacity 150ms var(--debugger-ease),
+    transform 150ms var(--debugger-ease),
+    scale 150ms var(--debugger-ease),
+    background-color 150ms var(--debugger-ease);
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .debugger-pop {
+    animation-name: debugger-fade-in;
+  }
+
+  .debugger-float-in {
+    transition-property: opacity;
+  }
 }
 
 .debugger-event-stream {
@@ -55,17 +153,3 @@
     display: inline;
   }
 }
-
-@container (max-width: 22rem) {
-  .debugger-follow-label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+declare const variants: {
+    readonly default: 'bg-primary text-primary-foreground hover:bg-primary/90';
+    readonly secondary: 'bg-secondary text-secondary-foreground hover:bg-accent';
+    readonly outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent';
+    readonly ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground';
+    readonly destructive: 'text-muted-foreground hover:bg-status-failed/15 hover:text-status-failed';
+};
+declare const sizes: {
+    readonly xs: 'h-6 gap-1 rounded-sm px-2 text-[11px] [&_svg]:size-3';
+    readonly sm: 'h-7 gap-1.5 rounded-md px-2.5 text-xs [&_svg]:size-3.5';
+    readonly default: 'h-8 gap-1.5 rounded-md px-3 text-xs [&_svg]:size-3.5';
+    readonly 'icon-xs': 'size-6 rounded-sm [&_svg]:size-3';
+    readonly 'icon-sm': 'size-7 rounded-md [&_svg]:size-3.5';
+    readonly icon: 'size-8 rounded-md [&_svg]:size-4';
+};
+export type ButtonVariant = keyof typeof variants;
+export type ButtonSize = keyof typeof sizes;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button };

package/dist/debugger/ui/button.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const variants = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-accent',
+    outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent',
+    ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground',
+    destructive: 'text-muted-foreground hover:bg-status-failed/15 hover:text-status-failed',
+};
+const sizes = {
+    xs: 'h-6 gap-1 rounded-sm px-2 text-[11px] [&_svg]:size-3',
+    sm: 'h-7 gap-1.5 rounded-md px-2.5 text-xs [&_svg]:size-3.5',
+    default: 'h-8 gap-1.5 rounded-md px-3 text-xs [&_svg]:size-3.5',
+    'icon-xs': 'size-6 rounded-sm [&_svg]:size-3',
+    'icon-sm': 'size-7 rounded-md [&_svg]:size-3.5',
+    icon: 'size-8 rounded-md [&_svg]:size-4',
+};
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { "data-slot": "button", type: asChild ? undefined : (props.type ?? 'button'), className: cn('focus-visible:ring-ring/50 ease-snappy inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap outline-none select-none focus-visible:ring-[3px] active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0', 'transition-[transform,background-color,color,opacity] duration-150', variants[variant], sizes[size], className), ...props }));
+}
+export { Button };

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

@@ -0,0 +1,9 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };

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 };