@corbits/react-ui 0.1.0

package/dist/ui/gate-block.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GATE_KIND_LABEL } from "../lib/workflow-registry.js";
+import { cn } from "../lib/utils.js";
+/**
+ * Presentational chrome for a pending gate: a run parked on a human
+ * decision. The interactive payload is entirely the caller's — this
+ * component only frames it, so the resume-payload contract stays wherever
+ * the host's signal-sending logic already lives.
+ */ export function GateBlock({ gate, children, footer, className }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-gate-kind": gate.kind,
+        "aria-label": GATE_KIND_LABEL[gate.kind],
+        className: cn("rounded-lg border border-primary-emphasis/30 bg-primary/5 px-3.5 py-3", className),
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-[10.5px] font-bold uppercase tracking-[0.05em] text-primary-emphasis",
+                children: GATE_KIND_LABEL[gate.kind]
+            }),
+            /*#__PURE__*/ _jsx("h3", {
+                className: "mt-1 text-sm font-semibold",
+                children: gate.title
+            }),
+            gate.prompt === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                className: "mt-1 text-xs leading-snug text-muted-foreground",
+                children: gate.prompt
+            }),
+            children === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "mt-3",
+                children: children
+            }),
+            footer === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "mt-3 flex flex-wrap items-center gap-2",
+                children: footer
+            })
+        ]
+    });
+}

package/dist/ui/horizontal-stepper.d.ts

@@ -0,0 +1,13 @@
+import type { WorkflowStep } from "../lib/workflow-run-progress.js";
+export type HorizontalStepperProps = {
+    readonly steps: readonly WorkflowStep[];
+    readonly className?: string;
+};
+/**
+ * A phase rail: numbered pills connected by a rail that fills in once the
+ * segment behind it actually completes — the fill never runs ahead of real
+ * work. Scrolls the current step into view on mount and on every step
+ * change, so a run with more steps than fit on screen never leaves the
+ * active one off to the side unannounced.
+ */
+export declare function HorizontalStepper({ steps, className }: HorizontalStepperProps): import("react").JSX.Element;

package/dist/ui/horizontal-stepper.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScrollCurrentIntoView } from "../hooks/use-scroll-current-into-view.js";
+import { workflowStepGlyph, workflowStepLabelClass } from "../lib/workflow-run-progress.js";
+import { cn } from "../lib/utils.js";
+// Above this many steps, an even split can't give every label readable room,
+// so labels compress to numbers-only pills except for the current step — the
+// one label a reader actually needs without scrolling. Every label still
+// renders (`sr-only`) so a screen reader still hears the full sequence.
+const LABEL_VISIBLE_STEP_THRESHOLD = 5;
+function pillClass(status) {
+    if (status === "completed") return "bg-success text-success-foreground";
+    if (status === "failed") return "bg-destructive text-destructive-foreground";
+    if (status === "current") return "bg-primary text-primary-foreground";
+    return "bg-muted text-muted-foreground";
+}
+/**
+ * A phase rail: numbered pills connected by a rail that fills in once the
+ * segment behind it actually completes — the fill never runs ahead of real
+ * work. Scrolls the current step into view on mount and on every step
+ * change, so a run with more steps than fit on screen never leaves the
+ * active one off to the side unannounced.
+ */ export function HorizontalStepper({ steps, className }) {
+    const currentStep = steps.find((step)=>step.status === "current");
+    const currentRef = useScrollCurrentIntoView(currentStep?.number ?? -1);
+    const compress = steps.length > LABEL_VISIBLE_STEP_THRESHOLD;
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("border-b border-border bg-card px-6 py-5", className),
+        children: /*#__PURE__*/ _jsx("ol", {
+            "aria-label": "Workflow progress",
+            className: "flex items-center gap-2 overflow-x-auto [mask-image:linear-gradient(to_right,transparent,black_12px,black_calc(100%-12px),transparent)] md:gap-3",
+            children: steps.map((step, index)=>/*#__PURE__*/ _jsxs("li", {
+                    ref: step.status === "current" ? currentRef : undefined,
+                    "aria-current": step.status === "current" ? "step" : undefined,
+                    className: cn("flex min-w-0 items-center gap-2 last:flex-initial md:gap-3", compress ? step.status === "current" ? "flex-[8_1_0%]" : "flex-1" : "flex-1"),
+                    children: [
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "relative flex size-8 shrink-0 items-center justify-center",
+                            children: [
+                                step.status === "current" ? /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": true,
+                                    className: "absolute inset-0 rounded-full bg-primary/30 motion-safe:[animation:corbits-status-pulse_1.8s_ease-out_infinite]"
+                                }) : null,
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: cn("relative flex size-8 items-center justify-center rounded-full text-sm font-medium transition-colors", pillClass(step.status)),
+                                    children: workflowStepGlyph(step.status, step.number)
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            title: step.label,
+                            className: cn("min-w-0 flex-1 truncate text-sm font-medium", compress && step.status !== "current" ? "sr-only" : workflowStepLabelClass(step.status)),
+                            children: step.label
+                        }),
+                        index === steps.length - 1 ? null : /*#__PURE__*/ _jsx("span", {
+                            className: cn("h-0.5 shrink-0 overflow-hidden rounded-full bg-border", compress ? "min-w-2 flex-1" : "w-4 md:w-6"),
+                            children: /*#__PURE__*/ _jsx("span", {
+                                "data-filled": step.status === "completed",
+                                className: "block h-full w-full origin-left rounded-full bg-success transition-transform duration-300 ease-out data-[filled=false]:scale-x-0 data-[filled=true]:scale-x-100"
+                            })
+                        })
+                    ]
+                }, step.number))
+        })
+    });
+}

