@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/chat-reasoning/use-reasoning-disclosure.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+export function useReasoningDisclosure({ open, streaming, disabled, autoOpen, autoClose, onOpenChange, }) {
+    const previous = useRef(undefined);
+    const manual = useRef(false);
+    useEffect(() => {
+        const before = previous.current;
+        previous.current = streaming;
+        if (before === streaming)
+            return;
+        if (streaming) {
+            manual.current = false;
+            if (autoOpen && !disabled && !open)
+                onOpenChange(true);
+        }
+        else if (before === true && autoClose && !disabled && !manual.current && open) {
+            onOpenChange(false);
+        }
+    }, [streaming, open, disabled, autoOpen, autoClose, onOpenChange]);
+    return (value) => {
+        manual.current = true;
+        onOpenChange(value);
+    };
+}

package/dist/shared/chat-shimmer/chat-shimmer.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ChatShimmerProps } from '@fastsprout/reacd/adapter-runtime/components/chat-shimmer/index.js';
+export declare function SharedChatShimmer({ text, active, }: ChatShimmerProps): import("react").JSX.Element;

package/dist/shared/chat-shimmer/chat-shimmer.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CHAT_FEEDBACK_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/chat-feedback-policy.js';
+export function SharedChatShimmer({ text, active = CHAT_FEEDBACK_DEFAULTS.active, }) {
+    return (_jsx("span", { className: "reacd-chat-shimmer", "data-active": active, role: active ? 'status' : undefined, "aria-live": active ? 'polite' : undefined, children: text }));
+}

package/dist/shared/chat-tool/chat-tool.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ChatToolProps } from '@fastsprout/reacd/adapter-runtime/components/chat-tool/index.js';
+export declare function SharedChatTool({ label, status, open, onOpenChange, input, output, error, disabled, onApprove, onReject, onRetry, }: ChatToolProps): import("react").JSX.Element;

package/dist/shared/chat-tool/chat-tool.adapter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHAT_FEEDBACK_DEFAULTS, CHAT_TOOL_LABELS, } from '@fastsprout/reacd/adapter-runtime/core/chat-feedback-policy.js';
+import { ChatDisclosure } from '../chat-disclosure/chat-disclosure.js';
+import { Button } from '../primitives/button.js';
+export function SharedChatTool({ label, status, open, onOpenChange, input, output, error, disabled, onApprove, onReject, onRetry, }) {
+    return (_jsxs("section", { className: "reacd-node reacd-chat-tool", "aria-label": label, children: [_jsx("p", { role: status === 'error' ? 'alert' : 'status', children: CHAT_TOOL_LABELS[status] }), _jsxs(ChatDisclosure, { label: label, open: open, onOpenChange: onOpenChange, disabled: disabled, active: status === 'running', children: [input !== undefined && _jsx("pre", { className: "reacd-chat-feedback-text", children: input }), output !== undefined && (_jsx("pre", { className: "reacd-chat-feedback-text", children: output })), error !== undefined && _jsx("p", { className: "reacd-chat-feedback-text", children: error }), input === undefined && output === undefined && error === undefined && (_jsx("p", { children: CHAT_FEEDBACK_DEFAULTS.emptyTool }))] }), status === 'approval' && onApprove !== undefined && onReject !== undefined && (_jsxs("div", { className: "reacd-chat-actions", role: "group", "aria-label": "Tool approval", children: [_jsx(Button, { className: "reacd-button", type: "button", onClick: () => onApprove(), disabled: disabled, children: CHAT_FEEDBACK_DEFAULTS.approveLabel }), _jsx(Button, { className: "reacd-button", variant: "outline", type: "button", onClick: () => onReject(), disabled: disabled, children: CHAT_FEEDBACK_DEFAULTS.rejectLabel })] })), status === 'error' && onRetry !== undefined && (_jsx(Button, { className: "reacd-button", type: "button", onClick: () => onRetry(), disabled: disabled, children: CHAT_FEEDBACK_DEFAULTS.retryLabel }))] }));
+}

package/dist/shared/checkbox/checkbox.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from '@fastsprout/reacd/adapter-runtime/components/checkbox/checkbox.js';
+export declare function SharedCheckbox({ label, checked, onCheckedChange, indeterminate, description, name, value, required, disabled, readOnly, }: CheckboxProps): import("react").JSX.Element;

