@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/composer/composer-mentions.js

@@ -0,0 +1,294 @@
+import { useComposerContext } from "./composer.context.js";
+import composer_editor_module_default from "./composer-editor.module.js";
+import { $createMentionNode } from "./mention-node.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useEffectEvent, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { $createTextNode, $insertNodes } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+// src/components/composer/composer-mentions.tsx
+var QUERY_DEBOUNCE_MS = 200;
+var MentionTypeaheadOption = class extends MenuOption {
+	candidate;
+	constructor(candidate) {
+		super(candidate.id);
+		this.candidate = candidate;
+	}
+};
+var MentionMenu = (t0) => {
+	const $ = c(32);
+	const { label, listbox, idPrefix, options, selectedIndex, onHighlight, onSelect } = t0;
+	const { setMentionMenuOpen, setMentionsActiveOption } = useComposerContext();
+	const labelId = `${idPrefix}-label`;
+	let t1;
+	if ($[0] !== idPrefix) {
+		t1 = (index) => `${idPrefix}-${index}`;
+		$[0] = idPrefix;
+		$[1] = t1;
+	} else t1 = $[1];
+	const optionId = t1;
+	const activeOptionId = selectedIndex === null ? null : optionId(selectedIndex);
+	let t2;
+	let t3;
+	if ($[2] !== labelId || $[3] !== listbox) {
+		t2 = () => {
+			listbox.setAttribute("aria-labelledby", labelId);
+			return () => listbox.removeAttribute("aria-labelledby");
+		};
+		t3 = [listbox, labelId];
+		$[2] = labelId;
+		$[3] = listbox;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[6] !== setMentionMenuOpen) {
+		t4 = () => {
+			setMentionMenuOpen(true);
+			return () => setMentionMenuOpen(false);
+		};
+		t5 = [setMentionMenuOpen];
+		$[6] = setMentionMenuOpen;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[9] !== activeOptionId || $[10] !== setMentionsActiveOption) {
+		t6 = () => {
+			setMentionsActiveOption(activeOptionId);
+			return () => setMentionsActiveOption(null);
+		};
+		t7 = [setMentionsActiveOption, activeOptionId];
+		$[9] = activeOptionId;
+		$[10] = setMentionsActiveOption;
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t6 = $[11];
+		t7 = $[12];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[13] !== onHighlight || $[14] !== onSelect || $[15] !== optionId || $[16] !== options || $[17] !== selectedIndex) {
+		let t9;
+		if ($[19] !== onHighlight || $[20] !== onSelect || $[21] !== optionId || $[22] !== selectedIndex) {
+			t9 = (option, index_0) => /* @__PURE__ */ jsx("li", {
+				id: optionId(index_0),
+				ref: (element) => {
+					option.setRefElement(element);
+				},
+				role: "option",
+				"aria-selected": index_0 === selectedIndex,
+				className: composer_editor_module_default.menuItem,
+				"data-highlighted": index_0 === selectedIndex ? "" : void 0,
+				onMouseEnter: () => onHighlight(index_0),
+				onMouseDown: _temp,
+				onClick: () => {
+					onHighlight(index_0);
+					onSelect(option);
+				},
+				children: option.candidate.row
+			}, option.key);
+			$[19] = onHighlight;
+			$[20] = onSelect;
+			$[21] = optionId;
+			$[22] = selectedIndex;
+			$[23] = t9;
+		} else t9 = $[23];
+		t8 = options.map(t9);
+		$[13] = onHighlight;
+		$[14] = onSelect;
+		$[15] = optionId;
+		$[16] = options;
+		$[17] = selectedIndex;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[24] !== t8) {
+		t9 = /* @__PURE__ */ jsx("ul", {
+			role: "presentation",
+			className: composer_editor_module_default.menu,
+			children: t8
+		});
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== label || $[27] !== labelId) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: label
+		});
+		$[26] = label;
+		$[27] = labelId;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== t10 || $[30] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t9, t10] });
+		$[29] = t10;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
+	return t11;
+};
+/** An `@` typeahead inside `Composer.Editor` that inserts mentions from `sources`. */
+var ComposerMentions = (t0) => {
+	const $ = c(25);
+	const { label, sources } = t0;
+	const [editor] = useLexicalComposerContext();
+	const { registerMentions } = useComposerContext();
+	const listboxId = useId();
+	const [query, setQuery] = useState(null);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [options, setOptions] = useState(t1);
+	let t2;
+	if ($[1] !== sources) {
+		t2 = (search) => Promise.all(sources.map((source) => source.resolve(search)));
+		$[1] = sources;
+		$[2] = t2;
+	} else t2 = $[2];
+	const resolveCandidates = useEffectEvent(t2);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { minLength: 0 };
+		$[3] = t3;
+	} else t3 = $[3];
+	const triggerFn = useBasicTypeaheadTriggerMatch("@", t3);
+	let t4;
+	let t5;
+	if ($[4] !== listboxId || $[5] !== registerMentions) {
+		t4 = () => {
+			registerMentions(listboxId);
+			return () => registerMentions(null);
+		};
+		t5 = [registerMentions, listboxId];
+		$[4] = listboxId;
+		$[5] = registerMentions;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t4 = $[6];
+		t5 = $[7];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== query || $[9] !== resolveCandidates) {
+		t6 = () => {
+			if (query === null) return;
+			let active = true;
+			const load = async () => {
+				try {
+					const results = await resolveCandidates(query);
+					if (active) setOptions(results.flat().map(_temp2));
+				} catch {
+					if (active) setOptions([]);
+				}
+			};
+			const timer = setTimeout(() => {
+				load();
+			}, QUERY_DEBOUNCE_MS);
+			return () => {
+				active = false;
+				clearTimeout(timer);
+			};
+		};
+		$[8] = query;
+		$[9] = resolveCandidates;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== query) {
+		t7 = [query];
+		$[11] = query;
+		$[12] = t7;
+	} else t7 = $[12];
+	useEffect(t6, t7);
+	let t8;
+	if ($[13] !== editor) {
+		t8 = (selectedOption, nodeToReplace, closeMenu) => {
+			editor.update(() => {
+				const mentionNode = $createMentionNode(selectedOption.candidate.label, selectedOption.candidate.id);
+				if (nodeToReplace === null) $insertNodes([mentionNode]);
+				else nodeToReplace.replace(mentionNode);
+				const space = $createTextNode(" ");
+				mentionNode.insertAfter(space);
+				space.select();
+				closeMenu();
+			});
+		};
+		$[13] = editor;
+		$[14] = t8;
+	} else t8 = $[14];
+	const onSelectOption = t8;
+	let t9;
+	if ($[15] !== label || $[16] !== listboxId || $[17] !== options) {
+		t9 = (anchorElementRef, t10) => {
+			const { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex } = t10;
+			const listbox = anchorElementRef.current;
+			if (listbox === null || options.length === 0) return null;
+			return createPortal(/* @__PURE__ */ jsx(MentionMenu, {
+				label,
+				listbox,
+				idPrefix: listboxId,
+				options,
+				selectedIndex,
+				onHighlight: setHighlightedIndex,
+				onSelect: selectOptionAndCleanUp
+			}), listbox);
+		};
+		$[15] = label;
+		$[16] = listboxId;
+		$[17] = options;
+		$[18] = t9;
+	} else t9 = $[18];
+	const menuRenderFn = t9;
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (next) => {
+			setQuery(next);
+			if (next === null) setOptions([]);
+		};
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== menuRenderFn || $[21] !== onSelectOption || $[22] !== options || $[23] !== triggerFn) {
+		t11 = /* @__PURE__ */ jsx(LexicalTypeaheadMenuPlugin, {
+			onQueryChange: t10,
+			onSelectOption,
+			options,
+			triggerFn,
+			menuRenderFn
+		});
+		$[20] = menuRenderFn;
+		$[21] = onSelectOption;
+		$[22] = options;
+		$[23] = triggerFn;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+};
+function _temp(event) {
+	return event.preventDefault();
+}
+function _temp2(candidate) {
+	return new MentionTypeaheadOption(candidate);
+}
+export { ComposerMentions };

