@fungi.computer/caps 0.3.1 → 0.5.0

package/README.md

@@ -72,7 +72,7 @@ export function NoteComposer() {
       <Composer
         input={
           <input
-            className="input join-item w-full"
+            className="input w-full"
             value={draft}
             onChange={(event) => setDraft(event.target.value)}
             aria-label="Note"
@@ -663,9 +663,12 @@ compose, so color belongs in `variant` or an extra daisyUI class.
 
 ### Composer with an async submit
 
-`Composer` is a layout block. Its input and action are your controls, and so are
-their labels, disabled state, keyboard behaviour and effects. An avatar or other
-leading content goes in the `leading` slot as any React node.
+`Composer` is a layout block: one surface with optional `attachments` on top,
+your `input` typed straight onto the host region, and a bottom row of `toolbar`
+controls with the `action` at its end. It draws no box of its own; the host
+region is the field. Every slot is your control, and so are its labels, disabled
+state, keyboard behaviour and effects. A composer's send key is `SendAction`,
+which turns into a stop key while work runs.
 
 ```tsx
 import { useState, type FormEvent } from "react";
@@ -697,7 +700,7 @@ export function PromptComposer({
       <Composer
         input={
           <input
-            className="input join-item w-full"
+            className="input w-full"
             value={value}
             onChange={(event) => setValue(event.target.value)}
             aria-label="Prompt"
@@ -720,7 +723,7 @@ export function PromptComposer({
 ```
 
 `submit` is your effect. It can call an API, enqueue work or do something local.
-Caps only joins the controls.
+Caps only lays out the controls.
 
 ### Window
 

package/dist/blocks/composer.d.ts

@@ -1,23 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 /** Props accepted by Composer. */
 export type ComposerProps = HTMLAttributes<HTMLDivElement> & {
-    /** The caller-owned primary input control. */
+    /** The caller-owned field, typed into directly: the surface is the field. */
     input: ReactNode;
-    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    /** The caller-owned key at the end of the bottom row, such as a SendAction. */
     action?: ReactNode;
-    /** Optional caller-owned leading slot, such as an avatar. */
-    leading?: ReactNode;
-    /** Classes for the joined row; useful when the host exposes a busy state. */
-    rowClassName?: string;
+    /** Caller-owned controls and readouts along the bottom edge, before the action. */
+    toolbar?: ReactNode;
+    /** Caller-owned items riding with the draft, shown above the text. */
+    attachments?: ReactNode;
 };
-/** Layout and slots only. It never assigns action-control semantics. */
+/**
+ * One composer surface: attachments, then the text, then a slim row along the
+ * bottom edge holding the toolbar and, at its end, the action. It draws no box
+ * of its own: the host region is the field. Layout and slots only; it never
+ * assigns action-control semantics.
+ */
 export declare const Composer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /** The caller-owned primary input control. */
+    /** The caller-owned field, typed into directly: the surface is the field. */
     input: ReactNode;
-    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    /** The caller-owned key at the end of the bottom row, such as a SendAction. */
     action?: ReactNode;
-    /** Optional caller-owned leading slot, such as an avatar. */
-    leading?: ReactNode;
-    /** Classes for the joined row; useful when the host exposes a busy state. */
-    rowClassName?: string;
+    /** Caller-owned controls and readouts along the bottom edge, before the action. */
+    toolbar?: ReactNode;
+    /** Caller-owned items riding with the draft, shown above the text. */
+    attachments?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/composer.js

@@ -1,13 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-/** Layout and slots only. It never assigns action-control semantics. */
-export const Composer = forwardRef(function Composer({ action, className, input, leading, rowClassName, ...rootProps }, ref) {
-    return (_jsx("div", { ...rootProps, ref: ref, className: [
-            "caps-composer flex min-w-0 flex-1 items-end gap-sm",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: _jsxs("div", { className: ["join w-full p-2xs", rowClassName]
-                .filter(Boolean)
-                .join(" "), children: [leading, input, action] }) }));
+import { cn } from "../lib/cn.js";
+/**
+ * One composer surface: attachments, then the text, then a slim row along the
+ * bottom edge holding the toolbar and, at its end, the action. It draws no box
+ * of its own: the host region is the field. Layout and slots only; it never
+ * assigns action-control semantics.
+ */
+export const Composer = forwardRef(function Composer({ action, attachments, className, input, toolbar, ...rootProps }, ref) {
+    return (_jsxs("div", { ...rootProps, ref: ref, className: cn("caps-composer", className), children: [attachments === undefined ? null : (_jsx("div", { className: "caps-composer-attachments", children: attachments })), _jsx("div", { className: "caps-composer-input", children: input }), toolbar === undefined && action === undefined ? null : (_jsxs("div", { className: "caps-composer-bar", children: [_jsx("div", { className: "caps-composer-toolbar", children: toolbar }), action] }))] }));
 });

package/dist/blocks/faq-chat.js

@@ -2,8 +2,8 @@ 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 { InputGroup } from "../components/input-group.js";
 import { cn } from "../lib/cn.js";
-import { Composer } from "./composer.js";
 function words(text) {
     return text.toLowerCase().match(/[a-z0-9$]+/g) ?? [];
 }
@@ -71,7 +71,7 @@ export const FaqChat = forwardRef(function FaqChat({ avatar, className, entries,
     }
     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 }) }) })] }));