package/dist/ui/input.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;

package/dist/ui/input.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+// `border-input` is the control-boundary token: it clears the 3:1 UI-component
+// threshold against both the page and the card, so the field actually has an
+// edge. `border-border` is the soft decorative one and must not be used here.
+// The focus ring comes from the theme's base layer, not from this file.
+export function Input({ className, type, ...props }) {
+    return /*#__PURE__*/ _jsx("input", {
+        type: type,
+        "data-slot": "input",
+        className: cn("flex h-9 w-full min-w-0 rounded-md border border-input bg-card px-3 py-1 text-sm shadow-xs transition-colors", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50", className),
+        ...props
+    });
+}

package/dist/ui/inspector-shell.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+export type InspectorEmptyProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly className?: string;
+};
+/** The "nothing selected" message inside an inspector rail. Deliberately not
+ * `EmptyState` — that component centres and pads for a full-width surface;
+ * an inspector's empty message sits left-aligned in a narrow side panel. */
+export declare function InspectorEmpty({ title, description, className }: InspectorEmptyProps): import("react").JSX.Element;
+export type InspectorHeaderProps = {
+    readonly eyebrow?: ReactNode;
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly className?: string;
+};
+/** The chip row, title and action buttons at the top of an inspector. */
+export declare function InspectorHeader({ eyebrow, title, description, actions, className }: InspectorHeaderProps): import("react").JSX.Element;
+export declare function InspectorPanelTitle({ children, className }: {
+    readonly children: ReactNode;
+    readonly className?: string;
+}): import("react").JSX.Element;
+export type InspectorKvRow = {
+    readonly label: string;
+    readonly value: ReactNode;
+    readonly mono?: boolean;
+};
+export declare function InspectorKv({ rows, className }: {
+    readonly rows: readonly InspectorKvRow[];
+    readonly className?: string;
+}): import("react").JSX.Element;
+export type InspectorShellProps = {
+    readonly header?: ReactNode;
+    readonly children?: ReactNode;
+    /** Shown instead of `children` when nothing is selected. */
+    readonly empty?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The side-rail frame every inspector shares: a header region, a scrollable
+ * body, and an empty state that replaces both when there is no selection.
+ * `InspectorHeader`/`InspectorKv`/`InspectorPanelTitle` are exported
+ * separately so a caller can compose its own layout inside this shell
+ * instead of going through a single big inspector component.
+ */
+export declare function InspectorShell({ header, children, empty, className }: InspectorShellProps): import("react").JSX.Element;

package/dist/ui/inspector-shell.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/** The "nothing selected" message inside an inspector rail. Deliberately not
+ * `EmptyState` — that component centres and pads for a full-width surface;
+ * an inspector's empty message sits left-aligned in a narrow side panel. */ export function InspectorEmpty({ title, description, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("max-w-64", className),
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-sm font-semibold",
+                children: title
+            }),
+            description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                className: "mt-1.5 text-xs leading-snug text-muted-foreground",
+                children: description
+            })
+        ]
+    });
+}
+/** The chip row, title and action buttons at the top of an inspector. */ export function InspectorHeader({ eyebrow, title, description, actions, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-2", className),
+        children: [
+            eyebrow === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-wrap items-center gap-1.5",
+                children: eyebrow
+            }),
+            /*#__PURE__*/ _jsx("h2", {
+                className: "text-base font-bold tracking-tight",
+                children: title
+            }),
+            description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                className: "text-xs leading-snug text-muted-foreground",
+                children: description
+            }),
+            actions === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "mt-1 flex flex-wrap items-center gap-1.5",
+                children: actions
+            })
+        ]
+    });
+}
+export function InspectorPanelTitle({ children, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("mb-2 mt-4 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground first:mt-0", className),
+        children: children
+    });
+}
+export function InspectorKv({ rows, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("flex flex-col gap-1.5", className),
+        children: rows.map((row)=>/*#__PURE__*/ _jsxs("div", {
+                className: "flex items-baseline justify-between gap-3 text-xs",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "shrink-0 text-muted-foreground",
+                        children: row.label
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("min-w-0 truncate text-right", row.mono === true && "font-mono"),
+                        children: row.value
+                    })
+                ]
+            }, row.label))
+    });
+}
+/**
+ * The side-rail frame every inspector shares: a header region, a scrollable
+ * body, and an empty state that replaces both when there is no selection.
+ * `InspectorHeader`/`InspectorKv`/`InspectorPanelTitle` are exported
+ * separately so a caller can compose its own layout inside this shell
+ * instead of going through a single big inspector component.
+ */ export function InspectorShell({ header, children, empty, className }) {
+    if (empty !== undefined && header === undefined) {
+        return /*#__PURE__*/ _jsx("aside", {
+            "aria-label": "Inspector",
+            className: cn("flex min-h-0 flex-col overflow-auto border-l border-border bg-card", className),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-1 flex-col items-start justify-center px-5 py-10",
+                children: empty
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("aside", {
+        "aria-label": "Inspector",
+        className: cn("flex min-h-0 flex-col overflow-hidden border-l border-border bg-card", className),
+        children: [
+            header === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "shrink-0 border-b border-border px-4 pb-3 pt-4",
+                children: header
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "min-h-0 flex-1 overflow-auto px-4 py-3",
+                children: children
+            })
+        ]
+    });
+}

package/dist/ui/intake-form.d.ts

@@ -0,0 +1,39 @@
+/**
+ * One input a workflow asks for before it runs.
+ *
+ * A small closed set of types on purpose. Every additional widget is a
+ * rendering branch a consumer has to read past to change the one they use, and
+ * a workflow that needs a date picker or a file drop is better served by the
+ * host composing its own field than by this file growing a case for it.
+ */
+export type IntakeField = {
+    readonly name: string;
+    readonly label: string;
+    readonly type: "text" | "textarea" | "number" | "boolean" | "select";
+    readonly required?: boolean;
+    /** Guidance under the control. Wired up with `aria-describedby`. */
+    readonly help?: string;
+    readonly placeholder?: string;
+    /** For `select` only. Ignored otherwise. */
+    readonly options?: readonly {
+        readonly value: string;
+        readonly label: string;
+    }[];
+};
+export type IntakeFormProps = {
+    readonly fields: readonly IntakeField[];
+    readonly values: Readonly<Record<string, unknown>>;
+    readonly onChange: (next: Record<string, unknown>) => void;
+    /** Disambiguates ids when two forms are on one page. */
+    readonly idPrefix?: string;
+    readonly disabled?: boolean;
+    readonly className?: string;
+};
+/** True when every required field has a value — for enabling a submit control. */
+export declare function intakeFieldsComplete(fields: readonly IntakeField[], values: Readonly<Record<string, unknown>>): boolean;
+/**
+ * The inputs a run needs, rendered from a field list. Fully controlled: the
+ * host owns the values, so the same form backs a one-off run and a saved
+ * schedule without this file knowing which.
+ */
+export declare function IntakeForm({ fields, values, onChange, idPrefix, disabled, className }: IntakeFormProps): import("react").JSX.Element | null;

package/dist/ui/intake-form.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+/** True when every required field has a value — for enabling a submit control. */ export function intakeFieldsComplete(fields, values) {
+    return fields.every((field)=>{
+        if (field.required !== true) return true;
+        const value = values[field.name];
+        if (typeof value === "string") return value.trim().length > 0;
+        return value !== undefined && value !== null;
+    });
+}
+/**
+ * The inputs a run needs, rendered from a field list. Fully controlled: the
+ * host owns the values, so the same form backs a one-off run and a saved
+ * schedule without this file knowing which.
+ */ export function IntakeForm({ fields, values, onChange, idPrefix, disabled = false, className }) {
+    const generatedPrefix = useId();
+    const prefix = idPrefix ?? generatedPrefix;
+    if (fields.length === 0) return null;
+    const set = (name, value)=>onChange({
+            ...values,
+            [name]: value
+        });
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("flex flex-col gap-4", className),
+        children: fields.map((field)=>{
+            const id = `${prefix}-${field.name}`;
+            const helpId = field.help === undefined ? undefined : `${id}-help`;
+            const value = values[field.name];
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1.5",
+                children: [
+                    field.type === "boolean" ? /*#__PURE__*/ _jsxs("label", {
+                        htmlFor: id,
+                        className: "flex items-center gap-2 text-sm",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                id: id,
+                                type: "checkbox",
+                                checked: value === true,
+                                required: field.required,
+                                disabled: disabled,
+                                "aria-describedby": helpId,
+                                onChange: (event)=>set(field.name, event.target.checked),
+                                className: "size-4 rounded-sm border border-input accent-[var(--primary)]"
+                            }),
+                            field.label,
+                            field.required === true ? /*#__PURE__*/ _jsx(RequiredMark, {}) : null
+                        ]
+                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("label", {
+                                htmlFor: id,
+                                className: "text-sm font-medium",
+                                children: [
+                                    field.label,
+                                    field.required === true ? /*#__PURE__*/ _jsx(RequiredMark, {}) : null
+                                ]
+                            }),
+                            field.type === "textarea" ? /*#__PURE__*/ _jsx("textarea", {
+                                id: id,
+                                value: typeof value === "string" ? value : "",
+                                placeholder: field.placeholder,
+                                required: field.required,
+                                disabled: disabled,
+                                "aria-describedby": helpId,
+                                rows: 4,
+                                onChange: (event)=>set(field.name, event.target.value),
+                                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:opacity-50"
+                            }) : field.type === "select" ? /*#__PURE__*/ _jsxs("select", {
+                                id: id,
+                                value: typeof value === "string" ? value : "",
+                                required: field.required,
+                                disabled: disabled,
+                                "aria-describedby": helpId,
+                                onChange: (event)=>set(field.name, event.target.value),
+                                className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm disabled:opacity-50",
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "",
+                                        children: "Choose…"
+                                    }),
+                                    (field.options ?? []).map((option)=>/*#__PURE__*/ _jsx("option", {
+                                            value: option.value,
+                                            children: option.label
+                                        }, option.value))
+                                ]
+                            }) : /*#__PURE__*/ _jsx(Input, {
+                                id: id,
+                                type: field.type === "number" ? "number" : "text",
+                                value: typeof value === "string" || typeof value === "number" ? String(value) : "",
+                                placeholder: field.placeholder,
+                                required: field.required,
+                                disabled: disabled,
+                                "aria-describedby": helpId,
+                                onChange: (event)=>set(field.name, field.type === "number" ? event.target.valueAsNumber : event.target.value)
+                            })
+                        ]
+                    }),
+                    field.help === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                        id: helpId,
+                        className: "text-xs text-muted-foreground",
+                        children: field.help
+                    })
+                ]
+            }, field.name);
+        })
+    });
+}
+// The asterisk is decorative: `required` on the control is what actually tells
+// assistive tech, and a screen reader announcing "asterisk" helps nobody.
+function RequiredMark() {
+    return /*#__PURE__*/ _jsx("span", {
+        "aria-hidden": true,
+        className: "ml-0.5 text-primary-emphasis",
+        children: "*"
+    });
+}