package/dist/shared/checkbox/checkbox.adapter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { CHECKBOX_POLICY } from '@fastsprout/reacd/adapter-runtime/core/checkbox-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Checkbox } from '../primitives/checkbox.js';
+import { Label } from '../primitives/label.js';
+export function SharedCheckbox({ label, checked, onCheckedChange, indeterminate, description, name, value, required, disabled, readOnly, }) {
+    const id = useId();
+    const control = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata({ name, required, disabled }, description ? [`${id}-description`] : []);
+    const accepted = checked && !indeterminate;
+    const localError = attempted && metadata.required && !accepted ? CHECKBOX_POLICY.requiredMessage : '';
+    const feedback = metadata.error || localError;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(localError && !metadata.error ? [`${id}-error`] : []),
+    ];
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-checkbox", children: [_jsxs("div", { className: "reacd-check", children: [_jsx(Checkbox, { ref: control, id: id, checked: indeterminate ? 'indeterminate' : checked, disabled: metadata.disabled, "aria-readonly": readOnly || undefined, "aria-required": metadata.required || undefined, "aria-invalid": Boolean(feedback) || undefined, "aria-describedby": descriptions.join(' ') || undefined, onCheckedChange: (next) => {
+                            if (!metadata.disabled && !readOnly)
+                                onCheckedChange(next === true);
+                        } }), _jsx(Label, { htmlFor: id, children: label })] }), description && _jsx("p", { id: `${id}-description`, children: description }), localError && !metadata.error && (_jsx("p", { id: `${id}-error`, role: "alert", className: "reacd-field-error", children: localError })), _jsx("input", { type: "hidden", name: metadata.name, value: value ?? CHECKBOX_POLICY.submittedValue, disabled: metadata.disabled || !accepted }), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: metadata.required && !accepted, disabled: metadata.disabled, onInvalid: (event) => {
+                    event.preventDefault();
+                    setAttempted(true);
+                    control.current?.focus();
+                } })] }));
+}

package/dist/shared/checkbox-group/checkbox-group.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxGroupProps } from '@fastsprout/reacd/adapter-runtime/components/checkbox-group/index.js';
+export declare function SharedCheckboxGroup({ label, description, items, value, onValueChange, disabled, required, name, max, orientation, }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/shared/checkbox-group/checkbox-group.adapter.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChoiceMark } from '../primitives/choice-mark.js';
+import { useId } from 'react';
+import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Checkbox } from '@base-ui/react/checkbox';
+import { CheckIcon } from 'lucide-react';
+import { CHOICE_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/choice-policy.js';
+import { ChoiceHeader } from '@fastsprout/reacd/adapter-runtime/renderer/choice/choice-header.renderer.js';
+import { ChoiceText } from '@fastsprout/reacd/adapter-runtime/renderer/choice/choice-text.renderer.js';
+export function SharedCheckboxGroup({ label, description, items, value, onValueChange, disabled, required, name, max, orientation = CHOICE_DEFAULTS.orientation, }) {
+    const id = useId();
+    const firstEnabled = items.findIndex((item) => !item.disabled);
+    const described = description !== undefined || max !== undefined;
+    return (_jsxs(CheckboxGroup, { render: _jsx("fieldset", {}), className: "reacd-node reacd-choice-group", "data-slot": "checkbox-group", "aria-labelledby": id, "aria-describedby": described ? `${id}-description` : undefined, value: [...value], disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsx(ChoiceHeader, { id: id, label: label, description: description, required: required, max: max }), _jsx("div", { className: "reacd-choice-items", "data-orientation": orientation, children: items.map((item, index) => {
+                    const itemId = `${id}-${item.value}`;
+                    const limited = max !== undefined && value.length >= max && !value.includes(item.value);
+                    return (_jsxs("label", { className: "reacd-choice-item", children: [_jsx(Checkbox.Root, { render: _jsx(ChoiceMark, { appearance: "checkbox" }), value: item.value, name: name ?? id, disabled: item.disabled, required: required && value.length === 0 && index === firstEnabled, readOnly: limited, "aria-disabled": limited || undefined, className: "reacd-choice-control reacd-choice-checkbox", "data-slot": "checkbox", "aria-labelledby": itemId, "aria-describedby": item.description === undefined ? undefined : `${itemId}-description`, children: _jsx(Checkbox.Indicator, { className: "reacd-choice-indicator", children: _jsx(CheckIcon, { className: "reacd-choice-check", "aria-hidden": "true" }) }) }), _jsx(ChoiceText, { id: itemId, label: item.label, description: item.description })] }, item.value));
+                }) })] }));
+}

package/dist/shared/chip/chip.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ChipProps } from '@fastsprout/reacd/adapter-runtime/components/chip/chip.js';
+export declare function SharedChip({ label, text, children, intent, size, corner, inset, standalone, show, }: ChipProps): import("react").JSX.Element;

package/dist/shared/chip/chip.adapter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHIP_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/chip-policy.js';
+import { Badge } from '../primitives/badge.js';
+const VARIANTS = {
+    primary: 'default',
+    secondary: 'secondary',
+    danger: 'destructive',
+};
+export function SharedChip({ label, text, children, intent = CHIP_DEFAULTS.intent, size = CHIP_DEFAULTS.size, corner = CHIP_DEFAULTS.corner, inset = CHIP_DEFAULTS.inset, standalone = CHIP_DEFAULTS.standalone, show = CHIP_DEFAULTS.show, }) {
+    const identity = text === undefined ? label : `${label}: ${text}`;
+    return (_jsxs("div", { className: "reacd-node reacd-chip", "data-slot": "chip", "data-size": size, "data-corner": corner, "data-inset": inset, "data-standalone": standalone, children: [!standalone && _jsx("div", { className: "reacd-chip-body", children: children }), show && (_jsx(Badge, { className: "reacd-chip-indicator", variant: VARIANTS[intent], "data-dot": text === undefined, "data-intent": intent, role: "img", "aria-label": identity, title: identity, children: text !== undefined && _jsx("span", { className: "reacd-chip-text", children: text }) }))] }));
+}