+                        }, size: "xs", type: "button", variant: "outline", children: entry.question }) }, entry.id))) }), _jsx("form", { className: "caps-faq-chat-form", onSubmit: submit, children: _jsxs(InputGroup, { children: [_jsx(Input, { "aria-label": inputLabel, onChange: (event) => {
+                                setDraft(event.target.value);
+                            }, placeholder: placeholder, value: draft }), _jsx(Button, { type: "submit", children: submitLabel })] }) })] }));
 });

package/dist/blocks/status-tray.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type ComponentPropsWithRef, type HTMLAttributes, type ReactNode } from "react";
 import { type StatusGlyph, type StatusMotion, type StatusTone } from "../components/status.js";
 /**
  * One footer readout and the small tray it opens. Semantic data only: the
@@ -43,6 +43,12 @@ export type StatusTrayProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
     leading?: ReactNode;
     /** Trailing controls after the chips (Send, Expand, …). */
     trailing?: ReactNode;
+    /**
+     * Compose a native button trigger, forwarding these attributes, children
+     * and ref. StatusTray still owns disclosure, dismissal and return focus.
+     * Omit to retain the default chip and its theme-owned finish.
+     */
+    renderTrigger?: ((props: ComponentPropsWithRef<"button">) => ReactNode) | undefined;
     /**
      * Structural seat. `housing` sits on the plastic below a screen; `screen`
      * sits inside a Display as flat, screen-native text (the wiki's screen
@@ -59,7 +65,7 @@ export type StatusTrayProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
     hostInset?: number;
 };
 /** A footer row of readout chips; one opens its tray above the row at a time. */