package/dist/components/composer/composer.context.d.ts

@@ -0,0 +1,57 @@
+import { type Context, type RefObject } from "react";
+export type ComposerSendPayload = Readonly<{
+    /** The plain-text body, with each mention flattened to its bare label. */
+    text: string;
+    /** The id of every mention in the message, in document order. */
+    mentionIds: readonly string[];
+    /** The files staged in the composer, in the order they were added. */
+    attachments: readonly File[];
+}>;
+/** A staged file, plus the id its tile is keyed and removed by. */
+export type ComposerAttachment = Readonly<{
+    id: string;
+    file: File;
+}>;
+/** What `canSubmit` decides on: the draft and the staged files. */
+export type ComposerContent = Readonly<{
+    value: string;
+    files: readonly File[];
+}>;
+export type ComposerEditorHandle = Readonly<{
+    clear: () => void;
+    focus: () => void;
+}>;
+export type ComposerContextValue = Readonly<{
+    value: string;
+    initialValue: string;
+    setValue: (value: string) => void;
+    disabled: boolean;
+    maxLength: number | undefined;
+    maxFileSize: number | undefined;
+    textLength: number;
+    attachments: readonly ComposerAttachment[];
+    addFiles: (files: readonly File[]) => void;
+    removeAttachment: (id: string) => void;
+    focusEditor: () => void;
+    hasSubmit: boolean;
+    canSend: boolean;
+    isSubmitting: boolean;
+    submit: () => Promise<void>;
+    setEditorHandle: (handle: ComposerEditorHandle | null) => void;
+    mentionMenuOpen: RefObject<boolean>;
+    setMentionMenuOpen: (open: boolean) => void;
+    mentionsListboxId: string | null;
+    registerMentions: (listboxId: string | null) => void;
+    mentionsOpen: boolean;
+    mentionsActiveOptionId: string | null;
+    setMentionsActiveOption: (id: string | null) => void;
+}>;
+export declare const ComposerContext: Context<ComposerContextValue | null>;
+/**
+ * The state of the nearest `Composer.Root`; it throws outside one.
+ *
+ * @example
+ * const { canSend, submit } = useComposerContext();
+ */
+export declare const useComposerContext: () => ComposerContextValue;
+//# sourceMappingURL=composer.context.d.ts.map

