@fungi.computer/caps 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * How an absence presents itself. `plain` leaves layout to the host; `panel`
+ * is a recessed, centered invitation; `speech` lets the visual (a mascot) say
+ * the copy from a molded speech bubble; `hint` is a quiet centered footnote
+ * under content, such as the next thing to try; `quiet` is a left-aligned
+ * absence nested under a card or section heading, titled below that heading.
+ */
+export type EmptyStateVariant = "plain" | "panel" | "speech" | "hint" | "quiet";
+/** The document heading level of an EmptyState title. */
+export type EmptyStateHeadingLevel = 2 | 3 | 4;
+/** What a visual is told while the EmptyState is on screen. */
+export type EmptyStateVisualState = Readonly<{
+    /** True for a moment after a `speech` state mounts, unless motion is reduced. */
+    speaking: boolean;
+    /** True while the host says it is working on an answer; it outranks speaking. */
+    thinking: boolean;
+}>;
+/** A suggested next step, shown as a chip the host acts on. */
+export type EmptyStateSuggestion = Readonly<{
+    /** The chip's text. */
+    label: string;
+    /** Called when the chip is chosen. */
+    onSelect: () => void;
+}>;
+/** Props accepted by EmptyState. */
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    actions?: ReactNode;
+    description: ReactNode;
+    /** Chips that offer a starting point, such as a prompt to try. */
+    suggestions?: readonly EmptyStateSuggestion[];
+    /** The host is working on something, such as creating what this state invites. */
+    thinking?: boolean;
+    title: ReactNode;
+    /** Heading level for the title; use one below the heading it sits under. */
+    headingLevel?: EmptyStateHeadingLevel;
+    /** Static art. */
+    visual?: ReactNode;
+    /** Render a visual from the current speaking and thinking state. */
+    renderVisual?: (state: EmptyStateVisualState) => ReactNode;
+    variant?: EmptyStateVariant;
+};
+/** Product-neutral absence presentation; hosts supply copy, art, and actions. */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    actions?: ReactNode;
+    description: ReactNode;
+    /** Chips that offer a starting point, such as a prompt to try. */
+    suggestions?: readonly EmptyStateSuggestion[];
+    /** The host is working on something, such as creating what this state invites. */
+    thinking?: boolean;
+    title: ReactNode;
+    /** Heading level for the title; use one below the heading it sits under. */
+    headingLevel?: EmptyStateHeadingLevel;
+    /** Static art. */
+    visual?: ReactNode;
+    /** Render a visual from the current speaking and thinking state. */
+    renderVisual?: (state: EmptyStateVisualState) => ReactNode;
+    variant?: EmptyStateVariant;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/blocks/empty-state.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useState, useRef, } from "react";
+import { Button } from "../components/button.js";
+import { useMotion, motionTime } from "../lib/motion.js";
+import { cn } from "../lib/cn.js";
+const headingTags = { 2: "h2", 3: "h3", 4: "h4" };
+function useSpeaking(enabled, timing) {
+    const { reduced } = timing;
+    const active = enabled && !reduced;
+    const duration = motionTime(timing, 600);
+    const [speaking, setSpeaking] = useState(active);
+    useEffect(() => {
+        setSpeaking(active);
+        if (!active)
+            return undefined;
+        const timer = globalThis.setTimeout(() => {
+            setSpeaking(false);
+        }, duration);
+        return () => {
+            globalThis.clearTimeout(timer);
+        };
+    }, [active, duration]);
+    return speaking;
+}
+/** Product-neutral absence presentation; hosts supply copy, art, and actions. */
+export const EmptyState = forwardRef(function EmptyState({ actions, className, description, headingLevel = 2, suggestions, thinking = false, title, visual, renderVisual, variant = "plain", ...props }, ref) {
+    const titleId = useId();
+    const heading = useRef(null);
+    const timing = useMotion(heading);
+    const speaking = useSpeaking(variant === "speech", timing) && !thinking;
+    const Heading = headingTags[headingLevel];
+    const art = renderVisual ? renderVisual({ speaking, thinking }) : visual;
+    const copy = (_jsxs(_Fragment, { children: [_jsx(Heading, { ref: heading, className: "empty-state-title", id: props["aria-labelledby"] ? undefined : titleId, children: title }), _jsx("p", { children: description }), suggestions && suggestions.length > 0 ? (_jsx("ul", { "aria-label": "Try one of these", className: "empty-state-suggestions", children: suggestions.map((suggestion) => (_jsx("li", { children: _jsx(Button, { size: "sm", variant: "outline", onClick: suggestion.onSelect, children: suggestion.label }) }, suggestion.label))) })) : null, actions ? _jsx("div", { className: "empty-state-actions", children: actions }) : null] }));
+    return (_jsxs("section", { ...props, "aria-labelledby": props["aria-labelledby"] ?? titleId, className: cn("empty-state", variant !== "plain" && `empty-state-${variant}`, className), ref: ref, children: [art ? (_jsx("div", { "aria-hidden": "true", className: "empty-state-visual", children: art })) : null, variant === "speech" ? (_jsx("div", { className: "empty-state-bubble", children: copy })) : (copy)] }));
+});

