@corbits/react-ui 0.1.0

package/dist/ui/dither-canvas.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+/**
+ * 4×4 Bayer matrix, normalised to 0–1.
+ *
+ * Ordered dithering, not error diffusion. Error diffusion (Floyd–Steinberg and
+ * friends) is serial — each pixel's error feeds the next — so it cannot be
+ * recomputed cheaply every frame, and the pattern crawls when anything moves.
+ * An ordered matrix is a pure function of position, so a frame costs one pass
+ * and the texture stays locked to the surface instead of swimming.
+ */ const BAYER = [
+    [
+        0,
+        8,
+        2,
+        10
+    ],
+    [
+        12,
+        4,
+        14,
+        6
+    ],
+    [
+        3,
+        11,
+        1,
+        9
+    ],
+    [
+        15,
+        7,
+        13,
+        5
+    ]
+].map((row)=>row.map((value)=>(value + 0.5) / 16));
+/**
+ * A dithered field that reacts to the pointer — decoration for a full-bleed
+ * panel, and nothing else.
+ *
+ * Drawn on a canvas rather than as a repeating background image because the
+ * point is that it *moves*: a radial field drifts slowly, the pointer pushes a
+ * bright spot through it, and both need per-frame recomputation. A CSS pattern
+ * can be one of those things but not the other.
+ *
+ * `aria-hidden` and unfocusable, unconditionally. It carries no information;
+ * anything a reader needs is in the content laid over it.
+ *
+ * Reduced motion is honoured by drawing exactly one frame and stopping — not by
+ * slowing down and not by hiding it. The texture is the design; the animation is
+ * the part that makes some people ill. The theme's global CSS override cannot
+ * reach a `requestAnimationFrame` loop, so the check lives here.
+ *
+ * The canvas is sized in device pixels and scaled by `devicePixelRatio`. Without
+ * that the grid is resampled by the compositor on a retina display and the
+ * crisp dot pattern — the entire effect — turns to mush.
+ */ export function DitherCanvas({ cell = 4, color, warpRadius = 160, className }) {
+    const ref = useRef(null);
+    const reduce = usePrefersReducedMotion();
+    useEffect(()=>{
+        const canvas = ref.current;
+        if (canvas === null) return;
+        const context = canvas.getContext("2d");
+        if (context === null) return;
+        // Resolved once per mount: reading a custom property costs a style
+        // recalculation, which is not something to do sixty times a second. The
+        // fallback reads the canvas's own computed `color` rather than a literal
+        // hex — the theme's base layer already ties that to `--foreground`, so
+        // the fallback tracks the active theme instead of only being correct in
+        // whichever one it was copied from.
+        const computed = getComputedStyle(canvas);
+        const themeInk = computed.getPropertyValue("--primary").trim();
+        const ink = color ?? (themeInk === "" ? computed.color : themeInk);
+        const pointer = {
+            x: -1e6,
+            y: -1e6
+        };
+        let frame = 0;
+        let width = 0;
+        let height = 0;
+        const resize = ()=>{
+            const ratio = window.devicePixelRatio || 1;
+            const box = canvas.getBoundingClientRect();
+            width = box.width;
+            height = box.height;
+            canvas.width = Math.max(1, Math.round(width * ratio));
+            canvas.height = Math.max(1, Math.round(height * ratio));
+            context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        };
+        const draw = (time)=>{
+            context.clearRect(0, 0, width, height);
+            context.fillStyle = ink;
+            const drift = reduce ? 0 : time / 3000;
+            const columns = Math.ceil(width / cell);
+            const rows = Math.ceil(height / cell);
+            for(let row = 0; row < rows; row += 1){
+                for(let column = 0; column < columns; column += 1){
+                    const x = column * cell;
+                    const y = row * cell;
+                    // Base field: a soft diagonal gradient with a slow sine drift, so the
+                    // panel is darkest at one corner and the grain has somewhere to go.
+                    const across = (x / Math.max(width, 1) + y / Math.max(height, 1)) / 2;
+                    let intensity = 0.55 - across * 0.5 + Math.sin(across * 6 + drift) * 0.08;
+                    if (warpRadius > 0) {
+                        const dx = x - pointer.x;
+                        const dy = y - pointer.y;
+                        const distance = Math.hypot(dx, dy);
+                        if (distance < warpRadius) {
+                            // Squared falloff: a linear one leaves a visible disc edge.
+                            const falloff = 1 - distance / warpRadius;
+                            intensity += falloff * falloff * 0.55;
+                        }
+                    }
+                    // The threshold comparison *is* the dither: a cell is either on or
+                    // off, and the matrix decides which, so the average over a 4×4 block
+                    // approximates the continuous intensity.
+                    const threshold = BAYER[row % 4]?.[column % 4] ?? 0.5;
+                    if (intensity > threshold) {
+                        context.fillRect(x, y, cell - 1, cell - 1);
+                    }
+                }
+            }
+        };
+        const loop = (time)=>{
+            draw(time);
+            frame = requestAnimationFrame(loop);
+        };
+        const onPointerMove = (event)=>{
+            const box = canvas.getBoundingClientRect();
+            pointer.x = event.clientX - box.left;
+            pointer.y = event.clientY - box.top;
+        };
+        const onPointerLeave = ()=>{
+            pointer.x = -1e6;
+            pointer.y = -1e6;
+        };
+        resize();
+        const observer = new ResizeObserver(()=>{
+            resize();
+            if (reduce) draw(0);
+        });
+        observer.observe(canvas);
+        if (reduce) {
+            draw(0);
+        } else {
+            frame = requestAnimationFrame(loop);
+            canvas.addEventListener("pointermove", onPointerMove);
+            canvas.addEventListener("pointerleave", onPointerLeave);
+        }
+        return ()=>{
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+            canvas.removeEventListener("pointermove", onPointerMove);
+            canvas.removeEventListener("pointerleave", onPointerLeave);
+        };
+    }, [
+        cell,
+        color,
+        warpRadius,
+        reduce
+    ]);
+    return /*#__PURE__*/ _jsx("canvas", {
+        ref: ref,
+        "aria-hidden": true,
+        className: cn("block size-full", className)
+    });
+}

