@liberation-data/desk 0.1.0

package/dist/react/context.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode, RefObject } from 'react';
+import type { Bus } from '../core/events.js';
+import type { Desk } from '../core/desk.js';
+import type { DeskOptions, DeskState, WindowId } from '../core/types.js';
+/** Every desk comes with a bus; <BusProvider> only matters when one has to be shared or supplied. */
+export declare const BusContext: import("react").Context<Bus | null>;
+export interface DeskProviderProps {
+    /** An existing desk, e.g. one a tour runner or router also drives. */
+    readonly desk?: Desk;
+    /** Used to create a desk when none is given. Read once. */
+    readonly options?: DeskOptions;
+    readonly children: ReactNode;
+}
+export declare function DeskProvider({ desk, options, children }: DeskProviderProps): import("react").JSX.Element;
+export declare function useDesk(): Desk;
+export declare function useDeskState(): DeskState;
+export interface WindowContextValue {
+    readonly id: WindowId;
+    readonly element: RefObject<HTMLElement | null>;
+}
+/** Present inside a window's content: which window this is, and its element. */
+export declare const WindowContext: import("react").Context<WindowContextValue | null>;
+/** The id of the window this component is rendered in, or null outside any window. */
+export declare const useWindowId: () => WindowId | null;
+//# sourceMappingURL=context.d.ts.map

package/dist/react/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/react/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAIxE,qGAAqG;AACrG,eAAO,MAAM,UAAU,qCAAkC,CAAA;AAEzD,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAU1E;AAED,wBAAgB,OAAO,IAAI,IAAI,CAI9B;AAED,wBAAgB,YAAY,IAAI,SAAS,CAGxC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAA;IACrB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChD;AAED,gFAAgF;AAChF,eAAO,MAAM,aAAa,oDAAiD,CAAA;AAE3E,sFAAsF;AACtF,eAAO,MAAM,WAAW,QAAO,QAAQ,GAAG,IAA6C,CAAA"}

package/dist/react/context.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useSyncExternalStore } from 'react';
+import { createBus } from '../core/events.js';
+import { createDesk } from '../core/desk.js';
+import { DragProvider } from './dragContext.js';
+const DeskContext = createContext(null);
+/** Every desk comes with a bus; <BusProvider> only matters when one has to be shared or supplied. */
+export const BusContext = createContext(null);
+export function DeskProvider({ desk, options, children }) {
+    const [value] = useState(() => desk ?? createDesk(options));
+    const [bus] = useState(createBus);
+    return (_jsx(DeskContext.Provider, { value: value, children: _jsx(BusContext.Provider, { value: bus, children: _jsx(DragProvider, { children: children }) }) }));
+}
+export function useDesk() {
+    const desk = useContext(DeskContext);
+    if (!desk)
+        throw new Error('useDesk must be used inside a <DeskProvider>');
+    return desk;
+}
+export function useDeskState() {
+    const desk = useDesk();
+    return useSyncExternalStore(desk.subscribe, desk.getState, desk.getState);
+}
+/** Present inside a window's content: which window this is, and its element. */
+export const WindowContext = createContext(null);
+/** The id of the window this component is rendered in, or null outside any window. */
+export const useWindowId = () => useContext(WindowContext)?.id ?? null;
+//# sourceMappingURL=context.js.map

package/dist/react/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/react/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI/C,MAAM,WAAW,GAAG,aAAa,CAAc,IAAI,CAAC,CAAA;AAEpD,qGAAqG;AACrG,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAa,IAAI,CAAC,CAAA;AAUzD,MAAM,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAqB;IACzE,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAA;IAC3D,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;IACjC,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAC7B,KAAC,YAAY,cAAE,QAAQ,GAAgB,GACnB,GACD,CACxB,CAAA;AACH,CAAC;AAED,MAAM,UAAU,OAAO;IACrB,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,IAAI,CAAC,IAAI;QAAE,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;IAC1E,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,OAAO,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;AAC3E,CAAC;AAOD,gFAAgF;AAChF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAA;AAE3E,sFAAsF;AACtF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAoB,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,EAAE,IAAI,IAAI,CAAA"}