package/dist/blocks/faq-chat.d.ts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** One reviewed question and its fixed answer. */
+export type FaqChatEntry = {
+    /** Stable identity for the entry. */
+    id: string;
+    /** The question as a visitor would ask it. Also shown as a suggestion. */
+    question: string;
+    /** The reviewed answer. The chat never generates text of its own. */
+    answer: ReactNode;
+    /** Lowercase words or phrases that route a typed question here. */
+    keywords?: readonly string[];
+    /** Caller-owned next steps shown under the answer, such as links. */
+    actions?: ReactNode;
+};
+/** The reply for a typed question that matches no entry. */
+export type FaqChatFallback = {
+    answer: ReactNode;
+    actions?: ReactNode;
+};
+/** Props accepted by FaqChat. */
+export type FaqChatProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    entries: readonly FaqChatEntry[];
+    /** The first agent message, shown before any question. */
+    greeting: ReactNode;
+    fallback: FaqChatFallback;
+    /** Visible heading and accessible name of the chat. */
+    title: ReactNode;
+    /** A short honest note about where answers come from. */
+    note?: ReactNode;
+    /** Optional mark shown beside the title, such as a logo. */
+    avatar?: ReactNode;
+    /** Accessible label of the typed-question field. */
+    inputLabel?: string;
+    placeholder?: string;
+    submitLabel?: string;
+};
+/**
+ * Routes a typed question to the entry whose keywords it mentions most.
+ * Returns undefined when nothing matches, so the caller can answer honestly.
+ */
+export declare function matchFaqEntry(entries: readonly FaqChatEntry[], text: string): FaqChatEntry | undefined;
+/**
+ * A chat-shaped FAQ. Visitors pick or type a question and get the caller's
+ * reviewed answer with its next steps. Message rows follow Parakeet: the
+ * visitor's turn sits on the surface with a primary rule, the answer is plain.
+ */
+export declare const FaqChat: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    entries: readonly FaqChatEntry[];
+    /** The first agent message, shown before any question. */
+    greeting: ReactNode;
+    fallback: FaqChatFallback;
+    /** Visible heading and accessible name of the chat. */
+    title: ReactNode;
+    /** A short honest note about where answers come from. */
+    note?: ReactNode;
+    /** Optional mark shown beside the title, such as a logo. */
+    avatar?: ReactNode;
+    /** Accessible label of the typed-question field. */
+    inputLabel?: string;
+    placeholder?: string;
+    submitLabel?: string;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/blocks/faq-chat.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState, } from "react";
+import { Button } from "../components/button.js";
+import { Input } from "../components/input.js";
+import { cn } from "../lib/cn.js";
+import { Composer } from "./composer.js";
+function words(text) {
+    return text.toLowerCase().match(/[a-z0-9$]+/g) ?? [];
+}
+/**
+ * Routes a typed question to the entry whose keywords it mentions most.
+ * Returns undefined when nothing matches, so the caller can answer honestly.
+ */
+export function matchFaqEntry(entries, text) {
+    const asked = ` ${words(text).join(" ")} `;
+    if (asked.trim().length === 0)
+        return undefined;
+    let best;
+    let bestScore = 0;
+    for (const entry of entries) {
+        const score = (entry.keywords ?? []).reduce((total, keyword) => {
+            const phrase = words(keyword).join(" ");
+            return phrase.length > 0 && asked.includes(` ${phrase} `)
+                ? total + 1
+                : total;
+        }, 0);
+        if (score > bestScore) {
+            best = entry;
+            bestScore = score;
+        }
+    }
+    return best;
+}
+/**
+ * A chat-shaped FAQ. Visitors pick or type a question and get the caller's
+ * reviewed answer with its next steps. Message rows follow Parakeet: the
+ * visitor's turn sits on the surface with a primary rule, the answer is plain.
+ */
+export const FaqChat = forwardRef(function FaqChat({ avatar, className, entries, fallback, greeting, inputLabel = "Ask a question", note, placeholder = "Ask about the plans", submitLabel = "Ask", title, ...rootProps }, ref) {
+    const titleId = useId();
+    const logRef = useRef(null);
+    const nextKey = useRef(0);
+    const [turns, setTurns] = useState([]);
+    const [draft, setDraft] = useState("");
+    useEffect(() => {
+        const log = logRef.current;
+        if (log)
+            log.scrollTop = log.scrollHeight;
+    }, [turns]);
+    function ask(text, reply) {
+        const userKey = nextKey.current++;
+        const agentKey = nextKey.current++;
+        setTurns((previous) => [
+            ...previous,
+            { key: userKey, speaker: "user", text },
+            {
+                actions: reply.actions,
+                answer: reply.answer,
+                key: agentKey,
+                speaker: "agent",
+            },
+        ]);
+    }
+    function submit(event) {
+        event.preventDefault();
+        const text = draft.trim();
+        if (text.length === 0)
+            return;
+        ask(text, matchFaqEntry(entries, text) ?? fallback);
+        setDraft("");
+    }
+    return (_jsxs("section", { ...rootProps, "aria-labelledby": titleId, className: cn("caps-faq-chat", className), ref: ref, children: [_jsxs("header", { className: "caps-faq-chat-header", children: [avatar, _jsxs("div", { className: "caps-faq-chat-heading", children: [_jsx("p", { className: "caps-faq-chat-title", id: titleId, children: title }), note ? _jsx("p", { className: "caps-faq-chat-note", children: note }) : null] })] }), _jsxs("div", { "aria-live": "polite", className: "caps-faq-chat-log", ref: logRef, role: "log", children: [_jsx("div", { className: "caps-faq-chat-agent", children: greeting }), turns.map((turn) => turn.speaker === "user" ? (_jsx("p", { className: "caps-faq-chat-user", children: turn.text }, turn.key)) : (_jsxs("div", { className: "caps-faq-chat-agent", children: [turn.answer, turn.actions ? (_jsx("div", { className: "caps-faq-chat-actions", children: turn.actions })) : null] }, turn.key)))] }), _jsx("ul", { "aria-label": "Suggested questions", className: "caps-faq-chat-suggestions", children: entries.map((entry) => (_jsx("li", { children: _jsx(Button, { onClick: () => {
+                            ask(entry.question, entry);
+                        }, size: "xs", type: "button", variant: "outline", children: entry.question }) }, entry.id))) }), _jsx("form", { className: "caps-faq-chat-form", onSubmit: submit, children: _jsx(Composer, { action: _jsx(Button, { className: "join-item", type: "submit", children: submitLabel }), input: _jsx(Input, { "aria-label": inputLabel, className: "join-item", onChange: (event) => {
+                            setDraft(event.target.value);
+                        }, placeholder: placeholder, value: draft }) }) })] }));
+});