package/dist/shared/code-editor/code-editor.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { CodeEditorProps } from '@fastsprout/reacd/adapter-runtime/components/code-editor/code-editor.js';
+export declare function SharedCodeEditor({ label, value, onValueChange }: CodeEditorProps): import("react").JSX.Element;

package/dist/shared/code-editor/code-editor.adapter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CONTENT_POLICY, DOCUMENT_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { Textarea } from '../primitives/textarea.js';
+import { Label } from '../primitives/label.js';
+export function SharedCodeEditor({ label, value, onValueChange }) {
+    const id = useId();
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-code-editor", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Textarea, { id: id, value: value, spellCheck: false, rows: CONTENT_POLICY.codeEditorRows, maxLength: DOCUMENT_POLICY.maxCharacters, onChange: (event) => onValueChange(event.target.value) })] }));
+}

package/dist/shared/collapsible/collapsible.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { CollapsibleProps } from '@fastsprout/reacd/adapter-runtime/components/collapsible/collapsible.js';
+export declare function SharedCollapsible({ label, open, onOpenChange, children, disabled, showTrigger, retainContent, }: CollapsibleProps): import("react").JSX.Element;

package/dist/shared/collapsible/collapsible.adapter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Collapsible as Primitive } from '@base-ui/react/collapsible';
+import { ChevronDownIcon } from 'lucide-react';
+import { COLLAPSIBLE_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/collapsible-policy.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Button } from '../primitives/button.js';
+export function SharedCollapsible({ label, open, onOpenChange, children, disabled, showTrigger = COLLAPSIBLE_DEFAULTS.showTrigger, retainContent = COLLAPSIBLE_DEFAULTS.retainContent, }) {
+    const ancestorActive = useContext(PortalActiveContext);
+    return (_jsxs(Primitive.Root, { className: "reacd-node reacd-collapsible", "data-slot": "collapsible", open: open, disabled: disabled, onOpenChange: (next) => onOpenChange(next), children: [showTrigger && (_jsxs(Primitive.Trigger, { "data-slot": "collapsible-trigger", className: "reacd-node reacd-collapsible-trigger", render: _jsx(Button, { variant: "outline" }), children: [_jsx("span", { children: label }), _jsx(ChevronDownIcon, { "aria-hidden": "true" })] })), _jsx(Primitive.Panel, { "data-slot": "collapsible-content", className: "reacd-collapsible-panel", keepMounted: retainContent, hidden: !open, role: "region", "aria-label": label, children: _jsx(PortalActiveContext.Provider, { value: open && ancestorActive, children: children }) })] }));
+}

package/dist/shared/color-mode-avatar/color-mode-avatar.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorModeAvatarProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-avatar/index.js';
+export declare function SharedColorModeAvatar({ mode, light, dark, ...properties }: ColorModeAvatarProps): import("react").JSX.Element;

package/dist/shared/color-mode-avatar/color-mode-avatar.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SharedAvatar } from '../avatar/avatar.adapter.js';
+export function SharedColorModeAvatar({ mode, light, dark, ...properties }) {
+    const source = mode === 'light' ? light : dark;
+    return _jsx(SharedAvatar, { ...properties, src: source }, source);
+}

package/dist/shared/color-mode-button/color-mode-button.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorModeButtonProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-button/index.js';
+export declare function SharedColorModeButton({ label, value: _value, resolvedMode, onValueChange, disabled, readOnly, description, }: ColorModeButtonProps): import("react").JSX.Element;

package/dist/shared/color-mode-button/color-mode-button.adapter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { oppositeColorMode } from '@fastsprout/reacd/adapter-runtime/core/color-mode.js';
+import { Button } from '../primitives/button.js';
+export function SharedColorModeButton({ label, value: _value, resolvedMode, onValueChange, disabled, readOnly, description, }) {
+    const id = useId();
+    return (_jsxs("div", { className: "reacd-node reacd-field", children: [_jsx(Button, { type: "button", variant: "outline", disabled: disabled, "aria-pressed": resolvedMode === 'dark', "aria-disabled": readOnly || undefined, "aria-describedby": description === undefined ? undefined : id, className: "reacd-color-mode-button", onClick: () => {
+                    if (!readOnly)
+                        onValueChange(oppositeColorMode(resolvedMode));
+                }, children: label }), description === undefined ? null : _jsx("p", { id: id, children: description })] }));
+}

package/dist/shared/color-mode-image/color-mode-image.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorModeImageProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-image/index.js';
+export declare function SharedColorModeImage({ mode, light, dark, ...properties }: ColorModeImageProps): import("react").JSX.Element;

package/dist/shared/color-mode-image/color-mode-image.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModeImage } from './mode-image.js';
+export function SharedColorModeImage({ mode, light, dark, ...properties }) {
+    const source = mode === 'light' ? light : dark;
+    return _jsx(ModeImage, { ...properties, src: source }, source);
+}

