@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/layout.d.ts

@@ -0,0 +1,174 @@
+import { useRender } from "@base-ui/react/use-render";
+import { Checkbox } from "./form-controls.js";
+import type { ComponentProps, ReactNode } from "react";
+type Gap = "4" | "6" | "8" | "12" | "16" | "20" | "24";
+export type StackProps = useRender.ComponentProps<"div"> & {
+    gap?: Gap | "section";
+    /** Cross-axis alignment of the children; they stretch to the stack's width by default. */
+    align?: "stretch" | "start" | "center" | "end";
+    justify?: "start" | "center" | "end" | "between";
+};
+/** Children in a column. It never forces its parent wider than the parent's own box. */
+export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export type ClusterProps = useRender.ComponentProps<"div"> & {
+    gap?: Gap;
+    /** Wraps onto more lines when narrow; `false` keeps one line. Defaults to true. */
+    wrap?: boolean;
+};
+/** Children in a row, centered on one line. */
+export declare function Cluster({ gap, wrap, render, className, ...props }: ClusterProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+/**
+ * The kit's text colors and sizes, for a run of text in a layout. `tone` and `size` inherit when
+ * left out; `code` is the 12px label size, set compact. `MutedText` and `Eyebrow` are its two
+ * common shapes.
+ */
+export declare const text: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+    tone: {
+        primary: {
+            color: "fg.primary";
+        };
+        secondary: {
+            color: "fg.secondary";
+        };
+        muted: {
+            color: "fg.muted";
+        };
+        subtle: {
+            color: "fg.subtle";
+        };
+    };
+    size: {
+        body: {
+            fontSize: "body";
+        };
+        caption: {
+            fontSize: "caption";
+        };
+        code: {
+            fontSize: "code";
+            letterSpacing: "compact";
+        };
+    };
+    weight: {
+        regular: {
+            fontWeight: "regular";
+        };
+        medium: {
+            fontWeight: "medium";
+        };
+    };
+    truncate: {
+        true: {
+            minWidth: "0";
+            overflow: "hidden";
+            textOverflow: "ellipsis";
+            whiteSpace: "nowrap";
+        };
+        false: {};
+    };
+}>;
+export type TextProps = useRender.ComponentProps<"span"> & {
+    tone?: "primary" | "secondary" | "muted" | "subtle";
+    size?: "body" | "caption" | "code";
+    weight?: "regular" | "medium";
+    /** Cuts the text to one line with an ellipsis. */
+    truncate?: boolean;
+    /** The element to render; `render` takes any element instead. Defaults to `span`. */
+    as?: "span" | "p" | "div" | "strong" | "small" | "label" | "time";
+};
+export declare function Text({ tone, size, weight, truncate, as, render, className, ...props }: TextProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+/** Muted caption text: a value's secondary line, or an empty value such as "Never". */
+export declare function MutedText(props: Omit<TextProps, "tone" | "size">): import("@types/react").JSX.Element;
+/** The small muted label over a title or a field, such as a drawer's eyebrow or a group's name. */
+export declare function Eyebrow({ className, ...props }: Omit<TextProps, "size" | "weight">): import("@types/react").JSX.Element;
+/**
+ * The one heading style: `page` for the title a page's heading opens with; `large` for a title in
+ * content, such as a standalone page's; `medium` for a section of a page or a dialog; `small` for
+ * a group inside a panel.
+ */
+export declare const heading: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+    size: {
+        page: {
+            fontSize: "heading.page";
+            letterSpacing: "compact";
+            lineHeight: "tight";
+        };
+        large: {
+            fontSize: "heading.section";
+        };
+        medium: {
+            fontSize: "heading";
+        };
+        small: {
+            fontSize: "body";
+        };
+    };
+}>;
+export type HeadingProps = ComponentProps<"h1"> & {
+    /** The outline level, which is independent of `size`. */
+    level: 1 | 2 | 3 | 4;
+    size?: "page" | "large" | "medium" | "small";
+};
+export declare function Heading({ level, size, className, ...props }: HeadingProps): import("@types/react").JSX.Element;
+/** A bordered list whose items are divided by hairlines, such as a checklist of sources. */
+export declare function ListGroup({ className, ...props }: ComponentProps<"ul">): import("@types/react").JSX.Element;
+export declare function ListGroupItem({ className, ...props }: ComponentProps<"li">): import("@types/react").JSX.Element;
+/** Whether a control sits in a `Toolbar`, which sets the height of the controls in it. */
+export declare function useInToolbar(): boolean;
+export type ToolbarProps = useRender.ComponentProps<"div"> & {
+    gap?: Gap;
+    /** `between` sends the last group to the far edge, as a title and its actions sit. */
+    justify?: "start" | "between";
+    /** On a phone the groups stack, each the row's full width. */
+    stackOnPhone?: boolean;
+};
+/**
+ * A row of controls, such as a search with its filters or bulk actions, or a title with its
+ * actions, wrapping onto more lines when narrow. Its controls share the small button's height: a
+ * `SearchInput` or `SegmentedControl` in it is compact unless it sets its own size.
+ */
+export declare function Toolbar({ gap, justify, stackOnPhone, render, className, ...props }: ToolbarProps): import("@types/react").JSX.Element;
+/**
+ * A row's label with its muted detail line under it, or after it on the same line when `inline`.
+ * `ListRow` draws one; use it alone where the label sits inside another control, such as a
+ * checkbox's label.
+ */
+export declare function ListRowText({ label, detail, inline, }: {
+    label: ReactNode;
+    detail?: ReactNode;
+    inline?: boolean;
+}): import("@types/react").JSX.Element;
+/**
+ * One row of a list: a leading mark or control, a label with an optional muted detail, and
+ * trailing controls. `flush` drops the row's own height and inset for a table cell, keeping it to
+ * one line. `loading` draws a placeholder mark and label at the row's size. With `checkbox` the
+ * row leads with a box whose label is the mark and text, so ticking either ticks the row.
+ */
+export type ListRowProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+    leading?: ReactNode;
+    label?: ReactNode;
+    detail?: ReactNode;
+    trailing?: ReactNode;
+    /** The leading checkbox's state, such as `checked` and `onCheckedChange`. */
+    checkbox?: Omit<ComponentProps<typeof Checkbox>, "children" | "className" | "wrapperClassName">;
+    flush?: boolean;
+    loading?: boolean;
+    /**
+     * Makes the whole row a link to this address; `render` takes a router's link instead. Keep
+     * interactive controls out of `trailing` then, since a link cannot hold them.
+     */
+    href?: string;
+};
+export declare function ListRow({ leading, label, detail, trailing, checkbox, flush, loading, href, render, className, ...props }: ListRowProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+/** A responsive grid of ChoiceCards, shared by provider, role, and client pickers. */
+export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/**
+ * A card to pick one option from a grid, such as a provider or a role, laid out as a `ListRow`. Pass
+ * `pressed` when it is one of several that stay chosen; leave it out for a card that acts as soon as
+ * it is clicked.
+ */
+export declare function ChoiceCard({ icon: leading, pressed, children, className, ...props }: Omit<ComponentProps<"button">, "type"> & {
+    icon?: ReactNode;
+    pressed?: boolean;
+}): import("@types/react").JSX.Element;
+export {};

package/dist/components/layout.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { createContext, useContext } from "react";
+import { css, cva, cx } from "#primitives/css";
+import { Checkbox } from "./form-controls.js";
+import { Skeleton } from "./skeleton.js";
+// Each name is its pixel gap; bare numbers would read as Panda's spacing scale, four times larger.
+// `section` is the gap between a page's sections, which tightens to the page gap on a phone.
+const layoutGap = cva({
+    variants: {
+        gap: {
+            "4": { gap: "layout.tightGap" },
+            "6": { gap: "menu.inset" },
+            "8": { gap: "layout.controlGap" },
+            "12": { gap: "layout.contentGap" },
+            "16": { gap: "layout.clusterGap" },
+            "20": { gap: "layout.pageGap" },
+            "24": { gap: "layout.sectionGap" },
+            section: { gap: "layout.sectionGap", _phone: { gap: "layout.pageGap" } },
+        },
+    },
+});
+const stack = cva({
+    base: { display: "flex", flexDirection: "column", minWidth: "0" },
+    variants: {
+        align: {
+            stretch: {},
+            start: { alignItems: "flex-start" },
+            center: { alignItems: "center" },
+            end: { alignItems: "flex-end" },
+        },
+        justify: {
+            start: {},
+            center: { justifyContent: "center" },
+            end: { justifyContent: "flex-end" },
+            between: { justifyContent: "space-between" },
+        },
+    },
+});
+/** Children in a column. It never forces its parent wider than the parent's own box. */
+export function Stack({ gap = "12", align, justify, render, className, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: {
+            ...props,
+            "data-ciridae-ui": "",
+            className: cx(stack({ align, justify }), layoutGap({ gap }), className),
+        },
+    });
+}
+const cluster = cva({
+    base: { display: "flex", alignItems: "center" },
+    variants: {
+        wrap: {
+            true: { flexWrap: "wrap" },
+            // One line: the cluster and its children shrink, so a long label truncates instead of
+            // pushing the row wider.
+            false: { flexWrap: "nowrap", minWidth: "0", "& > *": { minWidth: "0" } },
+        },
+    },
+});
+/** Children in a row, centered on one line. */
+export function Cluster({ gap = "8", wrap = true, render, className, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: {
+            ...props,
+            "data-ciridae-ui": "",
+            className: cx(cluster({ wrap }), layoutGap({ gap }), className),
+        },
+    });
+}
+/**
+ * The kit's text colors and sizes, for a run of text in a layout. `tone` and `size` inherit when
+ * left out; `code` is the 12px label size, set compact. `MutedText` and `Eyebrow` are its two
+ * common shapes.
+ */
+export const text = cva({
+    variants: {
+        tone: {
+            primary: { color: "fg.primary" },
+            secondary: { color: "fg.secondary" },
+            muted: { color: "fg.muted" },
+            subtle: { color: "fg.subtle" },
+        },
+        size: {
+            body: { fontSize: "body" },
+            caption: { fontSize: "caption" },
+            code: { fontSize: "code", letterSpacing: "compact" },
+        },
+        weight: { regular: { fontWeight: "regular" }, medium: { fontWeight: "medium" } },
+        truncate: {
+            true: { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            false: {},
+        },
+    },
+});
+export function Text({ tone, size, weight, truncate = false, as = "span", render, className, ...props }) {
+    return useRender({
+        defaultTagName: as,
+        render,
+        props: {
+            ...props,
+            className: cx(as === "p" && css({ margin: "none" }), text({ tone, size, weight, truncate }), className),
+            "data-ciridae-ui": "",
+        },
+    });
+}
+/** Muted caption text: a value's secondary line, or an empty value such as "Never". */
+export function MutedText(props) {
+    return _jsx(Text, { ...props, tone: "muted", size: "caption" });
+}
+/** The small muted label over a title or a field, such as a drawer's eyebrow or a group's name. */
+export function Eyebrow({ className, ...props }) {
+    return (_jsx(Text, { tone: "muted", ...props, size: "code", weight: "medium", className: cx(css({ lineHeight: "tight" }), className) }));
+}
+/**
+ * The one heading style: `page` for the title a page's heading opens with; `large` for a title in
+ * content, such as a standalone page's; `medium` for a section of a page or a dialog; `small` for
+ * a group inside a panel.
+ */
+export const heading = cva({
+    base: { margin: "none", fontWeight: "medium" },
+    variants: {
+        size: {
+            page: { fontSize: "heading.page", letterSpacing: "compact", lineHeight: "tight" },
+            large: { fontSize: "heading.section" },
+            medium: { fontSize: "heading" },
+            small: { fontSize: "body" },
+        },
+    },
+    defaultVariants: { size: "medium" },
+});
+export function Heading({ level, size, className, ...props }) {
+    const Element = `h${level}`;
+    return _jsx(Element, { ...props, className: cx(heading({ size }), className), "data-ciridae-ui": "" });
+}
+const listGroup = css({
+    listStyle: "none",
+    margin: "none",
+    padding: "none",
+    border: "1px solid token(colors.border.subtle)",
+    borderRadius: "field",
+    overflow: "hidden",
+});
+const listGroupItem = css({ "& + &": { borderTop: "1px solid token(colors.border.subtle)" } });
+/** A bordered list whose items are divided by hairlines, such as a checklist of sources. */
+export function ListGroup({ className, ...props }) {
+    return _jsx("ul", { ...props, className: cx(listGroup, className), "data-ciridae-ui": "" });
+}
+export function ListGroupItem({ className, ...props }) {
+    return _jsx("li", { ...props, className: cx(listGroupItem, className), "data-ciridae-ui": "" });
+}
+const ToolbarContext = createContext(false);
+/** Whether a control sits in a `Toolbar`, which sets the height of the controls in it. */
+export function useInToolbar() {
+    return useContext(ToolbarContext);
+}
+const toolbar = cva({
+    base: { display: "flex", alignItems: "center", flexWrap: "wrap", minWidth: "0" },
+    variants: {
+        justify: { start: {}, between: { justifyContent: "space-between" } },
+        stackOnPhone: {
+            true: { _phone: { flexDirection: "column", alignItems: "stretch" } },
+            false: {},
+        },
+    },
+});
+/**
+ * A row of controls, such as a search with its filters or bulk actions, or a title with its
+ * actions, wrapping onto more lines when narrow. Its controls share the small button's height: a
+ * `SearchInput` or `SegmentedControl` in it is compact unless it sets its own size.
+ */
+export function Toolbar({ gap = "8", justify = "start", stackOnPhone = false, render, className, ...props }) {
+    const element = useRender({
+        defaultTagName: "div",
+        render,
+        props: {
+            ...props,
+            className: cx(toolbar({ justify, stackOnPhone }), layoutGap({ gap }), className),
+            "data-ciridae-ui": "",
+        },
+    });
+    return _jsx(ToolbarContext, { value: true, children: element });
+}
+// One row of a list. A row inset from its list's edge reads `--list-row-inline`, which a container
+// widens to run its rows, headings, and notes flush to its own edges. A flush row sits in a table
+// cell or another box that already pads it.
+const listRow = cva({
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "layout.controlGap",
+        minWidth: "0",
+    },
+    variants: {
+        flush: {
+            false: {
+                minHeight: "control.field",
+                paddingInline: "var(--list-row-inline, token(spacing.panel.comfortable))",
+                paddingBlock: "layout.tightGap",
+            },
+            true: {},
+        },
+    },
+    defaultVariants: { flush: false },
+});
+const listRowLink = css({
+    color: "inherit",
+    textDecoration: "none",
+    cursor: "pointer",
+    _hover: { background: "bg.rowHover" },
+    _focusVisible: { focusRing: "inset" },
+});
+const stackedText = css({ display: "flex", flexDirection: "column", flex: "1", minWidth: "0" });
+// A flush row stays one line, as a table row does: the detail follows the label, and both cut
+// with an ellipsis.
+const inlineText = css({
+    flex: "1",
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const rowDetail = css({ color: "fg.muted", fontSize: "caption" });
+const inlineRowDetail = css({ marginInlineStart: "layout.controlGap" });
+const rowLeading = css({ display: "inline-flex", flexShrink: "0", color: "fg.muted" });
+const rowCheckbox = css({ flex: "1", minWidth: "0" });
+const rowCheckboxBox = css({ flexShrink: "0" });
+/**
+ * A row's label with its muted detail line under it, or after it on the same line when `inline`.
+ * `ListRow` draws one; use it alone where the label sits inside another control, such as a
+ * checkbox's label.
+ */
+export function ListRowText({ label, detail, inline = false, }) {
+    return (_jsxs("span", { className: inline ? inlineText : stackedText, children: [label, detail && _jsx("span", { className: cx(rowDetail, inline && inlineRowDetail), children: detail })] }));
+}
+export function ListRow({ leading, label, detail, trailing, checkbox, flush = false, loading = false, href, render, className, ...props }) {
+    const link = href !== undefined || render !== undefined;
+    return useRender({
+        defaultTagName: href !== undefined ? "a" : "div",
+        render,
+        props: {
+            ...(href !== undefined ? { href } : {}),
+            ...props,
+            "aria-busy": loading || undefined,
+            className: cx(listRow({ flush }), link && listRowLink, className),
+            "data-ciridae-ui": "",
+            children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { shape: "circle", style: { width: 16 } }), _jsx("span", { className: stackedText, children: _jsx(Skeleton, { shape: "text", style: { width: "40%" } }) })] })) : checkbox ? (_jsxs(_Fragment, { children: [_jsxs(Checkbox, { ...checkbox, wrapperClassName: rowCheckbox, className: rowCheckboxBox, children: [leading && (_jsx("span", { className: rowLeading, "aria-hidden": "true", children: leading })), _jsx(ListRowText, { label: label, detail: detail, inline: flush })] }), trailing] })) : (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: rowLeading, children: leading }), _jsx(ListRowText, { label: label, detail: detail, inline: flush }), trailing] })),
+        },
+    });
+}
+/** A responsive grid of ChoiceCards, shared by provider, role, and client pickers. */
+export function ChoiceGrid({ className, ...props }) {
+    return (_jsx("div", { ...props, "data-ciridae-ui": "", className: cx(css({
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 180px), 1fr))",
+            gap: "layout.controlGap",
+        }), className) }));
+}
+const choiceCard = css({
+    border: "1px solid token(colors.border.subtle)",
+    borderRadius: "field",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { borderColor: "border.control", background: "bg.card" },
+    "&[aria-pressed=true]": { borderColor: "border.selected", background: "bg.selected" },
+    _focusVisible: { focusRing: "inset" },
+});
+/**
+ * A card to pick one option from a grid, such as a provider or a role, laid out as a `ListRow`. Pass
+ * `pressed` when it is one of several that stay chosen; leave it out for a card that acts as soon as
+ * it is clicked.
+ */
+export function ChoiceCard({ icon: leading, pressed, children, className, ...props }) {
+    return (_jsxs("button", { type: "button", ...props, "aria-pressed": pressed, className: cx(listRow(), choiceCard, className), "data-ciridae-ui": "", children: [leading, _jsx(ListRowText, { label: children, inline: true })] }));
+}