package/dist/react/controls.d.ts

@@ -0,0 +1,111 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+export type ButtonIntent = 'normal' | 'default' | 'quiet' | 'destructive';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `default` is the one action a view leads with, and the one Return performs. One per view. */
+    readonly intent?: ButtonIntent;
+    readonly size?: 'regular' | 'small';
+    /** Before the label. Decorative: an icon-only button still needs `aria-label`. */
+    readonly icon?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SegmentedOption<T extends string> {
+    readonly value: T;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface SegmentedControlProps<T extends string> {
+    /** Two to five options, all worth seeing at once. More than that wants a pop-up menu. */
+    readonly options: readonly SegmentedOption<T>[];
+    readonly value: T;
+    readonly onChange: (value: T) => void;
+    /** The accessible name for the group, e.g. "Filter rides by bike". */
+    readonly label: string;
+    readonly size?: 'regular' | 'small';
+    readonly disabled?: boolean;
+}
+export declare function SegmentedControl<T extends string>({ options, value, onChange, label, size, disabled }: SegmentedControlProps<T>): import("react").JSX.Element;
+export interface ToggleProps {
+    readonly checked: boolean;
+    readonly onChange: (checked: boolean) => void;
+    /** Shown beside the switch. Use `label` alone, or `aria-label` when the context already names it. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly 'aria-label'?: string;
+}
+/** For a setting that takes effect immediately. One that waits for Save is a checkbox. */
+export declare function Toggle({ checked, onChange, label, description, disabled, 'aria-label': ariaLabel }: ToggleProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    readonly checked: boolean;
+    /** Some of the things this stands for are checked, and some are not. */
+    readonly indeterminate?: boolean;
+    readonly onChange: (checked: boolean) => void;
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly 'aria-label'?: string;
+}
+/** For a setting that waits for Save. One that applies at once is a Toggle. */
+export declare function Checkbox({ checked, indeterminate, onChange, label, description, disabled, 'aria-label': ariaLabel }: CheckboxProps): import("react").JSX.Element;
+export interface RadioOption<T extends string> {
+    readonly value: T;
+    readonly label: string;
+    readonly description?: string;
+    readonly disabled?: boolean;
+}
+export interface RadioGroupProps<T extends string> {
+    readonly options: readonly RadioOption<T>[];
+    readonly value: T | null;
+    readonly onChange: (value: T) => void;
+    readonly label: string;
+    readonly labelHidden?: boolean;
+    readonly disabled?: boolean;
+}
+/** Mutually exclusive choices that each need a line of explanation. */
+export declare function RadioGroup<T extends string>({ options, value, onChange, label, labelHidden, disabled }: RadioGroupProps<T>): import("react").JSX.Element;
+export interface ChoiceOption<T extends string> {
+    readonly value: T;
+    readonly label: string;
+    readonly description?: ReactNode;
+    /** Decorative, beside the label. */
+    readonly icon?: ReactNode;
+    /** A short aside after the label: a size, "needs a key". */
+    readonly tag?: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface ChoiceGroupProps<T extends string> {
+    readonly options: readonly ChoiceOption<T>[];
+    readonly value: T | null;
+    readonly onChange: (value: T) => void;
+    readonly label: string;
+    readonly labelHidden?: boolean;
+}
+/**
+ * The few choices a setup step turns on, as cards: bigger than a radio, smaller than a page.
+ * Native radios underneath, so the group is one tab stop and the arrow keys move the choice.
+ */
+export declare function ChoiceGroup<T extends string>({ options, value, onChange, label, labelHidden }: ChoiceGroupProps<T>): import("react").JSX.Element;
+export interface SliderProps {
+    readonly value: number;
+    readonly onChange: (value: number) => void;
+    readonly label: string;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly disabled?: boolean;
+    /** How the value reads to a person: `v => \`${v} psi\``. Shown beside the label and announced. */
+    readonly format?: (value: number) => string;
+}
+export declare function Slider({ value, onChange, label, min, max, step, disabled, format }: SliderProps): import("react").JSX.Element;
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'id'> {
+    /** Every field has a label. A placeholder is an example, never the label. */
+    readonly label: string;
+    /** Keep the label for assistive technology, hide it on screen — for a search field in a toolbar. */
+    readonly labelHidden?: boolean;
+    readonly help?: ReactNode;
+    /** What went wrong and how to fix it. Its presence marks the field invalid. */
+    readonly error?: ReactNode;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=controls.d.ts.map

package/dist/react/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/react/controls.tsx"],"names":[],"mappings":"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"}

package/dist/react/controls.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef } from 'react';
+export const Button = forwardRef(function Button({ intent = 'normal', size = 'regular', icon, children, type = 'button', className, ...rest }, ref) {
+    return (_jsxs("button", { ref: ref, type: type, className: ['desk-button', className].filter(Boolean).join(' '), "data-intent": intent, "data-size": size, "data-icon-only": !children || undefined, ...rest, children: [icon && _jsx("span", { className: "desk-button-icon", "aria-hidden": "true", children: icon }), children] }));
+});
+export function SegmentedControl({ options, value, onChange, label, size = 'regular', disabled }) {
+    const group = useRef(null);
+    const move = (event) => {
+        const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+        const delta = keys[event.key];
+        const usable = options.filter(o => !o.disabled);
+        if (!delta || !usable.length)
+            return;
+        event.preventDefault();
+        const at = usable.findIndex(o => o.value === value);
+        const next = usable[(at + delta + usable.length) % usable.length];
+        if (!next)
+            return;
+        onChange(next.value);
+        // Selection follows focus here, as it does in a segmented control on any platform.
+        group.current?.querySelector(`[data-value="${CSS.escape(next.value)}"]`)?.focus();
+    };
+    return (_jsx("div", { ref: group, role: "radiogroup", "aria-label": label, className: "desk-segmented", "data-size": size, onKeyDown: move, children: options.map(option => {
+            const selected = option.value === value;
+            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, "data-value": option.value, className: "desk-segment", tabIndex: selected ? 0 : -1, disabled: disabled || option.disabled, onClick: () => onChange(option.value), children: [option.icon && _jsx("span", { className: "desk-segment-icon", "aria-hidden": "true", children: option.icon }), option.label] }, option.value));
+        }) }));
+}
+/** For a setting that takes effect immediately. One that waits for Save is a checkbox. */
+export function Toggle({ checked, onChange, label, description, disabled, 'aria-label': ariaLabel }) {
+    const id = useId();
+    const descriptionId = description ? `${id}-description` : undefined;
+    const control = (_jsx("button", { type: "button", role: "switch", id: id, "aria-checked": checked, "aria-label": ariaLabel, "aria-describedby": descriptionId, className: "desk-toggle", disabled: disabled, onClick: () => onChange(!checked), children: _jsx("span", { className: "desk-toggle-knob", "aria-hidden": "true" }) }));
+    if (!label && !description)
+        return control;
+    return (_jsxs("div", { className: "desk-toggle-row", children: [_jsxs("span", { className: "desk-toggle-text", children: [label && _jsx("label", { htmlFor: id, className: "desk-label", children: label }), description && _jsx("span", { id: descriptionId, className: "desk-help", children: description })] }), control] }));
+}
+/** For a setting that waits for Save. One that applies at once is a Toggle. */
+export function Checkbox({ checked, indeterminate, onChange, label, description, disabled, 'aria-label': ariaLabel }) {
+    const id = useId();
+    const descriptionId = description ? `${id}-description` : undefined;
+    const box = useRef(null);
+    // Indeterminate is a property, not an attribute: it cannot be set in markup.
+    useEffect(() => {
+        if (box.current)
+            box.current.indeterminate = indeterminate ?? false;
+    }, [indeterminate]);
+    const input = (_jsx("input", { ref: box, id: id, type: "checkbox", className: "desk-checkbox", checked: checked, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": descriptionId, onChange: event => onChange(event.target.checked) }));
+    if (!label && !description)
+        return input;
+    return (_jsxs("div", { className: "desk-check-row", children: [input, _jsxs("span", { className: "desk-check-text", children: [label && _jsx("label", { htmlFor: id, className: "desk-check-label", children: label }), description && _jsx("span", { id: descriptionId, className: "desk-help", children: description })] })] }));
+}
+/** Mutually exclusive choices that each need a line of explanation. */
+export function RadioGroup({ options, value, onChange, label, labelHidden, disabled }) {
+    const name = useId();
+    return (_jsxs("fieldset", { className: "desk-radiogroup", disabled: disabled, children: [_jsx("legend", { className: "desk-label", "data-hidden": labelHidden || undefined, children: label }), options.map(option => {
+                const id = `${name}-${option.value}`;
+                return (_jsxs("div", { className: "desk-check-row", children: [_jsx("input", { id: id, type: "radio", name: name, className: "desk-radio", value: option.value, checked: option.value === value, disabled: option.disabled, "aria-describedby": option.description ? `${id}-description` : undefined, onChange: () => onChange(option.value) }), _jsxs("span", { className: "desk-check-text", children: [_jsx("label", { htmlFor: id, className: "desk-check-label", children: option.label }), option.description && _jsx("span", { id: `${id}-description`, className: "desk-help", children: option.description })] })] }, option.value));
+            })] }));
+}
+/**
+ * The few choices a setup step turns on, as cards: bigger than a radio, smaller than a page.
+ * Native radios underneath, so the group is one tab stop and the arrow keys move the choice.
+ */
+export function ChoiceGroup({ options, value, onChange, label, labelHidden }) {
+    const name = useId();
+    return (_jsxs("fieldset", { className: "desk-choices", children: [_jsx("legend", { className: "desk-label", "data-hidden": labelHidden || undefined, children: label }), options.map(option => {
+                const id = `${name}-${option.value}`;
+                const chosen = option.value === value;
+                return (_jsxs("label", { htmlFor: id, className: "desk-choice", "data-chosen": chosen || undefined, "data-disabled": option.disabled || undefined, children: [_jsx("input", { id: id, type: "radio", name: name, className: "desk-choice-input", value: option.value, checked: chosen, disabled: option.disabled, "aria-describedby": option.description ? `${id}-description` : undefined, onChange: () => onChange(option.value) }), _jsx("span", { className: "desk-choice-mark", "aria-hidden": "true" }), option.icon && _jsx("span", { className: "desk-choice-icon", "aria-hidden": "true", children: option.icon }), _jsxs("span", { className: "desk-choice-text", children: [_jsxs("span", { className: "desk-choice-label", children: [option.label, option.tag && _jsx("span", { className: "desk-choice-tag", children: option.tag })] }), option.description && _jsx("span", { id: `${id}-description`, className: "desk-help", children: option.description })] })] }, option.value));
+            })] }));
+}
+export function Slider({ value, onChange, label, min = 0, max = 100, step = 1, disabled, format }) {
+    const id = useId();
+    const shown = format ? format(value) : String(value);
+    return (_jsxs("div", { className: "desk-slider", children: [_jsxs("div", { className: "desk-slider-head", children: [_jsx("label", { htmlFor: id, className: "desk-label", children: label }), _jsx("output", { htmlFor: id, className: "desk-slider-value", children: shown })] }), _jsx("input", { id: id, type: "range", className: "desk-slider-track", min: min, max: max, step: step, value: value, disabled: disabled, "aria-valuetext": format ? shown : undefined, onChange: event => onChange(Number(event.target.value)) })] }));
+}
+export const TextField = forwardRef(function TextField({ label, labelHidden, help, error, type = 'text', ...rest }, ref) {
+    const id = useId();
+    const helpId = help ? `${id}-help` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    return (_jsxs("div", { className: "desk-field", "data-invalid": error ? true : undefined, children: [_jsx("label", { htmlFor: id, className: "desk-label", "data-hidden": labelHidden || undefined, children: label }), _jsx("input", { ref: ref, id: id, type: type, className: "desk-input", "aria-invalid": error ? true : undefined, "aria-describedby": [errorId, helpId].filter(Boolean).join(' ') || undefined, ...rest }), error && _jsx("span", { id: errorId, className: "desk-error", children: error }), help && !error && _jsx("span", { id: helpId, className: "desk-help", children: help })] }));
+});
+//# sourceMappingURL=controls.js.map

package/dist/react/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../src/react/controls.tsx"],"names":[],"mappings":"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"}

package/dist/react/conversation.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export interface Message {
+    readonly id: string;
+    /** Matches `me` on the thread for your own messages. Anything else is somebody else. */
+    readonly from: string;
+    /** Shown above the first message of a run. Falls back to `from`. */
+    readonly authorName?: string;
+    readonly body: ReactNode;
+    readonly at?: Date | string;
+    /** `sending` dims it, `failed` offers Retry. */
+    readonly state?: 'sending' | 'sent' | 'failed';
+}
+export interface ThreadProps {
+    readonly messages: readonly Message[];
+    /** Which `from` is you. Default `me`. */
+    readonly me?: string;
+    /** Shown while the other side is composing: `true` for dots, or your own node. */
+    readonly typing?: boolean | ReactNode;
+    readonly onRetry?: (id: string) => void;
+    readonly empty?: ReactNode;
+    readonly label?: string;
+    readonly className?: string;
+}
+export declare function Thread({ messages, me, typing, onRetry, empty, label, className }: ThreadProps): import("react").JSX.Element;
+export interface ComposerProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    /** Called on Enter or Send, with the trimmed text. Clearing the box is yours to do. */
+    readonly onSubmit: (value: string) => void;
+    readonly placeholder?: string;
+    readonly label?: string;
+    readonly disabled?: boolean;
+    /** An answer is arriving: Send becomes Stop when `onStop` is given. */
+    readonly busy?: boolean;
+    readonly onStop?: () => void;
+    /** Beside the send button — attachments, a model picker. */
+    readonly accessory?: ReactNode;
+    readonly maxRows?: number;
+}
+export declare function Composer({ value, onChange, onSubmit, placeholder, label, disabled, busy, onStop, accessory, maxRows, }: ComposerProps): import("react").JSX.Element;
+//# sourceMappingURL=conversation.d.ts.map

package/dist/react/conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../src/react/conversation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AASrD,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,wFAAwF;IACxF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,oEAAoE;IACpE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC3B,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;CAC/C;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAA;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,kFAAkF;IAClF,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAA;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAOD,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAsB,EAAE,SAAS,EAAE,EAAE,WAAW,+BAyFrH;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,uFAAuF;IACvF,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,4DAA4D;IAC5D,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAA8B,EAC9B,KAAiB,EACjB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAW,GACZ,EAAE,aAAa,+BAkDf"}

package/dist/react/conversation.js

@@ -0,0 +1,73 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Button } from './controls.js';
+const time = (at) => at === undefined ? null
+    : typeof at === 'string' ? at
+        : at.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+export function Thread({ messages, me = 'me', typing, onRetry, empty, label = 'Conversation', className }) {
+    const scroller = useRef(null);
+    const atBottom = useRef(true);
+    const [missed, setMissed] = useState(0);
+    const toBottom = useCallback((behavior = 'auto') => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        element.scrollTo({ top: element.scrollHeight, behavior });
+        atBottom.current = true;
+        setMissed(0);
+    }, []);
+    // Follow the conversation only while the reader is at the end of it: scrolling
+    // back to read something must not be yanked away by the next message.
+    useLayoutEffect(() => {
+        if (atBottom.current)
+            toBottom();
+        else
+            setMissed(n => n + 1);
+    }, [messages.length, toBottom]);
+    useEffect(() => {
+        toBottom();
+    }, [toBottom]);
+    const onScroll = () => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        atBottom.current = element.scrollHeight - element.scrollTop - element.clientHeight < 32;
+        if (atBottom.current)
+            setMissed(0);
+    };
+    let previous = null;
+    return (_jsxs("div", { className: ['desk-thread', className].filter(Boolean).join(' '), children: [_jsxs("div", { ref: scroller, className: "desk-thread-scroll", role: "log", "aria-label": label, "aria-live": "polite", onScroll: onScroll, children: [messages.length === 0 && !typing && empty, messages.map(message => {
+                        const mine = message.from === me;
+                        const runStart = message.from !== previous;
+                        previous = message.from;
+                        const stamp = time(message.at);
+                        return (_jsxs("article", { className: "desk-message", "data-mine": mine || undefined, "data-state": message.state ?? 'sent', "data-run-start": runStart || undefined, children: [runStart && !mine && _jsx("span", { className: "desk-message-author", children: message.authorName ?? message.from }), _jsx("div", { className: "desk-bubble", children: message.body }), _jsxs("span", { className: "desk-message-foot", children: [stamp && _jsx("time", { children: stamp }), message.state === 'sending' && _jsx("span", { children: "Sending\u2026" }), message.state === 'failed' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "desk-message-failed", children: "Not sent" }), onRetry && (_jsx(Button, { size: "small", intent: "quiet", onClick: () => onRetry(message.id), children: "Retry" }))] }))] })] }, message.id));
+                    }), typing && (_jsx("div", { className: "desk-typing", "aria-label": "Typing", children: typing === true ? (_jsxs("span", { className: "desk-typing-dots", "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })) : (typing) }))] }), missed > 0 && (_jsxs(Button, { className: "desk-thread-jump", size: "small", onClick: () => toBottom('smooth'), children: [missed === 1 ? '1 new message' : `${missed} new messages`, " \u2193"] }))] }));
+}
+export function Composer({ value, onChange, onSubmit, placeholder = 'Say something…', label = 'Message', disabled, busy, onStop, accessory, maxRows = 8, }) {
+    const field = useRef(null);
+    // Grow with the text, up to maxRows, then scroll.
+    useLayoutEffect(() => {
+        const element = field.current;
+        if (!element)
+            return;
+        element.style.height = 'auto';
+        const line = parseFloat(getComputedStyle(element).lineHeight || '20') || 20;
+        element.style.height = `${Math.min(element.scrollHeight, line * maxRows)}px`;
+    }, [value, maxRows]);
+    const submit = () => {
+        const text = value.trim();
+        if (!text || disabled)
+            return;
+        onSubmit(text);
+    };
+    const onKeyDown = (event) => {
+        // Enter sends; Shift+Enter is a new line. IME composition must never send.
+        if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing)
+            return;
+        event.preventDefault();
+        submit();
+    };
+    return (_jsxs("div", { className: "desk-composer", "data-disabled": disabled || undefined, children: [_jsx("textarea", { ref: field, className: "desk-composer-field", "aria-label": label, rows: 1, value: value, placeholder: placeholder, disabled: disabled, onChange: event => onChange(event.target.value), onKeyDown: onKeyDown }), accessory, busy && onStop ? (_jsx(Button, { "aria-label": "Stop", onClick: onStop, children: "Stop" })) : (_jsx(Button, { intent: "default", "aria-label": "Send", disabled: disabled || !value.trim(), onClick: submit, children: "Send" }))] }));
+}
+//# sourceMappingURL=conversation.js.map

package/dist/react/conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.js","sourceRoot":"","sources":["../../src/react/conversation.tsx"],"names":[],"mappings":"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"}

package/dist/react/dnd.d.ts

@@ -0,0 +1,51 @@
+import type { PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+import type { Accepts, Drag } from './dragContext.js';
+export { DragProvider } from './dragContext.js';
+export type { Accepts, Drag } from './dragContext.js';
+/** What is being dragged right now, for a window that wants to show it is ready. */
+export declare const useDragging: () => Drag | null;
+export interface DraggableOptions<T> {
+    readonly type: string;
+    readonly payload: T;
+    /** What follows the pointer. Defaults to the type. */
+    readonly preview?: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface DraggableResult {
+    readonly dragProps: {
+        readonly onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+        readonly 'data-desk-draggable': true;
+    };
+    readonly dragging: boolean;
+}
+export interface DragSourceOptions {
+    readonly type: string;
+    readonly disabled?: boolean;
+}
+export interface DragSource<T> {
+    /** Props for one item in a list: `rowProps={row => source.dragProps(row, row.name)}`. */
+    readonly dragProps: (payload: T, preview?: ReactNode) => DraggableResult['dragProps'];
+    readonly dragging: boolean;
+}
+/**
+ * One source for a list of things: a hook cannot be called per row, so the row
+ * says what it is as it is picked up.
+ */
+export declare function useDragSource<T>({ type, disabled }: DragSourceOptions): DragSource<T>;
+/** Makes one thing picked up and carried. Spread `dragProps` on the element. */
+export declare function useDraggable<T>({ type, payload, preview, disabled }: DraggableOptions<T>): DraggableResult;
+export interface DropTargetOptions<T> {
+    readonly accepts: Accepts;
+    readonly onDrop: (drag: Drag<T>) => void;
+    readonly disabled?: boolean;
+}
+export interface DropTargetResult {
+    readonly dropProps: Record<string, string | undefined>;
+    /** Something acceptable is being carried over this target right now. */
+    readonly over: boolean;
+    /** Something acceptable is being carried somewhere: show where it could go. */
+    readonly ready: boolean;
+}
+/** Makes something a place to drop. Spread `dropProps` on the element. */
+export declare function useDropTarget<T>({ accepts, onDrop, disabled }: DropTargetOptions<T>): DropTargetResult;
+//# sourceMappingURL=dnd.d.ts.map

package/dist/react/dnd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd.d.ts","sourceRoot":"","sources":["../../src/react/dnd.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzE,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAkBrD,oFAAoF;AACpF,eAAO,MAAM,WAAW,QAAO,IAAI,GAAG,IAAqC,CAAA;AAE3E,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACnB,sDAAsD;IACtD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,SAAS,EAAE;QAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;QAAC,QAAQ,CAAC,qBAAqB,EAAE,IAAI,CAAA;KAAE,CAAA;IACrI,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,SAAS,KAAK,eAAe,CAAC,WAAW,CAAC,CAAA;IACrF,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;CAC3B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,UAAU,CAAC,CAAC,CAAC,CA+ErF;AAED,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,eAAe,CAG1G;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IACtD,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;CACxB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,gBAAgB,CA6BtG"}

package/dist/react/dnd.js

@@ -0,0 +1,138 @@
+import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
+import { WINDOW_ATTRIBUTE } from '../core/commands.js';
+import { useDesk, useWindowId } from './context.js';
+import { accepted, DragContext, TARGET_ATTRIBUTE } from './dragContext.js';
+export { DragProvider } from './dragContext.js';
+/*
+ * Dragging something from one window to another — a ride onto the map, a
+ * document into a conversation. Built on Pointer Events rather than HTML5
+ * drag-and-drop: the same code then works for touch and pen, the preview is
+ * ours to draw, and a drag can be cancelled with Escape.
+ *
+ * What is dragged is a `type` and a `payload`. A target says which types it
+ * takes; nothing else about the two windows is shared.
+ */
+const useDrag = () => {
+    const context = useContext(DragContext);
+    if (!context)
+        throw new Error('Dragging needs a <DeskProvider> (or a <DragProvider>) above it');
+    return context;
+};
+/** What is being dragged right now, for a window that wants to show it is ready. */
+export const useDragging = () => useDrag().state?.drag ?? null;
+/**
+ * One source for a list of things: a hook cannot be called per row, so the row
+ * says what it is as it is picked up.
+ */
+export function useDragSource({ type, disabled }) {
+    const { targets, setState } = useDrag();
+    const from = useWindowId();
+    const desk = useDesk();
+    const [dragging, setDragging] = useState(false);
+    const start = useCallback((payload, preview) => (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const handle = event.currentTarget;
+        let started = false;
+        const findTarget = (x, y) => {
+            const element = document.elementFromPoint(x, y)?.closest(`[${TARGET_ATTRIBUTE}]`);
+            const key = element?.getAttribute(TARGET_ATTRIBUTE) ?? null;
+            const target = key ? targets.get(key) : undefined;
+            return target && accepted(target.accepts, type) ? key : null;
+        };
+        const onMove = (move) => {
+            if (!started && Math.hypot(move.clientX - startX, move.clientY - startY) < 5)
+                return;
+            if (!started) {
+                started = true;
+                setDragging(true);
+                handle.setPointerCapture?.(move.pointerId);
+            }
+            move.preventDefault();
+            setState({
+                drag: { type, payload, from },
+                x: move.clientX,
+                y: move.clientY,
+                over: findTarget(move.clientX, move.clientY),
+                preview: preview ?? type,
+            });
+        };
+        const finish = (drop, released) => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+            document.removeEventListener('keydown', onKey);
+            if (!started)
+                return;
+            setDragging(false);
+            // Pointer capture sends the release back to where the drag began, and the browser then
+            // counts the whole gesture as a click on it. A drag is never also a click.
+            const swallow = (click) => {
+                click.stopPropagation();
+                click.preventDefault();
+            };
+            globalThis.addEventListener('click', swallow, { capture: true, once: true });
+            setTimeout(() => globalThis.removeEventListener('click', swallow, { capture: true }), 0);
+            const key = drop && released ? findTarget(released.clientX, released.clientY) : null;
+            const target = key ? targets.get(key) : undefined;
+            setState(null);
+            if (!target)
+                return;
+            target.onDrop({ type, payload, from });
+            // The window that took it comes forward: that is where the work moved to.
+            const receiving = document.querySelector(`[${TARGET_ATTRIBUTE}="${key}"]`)?.closest(`[${WINDOW_ATTRIBUTE}]`);
+            const windowId = receiving?.getAttribute(WINDOW_ATTRIBUTE);
+            if (windowId)
+                desk.focus(windowId);
+        };
+        const onUp = (up) => finish(true, up);
+        const onKey = (key) => {
+            if (key.key === 'Escape')
+                finish(false);
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        document.addEventListener('keydown', onKey);
+    }, [disabled, type, from, setState, targets, desk]);
+    return {
+        dragProps: useCallback((payload, preview) => ({ onPointerDown: start(payload, preview), 'data-desk-draggable': true }), [start]),
+        dragging,
+    };
+}
+/** Makes one thing picked up and carried. Spread `dragProps` on the element. */
+export function useDraggable({ type, payload, preview, disabled }) {
+    const source = useDragSource({ type, ...(disabled === undefined ? {} : { disabled }) });
+    return { dragProps: source.dragProps(payload, preview), dragging: source.dragging };
+}
+/** Makes something a place to drop. Spread `dropProps` on the element. */
+export function useDropTarget({ accepts, onDrop, disabled }) {
+    const { state, targets } = useDrag();
+    const id = useId();
+    const latest = useRef({ accepts, onDrop });
+    latest.current = { accepts, onDrop };
+    useEffect(() => {
+        if (disabled)
+            return;
+        targets.set(id, {
+            accepts: type => accepted(latest.current.accepts, type),
+            onDrop: drag => latest.current.onDrop(drag),
+        });
+        return () => {
+            targets.delete(id);
+        };
+    }, [id, targets, disabled]);
+    const ready = Boolean(state && !disabled && accepted(accepts, state.drag.type));
+    const over = ready && state?.over === id;
+    return {
+        // The marks the stylesheet looks for, so a target lights up without the app wiring it.
+        dropProps: {
+            [TARGET_ATTRIBUTE]: disabled ? undefined : id,
+            ...(ready ? { 'data-ready': 'true' } : {}),
+            ...(over ? { 'data-over': 'true' } : {}),
+        },
+        over,
+        ready,
+    };
+}
+//# sourceMappingURL=dnd.js.map