package/dist/shared/color-mode-image/mode-image.d.ts

@@ -0,0 +1,4 @@
+import type { ColorModeImageProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-image/index.js';
+export declare function ModeImage({ src, alt, aspect, }: Pick<ColorModeImageProps, 'alt' | 'aspect'> & {
+    src: string;
+}): import("react").JSX.Element;

package/dist/shared/color-mode-image/mode-image.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { COLOR_MODE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/color-mode-policy.js';
+export function ModeImage({ src, alt, aspect = COLOR_MODE_POLICY.defaultAspect, }) {
+    const [status, setStatus] = useState('loading');
+    const dimensions = COLOR_MODE_POLICY.imageAspects[aspect];
+    return (_jsx("div", { className: "reacd-node reacd-color-mode-image", role: "img", "aria-label": alt, "aria-busy": status === 'loading' || undefined, "data-status": status, style: { aspectRatio: dimensions.width / dimensions.height }, children: status === 'error' ? (_jsxs("span", { children: [COLOR_MODE_POLICY.imageFallback, ": ", alt] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: src, alt: "", width: dimensions.width, height: dimensions.height, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer", onLoad: () => setStatus('ready'), onError: () => setStatus('error') }), status === 'loading' && _jsx("span", { "aria-hidden": "true", children: alt })] })) }));
+}

package/dist/shared/color-mode-select/color-mode-select.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorModeSelectProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-select/index.js';
+export declare function SharedColorModeSelect({ label, value, resolvedMode: _resolved, onValueChange, disabled, readOnly, description, labels, }: ColorModeSelectProps): import("react").JSX.Element;

package/dist/shared/color-mode-select/color-mode-select.adapter.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { COLOR_MODES, COLOR_MODE_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/color-mode-policy.js';
+import { colorModeValueSchema } from '@fastsprout/reacd/adapter-runtime/schema/color-mode/color-mode.schema.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Select, SelectItem, SelectTrigger, SelectValue, } from '../primitives/select.js';
+import { Label } from '../primitives/label.js';
+import { SharedSelectContent } from '../select/select-content.adapter.js';
+export function SharedColorModeSelect({ label, value, resolvedMode: _resolved, onValueChange, disabled, readOnly, description, labels = COLOR_MODE_POLICY.labels, }) {
+    const id = useId();
+    const active = useContext(PortalActiveContext);
+    return (_jsxs("div", { className: "reacd-node reacd-field", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(Select, { value: value, disabled: disabled, ...(active ? {} : { open: false }), onValueChange: (next) => {
+                    if (!readOnly)
+                        onValueChange(colorModeValueSchema.parse(next));
+                }, children: [_jsx(SelectTrigger, { id: id, className: "reacd-color-mode-select", "aria-readonly": readOnly || undefined, "aria-describedby": description === undefined ? undefined : `${id}-help`, children: _jsx(SelectValue, { children: labels[value] }) }), _jsx(SharedSelectContent, { children: COLOR_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: labels[mode] }, mode))) })] }, active ? 'active' : 'inactive'), description === undefined ? null : _jsx("p", { id: `${id}-help`, children: description })] }));
+}

package/dist/shared/color-mode-switch/color-mode-switch.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorModeSwitchProps } from '@fastsprout/reacd/adapter-runtime/components/color-mode-switch/index.js';
+export declare function SharedColorModeSwitch({ value: _value, resolvedMode, onValueChange, ...properties }: ColorModeSwitchProps): import("react").JSX.Element;

package/dist/shared/color-mode-switch/color-mode-switch.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SharedSwitch } from '../switch/switch.adapter.js';
+export function SharedColorModeSwitch({ value: _value, resolvedMode, onValueChange, ...properties }) {
+    return (_jsx(SharedSwitch, { ...properties, checked: resolvedMode === 'dark', onCheckedChange: (checked) => onValueChange(checked ? 'dark' : 'light') }));
+}

package/dist/shared/color-picker/color-hex.d.ts

@@ -0,0 +1,11 @@
+import type { ColorMode } from '@fastsprout/reacd/adapter-runtime/schema/color-picker/index.js';
+interface ColorHexProps {
+    readonly label: string;
+    readonly value: string;
+    readonly mode: ColorMode;
+    readonly disabled: boolean;
+    readonly readOnly: boolean;
+    readonly onValueChange: (value: string) => void;
+}
+export declare function ColorHex(props: ColorHexProps): import("react").JSX.Element;
+export {};

package/dist/shared/color-picker/color-hex.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { COLOR_HEX_PATTERNS, COLOR_PICKER_POLICY as P, } from '@fastsprout/reacd/adapter-runtime/core/color-picker-policy.js';
+import { colorValueSchema } from '@fastsprout/reacd/adapter-runtime/schema/color-picker/index.js';
+import { Input } from '../primitives/input.js';
+export function ColorHex(props) {
+    const id = useId();
+    const input = useRef(null);
+    const [local, setLocal] = useState({
+        source: props.value,
+        draft: props.value,
+        invalid: false,
+    });
+    const current = local.source === props.value
+        ? local
+        : {
+            source: props.value,
+            draft: props.value,
+            invalid: false,
+        };
+    function reset() {
+        setLocal({ source: props.value, draft: props.value, invalid: false });
+    }
+    function commit() {
+        if (props.disabled || props.readOnly)
+            return;
+        const canonical = current.draft.toLowerCase();
+        if (!colorValueSchema(props.mode).safeParse(canonical).success) {
+            setLocal({ ...current, invalid: true });
+            return;
+        }
+        reset();
+        if (canonical !== props.value)
+            props.onValueChange(canonical);
+    }
+    return (_jsxs("div", { className: "reacd-field", children: [_jsxs("label", { htmlFor: id, children: [props.label, " hexadecimal"] }), _jsx(Input, { id: id, ref: input, type: "text", value: current.draft, disabled: props.disabled, readOnly: props.readOnly, spellCheck: false, maxLength: props.mode === 'rgb' ? P.rgbLength : P.rgbaLength, pattern: COLOR_HEX_PATTERNS[props.mode], required: true, "aria-invalid": current.invalid || undefined, "aria-describedby": `${id}-help`, onChange: (event) => {
+                    if (!props.disabled && !props.readOnly)
+                        setLocal({
+                            source: props.value,
+                            draft: event.target.value,
+                            invalid: false,
+                        });
+                }, onBlur: commit, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        commit();
+                    }
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        reset();
+                    }
+                }, onInvalid: (event) => {
+                    event.preventDefault();
+                    setLocal({ ...current, invalid: true });
+                    input.current?.focus();
+                } }), _jsx("p", { id: `${id}-help`, role: current.invalid ? 'alert' : undefined, className: "reacd-color-feedback", children: P.invalidHex })] }));
+}