package/dist/components/lightbox.d.ts

@@ -0,0 +1,14 @@
+/** A file the lightbox shows: an image, a PDF, text or HTML by its `mediaType` or name. */
+export type LightboxItem = {
+    id: string;
+    name: string;
+    url: string;
+    mediaType?: string;
+};
+export type LightboxProps = {
+    items: readonly LightboxItem[];
+    /** The file showing; null closes the lightbox. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+};
+export declare function Lightbox({ items, index, onIndexChange }: LightboxProps): import("@types/react").JSX.Element;

package/dist/components/lightbox.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A full-window viewer for files, such as a message's attachments: an image fits the window, a
+ * PDF, text or HTML file shows in a frame, and anything else offers its download. With several
+ * files it steps between them by its arrows or the arrow keys.
+ */
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, DownloadSimpleIcon, XIcon, } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { fileTypeIcon } from "./dropzone.js";
+import { HotkeyLayer } from "./hotkeys.js";
+import { directional, icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+const popup = css({
+    position: "fixed",
+    inset: "none",
+    zIndex: "dialog",
+    display: "grid",
+    gridTemplateRows: "auto minmax(0, 1fr)",
+    background: "bg.canvas",
+    color: "fg.primary",
+    outline: "none",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    _motionReduce: { transition: "none" },
+    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
+});
+const bar = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    padding: "panel.compact",
+});
+const title = css({
+    flex: "1",
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "body",
+    fontWeight: "medium",
+});
+const position = css({ color: "fg.muted", fontSize: "caption", fontVariantNumeric: "tabular-nums" });
+const stage = css({
+    position: "relative",
+    display: "grid",
+    placeItems: "center",
+    minHeight: "0",
+    paddingInline: "layout.pageGap",
+    paddingBottom: "layout.pageGap",
+    "& > img": { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" },
+    "& > iframe": {
+        width: "100%",
+        maxWidth: "overlay.dialogWide",
+        height: "100%",
+        border: "0",
+        borderRadius: "action",
+        background: "bg.card",
+    },
+});
+const step = css({
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    "&[data-step=previous]": { insetInlineStart: "layout.controlGap" },
+    "&[data-step=next]": { insetInlineEnd: "layout.controlGap" },
+});
+const fallback = css({
+    display: "grid",
+    justifyItems: "center",
+    gap: "layout.contentGap",
+    color: "fg.muted",
+    "& > svg": { width: "avatar.large", height: "avatar.large" },
+});
+function kindOf({ name, mediaType = "" }) {
+    const lower = name.toLowerCase();
+    if (mediaType.startsWith("image/") || /\.(?:png|jpe?g|gif|webp|avif|svg)$/.test(lower))
+        return "image";
+    if (mediaType === "application/pdf" ||
+        mediaType.startsWith("text/") ||
+        /\.(?:pdf|html?|txt|md|csv|json|log)$/.test(lower))
+        return "frame";
+    return "file";
+}
+function isHtml({ name, mediaType }) {
+    return mediaType === "text/html" || /\.html?$/i.test(name);
+}
+export function Lightbox({ items, index, onIndexChange }) {
+    const item = index === null ? undefined : items[index];
+    return (_jsx(BaseDialog.Root, { open: item !== undefined, onOpenChange: (open) => {
+            if (!open)
+                onIndexChange(null);
+        }, children: _jsx(BaseDialog.Portal, { children: _jsx(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", 
+                // Keys on the popup itself, so they step from any control in it; the page's own
+                // hotkeys pause under the layer.
+                onKeyDown: (event) => {
+                    if (index === null || items.length < 2)
+                        return;
+                    const offset = { ArrowLeft: -1, ArrowRight: 1 }[event.key];
+                    if (offset === undefined)
+                        return;
+                    event.preventDefault();
+                    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                    onIndexChange((index + (rtl ? -offset : offset) + items.length) % items.length);
+                }, children: item && index !== null && (_jsx(HotkeyLayer, { children: _jsx(LightboxView, { items: items, index: index, item: item, onIndexChange: onIndexChange }) })) }) }) }));
+}
+function LightboxView({ items, index, item, onIndexChange, }) {
+    const { labels } = useCiridaeLocale();
+    const several = items.length > 1;
+    const go = (offset) => onIndexChange((index + offset + items.length) % items.length);
+    const kind = kindOf(item);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: bar, children: [_jsx(BaseDialog.Title, { className: title, children: item.name }), several && (_jsx("span", { className: position, children: labels.lightbox.position(index + 1, items.length) })), _jsx(IconButton, { "aria-label": labels.lightbox.openInNewTab, variant: "ghost", nativeButton: false, render: _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer" }), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) }), _jsx(IconButton, { "aria-label": labels.lightbox.download, variant: "ghost", nativeButton: false, render: _jsx("a", { href: item.url, download: item.name }), children: _jsx(DownloadSimpleIcon, { className: icon({ size: "small" }) }) }), _jsx(BaseDialog.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: stage, children: [kind === "image" ? (_jsx("img", { src: item.url, alt: item.name }, item.id)) : kind === "frame" ? (_jsx("iframe", { src: item.url, title: item.name, 
+                        // A sent HTML file only draws: no scripts, no reach into the page. A PDF keeps the
+                        // browser's own viewer, which a sandbox would block.
+                        sandbox: isHtml(item) ? "" : undefined }, item.id)) : (_jsxs("div", { className: fallback, children: [fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }), _jsx(Button, { nativeButton: false, render: _jsx("a", { href: item.url, download: item.name }), children: labels.lightbox.download })] })), several && (_jsxs(_Fragment, { children: [_jsx("span", { className: step, "data-step": "previous", children: _jsx(IconButton, { "aria-label": labels.lightbox.previous, onClick: () => go(-1), children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }) }), _jsx("span", { className: step, "data-step": "next", children: _jsx(IconButton, { "aria-label": labels.lightbox.next, onClick: () => go(1), children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) }) })] }))] })] }));
+}