package/dist/blocks/game-share-card.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+/** Presentation for a published game; fetching and navigation stay with the host. */
+export type GameShareCardProps = HTMLAttributes<HTMLDivElement> & {
+    heading: ReactNode;
+    eyebrow?: ReactNode;
+    cover?: ReactNode;
+    /** A host-owned link or button, presented as the primary play action. */
+    action: ReactElement;
+};
+/** Compose a game's cover, share details and play action in the enclosing theme. */
+export declare const GameShareCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    heading: ReactNode;
+    eyebrow?: ReactNode;
+    cover?: ReactNode;
+    /** A host-owned link or button, presented as the primary play action. */
+    action: ReactElement;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/game-share-card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Button } from "../components/button.js";
+import { Card, CardContent, CardFooter, CardHeader, } from "../components/card.js";
+import { cn } from "../lib/cn.js";
+/** Compose a game's cover, share details and play action in the enclosing theme. */
+export const GameShareCard = forwardRef(function GameShareCard({ heading, eyebrow, cover, action, children, className, ...props }, ref) {
+    return (_jsxs(Card, { ...props, className: cn("caps-game-share", className), ref: ref, children: [cover ? _jsx("div", { className: "caps-game-share-cover", children: cover }) : null, _jsxs(CardHeader, { children: [eyebrow, _jsx("h3", { className: "caps-game-share-heading", children: heading })] }), _jsx(CardContent, { className: "gap-sm", children: children }), _jsx(CardFooter, { children: _jsx(Button, { asChild: true, variant: "primary", className: "caps-game-share-action", children: action }) })] }));
+});

