@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/tabs.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const TabsContext = createContext(null);
+/** A tab-list controller with explicit controlled or uncontrolled value state. */
+export const Tabs = forwardRef(function Tabs({ children, defaultValue, onValueChange, value: controlledValue, ...props }, ref) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = controlledValue ?? uncontrolledValue;
+    const rootId = useId();
+    const setValue = (next) => {
+        if (controlledValue === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    const idFor = (prefix, value) => `${rootId}-${prefix}-${encodeURIComponent(value)}`;
+    return (_jsx(TabsContext.Provider, { value: {
+            onValueChange: setValue,
+            panelId: (value) => idFor("panel", value),
+            selectedValue,
+            tabId: (value) => idFor("tab", value),
+        }, children: _jsx("div", { ...props, className: cn("w-full", props.className), ref: ref, children: children }) }));
+});
+function useTabsContext() {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error("Tabs parts must be used inside <Tabs>");
+    return context;
+}
+/** The tab-list layout for a Tabs controller. */
+export const TabsList = forwardRef(function TabsList({ className, variant = "bordered", ...props }, ref) {
+    return (_jsx("div", { ...props, "aria-orientation": props["aria-orientation"] ?? "horizontal", className: cn(variant === "segmented"
+            ? "tabs caps-tabs-segmented w-full"
+            : "tabs tabs-border flex w-full items-center gap-xs", className), "data-variant": variant, ref: ref, role: "tablist" }));
+});
+/** A selectable tab in a Tabs controller. */
+export const TabsTrigger = forwardRef(function TabsTrigger({ className, disabled, onClick, onKeyDown, value, ...props }, ref) {
+    const tabs = useTabsContext();
+    const selected = tabs.selectedValue === value;
+    const focusTab = (event) => {
+        const list = event.currentTarget.closest('[role="tablist"]');
+        if (!(list instanceof HTMLElement))
+            return;
+        const tabsInList = Array.from(list.querySelectorAll('[role="tab"]')).filter((tab) => !tab.disabled && tab.getAttribute("aria-disabled") !== "true");
+        const currentIndex = tabsInList.indexOf(event.currentTarget);
+        if (currentIndex < 0 || tabsInList.length === 0)
+            return;
+        let nextIndex;
+        if (event.key === "ArrowRight")
+            nextIndex = (currentIndex + 1) % tabsInList.length;
+        else if (event.key === "ArrowLeft")
+            nextIndex = (currentIndex - 1 + tabsInList.length) % tabsInList.length;
+        else if (event.key === "Home")
+            nextIndex = 0;
+        else if (event.key === "End")
+            nextIndex = tabsInList.length - 1;
+        else
+            return;
+        event.preventDefault();
+        const next = tabsInList[nextIndex];
+        next?.focus();
+        if (next)
+            tabs.onValueChange(next.dataset.tabValue ?? value);
+    };
+    return (_jsx("button", { ...props, "aria-controls": tabs.panelId(value), "aria-disabled": disabled ? true : undefined, "aria-selected": selected, className: cn("tab whitespace-nowrap text-base-content transition-colors focus-visible:outline-none focus-visible:ring-2 caps-focus-color", selected && "tab-active", className), "data-tab-value": value, disabled: disabled, id: tabs.tabId(value), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented && !disabled)
+                tabs.onValueChange(value);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                focusTab(event);
+        }, ref: ref, role: "tab", tabIndex: disabled ? -1 : selected ? 0 : -1, type: props.type ?? "button" }));
+});
+/** The content panel associated with a Tabs value. */
+export const TabsContent = forwardRef(function TabsContent({ children, className, forceMount = false, value, ...props }, ref) {
+    const tabs = useTabsContext();
+    const selected = tabs.selectedValue === value;
+    if (!selected && !forceMount)
+        return null;
+    return (_jsx("div", { ...props, "aria-labelledby": tabs.tabId(value), className: cn("mt-md focus-visible:outline-none", className), hidden: !selected, id: tabs.panelId(value), ref: ref, role: "tabpanel", tabIndex: 0, children: children }));
+});