package/dist/shared/color-picker/color-picker.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ColorPickerProps } from '@fastsprout/reacd/adapter-runtime/components/color-picker/index.js';
+export declare function SharedColorPicker(props: ColorPickerProps): import("react").JSX.Element;

package/dist/shared/color-picker/color-picker.adapter.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useDirection } from '@radix-ui/react-direction';
+import { I18nProvider } from 'react-aria-components/I18nProvider';
+import { ColorArea, ColorThumb } from 'react-aria-components/ColorArea';
+import { ColorSlider, SliderTrack } from 'react-aria-components/ColorSlider';
+import { parseColor } from 'react-aria-components/ColorPicker';
+import { COLOR_PICKER_POLICY as P } from '@fastsprout/reacd/adapter-runtime/core/color-picker-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Button } from '../primitives/button.js';
+import { useColorModel } from './use-color-model.js';
+import { ColorHex } from './color-hex.js';
+export function SharedColorPicker(props) {
+    const id = useId();
+    const direction = useDirection();
+    const metadata = useFieldMetadata(props, props.description ? [`${id}-help`] : []);
+    const blocked = metadata.disabled || Boolean(props.readOnly);
+    const { color, change } = useColorModel(props.value, props.mode, blocked, props.onValueChange);
+    return (_jsx(I18nProvider, { locale: direction === 'rtl' ? P.rtlLocale : P.ltrLocale, children: _jsxs("div", { className: "reacd-node reacd-field reacd-color-picker", dir: direction, role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": metadata.descriptionIds.join(' ') || undefined, "aria-invalid": Boolean(metadata.error) || undefined, "aria-disabled": metadata.disabled || undefined, children: [_jsx("span", { id: `${id}-label`, children: props.label }), props.description && _jsx("p", { id: `${id}-help`, children: props.description }), _jsx(ColorArea, { form: `${id}-channels`, className: "reacd-color-area", "aria-label": `${props.label} color area`, colorSpace: "hsb", xChannel: "saturation", yChannel: "brightness", value: color, onChange: change, isDisabled: blocked, children: _jsx(ColorThumb, { className: "reacd-color-thumb" }) }), _jsxs("span", { children: [props.label, " hue"] }), _jsx(ColorSlider, { form: `${id}-channels`, "aria-label": `${props.label} hue`, value: color, onChange: change, colorSpace: "hsb", channel: "hue", isDisabled: blocked, className: "reacd-color-slider", children: _jsx(SliderTrack, { className: "reacd-color-track", children: _jsx(ColorThumb, { className: "reacd-color-thumb" }) }) }), props.mode === 'rgba' && (_jsxs(_Fragment, { children: [_jsxs("span", { children: [props.label, " alpha"] }), _jsx(ColorSlider, { form: `${id}-channels`, "aria-label": `${props.label} alpha`, value: color, onChange: change, channel: "alpha", isDisabled: blocked, className: "reacd-color-slider", children: _jsx(SliderTrack, { className: "reacd-color-track", children: _jsx(ColorThumb, { className: "reacd-color-thumb" }) }) })] })), _jsx(ColorHex, { label: props.label, value: props.value, mode: props.mode, onValueChange: props.onValueChange, disabled: metadata.disabled, readOnly: Boolean(props.readOnly) }), props.presets && (_jsx("div", { className: "reacd-color-presets", children: props.presets.map((preset) => (_jsxs(Button, { type: "button", className: "reacd-button", "aria-pressed": preset.value === props.value, disabled: blocked, onClick: () => change(parseColor(preset.value)), children: [_jsx("span", { className: "reacd-color-swatch", "aria-hidden": "true", style: { backgroundColor: preset.value } }), preset.label] }, preset.value))) })), metadata.name && !metadata.disabled && (_jsx("input", { type: "hidden", name: metadata.name, value: props.value }))] }) }));
+}

package/dist/shared/color-picker/use-color-model.d.ts

@@ -0,0 +1,6 @@
+import type { Color } from 'react-aria-components/ColorPicker';
+import type { ColorMode } from '@fastsprout/reacd/adapter-runtime/schema/color-picker/index.js';
+export declare function useColorModel(value: string, mode: ColorMode, blocked: boolean, onValueChange: (value: string) => void): {
+    color: Color;
+    change: (next: Color) => void;
+};

package/dist/shared/color-picker/use-color-model.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { parseColor } from 'react-aria-components/ColorPicker';
+export function useColorModel(value, mode, blocked, onValueChange) {
+    const [local, setLocal] = useState(() => ({
+        source: value,
+        color: parseColor(value).toFormat('hsb'),
+    }));
+    const color = local.source === value ? local.color : parseColor(value).toFormat('hsb');
+    function change(next) {
+        if (blocked)
+            return;
+        const canonical = next.toString(mode === 'rgb' ? 'hex' : 'hexa').toLowerCase();
+        setLocal({ source: canonical, color: next.toFormat('hsb') });
+        if (canonical !== value)
+            onValueChange(canonical);
+    }
+    return { color, change };
+}

package/dist/shared/command-palette/command-palette.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { CommandPaletteProps } from '@fastsprout/reacd/adapter-runtime/components/command-palette/index.js';
+export declare function SharedCommandPalette({ label, query, onQueryChange, groups, onSelect, disabled, filtering, status, emptyMessage, loadingMessage, errorMessage, }: CommandPaletteProps): import("react").JSX.Element;

package/dist/shared/command-palette/command-palette.adapter.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { COMMAND_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/command-policy.js';
+import { filterCommandGroups } from '@fastsprout/reacd/adapter-runtime/core/command-search.js';
+import { followHref } from '@fastsprout/reacd/adapter-runtime/renderer/navigation/native-navigation.js';
+import { Input } from '../primitives/input.js';
+export function SharedCommandPalette({ label, query, onQueryChange, groups, onSelect, disabled, filtering = COMMAND_DEFAULTS.filtering, status = COMMAND_DEFAULTS.status, emptyMessage = COMMAND_DEFAULTS.emptyMessage, loadingMessage = COMMAND_DEFAULTS.loadingMessage, errorMessage = COMMAND_DEFAULTS.errorMessage, }) {
+    const id = useId();
+    const [selectionFailure, setSelectionFailure] = useState(false);
+    const visible = filterCommandGroups(groups, query, filtering);
+    const keys = visible.flatMap((group) => group.items.map((item) => item.key));
+    function select(item) {
+        const href = item.href;
+        const action = item.onPress;
+        const accepted = onSelect?.(item.key);
+        if (accepted === false)
+            return;
+        if (accepted !== undefined && accepted !== true) {
+            setSelectionFailure(true);
+            return;
+        }
+        setSelectionFailure(false);
+        if (action !== undefined)
+            action();
+        else if (href !== undefined)
+            followHref(href);
+    }
+    return (_jsx("section", { className: "reacd-node reacd-command-palette", "aria-label": label, children: _jsxs(Autocomplete.Root, { inline: true, open: true, mode: "none", autoHighlight: "always", items: keys, value: query, disabled: disabled, onValueChange: (value) => {
+                setSelectionFailure(false);
+                onQueryChange(value);
+            }, children: [_jsx("label", { htmlFor: id, children: label }), _jsx(Autocomplete.Input, { id: id, onKeyDownCapture: (event) => {
+                        if (event.key === 'Enter' && event.nativeEvent.isComposing) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                    }, className: "reacd-node reacd-input", "aria-describedby": `${id}-status`, render: _jsx(Input, {}) }), selectionFailure && _jsx("p", { role: "alert", children: COMMAND_DEFAULTS.invalidSelection }), _jsx("p", { id: `${id}-status`, role: status === 'error' ? 'alert' : 'status', children: status === 'loading'
+                        ? loadingMessage
+                        : status === 'error'
+                            ? errorMessage
+                            : keys.length === 0
+                                ? emptyMessage
+                                : `${keys.length} commands available.` }), _jsx(Autocomplete.List, { className: "reacd-command-list", "aria-label": label, "aria-busy": status === 'loading', children: visible.map((group) => (_jsxs(Autocomplete.Group, { className: "reacd-command-group", children: [_jsx(Autocomplete.GroupLabel, { children: group.label }), group.items.map((item) => (_jsxs(Autocomplete.Item, { value: item.key, className: "reacd-command-item", disabled: item.disabled || status !== 'ready', onClick: () => select(item), children: [_jsx("span", { children: item.label }), item.description !== undefined && (_jsx("span", { className: "reacd-command-description", children: item.description }))] }, item.key)))] }, group.key))) })] }) }));
+}

package/dist/shared/container/container.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContainerProps } from '@fastsprout/reacd/adapter-runtime/components/container/container.js';
+export declare function SharedContainer({ children }: ContainerProps): import("react").JSX.Element;

package/dist/shared/container/container.adapter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SharedContainer({ children }) {
+    return _jsx("div", { className: "reacd-node reacd-container", children: children });
+}

package/dist/shared/content-navigation/content-navigation.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContentNavigationProps } from '@fastsprout/reacd/adapter-runtime/components/content-navigation/index.js';
+export declare function SharedContentNavigation({ label, items, emptyLabel, ...properties }: ContentNavigationProps): import("react").JSX.Element;

package/dist/shared/content-navigation/content-navigation.adapter.js

@@ -0,0 +1,10 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CONTENT_OUTLINE_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/content-outline.js';
+import { TREE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/tree-policy.js';
+import { OutlineBranch } from '@fastsprout/reacd/adapter-runtime/renderer/content-outline/outline-branch.js';
+export function SharedContentNavigation({ label, items, emptyLabel = CONTENT_OUTLINE_DEFAULTS.emptyLabel, ...properties }) {
+    const [issue, setIssue] = useState('');
+    return (_jsxs("nav", { className: "reacd-node reacd-content-outline", "aria-label": label, children: [issue !== '' && _jsx("p", { role: "alert", children: issue }), items.length === 0 ? (_jsx("p", { children: emptyLabel })) : (_jsx("ul", { children: items.map((item) => (_createElement(OutlineBranch, { ...properties, key: item.key, item: item, mode: "navigation", level: TREE_POLICY.initialLevel, report: setIssue }))) }))] }));
+}

package/dist/shared/content-search/content-search.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContentSearchProps } from '@fastsprout/reacd/adapter-runtime/components/content-search/index.js';
+export declare function SharedContentSearch({ title, description, open, onOpenChange, triggerLabel, closeLabel, closeOnSelect, footer, onSelect, emptyMessage, ...palette }: ContentSearchProps): import("react").JSX.Element;

package/dist/shared/content-search/content-search.adapter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CommandPalette } from '@fastsprout/reacd/adapter-runtime/components/command-palette/index.js';
+import { Modal } from '@fastsprout/reacd/adapter-runtime/components/modal/modal.js';
+import { CONTENT_SEARCH_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/content-search-policy.js';
+import { Issues } from '@fastsprout/reacd/adapter-runtime/renderer/issues/issues.renderer.js';
+export function SharedContentSearch({ title, description = CONTENT_SEARCH_DEFAULTS.description, open, onOpenChange, triggerLabel, closeLabel = CONTENT_SEARCH_DEFAULTS.closeLabel, closeOnSelect = CONTENT_SEARCH_DEFAULTS.closeOnSelect, footer, onSelect, emptyMessage = CONTENT_SEARCH_DEFAULTS.emptyMessage, ...palette }) {
+    const [invalid, setInvalid] = useState(false);
+    return (_jsxs(Modal, { title: title, description: description, open: open, onOpenChange: onOpenChange, triggerLabel: triggerLabel, closeLabel: closeLabel, disabled: palette.disabled, retainContent: CONTENT_SEARCH_DEFAULTS.retainContent, footer: footer, children: [invalid && (_jsx(Issues, { issues: [
+                    {
+                        path: 'selection',
+                        message: CONTENT_SEARCH_DEFAULTS.invalidSelection,
+                    },
+                ] })), _jsx(CommandPalette, { ...palette, emptyMessage: emptyMessage, onSelect: (key) => {
+                    const decision = onSelect?.(key);
+                    if (decision !== undefined && typeof decision !== 'boolean') {
+                        setInvalid(true);
+                        return false;
+                    }
+                    setInvalid(false);
+                    if (decision === false)
+                        return false;
+                    if (closeOnSelect)
+                        onOpenChange(false);
+                    return true;
+                } })] }));
+}

package/dist/shared/content-search-button/content-search-button.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContentSearchButtonProps } from '@fastsprout/reacd/adapter-runtime/components/content-search-button/index.js';
+export declare function SharedContentSearchButton({ label, open, onOpenChange, disabled, }: ContentSearchButtonProps): import("react").JSX.Element;

package/dist/shared/content-search-button/content-search-button.adapter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CONTENT_SEARCH_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/content-search-policy.js';
+import { Button } from '../primitives/button.js';
+export function SharedContentSearchButton({ label = CONTENT_SEARCH_DEFAULTS.buttonLabel, open, onOpenChange, disabled, }) {
+    return (_jsx(Button, { className: "reacd-node reacd-button reacd-search-button", type: "button", variant: "outline", "aria-haspopup": "dialog", "aria-expanded": open, disabled: disabled, onClick: () => onOpenChange(true), children: label }));
+}

package/dist/shared/content-surround/content-surround.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContentSurroundProps } from '@fastsprout/reacd/adapter-runtime/components/content-surround/index.js';
+export declare function SharedContentSurround({ label, emptyLabel, previous, next, }: ContentSurroundProps): import("react").JSX.Element;

package/dist/shared/content-surround/content-surround.adapter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CONTENT_SURROUND_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/content-surround-policy.js';
+export function SharedContentSurround({ label = CONTENT_SURROUND_DEFAULTS.label, emptyLabel = CONTENT_SURROUND_DEFAULTS.emptyLabel, previous, next, }) {
+    const id = useId();
+    return (_jsx("nav", { className: "reacd-node reacd-content-surround", "aria-label": label, children: previous === undefined && next === undefined ? (_jsx("p", { children: emptyLabel })) : ([previous, next].map((neighbor, index) => {
+            if (neighbor === undefined)
+                return null;
+            const prefix = index === 0
+                ? CONTENT_SURROUND_DEFAULTS.previousLabel
+                : CONTENT_SURROUND_DEFAULTS.nextLabel;
+            return (_jsxs("a", { className: "reacd-node reacd-surround-link", href: neighbor.href, "aria-label": `${prefix} ${neighbor.title}`, "aria-describedby": neighbor.description === undefined ? undefined : `${id}-${index}`, target: neighbor.newWindow ? '_blank' : undefined, rel: neighbor.newWindow ? 'noopener noreferrer' : undefined, children: [_jsx("span", { className: "reacd-surround-direction", children: prefix }), _jsx("span", { className: "reacd-surround-title", children: neighbor.title }), neighbor.description !== undefined && (_jsx("span", { id: `${id}-${index}`, children: neighbor.description }))] }, index));
+        })) }));
+}

package/dist/shared/content-toc/content-toc.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContentTocProps } from '@fastsprout/reacd/adapter-runtime/components/content-toc/index.js';
+export declare function SharedContentToc({ label, items, emptyLabel, ...properties }: ContentTocProps): import("react").JSX.Element;

package/dist/shared/content-toc/content-toc.adapter.js

@@ -0,0 +1,10 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CONTENT_OUTLINE_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/content-outline.js';
+import { TREE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/tree-policy.js';
+import { OutlineBranch } from '@fastsprout/reacd/adapter-runtime/renderer/content-outline/outline-branch.js';
+export function SharedContentToc({ label, items, emptyLabel = CONTENT_OUTLINE_DEFAULTS.emptyLabel, ...properties }) {
+    const [issue, setIssue] = useState('');
+    return (_jsxs("nav", { className: "reacd-node reacd-content-outline", "aria-label": label, children: [issue !== '' && _jsx("p", { role: "alert", children: issue }), items.length === 0 ? (_jsx("p", { children: emptyLabel })) : (_jsx("ul", { children: items.map((item) => (_createElement(OutlineBranch, { ...properties, key: item.key, item: item, mode: "toc", level: TREE_POLICY.initialLevel, report: setIssue }))) }))] }));
+}

package/dist/shared/context-menu/context-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ContextMenuProps } from '@fastsprout/reacd/adapter-runtime/components/context-menu/index.js';
+export declare function SharedContextMenu(properties: ContextMenuProps): import("react").JSX.Element;

package/dist/shared/context-menu/context-menu.adapter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { openKeyboardContextMenu } from './keyboard-trigger.js';
+import { ContextMenu } from '@base-ui/react/context-menu';
+import { EscapeScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-context.js';
+import { useMenuFrame } from '../action-menu/use-menu-frame.js';
+import { MenuItems } from '../action-menu/menu-items.js';
+import { MenuSurface } from '../action-menu/menu-surface.js';
+import { MenuContent } from '../action-menu/menu-content.js';
+export function SharedContextMenu(properties) {
+    const { label, items, disabled, children, onOpenChange } = properties;
+    const { active, scope, change } = useMenuFrame(properties);
+    return (_jsxs(ContextMenu.Root, { open: active, onOpenChange: change, disabled: disabled, children: [_jsx(ContextMenu.Trigger, { tabIndex: disabled ? undefined : 0, onKeyDown: disabled ? undefined : openKeyboardContextMenu, onTouchEnd: (event) => {
+                    // Suppress the opening gesture's compatibility click.
+                    if (active)
+                        event.preventDefault();
+                }, role: "group", "aria-label": label, "aria-disabled": disabled, className: "reacd-node reacd-context-trigger", children: children ?? label }), _jsx(MenuSurface, { label: label, context: true, children: _jsx(EscapeScopeContext.Provider, { value: scope, children: _jsx(MenuContent, { close: () => onOpenChange(false), children: _jsx(MenuItems, { items: items }) }) }) })] }));
+}

package/dist/shared/context-menu/keyboard-trigger.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent } from 'react';
+export declare function openKeyboardContextMenu(event: KeyboardEvent<HTMLElement>): void;