package/dist/ui/kind-card-grid.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export type KindCardOption = {
+    readonly id: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly icon?: ReactNode;
+    readonly disabled?: boolean;
+};
+export type KindCardGridProps = {
+    readonly options: readonly KindCardOption[];
+    readonly value?: string;
+    readonly onChange?: (id: string) => void;
+    /** Accessible name for the radiogroup. */
+    readonly label: string;
+    readonly columns?: 2 | 3 | 4;
+    readonly className?: string;
+};
+/**
+ * Selectable card grid for channel-kind, grant-effect, provider, and
+ * workbench-type pickers. Each card is a real button with `aria-pressed`;
+ * the group is labelled for assistive tech.
+ */
+export declare function KindCardGrid({ options, value, onChange, label, columns, className, }: KindCardGridProps): import("react").JSX.Element;

package/dist/ui/kind-card-grid.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const COLUMNS = {
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
+};
+/**
+ * Selectable card grid for channel-kind, grant-effect, provider, and
+ * workbench-type pickers. Each card is a real button with `aria-pressed`;
+ * the group is labelled for assistive tech.
+ */ export function KindCardGrid({ options, value, onChange, label, columns = 2, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        role: "group",
+        "aria-label": label,
+        className: cn("grid gap-2", COLUMNS[columns], className),
+        children: options.map((option)=>{
+            const selected = value === option.id;
+            return /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                "aria-pressed": selected,
+                disabled: option.disabled === true,
+                onClick: ()=>onChange?.(option.id),
+                className: cn("flex flex-col gap-1 border px-3.5 py-3 text-left transition-colors ease-out", "hover:bg-muted active:brightness-95 disabled:pointer-events-none disabled:opacity-50", selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card"),
+                children: [
+                    option.icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                        className: "mb-0.5 text-muted-foreground",
+                        "aria-hidden": true,
+                        children: option.icon
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-sm font-semibold",
+                        children: option.title
+                    }),
+                    option.description === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs leading-snug text-muted-foreground",
+                        children: option.description
+                    })
+                ]
+            }, option.id);
+        })
+    });
+}