package/dist/blocks/launcher-grid.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** SectionGrid props. */
+export type SectionGridProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `split` is a page's two-column section grid. `desktop` composes a home
+     * screen: it fills and scrolls its region, centers a bounded measure, and
+     * lets `span="full"` sections run across both columns.
+     */
+    layout?: "split" | "desktop";
+};
+/** A two-column page section grid that stacks at the compact breakpoint. */
+export declare const SectionGrid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `split` is a page's two-column section grid. `desktop` composes a home
+     * screen: it fills and scrolls its region, centers a bounded measure, and
+     * lets `span="full"` sections run across both columns.
+     */
+    layout?: "split" | "desktop";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** A caller-owned App launch option. */
+export type AppGridItem = Readonly<{
+    id: string;
+    label: string;
+    icon: ReactNode;
+    /** Caller-owned state line below the App name. */
+    status?: ReactNode;
+    disabled?: boolean;
+    /** A dimmed App identity whose action may still open settings or recovery. */
+    muted?: boolean;
+    /** Invoke the caller-owned App launch behavior. */
+    onSelect: () => void;
+}>;
+/** AppGrid props. */
+export type AppGridProps = Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    items: readonly AppGridItem[];
+    /**
+     * `default` is a quiet launcher. `lg` gives each mark a larger key
+     * and a more spacious label. The theme supplies its material.
+     */
+    size?: "default" | "lg";
+};
+/** A responsive launcher grid with large marks and concise labels. */
+export declare const AppGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    items: readonly AppGridItem[];
+    /**
+     * `default` is a quiet launcher. `lg` gives each mark a larger key
+     * and a more spacious label. The theme supplies its material.
+     */
+    size?: "default" | "lg";
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/blocks/launcher-grid.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A two-column page section grid that stacks at the compact breakpoint. */
+export const SectionGrid = forwardRef(function SectionGrid({ className, layout = "split", ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-section-grid", className), "data-layout": layout === "desktop" ? "desktop" : undefined, ref: ref }));
+});
+/** A responsive launcher grid with large marks and concise labels. */
+export const AppGrid = forwardRef(function AppGrid({ className, items, size = "default", ...props }, ref) {
+    return (_jsx("ul", { ...props, className: cn("caps-app-grid", className), "data-size": size === "lg" ? "lg" : undefined, ref: ref, children: items.map((item) => (_jsxs("li", { children: [_jsxs("button", { "aria-label": item.label, className: cn("caps-app-grid-item", item.muted && "opacity-55"), disabled: item.disabled, onClick: item.onSelect, type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "caps-app-grid-icon", children: item.icon }), _jsx("span", { className: "caps-app-grid-label", children: item.label })] }), item.status ? (_jsx("div", { className: "flex justify-center", children: item.status })) : null] }, item.id))) }));
+});