package/dist/components/composer/composer.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.context.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer.context.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,OAAO,EAEZ,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAC1C,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,sEAAsE;IACtE,WAAW,EAAE,SAAS,IAAI,EAAE,CAAC;CAC7B,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;CACX,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,eAAe,EAAE,CAChB,MAAM,EAAE,oBAAoB,GAAG,IAAI,KAC/B,IAAI,CAAC;IACV,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,OAAO,CAAC;IACtB,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,uBAAuB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACrD,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAChB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAC1B,oBAIF,CAAC"}

package/dist/components/composer/composer.context.js

@@ -0,0 +1,14 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/composer/composer.context.ts
+var ComposerContext = createContext(null);
+/**
+* The state of the nearest `Composer.Root`; it throws outside one.
+*
+* @example
+* const { canSend, submit } = useComposerContext();
+*/
+var useComposerContext = () => {
+	return useRequiredContext(ComposerContext, "Composer components must be rendered within <Composer.Root>.");
+};
+export { ComposerContext, useComposerContext };

package/dist/components/composer/composer.css

@@ -0,0 +1,80 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._composer_pyl3q_3 {
+    --_composer-border: var(
+    	--composer-border,
+    	var(--sys-color-border)
+    );
+    --_composer-pad-x: var(
+    	--composer-pad-x,
+    	var(--sys-unit-6)
+    );
+    --_composer-pad-y: var(
+    	--composer-pad-y,
+    	var(--sys-unit-4)
+    );
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    border: 1px solid var(--_composer-border);
+    border-radius: var(--composer-radius, var(--sys-radius-sm));
+    background: var(--composer-bg, var(--sys-color-surface));
+    color: var(--composer-fg, var(--sys-color-text));
+    font: var(--sys-font-body-medium);
+    cursor: text;
+  }
+  ._composer_pyl3q_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._composer_pyl3q_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._composer_pyl3q_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._composer_pyl3q_3:hover:not([data-disabled]), ._composer_pyl3q_3[data-focused] {
+    --_composer-border: var(
+    	--composer-border-active,
+    	var(--sys-color-primary)
+    );
+  }
+  ._composer_pyl3q_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._toolbar_pyl3q_48 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--composer-gap, var(--sys-unit-4));
+    padding: var(--_composer-pad-y) var(--_composer-pad-x);
+  }
+  ._counter_pyl3q_56 {
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-label-small);
+  }
+  ._counter_pyl3q_56[data-tone=warning] {
+    color: var(--sys-color-warning-fg);
+  }
+  ._counter_pyl3q_56[data-tone=error] {
+    color: var(--sys-color-error-fg);
+  }
+  ._attachments_pyl3q_66 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-8);
+    min-inline-size: 0;
+    padding: var(--_composer-pad-x) var(--_composer-pad-x) 0;
+  }
+  ._attachmentsError_pyl3q_75 {
+    padding: var(--_composer-pad-y) var(--_composer-pad-x) 0;
+    color: var(--sys-color-error-fg);
+    font: var(--sys-font-label-small);
+  }
+}