package/dist/components/link.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactElement } from "react";
+export type LinkProps = ComponentProps<"a"> & {
+    tone?: "inherit" | "muted" | "accent";
+    /** Opens in a new tab, with the `rel` that needs to accompany it. */
+    external?: boolean;
+    /** Replaces the anchor, for a router's own link component. */
+    render?: ReactElement;
+};
+/**
+ * One anchor style for the whole app. `external` carries the new-tab wiring so callers never
+ * repeat `target`/`rel`, and a router link passes through `render`.
+ */
+export declare function Link({ tone, external, render, className, children, ...props }: LinkProps): import("@types/react").JSX.Element;

package/dist/components/link.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { cva, cx } from "#primitives/css";
+const anchor = cva({
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "control.iconGap",
+        minWidth: "0",
+        borderRadius: "keycap",
+        textDecoration: "none",
+        _hover: { textDecoration: "underline" },
+        _focusVisible: { focusRing: "outer" },
+    },
+    variants: {
+        tone: {
+            /** Reads as body text; the underline on hover is the only affordance. */
+            inherit: { color: "inherit" },
+            muted: { color: "fg.muted", fontSize: "caption" },
+            accent: { color: "accent.brand" },
+        },
+    },
+    defaultVariants: { tone: "inherit" },
+});
+/**
+ * One anchor style for the whole app. `external` carries the new-tab wiring so callers never
+ * repeat `target`/`rel`, and a router link passes through `render`.
+ */
+export function Link({ tone, external, render, className, children, ...props }) {
+    const anchorProps = {
+        ...props,
+        ...(external ? { target: "_blank", rel: "noreferrer" } : {}),
+        className: cx(anchor({ tone }), className),
+        "data-ciridae-ui": "",
+    };
+    return render ? cloneElement(render, anchorProps, children) : _jsx("a", { ...anchorProps, children: children });
+}