package/dist/blocks/listing-detail.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+/** Product-neutral listing detail: callers own availability, navigation and facts. */
+export type ListingDetailProps = Readonly<{
+    identity: string;
+    title: string;
+    tagline: string;
+    icon?: ReactNode;
+    seller?: ReactNode;
+    action?: ReactNode;
+    back?: ReactNode;
+    note?: ReactNode;
+    screenshots?: readonly {
+        src: string;
+        alt: string;
+    }[];
+    description?: readonly string[];
+    facts?: readonly {
+        label: string;
+        value: ReactNode;
+    }[];
+}>;
+/** A focused detail heading, screenshot strip, readable body and fact sheet. */
+export declare function ListingDetail({ identity, title, tagline, icon, seller, action, back, note, screenshots, description, facts, }: ListingDetailProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/listing-detail.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { Display } from "../components/surface.js";
+/** A focused detail heading, screenshot strip, readable body and fact sheet. */
+export function ListingDetail({ identity, title, tagline, icon, seller, action, back, note, screenshots = [], description = [], facts = [], }) {
+    const id = useId();
+    const heading = useRef(null);
+    useEffect(() => {
+        heading.current?.focus();
+    }, [identity]);
+    return (_jsxs("article", { className: "caps-listing-detail", "aria-labelledby": `${id}-name`, children: [back ? _jsx("div", { children: back }) : null, _jsxs("header", { className: "caps-listing-detail-header", children: [icon, _jsxs("div", { className: "caps-listing-detail-title", children: [_jsx("h1", { id: `${id}-name`, ref: heading, tabIndex: -1, children: title }), _jsx("p", { className: "caps-listing-detail-tagline", children: tagline }), _jsx("div", { className: "caps-listing-detail-meta", children: seller })] }), _jsx("div", { className: "caps-listing-detail-action", children: action })] }), note ? (_jsx("p", { className: "caps-listing-detail-note", role: "status", children: note })) : null, screenshots.length ? (_jsx("section", { "aria-label": "Screenshots", className: "caps-listing-shots", children: screenshots.map((shot) => (_jsx(Display, { className: "caps-listing-shot", density: "compact", size: "sm", children: _jsx("img", { src: shot.src, alt: shot.alt }) }, shot.src))) })) : null, _jsxs("div", { className: "caps-listing-detail-body", children: [description.length ? (_jsxs("section", { className: "caps-listing-detail-about", "aria-labelledby": `${id}-about`, children: [_jsxs("h2", { id: `${id}-about`, children: ["About ", title] }), description.map((paragraph, index) => (_jsx("p", { children: paragraph }, index)))] })) : null, facts.length ? (_jsx("dl", { className: "caps-listing-facts", children: facts.map((fact) => (_jsxs("div", { children: [_jsx("dt", { children: fact.label }), _jsx("dd", { children: fact.value })] }, fact.label))) })) : null] })] }));
+}

package/dist/blocks/loading-state.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** A bounded, labelled loading region; the caller owns the message. */
+export declare const LoadingState: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    message: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/loading-state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Loader } from "../components/loader.js";
+import { cn } from "../lib/cn.js";
+/** A bounded, labelled loading region; the caller owns the message. */
+export const LoadingState = forwardRef(function LoadingState({ className, message, ...props }, ref) {
+    return (_jsxs("div", { ...props, className: cn("caps-loading-state", className), ref: ref, role: "status", children: [_jsx(Loader, { decorative: true, size: "sm" }), _jsx("span", { children: message })] }));
+});