package/dist/components/composer/composer.d.ts

@@ -0,0 +1,78 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type ComposerContent, type ComposerSendPayload } from "./composer.context.ts";
+import { type ComposerHandle, createComposerHandle } from "./composer.handle.ts";
+import { ComposerAttachButton, ComposerAttachments, ComposerAttachmentsError } from "./composer-attachments.tsx";
+import { ComposerEditor } from "./composer-editor.tsx";
+import { ComposerMentions } from "./composer-mentions.tsx";
+export type ComposerRootProps = Readonly<{
+    children: ReactNode;
+    /** The starting draft, with mentions as `@[label](id)`. */
+    defaultValue?: string;
+    disabled?: boolean;
+    /** The most characters a message holds, mentions counted by their label. */
+    maxLength?: number;
+    /** The per-file size limit in bytes; a larger file blocks sending until it is removed. */
+    maxFileSize?: number;
+    /** Whether the content may be sent. @default text or a file */
+    canSubmit?: (content: ComposerContent) => boolean;
+    /** Sends the message; the composer stays busy until it settles. */
+    onSend?: (payload: ComposerSendPayload) => void | Promise<void>;
+    className?: string;
+    /** Controls the composer from outside, from `Composer.createHandle()`. */
+    handle?: ComposerHandle;
+}>;
+/**
+ * The message composer: holds the draft, its attachments and its mentions,
+ * and sends them through `onSend` once `canSubmit` allows it, within
+ * `maxLength` and `maxFileSize`.
+ */
+declare const Root: ({ children, defaultValue, disabled, maxLength, maxFileSize, canSubmit, onSend, className, handle, }: ComposerRootProps) => ReactNode;
+export type ComposerToolbarProps = Readonly<{
+    children: ReactNode;
+    className?: string;
+}>;
+/** The row under the editor holding the counter and the buttons. */
+declare const Toolbar: ({ children, className, }: ComposerToolbarProps) => ReactNode;
+/** The `length/maxLength` counter, warning near the limit. Renders nothing without a `maxLength`. */
+declare const MaxLength: () => ReactNode;
+export type ComposerSendButtonProps = Readonly<{
+    /** The button's accessible name and tooltip, such as "Send". */
+    label: string;
+    /** @default "primary" */
+    variant?: "primary" | "secondary";
+}> & Omit<ComponentProps<"button">, "children">;
+/** The icon button that sends the message; disabled while it can't be sent. */
+declare const SendButton: ({ label, variant, ...props }: ComposerSendButtonProps) => ReactNode;
+type ComposerNamespace = Readonly<{
+    Root: typeof Root;
+    Editor: typeof ComposerEditor;
+    Mentions: typeof ComposerMentions;
+    Toolbar: typeof Toolbar;
+    Attachments: typeof ComposerAttachments;
+    AttachmentsError: typeof ComposerAttachmentsError;
+    AttachButton: typeof ComposerAttachButton;
+    MaxLength: typeof MaxLength;
+    SendButton: typeof SendButton;
+    createHandle: typeof createComposerHandle;
+}>;
+/**
+ * A message composer: a plain-text editor with `@` mentions, staged
+ * attachments, a length counter, and Enter to send (Shift+Enter for a new
+ * line).
+ *
+ * @example
+ * <Composer.Root onSend={send} maxLength={2000}>
+ * 	<Composer.Attachments label="Attachments" removeLabel="Remove" fileHint={(name, size) => `${name} (${size})`} />
+ * 	<Composer.Editor label="Comment">
+ * 		<Composer.Mentions label="People to mention" sources={[people]} />
+ * 	</Composer.Editor>
+ * 	<Composer.Toolbar>
+ * 		<Composer.MaxLength />
+ * 		<Composer.AttachButton label="Add attachment" />
+ * 		<Composer.SendButton label="Send" />
+ * 	</Composer.Toolbar>
+ * </Composer.Root>
+ */
+export declare const Composer: ComposerNamespace;
+export {};
+//# sourceMappingURL=composer.d.ts.map