package/dist/ui/library-page-header.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export type LibraryPageHeaderProps = {
+    readonly title: string;
+    /** `lg` (21px, default) for catalog pages; `sm` (17px) for denser lists. */
+    readonly titleSize?: "sm" | "lg";
+    /** When provided, renders an "{count} items" chip beside the title. */
+    readonly count?: number;
+    /** One line under the title — what this library holds. */
+    readonly subtitle?: string;
+    /** Trailing controls: search, view toggle, action buttons. */
+    readonly children?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The header row every library page shares: title, item count, then trailing
+ * controls after a flexible spacer. The spacer is a real element rather than
+ * `justify-between` so a `LibrarySearchInput` can expand leftward over it
+ * without shifting its neighbours.
+ */
+export declare function LibraryPageHeader({ title, titleSize, count, subtitle, children, className, }: LibraryPageHeaderProps): import("react").JSX.Element;

package/dist/ui/library-page-header.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const TITLE_CLASS = {
+    lg: "text-[21px] font-semibold tracking-[-0.02em]",
+    sm: "text-[17px] font-semibold tracking-[-0.01em]"
+};
+/**
+ * The header row every library page shares: title, item count, then trailing
+ * controls after a flexible spacer. The spacer is a real element rather than
+ * `justify-between` so a `LibrarySearchInput` can expand leftward over it
+ * without shifting its neighbours.
+ */ export function LibraryPageHeader({ title, titleSize = "lg", count, subtitle, children, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "library-page-header",
+        className: cn("flex min-w-0 flex-wrap items-center gap-[14px] px-4 pt-5 pb-[14px] sm:px-7", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 shrink-0 flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        className: TITLE_CLASS[titleSize],
+                        children: title
+                    }),
+                    subtitle === undefined || subtitle === "" ? null : /*#__PURE__*/ _jsx("p", {
+                        className: "truncate text-[12px] text-muted-foreground",
+                        children: subtitle
+                    })
+                ]
+            }),
+            count === undefined ? null : /*#__PURE__*/ _jsxs("span", {
+                className: "shrink-0 rounded-md bg-muted px-[9px] py-[3px] font-mono text-[12px] text-muted-foreground",
+                children: [
+                    count,
+                    " items"
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "min-w-2 flex-1"
+            }),
+            children
+        ]
+    });
+}