package/dist/blocks/mosaic.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** A caller-resolved visual tile. */
+export type MosaicItem = {
+    alt?: string;
+    height?: number;
+    id: string;
+    disabled?: boolean;
+    state?: "loading" | "ready" | "error";
+    url?: string;
+    width?: number;
+};
+/** Props accepted by Mosaic. */
+export type MosaicProps = HTMLAttributes<HTMLDivElement> & {
+    empty?: ReactNode;
+    items: readonly MosaicItem[];
+    /** Caller-owned accessible copy for the list. */
+    label?: ReactNode;
+    /** When absent, tiles are deliberately non-interactive. */
+    onOpen?: (item: MosaicItem) => void;
+};
+/** Renders supplied tiles only; callers resolve data, policy, and navigation. */
+export declare const Mosaic: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    empty?: ReactNode;
+    items: readonly MosaicItem[];
+    /** Caller-owned accessible copy for the list. */
+    label?: ReactNode;
+    /** When absent, tiles are deliberately non-interactive. */
+    onOpen?: (item: MosaicItem) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/mosaic.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+/** Renders supplied tiles only; callers resolve data, policy, and navigation. */
+export const Mosaic = forwardRef(function Mosaic({ className, empty, items, label, onOpen, ...rootProps }, ref) {
+    const labelId = useId();
+    if (items.length === 0)
+        return _jsx(_Fragment, { children: empty ?? null });
+    return (_jsxs("div", { ...rootProps, ref: ref, "aria-labelledby": label ? labelId : undefined, className: [
+            "grid grid-cols-2 gap-xs md:grid-cols-3 xl:grid-cols-4",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), role: "list", children: [label ? (_jsx("span", { className: "sr-only", id: labelId, children: label })) : null, items.map((item) => (_jsx("div", { role: "listitem", children: onOpen ? (_jsx("button", { "aria-busy": item.state === "loading" || undefined, "aria-label": item.alt ?? item.id, className: "relative aspect-square w-full overflow-hidden rounded-box border border-base-300 bg-base-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 caps-focus-color", "data-mosaic-item": item.id, disabled: item.disabled, onClick: () => {
+                        onOpen(item);
+                    }, type: "button", children: _jsx(Tile, { item: item }) })) : (_jsx("div", { "aria-busy": item.state === "loading" || undefined, className: "relative aspect-square overflow-hidden rounded-box border border-base-300 bg-base-200", "data-mosaic-item": item.id, children: _jsx(Tile, { item: item }) })) }, item.id)))] }));
+});
+function Tile({ item }) {
+    return (_jsxs(_Fragment, { children: [item.url ? (_jsx("img", { alt: item.alt ?? "", className: "h-full w-full object-cover", height: item.height, src: item.url, width: item.width })) : null, item.state === "loading" ? (_jsx("span", { "aria-hidden": "true", className: "loading loading-spinner loading-sm absolute inset-0 m-auto" })) : null] }));
+}

package/dist/blocks/permission-grid.d.ts

@@ -0,0 +1,45 @@
+import type { JSX, ReactNode } from "react";
+/**
+ * LAW — a permission grid is a spec sheet, not a form: one row per
+ * capability, read left to right as index, mark, name, state and scope. The
+ * mark is decorative; the row's name is its accessible fact. State is always
+ * spelled out in words, never carried by color alone. Any control a row
+ * carries is caller-owned and names itself.
+ */
+/** Whether the capability is available in this scope. */
+export type PermissionState = "allowed" | "denied";
+/** One capability row. */
+export type PermissionGridRow = Readonly<{
+    id: string;
+    /** Decorative mark, for example a sigil; hidden from assistive technology. */
+    mark: ReactNode;
+    /** The capability's name; the row's accessible fact. */
+    label: string;
+    /** Short family label shown beside the index, for example `COMPUTERS`. */
+    group?: string;
+    state: PermissionState;
+    /** Visible state word, for example `On` or `Off`. */
+    stateLabel: string;
+    /** Where the state comes from, for example `Owner grant` or `Default`. */
+    scope: string;
+    /** Optional caller-owned control, for example a switch naming this row. */
+    control?: ReactNode;
+}>;
+/** Props accepted by PermissionGrid. */
+export type PermissionGridProps = Readonly<{
+    /** Visible caption naming whose permissions these are. */
+    caption: ReactNode;
+    /** Optional plain-language note under the caption. */
+    summary?: ReactNode;
+    rows: readonly PermissionGridRow[];
+    /** Column headings; product copy stays with the caller. */
+    headings?: Readonly<{
+        capability: string;
+        state: string;
+        scope: string;
+        control?: string;
+    }>;
+    className?: string;
+}>;
+/** Product-neutral, dense capability sheet: one row per capability. */
+export declare function PermissionGrid({ caption, summary, rows, headings, className, }: PermissionGridProps): JSX.Element;