-export declare function StatusTray({ items, openId, onOpenChange, leading, trailing, placement, align, hostInset, className, ...props }: StatusTrayProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusTray({ items, openId, onOpenChange, leading, trailing, renderTrigger, placement, align, hostInset, className, ...props }: StatusTrayProps): import("react/jsx-runtime").JSX.Element;
 /** A group of tray rows. Precede it with a DataListHeading to label it. */
 export declare function StatusTrayList({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 /**

package/dist/blocks/status-tray.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { Fragment, useEffect, useId, useRef, } from "react";
 import { IconButton } from "../components/icon-button.js";
@@ -6,7 +6,7 @@ import { Popover, PopoverAnchor } from "../components/popover.js";
 import { Status, } from "../components/status.js";
 import { cn } from "../lib/cn.js";
 /** A footer row of readout chips; one opens its tray above the row at a time. */
-export function StatusTray({ items, openId, onOpenChange, leading, trailing, placement = "housing", align = "end", hostInset, className, ...props }) {
+export function StatusTray({ items, openId, onOpenChange, leading, trailing, renderTrigger, placement = "housing", align = "end", hostInset, className, ...props }) {
     const scope = useId();
     const root = useRef(null);
     const panel = useRef(null);
@@ -50,14 +50,30 @@ export function StatusTray({ items, openId, onOpenChange, leading, trailing, pla
             document.removeEventListener("pointerdown", onPointer);
         };
     }, [activeId, onOpenChange]);
-    return (_jsxs(PopoverAnchor, { ...props, ref: root, className: cn("caps-status-tray", className), "data-placement": placement, "data-align": align, children: [open ? (_jsxs(Popover, { open: true, ref: panel, tabIndex: -1, side: "top", id: `${scope}-${open.id}`, role: "dialog", "aria-labelledby": `${scope}-title`, className: "caps-status-tray-panel", "data-status-tray-panel": open.id, children: [_jsxs("div", { className: "caps-status-tray-head", children: [open.tone ? (_jsx(Status, { size: "compact", tone: open.tone, glyph: open.glyph ?? "dot" })) : null, _jsx("span", { id: `${scope}-title`, className: "caps-status-tray-title", children: open.title ?? open.label }), open.actions, _jsx(IconButton, { "aria-label": "Close tray", icon: _jsx(X, { "aria-hidden": "true" }), onClick: close })] }), _jsx("div", { className: "caps-status-tray-body", children: open.content })] })) : null, placement === "host" ? null : (_jsxs("div", { className: "caps-status-tray-row", children: [leading, _jsx("div", { className: "caps-status-tray-chips", children: items.map((item) => (_jsxs(Fragment, { children: [_jsxs("button", { ref: (node) => {
-                                        if (node)
-                                            triggers.current.set(item.id, node);
-                                        else
-                                            triggers.current.delete(item.id);
-                                    }, type: "button", className: "caps-status-tray-chip", "aria-expanded": activeId === item.id, "aria-controls": activeId === item.id ? `${scope}-${item.id}` : undefined, "aria-label": item.accessibleLabel, disabled: item.disabled, title: item.disabled ? item.accessibleLabel : undefined, "aria-haspopup": "dialog", "data-status-tray-chip": item.id, onClick: () => {
-                                        onOpenChange(openId === item.id ? null : item.id);
-                                    }, children: [item.tone ? (_jsx(Status, { size: "compact", glyph: item.glyph ?? "dot", motion: item.motion ?? "none", tone: item.tone })) : null, _jsx("span", { className: "caps-status-tray-label", children: item.label }), item.count !== undefined && item.count > 0 ? (_jsx("span", { className: "caps-status-tray-count", children: item.count })) : null] }), item.after] }, item.id))) }), trailing] }))] }));
+    return (_jsxs(PopoverAnchor, { ...props, ref: root, className: cn("caps-status-tray", className), "data-placement": placement, "data-align": align, children: [open ? (_jsxs(Popover, { open: true, ref: panel, tabIndex: -1, side: "top", id: `${scope}-${open.id}`, role: "dialog", "aria-labelledby": `${scope}-title`, className: "caps-status-tray-panel", "data-status-tray-panel": open.id, children: [_jsxs("div", { className: "caps-status-tray-head", children: [open.tone ? (_jsx(Status, { size: "compact", tone: open.tone, glyph: open.glyph ?? "dot" })) : null, _jsx("span", { id: `${scope}-title`, className: "caps-status-tray-title", children: open.title ?? open.label }), open.actions, _jsx(IconButton, { "aria-label": "Close tray", icon: _jsx(X, { "aria-hidden": "true" }), onClick: close })] }), _jsx("div", { className: "caps-status-tray-body", children: open.content })] })) : null, placement === "host" ? null : (_jsxs("div", { className: "caps-status-tray-row", children: [leading, _jsx("div", { className: "caps-status-tray-chips", children: items.map((item) => {
+                            const trigger = {
+                                ref: (node) => {
+                                    if (node)
+                                        triggers.current.set(item.id, node);
+                                    else
+                                        triggers.current.delete(item.id);
+                                },
+                                type: "button",
+                                className: renderTrigger ? undefined : "caps-status-tray-chip",
+                                "aria-expanded": activeId === item.id,
+                                "aria-controls": activeId === item.id ? `${scope}-${item.id}` : undefined,
+                                "aria-label": item.accessibleLabel,
+                                disabled: item.disabled,
+                                title: item.disabled ? item.accessibleLabel : undefined,
+                                "aria-haspopup": "dialog",
+                                "data-status-tray-chip": item.id,
+                                onClick: () => {
+                                    onOpenChange(openId === item.id ? null : item.id);
+                                },
+                                children: (_jsxs(_Fragment, { children: [item.tone ? (_jsx(Status, { size: "compact", glyph: item.glyph ?? "dot", motion: item.motion ?? "none", tone: item.tone })) : null, _jsx("span", { className: "caps-status-tray-label", children: item.label }), item.count !== undefined && item.count > 0 ? (_jsx("span", { className: "caps-status-tray-count", children: item.count })) : null] })),
+                            };
+                            return (_jsxs(Fragment, { children: [renderTrigger ? (renderTrigger(trigger)) : (_jsx("button", { ...trigger })), item.after] }, item.id));
+                        }) }), trailing] }))] }));
 }
 /** A group of tray rows. Precede it with a DataListHeading to label it. */
 export function StatusTrayList({ children, className, ...props }) {

package/dist/components/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import * as React from "react";
 import { createContext, forwardRef, useContext, useCallback, useImperativeHandle, useRef, } from "react";
@@ -79,12 +79,12 @@ export const DropdownMenuItem = forwardRef(function DropdownMenuItem({ className
         }, ref: ref }));
 });
 /** A checkable item in a DropdownMenu. */
-export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ className, onClick, onSelect, ...props }, ref) {
-    return (_jsx(BaseMenu.CheckboxItem, { ...props, className: (state) => cn(itemClasses, resolveClassName(className, state)), onClick: (event) => {
+export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ children, className, onClick, onSelect, ...props }, ref) {
+    return (_jsxs(BaseMenu.CheckboxItem, { ...props, className: (state) => cn(itemClasses, resolveClassName(className, state)), onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented)
                 onSelect?.(event);
-        }, ref: ref }));
+        }, ref: ref, children: [_jsx("span", { className: "min-w-0 flex-1", children: children }), _jsx(BaseMenu.CheckboxItemIndicator, { "aria-hidden": "true", className: "shrink-0", children: "\u2713" })] }));
 });
 /** A visual separator in a DropdownMenu. */
 export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {

package/dist/components/field.d.ts

@@ -21,6 +21,8 @@ export declare function FormFooter({ children, divider, error, layout, status, .
 export type FormProps = {
     /** Disables every control while a submission is in flight. */
     busy?: boolean;
+    /** Opt-in label/control grid; the default field rhythm is unchanged. */
+    layout?: "columns" | undefined;
 } & FormHTMLAttributes<HTMLFormElement>;
 /**
  * A form with Caps' field rhythm. While `busy`, its fieldset disables every
@@ -29,11 +31,15 @@ export type FormProps = {
 export declare const Form: import("react").ForwardRefExoticComponent<{
     /** Disables every control while a submission is in flight. */
     busy?: boolean;
+    /** Opt-in label/control grid; the default field rhythm is unchanged. */
+    layout?: "columns" | undefined;
 } & FormHTMLAttributes<HTMLFormElement> & import("react").RefAttributes<HTMLFormElement>>;
 /** Props accepted by FormSection. */
 export type FormSectionProps = {
     title: ReactNode;
     description?: ReactNode;
+    /** Opt-in label/control grid when used without a Form parent. */
+    layout?: "columns" | undefined;
     /** Heading level inside the page outline. */
     level?: 2 | 3 | 4;
     children: ReactNode;
@@ -42,6 +48,8 @@ export type FormSectionProps = {
 export declare const FormSection: import("react").ForwardRefExoticComponent<{
     title: ReactNode;
     description?: ReactNode;
+    /** Opt-in label/control grid when used without a Form parent. */
+    layout?: "columns" | undefined;
     /** Heading level inside the page outline. */
     level?: 2 | 3 | 4;
     children: ReactNode;
@@ -49,7 +57,11 @@ export declare const FormSection: import("react").ForwardRefExoticComponent<{
 /** Props accepted by FieldSet. */
 export type FieldSetProps = {
     legend: ReactNode;
+    /** Full legend on hover when a columns form clips it to one line. */
+    legendTitle?: string;
     description?: ReactNode;
+    /** Opt-in label/control grid when used without a Form parent. */
+    layout?: "columns" | undefined;
     /** The group's announced error, such as "Choose at least one right". */
     error?: ReactNode;
     children: ReactNode;
@@ -60,7 +72,11 @@ export type FieldSetProps = {
  */
 export declare const FieldSet: import("react").ForwardRefExoticComponent<{
     legend: ReactNode;
+    /** Full legend on hover when a columns form clips it to one line. */
+    legendTitle?: string;
     description?: ReactNode;
+    /** Opt-in label/control grid when used without a Form parent. */
+    layout?: "columns" | undefined;
     /** The group's announced error, such as "Choose at least one right". */
     error?: ReactNode;
     children: ReactNode;
@@ -76,6 +92,8 @@ export type FieldProps = {
      */
     icon?: ReactNode;
     label?: ReactNode;
+    /** Full label on hover when a columns form clips it to one line. */
+    labelTitle?: string;
     /**
      * `vertical` stacks label, control and error; `horizontal` puts the control
      * opposite its copy (settings rows); `inline` puts a checkbox or switch
@@ -102,6 +120,8 @@ export declare const Field: import("react").ForwardRefExoticComponent<{
      */
     icon?: ReactNode;
     label?: ReactNode;
+    /** Full label on hover when a columns form clips it to one line. */
+    labelTitle?: string;
     /**
      * `vertical` stacks label, control and error; `horizontal` puts the control
      * opposite its copy (settings rows); `inline` puts a checkbox or switch

package/dist/components/field.js

@@ -25,21 +25,21 @@ export function FormFooter({ children, divider = true, error, layout = "end", st
  * A form with Caps' field rhythm. While `busy`, its fieldset disables every
  * control and the form reports `aria-busy`; validation stays with the caller.
  */
-export const Form = forwardRef(function Form({ busy = false, children, className, ...props }, ref) {
-    return (_jsx("form", { ...props, "aria-busy": busy || undefined, className: cn("caps-form", className), ref: ref, children: _jsx("fieldset", { className: "caps-form-body", disabled: busy, children: children }) }));
+export const Form = forwardRef(function Form({ busy = false, children, className, layout, ...props }, ref) {
+    return (_jsx("form", { ...props, "aria-busy": busy || undefined, className: cn("caps-form", className), "data-layout": layout, ref: ref, children: _jsx("fieldset", { className: "caps-form-body", disabled: busy, children: children }) }));
 });
 const sectionHeadings = { 2: "h2", 3: "h3", 4: "h4" };
 /** A titled group of fields; consecutive sections share one quiet rule. */
-export const FormSection = forwardRef(function FormSection({ children, className, description, level = 3, title, ...props }, ref) {
+export const FormSection = forwardRef(function FormSection({ children, className, description, layout, level = 3, title, ...props }, ref) {
     const id = useId();
     const Heading = sectionHeadings[level];
-    return (_jsxs("section", { ...props, "aria-labelledby": `${id}-title`, className: cn("caps-form-section", className), ref: ref, children: [_jsxs("header", { className: "caps-form-section-copy", children: [_jsx(Heading, { className: "caps-form-section-title", id: `${id}-title`, children: title }), description ? (_jsx("p", { className: "caps-form-section-description", children: description })) : null] }), _jsx("div", { className: "caps-form-section-fields", children: children })] }));
+    return (_jsxs("section", { ...props, "aria-labelledby": `${id}-title`, className: cn("caps-form-section", className), "data-layout": layout, ref: ref, children: [_jsxs("header", { className: "caps-form-section-copy", children: [_jsx(Heading, { className: "caps-form-section-title", id: `${id}-title`, children: title }), description ? (_jsx("p", { className: "caps-form-section-description", children: description })) : null] }), _jsx("div", { className: "caps-form-section-fields", children: children })] }));
 });
 /**
  * A legend-named group of related choices, such as a list of inline
  * checkbox Fields. `disabled` disables every control inside.
  */
-export const FieldSet = forwardRef(function FieldSet({ children, className, description, error, legend, ...props }, ref) {
+export const FieldSet = forwardRef(function FieldSet({ children, className, description, error, layout, legend, legendTitle, ...props }, ref) {
     const id = useId();
     const describedBy = [
         description ? `${id}-description` : props["aria-describedby"],
@@ -47,7 +47,7 @@ export const FieldSet = forwardRef(function FieldSet({ children, className, desc
     ]
         .filter(Boolean)
         .join(" ") || undefined;
-    return (_jsxs("fieldset", { ...props, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], className: cn("caps-fieldset", className), ref: ref, children: [_jsx("legend", { className: "caps-fieldset-legend", children: legend }), description ? (_jsx("p", { className: "caps-fieldset-description", id: `${id}-description`, children: description })) : null, _jsx("div", { className: "caps-fieldset-fields", children: children }), error === undefined ? null : (_jsx(FieldError, { id: `${id}-error`, children: error }))] }));
+    return (_jsxs("fieldset", { ...props, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], className: cn("caps-fieldset", className), "data-layout": layout, ref: ref, children: [_jsx("legend", { className: "caps-fieldset-legend", title: legendTitle, children: legend }), description ? (_jsx("p", { className: "caps-fieldset-description", id: `${id}-description`, children: description })) : null, _jsx("div", { className: "caps-fieldset-fields", children: children }), error === undefined ? null : (_jsx(FieldError, { id: `${id}-error`, children: error }))] }));
 });
 /** The labelled control inside an InputGroup: its first non-addon element. */
 function groupControl(group) {
@@ -60,7 +60,7 @@ function groupControl(group) {
     return controls[0] ?? null;
 }
 /** A labelled form-field layout that renders caller-provided control and supporting content. */
-export const Field = forwardRef(function Field({ children, className, description, error, icon, label, optional, orientation = "vertical", readout = false, required, ...props }, ref) {
+export const Field = forwardRef(function Field({ children, className, description, error, icon, label, labelTitle, optional, orientation = "vertical", readout = false, required, ...props }, ref) {
     const generatedId = useId();
     const child = isValidElement(children) ? children : null;
     // An InputGroup is layout: the labelled control is the input inside it.
@@ -97,7 +97,7 @@ export const Field = forwardRef(function Field({ children, className, descriptio
                 : part))
             : cloneElement(child, clonedProps)
         : children;
-    const labelContent = label ? (_jsx(Label, { htmlFor: readout ? undefined : controlId, 
+    const labelContent = label ? (_jsx(Label, { htmlFor: readout ? undefined : controlId, title: labelTitle, 
         // A choice's own label reads as body text; the group's legend carries weight.
         className: orientation === "inline" ? "font-normal" : undefined, ...(required === undefined ? {} : { required }), ...(optional === undefined ? {} : { optional }), children: label })) : null;
     const copy = label || description ? (_jsxs("div", { className: "caps-field-copy", children: [labelContent, description ? (_jsx("p", { className: "caps-field-description", id: descriptionId, children: description })) : null] })) : null;

package/dist/components/send-action.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "./button.js";
+import { type KeycapButtonProps } from "./keycap.js";
 /** Where a composer's send action is: nothing to send, ready, or working. */
 export type SendActionState = "empty" | "ready" | "busy";
 /** Props accepted by SendAction. */
@@ -12,13 +12,14 @@ export type SendActionProps = {
     stopLabel?: string;
     /** Glyph size in pixels. */
     iconSize?: number;
-} & Omit<ButtonProps, "children" | "size" | "loading" | "aria-label">;
+} & Omit<KeycapButtonProps, "label" | "icon" | "readout" | "shortcut" | "pressed" | "expanded" | "aria-label">;
 /**
- * A composer's send key. Empty, it rests disabled; given something to send it
- * wakes with a small pop; sending, its arrow launches away and a working
- * indicator (or, with `onStop`, a stop square) takes its place; when the work
- * ends the arrow drops back in. All timing comes from the theme's motion
- * tokens, and reduced motion keeps short fades only.
+ * A composer's one send key, on the Caps keycap. Empty, it rests disabled;
+ * given something to send it wakes with a small pop; sending, its arrow
+ * launches away and a working indicator (or, with `onStop`, a stop square)
+ * takes its place in the same key; when the work ends the arrow drops back
+ * in. It never grows a second button. All timing comes from the theme's
+ * motion tokens, and reduced motion keeps short fades only.
  */
 export declare const SendAction: import("react").ForwardRefExoticComponent<{
     state: SendActionState;
@@ -30,4 +31,4 @@ export declare const SendAction: import("react").ForwardRefExoticComponent<{
     stopLabel?: string;
     /** Glyph size in pixels. */
     iconSize?: number;
-} & Omit<ButtonProps, "aria-label" | "children" | "size" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & Omit<KeycapButtonProps, "aria-label" | "label" | "icon" | "readout" | "expanded" | "pressed" | "shortcut"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/send-action.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUp, Square } from "lucide-react";
 import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, } from "react";
 import { canAnimate, motionEasing, readMotion, } from "../lib/motion.js";
-import { Button } from "./button.js";
+import { KeycapButton } from "./keycap.js";
 import { Loader } from "./loader.js";
+import { cn } from "../lib/cn.js";
 function lift(face, motion) {
     // The arrow launches upward and away: the prompt has gone.
     return face.animate(motion.reduced
@@ -57,13 +58,14 @@ function charge(button, motion) {
     });
 }
 /**
- * A composer's send key. Empty, it rests disabled; given something to send it
- * wakes with a small pop; sending, its arrow launches away and a working
- * indicator (or, with `onStop`, a stop square) takes its place; when the work
- * ends the arrow drops back in. All timing comes from the theme's motion
- * tokens, and reduced motion keeps short fades only.
+ * A composer's one send key, on the Caps keycap. Empty, it rests disabled;
+ * given something to send it wakes with a small pop; sending, its arrow
+ * launches away and a working indicator (or, with `onStop`, a stop square)
+ * takes its place in the same key; when the work ends the arrow drops back
+ * in. It never grows a second button. All timing comes from the theme's
+ * motion tokens, and reduced motion keeps short fades only.
  */
-export const SendAction = forwardRef(function SendAction({ state, onStop, stopLabel = "Stop", iconSize = 20, onClick, disabled, "aria-label": label, ...props }, ref) {
+export const SendAction = forwardRef(function SendAction({ state, onStop, stopLabel = "Stop", iconSize = 20, onClick, disabled, className, tone = "primary", "aria-label": label, ...props }, ref) {
     const node = useRef(null);
     useImperativeHandle(ref, () => node.current);
     const previous = useRef(state);
@@ -92,5 +94,5 @@ export const SendAction = forwardRef(function SendAction({ state, onStop, stopLa
     }, [state]);
     const busy = state === "busy";
     const stoppable = busy && onStop !== undefined;
-    return (_jsx(Button, { ...props, ref: node, "aria-busy": busy ? true : undefined, "aria-label": stoppable ? stopLabel : label, "data-send-state": state, disabled: disabled === true || state === "empty" || (busy && !stoppable), onClick: stoppable ? onStop : onClick, size: "icon", children: _jsxs("span", { className: "caps-send-glyph", "data-state": state, children: [_jsx("span", { "data-glyph": "arrow", children: _jsx(ArrowUp, { "aria-hidden": "true", size: iconSize }) }), _jsx("span", { "data-glyph": "busy", children: onStop === undefined ? (_jsx(Loader, { decorative: true, size: "sm" })) : (_jsx(Square, { "aria-hidden": "true", fill: "currentColor", size: Math.round(iconSize * 0.7) })) })] }) }));
+    return (_jsx(KeycapButton, { ...props, ref: node, className: cn("caps-send-action", className), tone: tone, "aria-busy": busy ? true : undefined, "aria-label": stoppable ? stopLabel : label, "data-send-state": state, disabled: disabled === true || state === "empty" || (busy && !stoppable), onClick: stoppable ? onStop : onClick, label: null, icon: _jsxs("span", { className: "caps-send-glyph", "data-state": state, children: [_jsx("span", { "data-glyph": "arrow", children: _jsx(ArrowUp, { "aria-hidden": "true", size: iconSize }) }), _jsx("span", { "data-glyph": "busy", children: onStop === undefined ? (_jsx(Loader, { decorative: true, size: "sm" })) : (_jsx(Square, { "aria-hidden": "true", fill: "currentColor", size: Math.round(iconSize * 0.7) })) })] }) }));
 });

package/dist/form-fields.d.ts

@@ -3,6 +3,8 @@ import type { SchemaFormModel } from "./schema-form.js";
 /** Props accepted by FormFields. */
 export type FormFieldsProps<V extends FormValues> = {
     model: SchemaFormModel<V>;
+    /** Opt-in label/control grid for generated sections and groups. */
+    layout?: "columns" | undefined;
     /** Render only these fields, in this order, without section headings. */
     names?: readonly (keyof V & string)[];
     /** Disable every field, such as while an uncertain request is retried. */
@@ -12,4 +14,4 @@ export type FormFieldsProps<V extends FormValues> = {
  * Render a schema form's fields from its schema: every section in order, or
  * only `names` (for placing fields in Screen cells or custom layouts).
  */
-export declare function FormFields<V extends FormValues>({ model, names, disabled, }: FormFieldsProps<V>): (import("react/jsx-runtime").JSX.Element | null)[];
+export declare function FormFields<V extends FormValues>({ model, names, disabled, layout, }: FormFieldsProps<V>): (import("react/jsx-runtime").JSX.Element | null)[];

package/dist/form-fields.js

@@ -159,7 +159,7 @@ const groupKinds = new Set([
     "icon-checkboxes",
 ]);
 /** Choice groups: a legend names the group; each option names its input. */
-function SpecGroup({ spec, field, locked, error, }) {
+function SpecGroup({ spec, field, locked, error, layout, }) {
     const disabled = locked || spec.readOnly === true;
     const legend = spec.label;
     if (spec.kind === "checkboxes" || spec.kind === "icon-checkboxes") {
@@ -169,7 +169,7 @@ function SpecGroup({ spec, field, locked, error, }) {
                 ? [...selected, value]
                 : selected.filter((current) => current !== value));
         };
-        return (_jsx(FieldSet, { legend: legend, description: spec.help, disabled: disabled, error: error ?? null, children: spec.kind === "icon-checkboxes" ? (_jsx("div", { className: "caps-field-icon-choices", children: spec.options.map((option) => (_jsx(IconCheckbox, { name: spec.name, value: option.value, label: option.label, ...(option.caption === undefined
+        return (_jsx(FieldSet, { legend: legend, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: spec.kind === "icon-checkboxes" ? (_jsx("div", { className: "caps-field-icon-choices", children: spec.options.map((option) => (_jsx(IconCheckbox, { name: spec.name, value: option.value, label: option.label, ...(option.caption === undefined
                         ? {}
                         : { caption: option.caption }), icon: option.icon, disabled: option.disabled, checked: selected.includes(option.value), onBlur: field.handleBlur, onChange: (event) => {
                         toggle(option.value, event.currentTarget.checked);
@@ -178,7 +178,7 @@ function SpecGroup({ spec, field, locked, error, }) {
                     } }) }, option.value)))) }));
     }
     const cards = spec.options.some((option) => option.description !== undefined || option.meta !== undefined);
-    return (_jsx(FieldSet, { legend: legend, description: spec.help, disabled: disabled, error: error ?? null, children: _jsx(RadioGroup, { name: spec.name, "aria-label": legend, value: text(field), onValueChange: (next) => {
+    return (_jsx(FieldSet, { legend: legend, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: _jsx(RadioGroup, { name: spec.name, "aria-label": legend, value: text(field), onValueChange: (next) => {
                 field.handleChange(next);
                 field.handleBlur();
             }, 
@@ -206,45 +206,52 @@ function RenderedControl({ spec, field, locked, error, render, ...control }) {
         "aria-invalid": error !== undefined,
     });
 }
-function SchemaField({ form, spec, locked, }) {
+function SchemaField({ form, spec, locked, layout, }) {
     const field = useField({ form, name: spec.name });
     const submitted = useSelector(form.store, (state) => state.submissionAttempts > 0);
     const error = field.state.meta.isBlurred || submitted
         ? fieldError(field.state.meta)
         : undefined;
     if (spec.render === undefined && groupKinds.has(spec.kind))
-        return (_jsx(SpecGroup, { spec: spec, field: field, locked: locked, error: error }));
-    const orientation = spec.kind === "checkbox"
-        ? "inline"
-        : (spec.layout ?? (spec.kind === "switch" ? "row" : "stacked")) === "row"
+        return (_jsx(SpecGroup, { spec: spec, field: field, locked: locked, error: error, layout: layout }));
+    // A columns form chooses one rhythm; per-field layout hints only govern
+    // the unchanged default presentation.
+    const orientation = layout === "columns"
+        ? spec.kind === "switch" || spec.kind === "checkbox"
             ? "horizontal"
-            : "vertical";
-    return (_jsx(Field, { label: spec.label, description: spec.help, icon: spec.icon, orientation: orientation, error: error, ...(spec.required === undefined ? {} : { required: spec.required }), ...(spec.optional === undefined ? {} : { optional: spec.optional }), children: spec.render === undefined ? (_jsx(SpecControl, { spec: spec, field: field, locked: locked })) : (_jsx(RenderedControl, { spec: spec, field: field, locked: locked, error: error, render: spec.render })) }));
+            : "vertical"
+        : spec.kind === "checkbox"
+            ? "inline"
+            : (spec.layout ?? (spec.kind === "switch" ? "row" : "stacked")) ===
+                "row"
+                ? "horizontal"
+                : "vertical";
+    return (_jsx(Field, { label: spec.label, ...(layout === "columns" ? { labelTitle: spec.label } : {}), description: spec.help, icon: spec.icon, orientation: orientation, error: error, ...(spec.required === undefined ? {} : { required: spec.required }), ...(spec.optional === undefined ? {} : { optional: spec.optional }), children: spec.render === undefined ? (_jsx(SpecControl, { spec: spec, field: field, locked: locked })) : (_jsx(RenderedControl, { spec: spec, field: field, locked: locked, error: error, render: spec.render })) }));
 }
 const readValues = Schema.decodeUnknownOption(Schema.Record(Schema.String, inputSchema));
-function Visible({ form, spec, locked, }) {
+function Visible({ form, spec, locked, layout, }) {
     const when = spec.when;
     const shown = useSelector(form.store, (state) => when === undefined
         ? true
         : when(Option.getOrElse(readValues(state.values), () => ({}))));
     if (!shown)
         return null;
-    return _jsx(SchemaField, { form: form, spec: spec, locked: locked });
+    return (_jsx(SchemaField, { form: form, spec: spec, locked: locked, layout: layout }));
 }
-function SectionFields({ form, section, locked, }) {
-    const fields = section.fields.map((spec) => (_jsx(Visible, { form: form, spec: spec, locked: locked }, spec.name)));
-    return section.title === undefined ? (fields) : (_jsx(FormSection, { title: section.title, description: section.description, children: fields }));
+function SectionFields({ form, section, locked, layout, }) {
+    const fields = section.fields.map((spec) => (_jsx(Visible, { form: form, spec: spec, locked: locked, layout: layout }, spec.name)));
+    return section.title === undefined ? (fields) : (_jsx(FormSection, { title: section.title, description: section.description, layout: layout, children: fields }));
 }
 /**
  * Render a schema form's fields from its schema: every section in order, or
  * only `names` (for placing fields in Screen cells or custom layouts).
  */
-export function FormFields({ model, names, disabled = false, }) {
+export function FormFields({ model, names, disabled = false, layout, }) {
     const form = model.form;
     if (names !== undefined)
         return names.map((name) => {
             const spec = model.description.fields.find((field) => field.name === name);
-            return spec === undefined ? null : (_jsx(Visible, { form: form, spec: spec, locked: disabled }, name));
+            return spec === undefined ? null : (_jsx(Visible, { form: form, spec: spec, locked: disabled, layout: layout }, name));
         });
-    return model.description.sections.map((section) => (_jsx(SectionFields, { form: form, section: section, locked: disabled }, section.id ?? "")));
+    return model.description.sections.map((section) => (_jsx(SectionFields, { form: form, section: section, locked: disabled, layout: layout }, section.id ?? "")));
 }

package/dist/lib/format-money.d.ts

@@ -1,2 +1,8 @@
-/** Format USD with cents, preserving sub-cent precision without displaying non-zero amounts as zero. */
-export declare function formatMoney(amount: number): string;
+/**
+ * Format USD to cents, marking non-zero sub-cent amounts rather than rounding
+ * them to zero. Callers needing the supported five-decimal precision opt in
+ * with `precision: "exact"`.
+ */
+export declare function formatMoney(amount: number, options?: Readonly<{
+    precision: "exact";
+}>): string;

package/dist/lib/format-money.js

@@ -4,19 +4,22 @@ const regularUsd = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
 });
-const subcentUsd = new Intl.NumberFormat("en-US", {
+const exactUsd = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 5,
 });
-/** Format USD with cents, preserving sub-cent precision without displaying non-zero amounts as zero. */
-export function formatMoney(amount) {
+/**
+ * Format USD to cents, marking non-zero sub-cent amounts rather than rounding
+ * them to zero. Callers needing the supported five-decimal precision opt in
+ * with `precision: "exact"`.
+ */
+export function formatMoney(amount, options) {
     if (!Number.isFinite(amount))
         throw new RangeError("Money amount must be finite");
-    if (amount !== 0 && Math.abs(amount) < 0.00001)
+    const subcent = amount !== 0 && Math.abs(amount) < 0.01;
+    if (subcent && (options?.precision !== "exact" || Math.abs(amount) < 0.00001))
         return amount < 0 ? ">-$0.01" : "<$0.01";
-    return amount !== 0 && Math.abs(amount) < 0.01
-        ? subcentUsd.format(amount)
-        : regularUsd.format(amount);
+    return subcent ? exactUsd.format(amount) : regularUsd.format(amount);
 }