package/dist/ui/list-detail.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+export type ListDetailProps = {
+    /** The index: a catalog grid, a table, a list of skills or tools. */
+    readonly list: ReactNode;
+    /** The open item. `null` shows the placeholder instead. */
+    readonly detail: ReactNode | null;
+    /** Clears the selection. Required — see the note about the back control. */
+    readonly onCloseDetail: () => void;
+    /** Shown on wide screens when nothing is selected. */
+    readonly placeholder?: ReactNode;
+    readonly detailLabel?: string;
+    readonly className?: string;
+};
+/**
+ * Index on the left, the open item on the right.
+ *
+ * Two panes above `lg`, one below it. On a narrow screen the detail *replaces*
+ * the list rather than sitting under it: a phone-width column showing both
+ * means the user opens something and sees no change without scrolling.
+ *
+ * That swap is why `onCloseDetail` is required rather than optional. Once the
+ * list is hidden, the back control is the only way out — a caller who omitted
+ * it would ship a dead end on mobile, so the type does not let them.
+ *
+ * Both panes scroll independently, so reading a long detail does not scroll the
+ * list out from under the selection.
+ */
+export declare function ListDetail({ list, detail, onCloseDetail, placeholder, detailLabel, className, }: ListDetailProps): import("react").JSX.Element;