package/dist/blocks/permission-grid.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_HEADINGS = {
+    capability: "Capability",
+    state: "State",
+    scope: "Scope",
+};
+function index(position) {
+    return String(position + 1).padStart(2, "0");
+}
+/** Product-neutral, dense capability sheet: one row per capability. */
+export function PermissionGrid({ caption, summary, rows, headings = DEFAULT_HEADINGS, className, }) {
+    const hasControls = rows.some((row) => row.control !== undefined);
+    return (_jsxs("figure", { className: `caps-permission-grid ${className ?? ""}`, children: [_jsxs("figcaption", { className: "caps-permission-grid-caption", children: [_jsx("span", { className: "caps-permission-grid-title", children: caption }), summary === undefined ? null : (_jsx("span", { className: "caps-permission-grid-summary", children: summary }))] }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "caps-permission-grid-index", children: "#" }), _jsx("th", { scope: "col", children: headings.capability }), _jsx("th", { scope: "col", children: headings.state }), _jsx("th", { scope: "col", children: headings.scope }), hasControls ? (_jsx("th", { scope: "col", children: headings.control ?? _jsx("span", { className: "sr-only", children: "Change" }) })) : null] }) }), _jsx("tbody", { children: rows.map((row, position) => (_jsxs("tr", { "data-state": row.state, children: [_jsxs("td", { className: "caps-permission-grid-index", children: [_jsx("span", { children: index(position) }), row.group === undefined ? null : (_jsx("span", { className: "caps-permission-grid-group", children: row.group }))] }), _jsx("th", { scope: "row", children: _jsxs("span", { className: "caps-permission-grid-capability", children: [_jsx("span", { className: "caps-permission-grid-mark", "aria-hidden": "true", children: row.mark }), _jsx("span", { children: row.label })] }) }), _jsx("td", { children: _jsx("span", { className: "caps-permission-grid-state", "data-state": row.state, children: row.stateLabel }) }), _jsx("td", { className: "caps-permission-grid-scope", children: row.scope }), hasControls ? _jsx("td", { children: row.control ?? null }) : null] }, row.id))) })] })] }));
+}

package/dist/blocks/pricing-card.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type CardProps } from "../components/card.js";
+/** Caller-provided pricing plan data. */
+export type PricingPlan = {
+    name: ReactNode;
+    description?: ReactNode;
+    price?: ReactNode;
+    interval?: ReactNode;
+};
+/** Supported PricingCard layouts. */
+export type PricingCardLayout = "stacked" | "banded";
+/** Props accepted by PricingCard. */
+export type PricingCardProps = HTMLAttributes<HTMLDivElement> & {
+    plan: PricingPlan;
+    /** Caller-owned feature rows. */
+    features?: ReactNode;
+    /** Caller-owned action control; this block never invokes or configures it. */
+    action?: ReactNode;
+    /** Caller-owned status content, such as a badge. */
+    status?: ReactNode;
+    /** Caller-owned illustration, such as an `img` with its own alt text. */
+    art?: ReactNode;
+    /**
+     * `stacked` groups the title and price in the header. `banded` places the
+     * name above the illustration and keeps the price on one line.
+     */
+    layout?: PricingCardLayout;
+    /** Marks the one plan a page recommends with a heavier shadow. */
+    featured?: boolean;
+    /** Use tighter section spacing for dense plan comparisons. */
+    density?: CardProps["density"];
+};
+/** Displays supplied plan data and slots; checkout and policy stay with the host. */
+export declare const PricingCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    plan: PricingPlan;
+    /** Caller-owned feature rows. */
+    features?: ReactNode;
+    /** Caller-owned action control; this block never invokes or configures it. */
+    action?: ReactNode;
+    /** Caller-owned status content, such as a badge. */
+    status?: ReactNode;
+    /** Caller-owned illustration, such as an `img` with its own alt text. */
+    art?: ReactNode;
+    /**
+     * `stacked` groups the title and price in the header. `banded` places the
+     * name above the illustration and keeps the price on one line.
+     */
+    layout?: PricingCardLayout;
+    /** Marks the one plan a page recommends with a heavier shadow. */
+    featured?: boolean;
+    /** Use tighter section spacing for dense plan comparisons. */
+    density?: CardProps["density"];
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/pricing-card.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../components/card.js";
+import { cn } from "../lib/cn.js";
+/** Displays supplied plan data and slots; checkout and policy stay with the host. */
+export const PricingCard = forwardRef(function PricingCard({ action, art, className, density, featured = false, features, plan, status, layout = "stacked", ...rootProps }, ref) {
+    const banded = layout === "banded";
+    const title = (_jsxs("div", { className: banded
+            ? "caps-pricing-card-band"
+            : "flex w-full items-start justify-between gap-lg", children: [_jsx(CardTitle, { className: "caps-pricing-card-name", children: plan.name }), status] }));
+    return (_jsxs(Card, { ...rootProps, className: cn("caps-pricing-card", banded && "caps-pricing-card-banded", className), "data-featured": featured ? "true" : undefined, ref: ref, variant: "outline", ...(density ? { density } : {}), children: [banded ? title : null, art !== undefined ? (_jsx("figure", { className: "caps-pricing-card-art", children: art })) : null, banded ? (_jsxs(CardHeader, { children: [_jsxs("div", { className: "caps-pricing-card-price", children: [plan.price !== undefined ? _jsx("strong", { children: plan.price }) : null, plan.interval !== undefined ? (_jsx("span", { children: plan.interval })) : null] }), plan.description ? (_jsx(CardDescription, { className: "caps-pricing-card-description", children: plan.description })) : null] })) : (_jsxs(CardHeader, { children: [title, plan.description ? (_jsx(CardDescription, { className: "caps-pricing-card-description", children: plan.description })) : null, plan.price !== undefined ? (_jsx("div", { className: "text-3xl font-semibold", children: plan.price })) : null, plan.interval !== undefined ? (_jsx("div", { className: "text-sm text-base-content", children: plan.interval })) : null] })), features !== undefined ? (_jsx(CardContent, { className: "caps-pricing-card-features", children: features })) : null, action !== undefined ? (_jsx(CardFooter, { className: "caps-pricing-card-action", children: action })) : null] }));
+});