package/dist/components/composer/composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,cAAc,EACnB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAOf,OAAO,EAEN,KAAK,eAAe,EAGpB,KAAK,mBAAmB,EAExB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,KAAK,cAAc,EACnB,oBAAoB,EACpB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACN,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IAClD,mEAAmE;IACnE,MAAM,CAAC,EAAE,CACR,OAAO,EAAE,mBAAmB,KACxB,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC,CAAC;AAWH;;;;GAIG;AACH,QAAA,MAAM,IAAI,wGAUP,iBAAiB,KAAG,SAmJtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,oEAAoE;AACpE,QAAA,MAAM,OAAO,6BAGV,oBAAoB,KAAG,SAIzB,CAAC;AAEF,qGAAqG;AACrG,QAAA,MAAM,SAAS,QAAO,SAYrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC,CAAC,GACD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5C,+EAA+E;AAC/E,QAAA,MAAM,UAAU,iCAIb,uBAAuB,KAAG,SAiB5B,CAAC;AAEF,KAAK,iBAAiB,GAAG,QAAQ,CAAC;IACjC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,QAAQ,EAAE,OAAO,gBAAgB,CAAC;IAClC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,mBAAmB,CAAC;IACxC,gBAAgB,EAAE,OAAO,wBAAwB,CAAC;IAClD,YAAY,EAAE,OAAO,oBAAoB,CAAC;IAC1C,SAAS,EAAE,OAAO,SAAS,CAAC;IAC5B,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,YAAY,EAAE,OAAO,oBAAoB,CAAC;CAC1C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,iBAWtB,CAAC"}

package/dist/components/composer/composer.handle.d.ts

@@ -0,0 +1,32 @@
+import type { ComposerEditorHandle } from "./composer.context.ts";
+/**
+ * Controls a `Composer.Root` from outside its subtree. Create one with
+ * `Composer.createHandle()` and pass it to `Composer.Root`'s `handle` prop; its
+ * methods do nothing until the composer has mounted.
+ *
+ * @example
+ * const composer = Composer.createHandle();
+ * composer.clear();
+ */
+export declare class ComposerHandle {
+    #private;
+    /**
+     * Wires up the mounted `Composer.Root` and returns the disconnect.
+     *
+     * @example
+     * useEffect(() => handle.connect({ clear, focus }), [handle, clear, focus]);
+     */
+    connect(impl: ComposerEditorHandle): () => void;
+    /** Clears the draft and any staged files. */
+    clear(): void;
+    /** Moves focus into the editor. */
+    focus(): void;
+}
+/**
+ * Creates a {@link ComposerHandle} to control a `Composer.Root` imperatively.
+ *
+ * @example
+ * const composer = createComposerHandle();
+ */
+export declare const createComposerHandle: () => ComposerHandle;
+//# sourceMappingURL=composer.handle.d.ts.map

package/dist/components/composer/composer.handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.handle.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer.handle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAElE;;;;;;;;GAQG;AACH,qBAAa,cAAc;;IAG1B;;;;;OAKG;IACH,OAAO,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,IAAI,CAO9C;IAED,6CAA6C;IAC7C,KAAK,IAAI,IAAI,CAEZ;IAED,mCAAmC;IACnC,KAAK,IAAI,IAAI,CAEZ;CACD;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,QAAO,cACnB,CAAC"}

package/dist/components/composer/composer.handle.js

@@ -0,0 +1,41 @@
+// src/components/composer/composer.handle.ts
+/**
+* Controls a `Composer.Root` from outside its subtree. Create one with
+* `Composer.createHandle()` and pass it to `Composer.Root`'s `handle` prop; its
+* methods do nothing until the composer has mounted.
+*
+* @example
+* const composer = Composer.createHandle();
+* composer.clear();
+*/
+var ComposerHandle = class {
+	#impl = null;
+	/**
+	* Wires up the mounted `Composer.Root` and returns the disconnect.
+	*
+	* @example
+	* useEffect(() => handle.connect({ clear, focus }), [handle, clear, focus]);
+	*/
+	connect(impl) {
+		this.#impl = impl;
+		return () => {
+			if (this.#impl === impl) this.#impl = null;
+		};
+	}
+	/** Clears the draft and any staged files. */
+	clear() {
+		this.#impl?.clear();
+	}
+	/** Moves focus into the editor. */
+	focus() {
+		this.#impl?.focus();
+	}
+};
+/**
+* Creates a {@link ComposerHandle} to control a `Composer.Root` imperatively.
+*
+* @example
+* const composer = createComposerHandle();
+*/
+var createComposerHandle = () => new ComposerHandle();
+export { ComposerHandle, createComposerHandle };