package/dist/ui/embed-body.d.ts

@@ -0,0 +1,30 @@
+export type EmbedBodyProps = {
+    /** Must be `https:`. Anything else renders the fallback notice. */
+    readonly url: string;
+    /** Names the frame for assistive tech. Required — an unnamed frame is unnavigable. */
+    readonly title: string;
+    readonly description?: string;
+    /** Offers the original file alongside the embed, when the host serves one. */
+    readonly downloadUrl?: string;
+    /**
+     * Frame shape. `wide` is 16:9 for slides; `tall` suits paged documents, where
+     * a 16:9 box shows a third of a page and forces scrolling inside a scroller.
+     */
+    readonly aspect?: "wide" | "tall";
+    readonly className?: string;
+};
+/**
+ * A third-party URL, framed.
+ *
+ * One component covers every embedded-viewer kind — slide decks, hosted
+ * documents, rendered previews. They differ only in the URL and the frame's
+ * proportions, and three near-identical files is how three near-identical
+ * sandboxes drift apart until one of them is wrong.
+ *
+ * The escape hatch below the frame is not decoration. Embedding is the thing
+ * most likely to be blocked by a frame-ancestors policy, an extension or a
+ * login wall, and an iframe that renders blank fires no error we can catch — so
+ * the direct link is always present rather than being a fallback we would have
+ * to detect our way into.
+ */
+export declare function EmbedBody({ url, title, description, downloadUrl, aspect, className }: EmbedBodyProps): import("react").JSX.Element;