package/dist/blocks/release-tag.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One shipped thing and its version, printed under the tag. */
+export type ReleaseTagEntry = Readonly<{
+    name: string;
+    version: string;
+}>;
+/** Props accepted by ReleaseTag. */
+export type ReleaseTagProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    /** One or two short lines printed large on the tag, such as ["Fungi", "Beta"]. */
+    title: readonly string[];
+    /** A small accent strip under the title, such as "Update". */
+    label?: ReactNode;
+    entries: readonly ReleaseTagEntry[];
+};
+/**
+ * A release badge: a torn-off calendar page with binder rings, a stacked
+ * title, one accent strip and a ruled list of names and versions below.
+ * Presentation only; the caller supplies every word.
+ */
+export declare function ReleaseTag({ className, entries, label, title, ...props }: ReleaseTagProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/release-tag.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * A release badge: a torn-off calendar page with binder rings, a stacked
+ * title, one accent strip and a ruled list of names and versions below.
+ * Presentation only; the caller supplies every word.
+ */
+export function ReleaseTag({ className, entries, label, title, ...props }) {
+    return (_jsxs("aside", { ...props, className: cn("caps-release-tag", className), children: [_jsxs("div", { className: "caps-release-tag-page", children: [_jsxs("span", { "aria-hidden": "true", className: "caps-release-tag-rings", children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("p", { className: "caps-release-tag-title", children: title.map((line) => (_jsx("span", { children: line }, line))) }), label ? _jsx("p", { className: "caps-release-tag-label", children: label }) : null] }), _jsx("dl", { className: "caps-release-tag-entries", children: entries.map((entry) => (_jsxs("div", { children: [_jsx("dt", { children: entry.name }), _jsx("dd", { children: entry.version })] }, entry.name))) })] }));
+}

package/dist/blocks/resource-select.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes } from "react";
+/** Caller-provided resource option data. */
+export type ResourceOption = {
+    disabled?: boolean;
+    id: string;
+    label: string;
+    searchText?: string;
+};
+/** Props accepted by ResourceSelect. */
+export type ResourceSelectProps = {
+    /** Called after an option is selected. */
+    onSelect: (option: ResourceOption) => void;
+    options: readonly ResourceOption[];
+    placeholder?: string;
+    /** Native caller metadata, including data-* attributes. */
+    triggerProps?: ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;
+    value?: string;
+};
+/** Native `data-*` attribute map accepted alongside typed props. */
+export type DataAttributes = Record<`data-${string}`, boolean | number | string | undefined>;
+/** A resource-selection block with caller-owned options and selected value. */
+export declare const ResourceSelect: import("react").ForwardRefExoticComponent<ResourceSelectProps & import("react").RefAttributes<HTMLButtonElement>>;