package/dist/components/technonomicon.d.ts

@@ -0,0 +1,192 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Plate. */
+export type PlateProps = {
+    caption: ReactNode;
+    image: ReactNode;
+    label: string;
+} & HTMLAttributes<HTMLElement>;
+/** A labelled graphite illustration plate. */
+export declare function Plate({ caption, className, image, label, ...props }: PlateProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by StagePlate. */
+export type StagePlateProps = {
+    caption: ReactNode;
+    /** The live drawing: an element with the `caps-stage-plate-viewport` class. */
+    children: ReactNode;
+    /** How to handle the drawing, shown under the caption. */
+    hint?: ReactNode;
+    /** Id for the hint, so the drawing can name it with aria-describedby. */
+    hintId?: string;
+    label: string;
+    /** A numbered key to what the drawing shows. */
+    specimenKey?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * A plate whose illustration is a live pixel-art stage rather than an image.
+ * Its drawing reads `--specimen-ink`, `--specimen-paper` and
+ * `--specimen-accent`, which follow the theme.
+ */
+export declare function StagePlate({ caption, children, className, hint, hintId, label, specimenKey, ...props }: StagePlateProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by CompactPlate. */
+export type CompactPlateProps = Omit<PlateProps, "className">;
+/** A compact plate for editorial teasers. */
+export declare function CompactPlate(props: CompactPlateProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by MarginNote. */
+export type MarginNoteProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+/** An inline note styled for the page margin. */
+export declare function MarginNote({ children, className, ...props }: MarginNoteProps): import("react/jsx-runtime").JSX.Element;
+/** Supported editorial callout kinds. */
+export type CalloutKind = "lesson" | "status" | "plan" | "warning";
+/** Props accepted by Callout. */
+export type CalloutProps = {
+    kind: CalloutKind;
+    title?: ReactNode;
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/** A labelled editorial aside. */
+export declare function Callout({ children, className, kind, title, ...props }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+/** Supported lifecycle stages. */
+export type GrowthStage = "spore" | "mycelium" | "fruiting";
+/** Props accepted by GrowthBadge. */
+export type GrowthBadgeProps = {
+    stage: GrowthStage;
+} & HTMLAttributes<HTMLSpanElement>;
+/** An outlined Badge in the selected growth-stage color. */
+export declare function GrowthBadge({ className, stage, ...props }: GrowthBadgeProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by IssueMasthead. */
+export type IssueMastheadProps = {
+    date: string;
+    dek: ReactNode;
+    number: string;
+    /** The publication the Issue belongs to, printed in the kicker. */
+    publication: string;
+    title: string;
+} & HTMLAttributes<HTMLElement>;
+/** The title, number, date, and dek for an Issue. */
+export declare function IssueMasthead({ className, date, dek, number, publication, title, ...props }: IssueMastheadProps): import("react/jsx-runtime").JSX.Element;
+/** A newspaper nameplate: the front page's large head or a running head. */
+export type MastheadSize = "front" | "running";
+/** Props accepted by Masthead. */
+export type MastheadProps = {
+    /** The publication name, set large in the nameplate face. */
+    wordmark: string;
+    /** Where the nameplate links, normally the front page. */
+    href: string;
+    /** A small printed mark beside the wordmark, such as a logo drawing. */
+    mark?: ReactNode;
+    /** One line under the wordmark in the publication's voice. */
+    tagline?: ReactNode;
+    /** The ruled edition line: date, issue, editor and similar items. */
+    edition?: readonly ReactNode[];
+    /** The left ear box beside the nameplate, such as a weather note. */
+    startEar?: ReactNode;
+    /** The right ear box beside the nameplate, such as the editor's portrait. */
+    endEar?: ReactNode;
+    /** The section bar under the edition line, normally a SectionBar. */
+    sections?: ReactNode;
+    size?: MastheadSize;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * A print masthead. Ears flank the nameplate on wide pages and sit under it
+ * on phones; the edition line runs between a thin and a heavy rule.
+ */
+export declare function Masthead({ className, edition, endEar, href, mark, sections, size, startEar, tagline, wordmark, ...props }: MastheadProps): import("react/jsx-runtime").JSX.Element;
+/** One section of a publication. */
+export type SectionLink = {
+    href: string;
+    label: string;
+    /** Printed before the label, such as a section letter. */
+    marker?: string;
+    current?: boolean;
+    /** A keyboard shortcut announced through aria-keyshortcuts. */
+    shortcut?: string;
+};
+/** Props accepted by SectionBar. */
+export type SectionBarProps = {
+    sections: readonly SectionLink[];
+    /** Controls set at the end of the bar, such as theme and help buttons. */
+    tools?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * A newspaper section bar: small capitals between hairline rules, the
+ * current section printed in reverse. It scrolls sideways on narrow pages
+ * instead of wrapping. Name it with aria-label.
+ */
+export declare function SectionBar({ className, sections, tools, ...props }: SectionBarProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by Folio. */
+export type FolioProps = {
+    /** Running items, such as the publication, page number and date. */
+    items: readonly ReactNode[];
+} & HTMLAttributes<HTMLElement>;
+/** A running foot: the page's folio line between rules. */
+export declare function Folio({ className, items, ...props }: FolioProps): import("react/jsx-runtime").JSX.Element;
+/** Supported editorial spread arrangements. */
+export type SpreadLayout = "lead" | "columns" | "grid";
+/** Props accepted by Spread. */
+export type SpreadProps = {
+    layout: SpreadLayout;
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/** A responsive editorial region with an explicit layout. */
+export declare function Spread({ children, className, layout, ...props }: SpreadProps): import("react/jsx-runtime").JSX.Element;
+/** One supplied card measurement and its provenance. `null` means not measured. */
+export type CardStat = {
+    key: string;
+    label: string;
+    value: string | number | null;
+    unit?: string;
+    source: string;
+    asOf: string;
+};
+/** Print finish: the rarer full-art card lets the drawing run under the text. */
+export type CigaretteCardFinish = "standard" | "full-art";
+/** Props accepted by CigaretteCard. */
+export type CigaretteCardProps = {
+    number: number;
+    /** The series numeral printed on both faces and in the series mark, such as "I". */
+    seriesNumeral: string;
+    series: string;
+    title: string;
+    /** The type line beside the title, such as "Machine of the Burrow". */
+    typeLine?: string | undefined;
+    image: ReactNode;
+    stats: readonly CardStat[];
+    note: string;
+    finish?: CigaretteCardFinish;
+    /** A small set symbol printed in the collector line. */
+    setMark?: ReactNode;
+    defaultFlipped?: boolean;
+    /**
+     * Makes the card a preview: a link to the card's own page showing its
+     * face, instead of a pressed button that turns over in place.
+     */
+    href?: string;
+    /** "large" prints the card bigger, for its own page. */
+    size?: "standard" | "large";
+    className?: string;
+    /** Inline style on the card, such as a shared view-transition name. */
+    style?: CSSProperties;
+};
+/**
+ * A two-sided collector card: a framed front with an inset drawing, a stat
+ * plate and a flavor line, and a ruled measurement ledger on the back. Both
+ * faces live inside one native pressed button, so the reverse stays in the
+ * DOM; the visible face names the button. Hydrated hosts flip through React
+ * state. Static hosts load the Caps `enhance/cigarette-card` module, which
+ * ignores clicks this component already handled. With `href` the card is a
+ * preview instead: a link to the card's own page that shows only its face.
+ */
+export declare function CigaretteCard({ className, defaultFlipped, finish, href, image, note, number, series, seriesNumeral, setMark, size, stats, style, title, typeLine, }: CigaretteCardProps): import("react/jsx-runtime").JSX.Element;
+/** One numbered album position, optionally occupied by a card. */
+export type AlbumSlot = {
+    number: number;
+    card?: CigaretteCardProps;
+};
+/** Props accepted by CardAlbum. */
+export type CardAlbumProps = {
+    title: string;
+    slots: readonly AlbumSlot[];
+} & HTMLAttributes<HTMLElement>;
+/** A numbered checklist of supplied cards and ruled spaces for missing ones. */
+export declare function CardAlbum({ className, slots, title, ...props }: CardAlbumProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/technonomicon.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+/** A labelled graphite illustration plate. */
+export function Plate({ caption, className, image, label, ...props }) {
+    return (_jsxs("figure", { ...props, className: cn("caps-plate", className), children: [_jsx("div", { className: "caps-plate-image", children: image }), _jsxs("figcaption", { children: [_jsx("span", { children: label }), _jsx("span", { children: caption })] })] }));
+}
+/**
+ * A plate whose illustration is a live pixel-art stage rather than an image.
+ * Its drawing reads `--specimen-ink`, `--specimen-paper` and
+ * `--specimen-accent`, which follow the theme.
+ */
+export function StagePlate({ caption, children, className, hint, hintId, label, specimenKey, ...props }) {
+    return (_jsxs("figure", { ...props, className: cn("caps-stage-plate", className), children: [children, _jsxs("figcaption", { children: [_jsx("span", { children: label }), _jsx("span", { className: "caps-stage-plate-caption", children: caption })] }), hint ? (_jsx("p", { className: "caps-stage-plate-hint", id: hintId, children: hint })) : null, specimenKey] }));
+}
+/** A compact plate for editorial teasers. */
+export function CompactPlate(props) {
+    return _jsx(Plate, { ...props, className: "caps-compact-plate" });
+}
+/** An inline note styled for the page margin. */
+export function MarginNote({ children, className, ...props }) {
+    return (_jsx("span", { ...props, className: cn("caps-margin-note", className), children: children }));
+}
+/** A labelled editorial aside. */
+export function Callout({ children, className, kind, title, ...props }) {
+    return (_jsxs("aside", { ...props, className: cn("caps-callout", className), "data-kind": kind, children: [title ? _jsx("h2", { children: title }) : null, children] }));
+}
+/** An outlined Badge in the selected growth-stage color. */
+export function GrowthBadge({ className, stage, ...props }) {
+    const tone = stage === "spore"
+        ? "secondary"
+        : stage === "mycelium"
+            ? "primary"
+            : "accent";
+    return (_jsx(Badge, { ...props, className: cn("caps-growth-badge badge-outline", className), "data-stage": stage, size: "sm", tone: tone, children: stage }));
+}
+/** The title, number, date, and dek for an Issue. */
+export function IssueMasthead({ className, date, dek, number, publication, title, ...props }) {
+    return (_jsxs("header", { ...props, className: cn("caps-issue-masthead", className), children: [_jsxs("p", { className: "caps-issue-kicker", children: [publication, " \u00B7 Issue ", number, " \u00B7 ", date] }), _jsx("h1", { children: title }), _jsx("p", { children: dek })] }));
+}
+/**
+ * A print masthead. Ears flank the nameplate on wide pages and sit under it
+ * on phones; the edition line runs between a thin and a heavy rule.
+ */
+export function Masthead({ className, edition, endEar, href, mark, sections, size = "front", startEar, tagline, wordmark, ...props }) {
+    return (_jsxs("header", { ...props, className: cn("caps-masthead", className), "data-size": size, children: [_jsxs("div", { className: "caps-masthead-plate", children: [startEar ? (_jsx("div", { className: "caps-masthead-ear", "data-side": "start", children: startEar })) : null, _jsxs("a", { className: "caps-masthead-nameplate", href: href, children: [mark ? (_jsx("span", { "aria-hidden": "true", className: "caps-masthead-mark", children: mark })) : null, _jsx("span", { className: "caps-masthead-wordmark", children: wordmark })] }), endEar ? (_jsx("div", { className: "caps-masthead-ear", "data-side": "end", children: endEar })) : null] }), tagline ? _jsx("p", { className: "caps-masthead-tagline", children: tagline }) : null, edition && edition.length > 0 ? (_jsx("ul", { className: "caps-masthead-edition", children: edition.map((item, index) => (_jsx("li", { children: item }, index))) })) : null, sections] }));
+}
+/**
+ * A newspaper section bar: small capitals between hairline rules, the
+ * current section printed in reverse. It scrolls sideways on narrow pages
+ * instead of wrapping. Name it with aria-label.
+ */
+export function SectionBar({ className, sections, tools, ...props }) {
+    return (_jsxs("nav", { ...props, className: cn("caps-section-bar", className), children: [_jsx("ul", { children: sections.map((section) => (_jsx("li", { children: _jsxs("a", { "aria-current": section.current ? "page" : undefined, "aria-keyshortcuts": section.shortcut, className: "caps-section-bar-link", href: section.href, children: [section.marker ? (_jsx("span", { "aria-hidden": "true", className: "caps-section-bar-marker", children: section.marker })) : null, _jsx("span", { children: section.label })] }) }, section.href))) }), tools ? _jsx("div", { className: "caps-section-bar-tools", children: tools }) : null] }));
+}
+/** A running foot: the page's folio line between rules. */
+export function Folio({ className, items, ...props }) {
+    return (_jsx("footer", { ...props, className: cn("caps-folio", className), children: _jsx("ul", { children: items.map((item, index) => (_jsx("li", { children: item }, index))) }) }));
+}
+/** A responsive editorial region with an explicit layout. */
+export function Spread({ children, className, layout, ...props }) {
+    return (_jsx("section", { ...props, className: cn("caps-spread", className), "data-layout": layout, children: children }));
+}
+/** Print an observation date as a calendar day when it carries a time. */
+function calendarDay(asOf) {
+    return /^\d{4}-\d{2}-\d{2}T/.test(asOf) ? asOf.slice(0, 10) : asOf;
+}
+function groupCardSources(stats) {
+    const grouped = new Map();
+    for (const { source, asOf } of stats) {
+        const dates = grouped.get(source) ?? new Set();
+        dates.add(calendarDay(asOf));
+        grouped.set(source, dates);
+    }
+    return Array.from(grouped, ([source, dates]) => ({
+        source,
+        asOf: Array.from(dates),
+    }));
+}
+function StatFigure({ stat }) {
+    if (stat.value === null)
+        return (_jsx("span", { className: "caps-cigarette-card-not-measured", children: "not measured" }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "caps-cigarette-card-numeral", children: String(stat.value) }), stat.unit ? (_jsx("span", { className: "caps-cigarette-card-unit", children: stat.unit })) : null] }));
+}
+function CardHead({ seriesNumeral, title, typeLine, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "caps-cigarette-card-head", children: [_jsx("span", { className: "caps-cigarette-card-title", children: title }), typeLine ? (_jsx("span", { className: "caps-cigarette-card-type", children: typeLine })) : null] }), _jsx("span", { "aria-hidden": "true", className: "caps-cigarette-card-mark", children: _jsx("span", { children: seriesNumeral }) })] }));
+}
+function CollectorLine({ number, series, seriesNumeral, setMark, }) {
+    return (_jsxs("span", { className: "caps-cigarette-card-collector", children: [_jsxs("span", { children: ["No. ", number, " \u00B7 Series ", seriesNumeral, ": ", series] }), setMark ? (_jsx("span", { "aria-hidden": "true", className: "caps-cigarette-card-set", children: setMark })) : null] }));
+}
+/**
+ * A two-sided collector card: a framed front with an inset drawing, a stat
+ * plate and a flavor line, and a ruled measurement ledger on the back. Both
+ * faces live inside one native pressed button, so the reverse stays in the
+ * DOM; the visible face names the button. Hydrated hosts flip through React
+ * state. Static hosts load the Caps `enhance/cigarette-card` module, which
+ * ignores clicks this component already handled. With `href` the card is a
+ * preview instead: a link to the card's own page that shows only its face.
+ */
+export function CigaretteCard({ className, defaultFlipped = false, finish = "standard", href, image, note, number, series, seriesNumeral, setMark, size = "standard", stats, style, title, typeLine, }) {
+    const [flipped, setFlipped] = useState(defaultFlipped);
+    const sources = groupCardSources(stats);
+    const headline = stats.find((stat) => stat.value !== null) ?? stats[0];
+    const others = stats.filter((stat) => stat !== headline).slice(0, 2);
+    const head = { seriesNumeral, title, typeLine };
+    const collector = { number, series, seriesNumeral, setMark };
+    const front = (_jsxs("span", { className: "caps-cigarette-card-face caps-cigarette-card-front", "aria-hidden": href ? undefined : flipped, children: [_jsx(CardHead, { ...head }), _jsx("span", { className: "caps-cigarette-card-window", children: image }), headline ? (_jsxs("span", { className: "caps-cigarette-card-plate", children: [_jsxs("span", { className: "caps-cigarette-card-headline", children: [_jsx("span", { className: "caps-cigarette-card-label", children: headline.label }), _jsx("span", { className: "caps-cigarette-card-figure", children: _jsx(StatFigure, { stat: headline }) })] }), others.length > 0 ? (_jsx("span", { className: "caps-cigarette-card-plate-list", children: others.map((stat) => (_jsxs("span", { children: [_jsx("span", { className: "caps-cigarette-card-label", children: stat.label }), _jsx("span", { children: _jsx(StatFigure, { stat: stat }) })] }, stat.key))) })) : null] })) : null, _jsx("span", { className: "caps-cigarette-card-flavor", children: note }), _jsx(CollectorLine, { ...collector })] }));
+    const back = (_jsxs("span", { className: "caps-cigarette-card-face caps-cigarette-card-back", "aria-hidden": !flipped, children: [_jsx(CardHead, { ...head }), _jsxs("span", { className: "caps-cigarette-card-ledger", children: [_jsx("span", { className: "caps-cigarette-card-ledger-title", children: "Field measurements" }), _jsx("span", { className: "caps-cigarette-card-stats", children: stats.map((stat) => (_jsxs("span", { className: "caps-cigarette-card-stat", children: [_jsx("span", { className: "caps-cigarette-card-stat-label", children: stat.label }), _jsx("span", { "aria-hidden": "true", className: "caps-cigarette-card-leader" }), _jsx("span", { className: "caps-cigarette-card-stat-value", children: _jsx(StatFigure, { stat: stat }) })] }, stat.key))) }), _jsx("span", { "aria-hidden": "true", className: "caps-cigarette-card-cameo", children: image }), _jsx("span", { className: "caps-cigarette-card-note", children: note }), _jsx("span", { className: "caps-cigarette-card-sources", children: sources.map(({ source, asOf }) => (_jsxs("span", { className: "caps-cigarette-card-source", children: [source, " \u00B7 ", asOf.join(", ")] }, source))) })] }), _jsx(CollectorLine, { ...collector })] }));
+    if (href)
+        return (_jsx("a", { className: cn("caps-cigarette-card", className), "data-finish": finish, "data-flipped": false, "data-size": size, href: href, style: style, children: _jsx("span", { className: "caps-cigarette-card-inner", children: front }) }));
+    return (_jsx("button", { type: "button", "aria-pressed": flipped, className: cn("caps-cigarette-card", className), onClick: (event) => {
+            event.preventDefault();
+            setFlipped((current) => !current);
+        }, "data-finish": finish, "data-flipped": flipped, "data-size": size, style: style, children: _jsxs("span", { className: "caps-cigarette-card-inner", children: [front, back] }) }));
+}
+/** A numbered checklist of supplied cards and ruled spaces for missing ones. */
+export function CardAlbum({ className, slots, title, ...props }) {
+    const collected = slots.filter((slot) => slot.card !== undefined).length;
+    return (_jsxs("section", { ...props, className: cn("caps-album", className), children: [_jsxs("header", { className: "caps-album-head", children: [_jsx("h2", { children: title }), _jsxs("p", { children: [collected, " of ", slots.length, " collected"] })] }), _jsx("ol", { children: slots.map(({ card, number }) => (_jsx("li", { "data-collected": card !== undefined, children: card ? (_jsx(CigaretteCard, { ...card })) : (_jsxs("span", { className: "caps-album-empty", children: [_jsxs("span", { children: ["No. ", number] }), _jsx("span", { children: "not yet collected" })] })) }, number))) })] }));
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,9 @@
+import { type TextareaHTMLAttributes } from "react";
+/** Props accepted by Textarea. */
+export type TextareaProps = {
+    invalid?: boolean;
+} & TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** A styled multiline text input that preserves caller-owned value and event behavior. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<{
+    invalid?: boolean;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A styled multiline text input that preserves caller-owned value and event behavior. */
+export const Textarea = forwardRef(function Textarea({ className, invalid, ...props }, ref) {
+    return (_jsx("textarea", { ...props, "aria-invalid": invalid
+            ? true
+            : props["aria-invalid"] === false
+                ? undefined
+                : props["aria-invalid"], className: cn("textarea textarea-bordered w-full", invalid && "textarea-error", className), ref: ref }));
+});

package/dist/components/toaster.d.ts

@@ -0,0 +1,4 @@
+import { type ToasterProps } from "sonner";
+export { toast } from "sonner";
+/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+export declare function Toaster({ className, ...props }: ToasterProps): import("react").ReactPortal | null;

package/dist/components/toaster.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from "sonner";
+import { cn } from "../lib/cn.js";
+import { createPortal } from "react-dom";
+import { useOverlayRoot } from "./overlay-root.js";
+export { toast } from "sonner";
+/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+export function Toaster({ className, ...props }) {
+    const root = useOverlayRoot("toast");
+    if (!root)
+        return null;
+    return createPortal(_jsx(Sonner, { position: "top-right", swipeDirections: ["right", "top"], offset: 16, gap: 8, className: cn("caps-toaster", className), ...props }), root);
+}

package/dist/components/tool-call-chip.d.ts

@@ -0,0 +1,22 @@
+import { type ActivityState } from "./activity-line.js";
+/** A tool call's time: milliseconds under a second, then the activity clock. */
+export declare function formatCallTime(milliseconds: number): string;
+/** Props accepted by ToolCallChip. */
+export type ToolCallChipProps = Readonly<{
+    /** The tool's name, such as `read_file`. */
+    name: string;
+    state: ActivityState;
+    /** When the call started (epoch ms). */
+    startedAt: number;
+    /** When it ended (epoch ms). */
+    finishedAt?: number | undefined;
+    /** Offered after a failure. */
+    onRetry?: (() => void) | undefined;
+    className?: string;
+}>;
+/**
+ * One tool call as a chip. While it runs a quiet fill wipes across and a
+ * live clock counts; when it lands the fill completes and washes away; when
+ * it fails the chip shakes and offers a retry.
+ */
+export declare function ToolCallChip({ name, state, startedAt, finishedAt, onRetry, className, }: ToolCallChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tool-call-chip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RotateCcw } from "lucide-react";
+import { useLayoutEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion } from "../lib/motion.js";
+import { formatElapsed, useElapsed, } from "./activity-line.js";
+import { IconButton } from "./icon-button.js";
+import { Presence } from "./presence.js";
+import { Status } from "./status.js";
+/** A tool call's time: milliseconds under a second, then the activity clock. */
+export function formatCallTime(milliseconds) {
+    return milliseconds < 1_000
+        ? `${String(Math.max(0, Math.round(milliseconds)))}ms`
+        : formatElapsed(milliseconds);
+}
+const glyphFor = {
+    running: "arc",
+    done: "check",
+    failed: "cross",
+};
+/** How long a running fill takes to approach (never reach) the far edge. */
+const fillPatienceMs = 6_000;
+/**
+ * One tool call as a chip. While it runs a quiet fill wipes across and a
+ * live clock counts; when it lands the fill completes and washes away; when
+ * it fails the chip shakes and offers a retry.
+ */
+export function ToolCallChip({ name, state, startedAt, finishedAt, onRetry, className, }) {
+    const chip = useRef(null);
+    const fill = useRef(null);
+    const previous = useRef(null);
+    const elapsed = useElapsed(startedAt, finishedAt, state === "running");
+    useLayoutEffect(() => {
+        const element = chip.current;
+        const bar = fill.current;
+        const before = previous.current;
+        previous.current = state;
+        if (!element || !bar || !canAnimate(bar))
+            return;
+        const motion = readMotion(element);
+        const animations = [];
+        if (motion.reduced) {
+            // No wipe: the finished tint arrives and leaves as a fade.
+            if (before === "running" && state !== "running")
+                animations.push(bar.animate([
+                    { transform: "none", opacity: 0 },
+                    { transform: "none", opacity: 1, offset: 0.3 },
+                    { transform: "none", opacity: 0 },
+                ], { duration: motion.slow * 4, easing: motion.ease }));
+        }
+        else if (state === "running") {
+            animations.push(bar.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(0.9)" }], {
+                duration: fillPatienceMs,
+                easing: motionEasing(motion, "cubic-bezier(0.1, 0.6, 0.3, 1)"),
+                fill: "forwards",
+            }));
+        }
+        else if (before === "running") {
+            // Land from wherever the wipe had reached.
+            const reached = getComputedStyle(bar).transform;
+            for (const running of bar.getAnimations())
+                running.cancel();
+            const from = reached === "none" ? "scaleX(0)" : reached;
+            animations.push(bar.animate(state === "done"
+                ? [
+                    { transform: from, opacity: 1 },
+                    { transform: "scaleX(1)", opacity: 1, offset: 0.25 },
+                    { transform: "scaleX(1)", opacity: 1, offset: 0.55 },
+                    { transform: "scaleX(1)", opacity: 0 },
+                ]
+                : [
+                    { transform: from, opacity: 1 },
+                    { transform: from, opacity: 1, offset: 0.5 },
+                    { transform: from, opacity: 0 },
+                ], {
+                duration: motion.slow * 4,
+                easing: motionEasing(motion, motion.ease),
+                fill: "forwards",
+            }));
+            if (state === "failed" && motion.shake > 0) {
+                const x = motion.shake;
+                animations.push(element.animate([
+                    { transform: "none" },
+                    { transform: `translateX(${String(-x)}px)` },
+                    { transform: `translateX(${String(x)}px)` },
+                    { transform: `translateX(${String(-x / 2)}px)` },
+                    { transform: "none" },
+                ], {
+                    duration: motion.slow * 1.2,
+                    easing: motionEasing(motion, "linear"),
+                }));
+            }
+        }
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [state]);
+    return (_jsxs("span", { ref: chip, className: cn("caps-tool-call", className), "data-state": state, children: [_jsx("span", { ref: fill, className: "caps-tool-call-fill", "aria-hidden": "true" }), _jsx(Status, { glyph: glyphFor[state], size: "compact", tone: state === "failed" ? "error" : "neutral" }), _jsx("span", { className: "caps-tool-call-name", children: name }), _jsx("span", { className: "caps-tool-call-time", children: formatCallTime(elapsed) }), onRetry === undefined ? null : (_jsx(Presence, { show: state === "failed", appear: true, children: _jsx(IconButton, { "aria-label": `Retry ${name}`, icon: _jsx(RotateCcw, {}), onClick: onRetry, size: "xs", variant: "ghost" }) }))] }));
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,41 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/** Supported TooltipSide values. */
+export type TooltipSide = "bottom" | "left" | "right" | "top";
+/** Props accepted by Tooltip. */
+export type TooltipProps = {
+    children: ReactNode;
+    defaultOpen?: boolean;
+    delayDuration?: number;
+    /** Called after the tooltip open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    side?: TooltipSide;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/** A tooltip controller with explicit controlled or uncontrolled open state. */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    defaultOpen?: boolean;
+    delayDuration?: number;
+    /** Called after the tooltip open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    side?: TooltipSide;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Props accepted by TooltipTrigger. */
+export type TooltipTriggerProps = {
+    asChild?: boolean;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/** The trigger control for a Tooltip. */
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<{
+    asChild?: boolean;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Props accepted by TooltipContent. */
+export type TooltipContentProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/** The positioned content region for a Tooltip. */
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;