package/dist/ui/embed-body.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { isSafeUrl, toSafeHref } from "../lib/url.js";
+import { cn } from "../lib/utils.js";
+import { ArtifactNotice } from "./artifact-notice.js";
+import { buttonVariants } from "./button.js";
+/**
+ * Everything embedded here is third-party: a deck on someone's hosting, a
+ * rendered document, a preview a model produced. None of it is trusted, so the
+ * sandbox is opened one capability at a time.
+ *
+ * `allow-scripts` and `allow-same-origin` together are required for essentially
+ * every real embed (slide players and PDF viewers both need them) and *together*
+ * they are what lets framed content reach its own origin's storage — which is
+ * correct and expected for a third-party player on its own domain. What is
+ * withheld is the set that lets the frame act on the *user*:
+ * `allow-top-navigation` (redirect the tab out from under them),
+ * `allow-popups` (open a tab that outlives the frame), and `allow-forms` (POST
+ * credentials somewhere). A viewer needs none of the three.
+ */ const EMBED_SANDBOX = "allow-scripts allow-same-origin allow-presentation";
+const EMBED_ALLOWED_PROTOCOLS = [
+    "https:"
+];
+/**
+ * A third-party URL, framed.
+ *
+ * One component covers every embedded-viewer kind — slide decks, hosted
+ * documents, rendered previews. They differ only in the URL and the frame's
+ * proportions, and three near-identical files is how three near-identical
+ * sandboxes drift apart until one of them is wrong.
+ *
+ * The escape hatch below the frame is not decoration. Embedding is the thing
+ * most likely to be blocked by a frame-ancestors policy, an extension or a
+ * login wall, and an iframe that renders blank fires no error we can catch — so
+ * the direct link is always present rather than being a fallback we would have
+ * to detect our way into.
+ */ export function EmbedBody({ url, title, description, downloadUrl, aspect = "wide", className }) {
+    if (!isSafeUrl(url, EMBED_ALLOWED_PROTOCOLS)) {
+        return /*#__PURE__*/ _jsx(ArtifactNotice, {
+            message: "This link is missing or is not a secure (https) address, so it cannot be shown."
+        });
+    }
+    const safeDownloadUrl = toSafeHref(downloadUrl);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex w-full flex-col gap-3", className),
+        children: [
+            description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                className: "max-w-prose text-sm text-muted-foreground",
+                children: description
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: cn("w-full overflow-hidden rounded-lg border border-border bg-card", aspect === "wide" ? "aspect-video" : "aspect-[3/4] max-h-[75vh]"),
+                children: /*#__PURE__*/ _jsx("iframe", {
+                    src: url,
+                    title: title,
+                    sandbox: EMBED_SANDBOX,
+                    allow: "fullscreen",
+                    className: "size-full border-0"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("a", {
+                        href: url,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: buttonVariants({
+                            variant: "outline",
+                            size: "sm"
+                        }),
+                        children: [
+                            /*#__PURE__*/ _jsx(ExternalLink, {
+                                "aria-hidden": true
+                            }),
+                            "Open in a new tab"
+                        ]
+                    }),
+                    safeDownloadUrl === undefined ? null : /*#__PURE__*/ _jsx("a", {
+                        href: safeDownloadUrl,
+                        download: true,
+                        className: buttonVariants({
+                            variant: "ghost",
+                            size: "sm"
+                        }),
+                        children: "Download"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/empty-state.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export type EmptyStateProps = {
+    /** What is not here, as a statement: "No workflows yet". */
+    readonly title: string;
+    /** Why, or what to do about it. One or two sentences. */
+    readonly description?: ReactNode;
+    readonly icon?: ReactNode;
+    /** The way out — a create button, a "clear filters" control. */
+    readonly action?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * Nothing to show, said properly.
+ *
+ * A shared component because every list otherwise grows its own centred stack
+ * of icon-title-body, and they end up differently spaced and differently
+ * worded. Three surfaces had already written this inline before it existed.
+ *
+ * The icon is decorative and hidden from assistive tech: it never carries
+ * meaning the title does not already carry, and a screen reader announcing
+ * "inbox icon" before "You're all caught up" is noise.
+ *
+ * Not a `role="status"`. An empty state is the rendered result of a finished
+ * load, not an announcement — the surface that was loading owns that.
+ */
+export declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): import("react").JSX.Element;

package/dist/ui/empty-state.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * Nothing to show, said properly.
+ *
+ * A shared component because every list otherwise grows its own centred stack
+ * of icon-title-body, and they end up differently spaced and differently
+ * worded. Three surfaces had already written this inline before it existed.
+ *
+ * The icon is decorative and hidden from assistive tech: it never carries
+ * meaning the title does not already carry, and a screen reader announcing
+ * "inbox icon" before "You're all caught up" is noise.
+ *
+ * Not a `role="status"`. An empty state is the rendered result of a finished
+ * load, not an announcement — the surface that was loading owns that.
+ */ export function EmptyState({ title, description, icon, action, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "empty-state",
+        className: cn("flex flex-col items-center gap-3 px-6 py-12 text-center", className),
+        children: [
+            icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: "grid size-11 place-items-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+                children: icon
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm font-medium",
+                        children: title
+                    }),
+                    description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                        className: "max-w-prose text-xs leading-relaxed text-muted-foreground",
+                        children: description
+                    })
+                ]
+            }),
+            action
+        ]
+    });
+}

package/dist/ui/file-input.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+export type FileInputProps = Omit<React.ComponentProps<"input">, "type" | "onChange" | "className"> & {
+    readonly onFiles: (files: FileList) => void;
+    readonly label?: string;
+    readonly hint?: string;
+    readonly className?: string;
+};
+/**
+ * A drop zone that is also a button that is also a real file input.
+ *
+ * The `<input type="file">` is the control — visually hidden with `sr-only`,
+ * never `display: none`, because a hidden-by-display input is unreachable by
+ * keyboard and invisible to assistive tech. The `<label>` wrapping it is what
+ * the user sees and clicks, which is also what makes the whole zone activate
+ * the picker with no click handler at all.
+ *
+ * Drag-and-drop is added on top rather than replacing that. A drop-only zone
+ * excludes anyone not using a mouse, and every real upload control needs the
+ * picker anyway.
+ *
+ * The input is cleared after each selection so choosing the same file twice
+ * still fires — the browser's change event will not repeat for an identical
+ * value.
+ */
+export declare function FileInput({ onFiles, label, hint, className, disabled, ...props }: FileInputProps): React.JSX.Element;

package/dist/ui/file-input.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * A drop zone that is also a button that is also a real file input.
+ *
+ * The `<input type="file">` is the control — visually hidden with `sr-only`,
+ * never `display: none`, because a hidden-by-display input is unreachable by
+ * keyboard and invisible to assistive tech. The `<label>` wrapping it is what
+ * the user sees and clicks, which is also what makes the whole zone activate
+ * the picker with no click handler at all.
+ *
+ * Drag-and-drop is added on top rather than replacing that. A drop-only zone
+ * excludes anyone not using a mouse, and every real upload control needs the
+ * picker anyway.
+ *
+ * The input is cleared after each selection so choosing the same file twice
+ * still fires — the browser's change event will not repeat for an identical
+ * value.
+ */ export function FileInput({ onFiles, label = "Choose files", hint, className, disabled, ...props }) {
+    const [dragging, setDragging] = useState(false);
+    const inputRef = useRef(null);
+    return /*#__PURE__*/ _jsxs("label", {
+        onDragOver: (event)=>{
+            if (disabled === true) return;
+            event.preventDefault();
+            setDragging(true);
+        },
+        onDragLeave: ()=>setDragging(false),
+        onDrop: (event)=>{
+            if (disabled === true) return;
+            event.preventDefault();
+            setDragging(false);
+            if (event.dataTransfer.files.length > 0) onFiles(event.dataTransfer.files);
+        },
+        className: cn("flex cursor-pointer flex-col items-center gap-1.5 rounded-lg border border-dashed border-input px-6 py-8 text-center transition-colors", dragging && "border-primary-emphasis bg-primary/10", disabled === true ? "cursor-not-allowed opacity-50" : "hover:bg-muted", // The focus ring lives on the hidden input; project it onto the zone,
+        // which is the thing the user can actually see.
+        "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--ring)]", className),
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                ref: inputRef,
+                type: "file",
+                disabled: disabled,
+                className: "sr-only",
+                onChange: (event)=>{
+                    if (event.target.files !== null && event.target.files.length > 0) onFiles(event.target.files);
+                    event.target.value = "";
+                },
+                ...props
+            }),
+            /*#__PURE__*/ _jsx(Upload, {
+                className: "size-5 text-muted-foreground",
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-sm font-medium",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-xs text-muted-foreground",
+                children: hint ?? "or drag them here"
+            })
+        ]
+    });
+}

package/dist/ui/filter-bar.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+export type FilterOption = {
+    readonly value: string;
+    readonly label: string;
+};
+export type FilterSpec = {
+    readonly id: string;
+    readonly label: string;
+    readonly options: readonly FilterOption[];
+    /** The selected option's value, or `null` for "no filter". */
+    readonly value: string | null;
+    /** The wording for the unfiltered choice — "All kinds", "Everyone". */
+    readonly anyLabel: string;
+};
+export type FilterBarProps = {
+    readonly filters: readonly FilterSpec[];
+    readonly onChange: (id: string, value: string | null) => void;
+    /** Rendered at the end — a time range, an export button. */
+    readonly children?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * A row of filters, and — the part that is usually missing — a readable summary
+ * of which ones are on.
+ *
+ * The chips are not decoration. A `<select>` collapsed to its chosen value is
+ * easy to scroll past, and "why is this dashboard empty" is almost always a
+ * filter someone forgot they set three tabs ago. The chips say what is applied
+ * in a sentence-shaped row, each one removable, with a single "Clear all"
+ * beside them.
+ *
+ * Native `<select>`, not a custom listbox. A hand-built one has to re-implement
+ * type-ahead, arrow keys, page-up, the mobile wheel and the platform's own
+ * rendering, and the usual result is a control that looks better and works
+ * worse. When a filter genuinely needs search or multi-select, that is a
+ * different control — reach for the command palette, not a bigger select.
+ *
+ * Filter state lives with the caller because it almost always also lives in the
+ * URL. Owning it here would mean every consumer fights the component to make
+ * their filters linkable.
+ */
+export declare function FilterBar({ filters, onChange, children, className }: FilterBarProps): import("react").JSX.Element;

package/dist/ui/filter-bar.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+/**
+ * A row of filters, and — the part that is usually missing — a readable summary
+ * of which ones are on.
+ *
+ * The chips are not decoration. A `<select>` collapsed to its chosen value is
+ * easy to scroll past, and "why is this dashboard empty" is almost always a
+ * filter someone forgot they set three tabs ago. The chips say what is applied
+ * in a sentence-shaped row, each one removable, with a single "Clear all"
+ * beside them.
+ *
+ * Native `<select>`, not a custom listbox. A hand-built one has to re-implement
+ * type-ahead, arrow keys, page-up, the mobile wheel and the platform's own
+ * rendering, and the usual result is a control that looks better and works
+ * worse. When a filter genuinely needs search or multi-select, that is a
+ * different control — reach for the command palette, not a bigger select.
+ *
+ * Filter state lives with the caller because it almost always also lives in the
+ * URL. Owning it here would mean every consumer fights the component to make
+ * their filters linkable.
+ */ export function FilterBar({ filters, onChange, children, className }) {
+    const active = filters.filter((filter)=>filter.value !== null);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-2", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-3",
+                children: [
+                    filters.map((filter)=>/*#__PURE__*/ _jsxs("label", {
+                            className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+                            children: [
+                                filter.label,
+                                /*#__PURE__*/ _jsxs("select", {
+                                    value: filter.value ?? "",
+                                    onChange: (event)=>onChange(filter.id, event.target.value === "" ? null : event.target.value),
+                                    className: "h-8 rounded-md border border-input bg-card px-2 text-xs text-foreground",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("option", {
+                                            value: "",
+                                            children: filter.anyLabel
+                                        }),
+                                        filter.options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                                value: option.value,
+                                                children: option.label
+                                            }, option.value))
+                                    ]
+                                })
+                            ]
+                        }, filter.id)),
+                    children
+                ]
+            }),
+            active.length === 0 ? null : /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2",
+                children: [
+                    active.map((filter)=>{
+                        const option = filter.options.find((candidate)=>candidate.value === filter.value);
+                        return /*#__PURE__*/ _jsxs("button", {
+                            type: "button",
+                            onClick: ()=>onChange(filter.id, null),
+                            // The whole chip is the remove control, and its accessible name
+                            // says so — an "×" alone is announced as "times".
+                            "aria-label": `Remove filter ${filter.label}: ${option?.label ?? filter.value}`,
+                            className: "inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "font-medium text-foreground",
+                                    children: filter.label
+                                }),
+                                option?.label ?? filter.value,
+                                /*#__PURE__*/ _jsx(X, {
+                                    className: "size-3",
+                                    "aria-hidden": true
+                                })
+                            ]
+                        }, filter.id);
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        className: "h-6 px-2 text-xs",
+                        onClick: ()=>{
+                            for (const filter of active)onChange(filter.id, null);
+                        },
+                        children: "Clear all"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/filter-chip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type FilterChipProps = {
+    readonly selected?: boolean;
+    readonly onClick?: () => void;
+    readonly children: ReactNode;
+    readonly count?: number;
+    readonly className?: string;
+};
+/**
+ * A toggleable filter pill — a category, a tag, a facet value. A real
+ * `<button>` with `aria-pressed`, not a styled label, so the selection state
+ * is announced and the control is reachable with Space/Enter alone.
+ */
+export declare function FilterChip({ selected, onClick, children, count, className }: FilterChipProps): import("react").JSX.Element;

package/dist/ui/filter-chip.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * A toggleable filter pill — a category, a tag, a facet value. A real
+ * `<button>` with `aria-pressed`, not a styled label, so the selection state
+ * is announced and the control is reachable with Space/Enter alone.
+ */ export function FilterChip({ selected = false, onClick, children, count, className }) {
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onClick,
+        className: cn(// active:brightness-95 mirrors Button's press state: it lands on
+        // pointer-down, so it sits outside transition-colors.
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors ease-out active:brightness-95", selected ? "border-border bg-card text-foreground shadow-sm" : "border-border bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground", className),
+        children: [
+            children,
+            count === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                className: cn("text-[10.5px] font-bold", selected ? "text-primary-emphasis" : "text-muted-foreground"),
+                children: count
+            })
+        ]
+    });
+}

package/dist/ui/gate-block.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type GateShellModel } from "../lib/workflow-registry.js";
+export type GateBlockProps = {
+    readonly gate: GateShellModel;
+    /** The interactive payload — a review list, choice buttons, a form. */
+    readonly children?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * 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 declare function GateBlock({ gate, children, footer, className }: GateBlockProps): import("react").JSX.Element;