@igne-agency/react-web-ui 0.5.0 → 0.6.0

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

@@ -1,12 +1,14 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
 import { useComposerContext } from "./composer.context.js";
 import composer_editor_module_default from "./composer-editor.module.js";
 import { EditorBehaviorPlugin } from "./editor-behavior.js";
 import { $createMentionNode, MentionExtension } from "./mention-node.js";
 import { parseMentionString } from "./mention-text.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { createContext, useEffect, useId, useState } from "react";
 import { HistoryExtension } from "@lexical/history";
 import { PlainTextExtension } from "@lexical/plain-text";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -30,13 +32,15 @@ var seedEditorState = (value) => () => {
 	}
 	root.append(paragraph);
 };
+var PlaceholderContext = createContext(null);
 /** The composer's plain-text editor, with mentions and Enter to send. */
 var ComposerEditor = (t0) => {
 	const $ = c(34);
-	const { label, placeholder, minLines: t1, maxLines, children, className } = t0;
+	const { label, minLines: t1, maxLines, children, className } = t0;
 	const minLines = t1 === void 0 ? 3 : t1;
-	const { value, initialValue, disabled, setValue, mentionsListboxId, mentionsOpen, mentionsActiveOptionId } = useComposerContext();
+	const { initialValue, disabled, setValue, mentionsListboxId, mentionsOpen, mentionsActiveOptionId } = useComposerContext();
 	const placeholderId = useId();
+	const [described, setDescribed] = useState(false);
 	let t2;
 	if ($[0] !== disabled || $[1] !== initialValue) {
 		t2 = () => defineExtension({
@@ -72,7 +76,7 @@ var ComposerEditor = (t0) => {
 		$[6] = minLines;
 		$[7] = t4;
 	} else t4 = $[7];
-	const t5 = placeholder === void 0 ? void 0 : placeholderId;
+	const t5 = described ? placeholderId : void 0;
 	const t6 = disabled || void 0;
 	let t7;
 	if ($[8] !== mentionsActiveOptionId || $[9] !== mentionsListboxId || $[10] !== mentionsOpen) {
@@ -106,68 +110,154 @@ var ComposerEditor = (t0) => {
 		$[16] = t8;
 	} else t8 = $[16];
 	let t9;
-	if ($[17] !== placeholder || $[18] !== placeholderId || $[19] !== value) {
-		t9 = placeholder === void 0 ? null : /* @__PURE__ */ jsx("div", {
-			id: placeholderId,
-			className: composer_editor_module_default.placeholder,
-			hidden: value !== "",
-			"aria-hidden": "true",
-			children: placeholder
-		});
-		$[17] = placeholder;
-		$[18] = placeholderId;
-		$[19] = value;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== setValue) {
-		t10 = /* @__PURE__ */ jsx(OnChangePlugin, {
+	if ($[17] !== setValue) {
+		t9 = /* @__PURE__ */ jsx(OnChangePlugin, {
 			ignoreSelectionChange: true,
 			onChange: (editorState) => editorState.read(() => setValue($getRoot().getTextContent()))
 		});
-		$[21] = setValue;
-		$[22] = t10;
-	} else t10 = $[22];
+		$[17] = setValue;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(EditorBehaviorPlugin, {});
+		$[19] = t10;
+	} else t10 = $[19];
 	let t11;
-	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(EditorBehaviorPlugin, {});
-		$[23] = t11;
-	} else t11 = $[23];
+	if ($[20] !== placeholderId) {
+		t11 = {
+			id: placeholderId,
+			register: setDescribed
+		};
+		$[20] = placeholderId;
+		$[21] = t11;
+	} else t11 = $[21];
 	let t12;
-	if ($[24] !== children || $[25] !== t10 || $[26] !== t3 || $[27] !== t4 || $[28] !== t8 || $[29] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+	if ($[22] !== children || $[23] !== t11) {
+		t12 = /* @__PURE__ */ jsx(PlaceholderContext, {
+			value: t11,
+			children
+		});
+		$[22] = children;
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12 || $[26] !== t3 || $[27] !== t4 || $[28] !== t8 || $[29] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
 			className: t3,
 			style: t4,
 			children: [
 				t8,
 				t9,
 				t10,
-				t11,
-				children
+				t12
 			]
 		});
-		$[24] = children;
-		$[25] = t10;
+		$[25] = t12;
 		$[26] = t3;
 		$[27] = t4;
 		$[28] = t8;
 		$[29] = t9;
-		$[30] = t12;
-	} else t12 = $[30];
-	let t13;
-	if ($[31] !== extension || $[32] !== t12) {
-		t13 = /* @__PURE__ */ jsx(LexicalExtensionComposer, {
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== extension || $[32] !== t13) {
+		t14 = /* @__PURE__ */ jsx(LexicalExtensionComposer, {
 			extension,
 			contentEditable: null,
-			children: t12
+			children: t13
 		});
 		$[31] = extension;
-		$[32] = t12;
-		$[33] = t13;
-	} else t13 = $[33];
-	return t13;
+		$[32] = t13;
+		$[33] = t14;
+	} else t14 = $[33];
+	return t14;
+};
+/**
+* What the editor shows while the draft is empty, inside the `Editor`. It also
+* describes the editor.
+*
+* @example
+* <Composer.Editor label="Comment">
+* 	<Composer.Placeholder>Write a comment</Composer.Placeholder>
+* </Composer.Editor>
+*/
+var ComposerPlaceholder = (t0) => {
+	const $ = c(19);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { value } = useComposerContext();
+	const { id, register } = useRequiredContext(PlaceholderContext, "Composer.Placeholder must be rendered within <Composer.Editor>.");
+	let t1;
+	let t2;
+	if ($[5] !== register) {
+		t1 = () => {
+			register(true);
+			return () => register(false);
+		};
+		t2 = [register];
+		$[5] = register;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	const t3 = value !== "";
+	let t4;
+	if ($[8] !== className) {
+		t4 = clsx(composer_editor_module_default.placeholder, className);
+		$[8] = className;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== id || $[11] !== props || $[12] !== t3 || $[13] !== t4) {
+		t5 = {
+			"aria-hidden": true,
+			...props,
+			id,
+			hidden: t3,
+			className: t4
+		};
+		$[10] = id;
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== ref || $[16] !== render || $[17] !== t5) {
+		t6 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t5
+		};
+		$[15] = ref;
+		$[16] = render;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return useRender(t6);
 };
 function _temp(error) {
 	throw error;
 }
-export { ComposerEditor };
+export { ComposerEditor, ComposerPlaceholder };

package/dist/components/composer/composer-editor.module.js

@@ -1,9 +1,9 @@
 import './composer-editor.css';// src/components/composer/composer-editor.module.scss
-var editor = "_editor_1wstb_3";
-var content = "_content_1wstb_9";
-var placeholder = "_placeholder_1wstb_17";
-var menu = "_menu_1wstb_25";
-var menuItem = "_menuItem_1wstb_54";
+var editor = "_editor_1emww_3";
+var content = "_content_1emww_9";
+var placeholder = "_placeholder_1emww_17";
+var menu = "_menu_1emww_25";
+var menuItem = "_menuItem_1emww_54";
 var composer_editor_module_default = {
 	editor,
 	content,

package/dist/components/composer/composer.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._composer_buzyv_3 {
+  ._composer_1x0sk_3 {
     --_composer-border: var(
     	--composer-border,
     	var(--sys-color-border)
@@ -16,37 +16,37 @@
     display: flex;
     flex-direction: column;
     min-inline-size: 0;
-    border: 1px solid var(--_composer-border);
+    border: var(--composer-border-width, 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);
+    font: var(--composer-font, var(--sys-font-body-medium));
     cursor: text;
   }
-  ._composer_buzyv_3 {
+  ._composer_1x0sk_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._composer_buzyv_3[data-focus-visible] {
+  ._composer_1x0sk_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._composer_buzyv_3 {
+    ._composer_1x0sk_3 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._composer_buzyv_3:hover:not([data-disabled]), ._composer_buzyv_3[data-focused] {
+  ._composer_1x0sk_3:hover:not([data-disabled]), ._composer_1x0sk_3[data-focused] {
     --_composer-border: var(
-    	--composer-border-active,
+    	--composer-active-border,
     	var(--sys-color-primary)
     );
   }
-  ._composer_buzyv_3[data-disabled] {
+  ._composer_1x0sk_3[data-disabled] {
     background: var(--composer-disabled-bg, var(--sys-color-disabled-bg));
     color: var(--composer-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._toolbar_buzyv_49 {
+  ._toolbar_1x0sk_49 {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -54,28 +54,28 @@
     gap: var(--composer-gap, var(--sys-unit-4));
     padding: var(--_composer-pad-y) var(--_composer-pad-x);
   }
-  ._counter_buzyv_57 {
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-label-small);
+  ._counter_1x0sk_57 {
+    color: var(--composer-counter-fg, var(--sys-color-text-muted));
+    font: var(--composer-counter-font, var(--sys-font-label-small));
   }
-  ._counter_buzyv_57[data-tone=warning] {
-    color: var(--sys-color-warning-fg);
+  ._counter_1x0sk_57[data-tone=warning] {
+    color: var(--composer-counter-warning-fg, var(--sys-color-warning-fg));
   }
-  ._counter_buzyv_57[data-tone=error] {
-    color: var(--sys-color-error-fg);
+  ._counter_1x0sk_57[data-tone=error] {
+    color: var(--composer-counter-error-fg, var(--sys-color-error-fg));
   }
-  ._attachments_buzyv_67 {
+  ._attachments_1x0sk_67 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--sys-unit-8);
+    gap: var(--composer-attachments-gap, var(--sys-unit-8));
     min-inline-size: 0;
     padding: var(--_composer-pad-x) var(--_composer-pad-x) 0;
   }
-  ._attachmentsError_buzyv_76 {
+  ._attachmentsError_1x0sk_76 {
     padding: var(--_composer-pad-y) var(--_composer-pad-x) 0;
-    color: var(--sys-color-error-fg);
-    font: var(--sys-font-label-small);
+    color: var(--composer-attachments-error-fg, var(--sys-color-error-fg));
+    font: var(--composer-attachments-error-font, var(--sys-font-label-small));
   }
 }

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

@@ -2,7 +2,7 @@ import { type ComponentProps, type ComponentPropsWithRef, type ReactNode } from
 import { type ComposerContent, type ComposerSendPayload } from "./composer.context.ts";
 import { type ComposerHandle, createComposerHandle } from "./composer.handle.ts";
 import { ComposerAttachButton, type ComposerAttachButtonProps, ComposerAttachments, ComposerAttachmentsError, type ComposerAttachmentsErrorProps, type ComposerAttachmentsProps } from "./composer-attachments.tsx";
-import { ComposerEditor, type ComposerEditorProps } from "./composer-editor.tsx";
+import { ComposerEditor, type ComposerEditorProps, ComposerPlaceholder } from "./composer-editor.tsx";
 import { ComposerMentions, type ComposerMentionsProps } from "./composer-mentions.tsx";
 export type ComposerRootProps = Readonly<{
     children: ReactNode;
@@ -47,7 +47,15 @@ export type ComposerSendButtonProps = Readonly<{
 /** The icon button that sends the message, its children the glyph; disabled while it can't be sent. */
 declare const SendButton: ({ label, variant, children, ...props }: ComposerSendButtonProps) => ReactNode;
 /** The attachment controls the `Composer` prefab renders, and what they say. */
-export type ComposerAttachmentOptions = Omit<ComposerAttachmentsProps, "className"> & ComposerAttachmentsErrorProps & Readonly<{
+export type ComposerAttachmentOptions = Pick<ComposerAttachmentsProps, "label"> & ComposerAttachmentsErrorProps & Readonly<{
+    /** Each tile's remove button's accessible name, such as "Remove". */
+    removeLabel: string;
+    /** Each tile's remove glyph. */
+    removeIcon: ReactNode;
+    /** A tile's file-type glyph. Left out, a tile that is not an image shows only the file's extension. */
+    fileIcon?: ReactNode;
+    /** A tile's tooltip, from the file's name and formatted size. */
+    fileHint: (name: string, size: string) => string;
     /** The attach button's accessible name and tooltip, such as "Add attachment". */
     attachLabel: string;
     /** The attach button's glyph. */
@@ -55,6 +63,8 @@ export type ComposerAttachmentOptions = Omit<ComposerAttachmentsProps, "classNam
     accept?: ComposerAttachButtonProps["accept"];
 }>;
 export type ComposerProps = Omit<ComposerRootProps, "children"> & Omit<ComposerEditorProps, "children" | "className"> & Readonly<{
+    /** Shown while the draft is empty, and describes the editor. */
+    placeholder?: string;
     /** The `@` typeahead, where the composer takes mentions. */
     mentions?: ComposerMentionsProps;
     /** The staged files and the button that adds them, where the composer takes attachments. */
@@ -69,6 +79,7 @@ declare const Prefab: ({ label, placeholder, minLines, maxLines, mentions, attac
 export type ComposerParts = typeof Prefab & Readonly<{
     Root: typeof Root;
     Editor: typeof ComposerEditor;
+    Placeholder: typeof ComposerPlaceholder;
     Mentions: typeof ComposerMentions;
     Toolbar: typeof Toolbar;
     Attachments: typeof ComposerAttachments;

package/dist/components/composer/composer.js

@@ -1,12 +1,13 @@
 import { lengthTone } from "../../lib/text-length.js";
-import { Button } from "../button/button.js";
+import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
+import { IconButton } from "../button/button.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus } from "../field/use-field-focus.js";
 import { ComposerContext, useComposerContext } from "./composer.context.js";
 import { createComposerHandle } from "./composer.handle.js";
 import composer_module_default from "./composer.module.js";
 import { ComposerAttachButton, ComposerAttachments, ComposerAttachmentsError } from "./composer-attachments.js";
-import { ComposerEditor } from "./composer-editor.js";
+import { ComposerEditor, ComposerPlaceholder } from "./composer-editor.js";
 import { ComposerMentions } from "./composer-mentions.js";
 import { parseMentionString, toPlainText } from "./mention-text.js";
 import { c } from "react/compiler-runtime";
@@ -389,15 +390,14 @@ var SendButton = (t0) => {
 	} else t3 = $[6];
 	let t4;
 	if ($[7] !== children || $[8] !== label || $[9] !== props || $[10] !== t2 || $[11] !== t3 || $[12] !== variant) {
-		t4 = /* @__PURE__ */ jsx(Button, {
+		t4 = /* @__PURE__ */ jsx(IconButton, {
 			variant,
 			size: "md",
-			iconOnly: true,
-			icon: children,
 			label,
 			disabled: t2,
 			onClick: t3,
-			...props
+			...props,
+			children
 		});
 		$[7] = children;
 		$[8] = label;
@@ -410,7 +410,7 @@ var SendButton = (t0) => {
 	return t4;
 };
 var Prefab = (t0) => {
-	const $ = c(34);
+	const $ = c(36);
 	let attachments;
 	let label;
 	let maxLines;
@@ -447,89 +447,103 @@ var Prefab = (t0) => {
 	if ($[10] !== attachments) {
 		t1 = attachments === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerAttachments, {
 			label: attachments.label,
-			removeLabel: attachments.removeLabel,
-			removeIcon: attachments.removeIcon,
-			fileIcon: attachments.fileIcon,
-			fileHint: attachments.fileHint
+			children: (attachment, t2) => {
+				const { oversized, size, disabled } = t2;
+				return /* @__PURE__ */ jsx(AttachmentTile, {
+					id: attachment.id,
+					file: attachment.file,
+					hint: attachments.fileHint(attachment.file.name, size),
+					removeLabel: attachments.removeLabel,
+					removeIcon: attachments.removeIcon,
+					icon: attachments.fileIcon,
+					invalid: oversized,
+					disabled
+				});
+			}
 		}), /* @__PURE__ */ jsx(ComposerAttachmentsError, { tooLargeError: attachments.tooLargeError })] });
 		$[10] = attachments;
 		$[11] = t1;
 	} else t1 = $[11];
 	let t2;
-	if ($[12] !== mentions) {
-		t2 = mentions === void 0 ? null : /* @__PURE__ */ jsx(ComposerMentions, { ...mentions });
-		$[12] = mentions;
+	if ($[12] !== placeholder) {
+		t2 = placeholder === void 0 ? null : /* @__PURE__ */ jsx(ComposerPlaceholder, { children: placeholder });
+		$[12] = placeholder;
 		$[13] = t2;
 	} else t2 = $[13];
 	let t3;
-	if ($[14] !== label || $[15] !== maxLines || $[16] !== minLines || $[17] !== placeholder || $[18] !== t2) {
-		t3 = /* @__PURE__ */ jsx(ComposerEditor, {
+	if ($[14] !== mentions) {
+		t3 = mentions === void 0 ? null : /* @__PURE__ */ jsx(ComposerMentions, { ...mentions });
+		$[14] = mentions;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== label || $[17] !== maxLines || $[18] !== minLines || $[19] !== t2 || $[20] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(ComposerEditor, {
 			label,
-			placeholder,
 			minLines,
 			maxLines,
-			children: t2
+			children: [t2, t3]
 		});
-		$[14] = label;
-		$[15] = maxLines;
-		$[16] = minLines;
-		$[17] = placeholder;
-		$[18] = t2;
-		$[19] = t3;
-	} else t3 = $[19];
-	let t4;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(MaxLength, {});
-		$[20] = t4;
-	} else t4 = $[20];
+		$[16] = label;
+		$[17] = maxLines;
+		$[18] = minLines;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+	} else t4 = $[21];
 	let t5;
-	if ($[21] !== attachments) {
-		t5 = attachments === void 0 ? null : /* @__PURE__ */ jsx(ComposerAttachButton, {
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(MaxLength, {});
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== attachments) {
+		t6 = attachments === void 0 ? null : /* @__PURE__ */ jsx(ComposerAttachButton, {
 			label: attachments.attachLabel,
 			accept: attachments.accept,
 			children: attachments.attachIcon
 		});
-		$[21] = attachments;
-		$[22] = t5;
-	} else t5 = $[22];
-	let t6;
-	if ($[23] !== sendIcon || $[24] !== sendLabel) {
-		t6 = /* @__PURE__ */ jsx(SendButton, {
+		$[23] = attachments;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== sendIcon || $[26] !== sendLabel) {
+		t7 = /* @__PURE__ */ jsx(SendButton, {
 			label: sendLabel,
 			children: sendIcon
 		});
-		$[23] = sendIcon;
-		$[24] = sendLabel;
-		$[25] = t6;
-	} else t6 = $[25];
-	let t7;
-	if ($[26] !== t5 || $[27] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Toolbar, { children: [
-			t4,
+		$[25] = sendIcon;
+		$[26] = sendLabel;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== t6 || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Toolbar, { children: [
 			t5,
-			t6
+			t6,
+			t7
 		] });
-		$[26] = t5;
-		$[27] = t6;
-		$[28] = t7;
-	} else t7 = $[28];
-	let t8;
-	if ($[29] !== props || $[30] !== t1 || $[31] !== t3 || $[32] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Root, {
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	let t9;
+	if ($[31] !== props || $[32] !== t1 || $[33] !== t4 || $[34] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
 			...props,
 			children: [
 				t1,
-				t3,
-				t7
+				t4,
+				t8
 			]
 		});
-		$[29] = props;
-		$[30] = t1;
-		$[31] = t3;
-		$[32] = t7;
-		$[33] = t8;
-	} else t8 = $[33];
-	return t8;
+		$[31] = props;
+		$[32] = t1;
+		$[33] = t4;
+		$[34] = t8;
+		$[35] = t9;
+	} else t9 = $[35];
+	return t9;
 };
 /**
 * A message composer: a plain-text editor with `@` mentions, staged
@@ -550,6 +564,7 @@ var Prefab = (t0) => {
 var Composer = Object.assign(Prefab, {
 	Root,
 	Editor: ComposerEditor,
+	Placeholder: ComposerPlaceholder,
 	Mentions: ComposerMentions,
 	Toolbar,
 	Attachments: ComposerAttachments,

package/dist/components/composer/composer.module.js

@@ -1,9 +1,9 @@
 import './composer.css';// src/components/composer/composer.module.scss
-var composer = "_composer_buzyv_3";
-var toolbar = "_toolbar_buzyv_49";
-var counter = "_counter_buzyv_57";
-var attachments = "_attachments_buzyv_67";
-var attachmentsError = "_attachmentsError_buzyv_76";
+var composer = "_composer_1x0sk_3";
+var toolbar = "_toolbar_1x0sk_49";
+var counter = "_counter_1x0sk_57";
+var attachments = "_attachments_1x0sk_67";
+var attachmentsError = "_attachmentsError_1x0sk_76";
 var composer_module_default = {
 	composer,
 	toolbar,

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

@@ -1,8 +1,8 @@
 export type { ComposerAttachment, ComposerContent, ComposerSendPayload, } from "./composer.context.ts";
 export type { ComposerHandle } from "./composer.handle.ts";
 export * from "./composer.tsx";
-export type { ComposerAttachButtonProps, ComposerAttachmentsErrorProps, ComposerAttachmentsProps, } from "./composer-attachments.tsx";
-export type { ComposerEditorProps } from "./composer-editor.tsx";
+export type { ComposerAttachButtonProps, ComposerAttachmentState, ComposerAttachmentsErrorProps, ComposerAttachmentsProps, } from "./composer-attachments.tsx";
+export type { ComposerEditorProps, ComposerPlaceholderProps, } from "./composer-editor.tsx";
 export type { ComposerMentionsProps } from "./composer-mentions.tsx";
 export type { MentionCandidate, MentionSource, } from "./mention-sources.ts";
 export * from "./mention-text.tsx";

package/dist/components/composer/mention-text.css

@@ -1,13 +1,13 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._mention_dh4ag_3 {
-    border-radius: var(--sys-radius-full);
+  ._mention_1uofn_3 {
+    border-radius: var(--mention-radius, var(--sys-radius-full));
     background: var(--mention-bg, var(--sys-color-neutral-bg));
-    padding: var(--sys-unit-1) var(--sys-unit-4);
+    padding: var(--mention-pad-y, var(--sys-unit-1)) var(--mention-pad-x, var(--sys-unit-4));
     color: var(--mention-fg, var(--sys-color-neutral-fg));
-    font: var(--sys-font-label-small);
+    font: var(--mention-font, var(--sys-font-label-small));
   }
-  ._mention_dh4ag_3[data-you] {
+  ._mention_1uofn_3[data-you] {
     background: var(--mention-you-bg, var(--sys-color-primary-container));
     color: var(--mention-you-fg, var(--sys-color-on-primary-container));
   }

package/dist/components/composer/mention-text.module.js

@@ -1,4 +1,4 @@
 import './mention-text.css';// src/components/composer/mention-text.module.scss
-var mention = "_mention_dh4ag_3";
+var mention = "_mention_1uofn_3";
 var mention_text_module_default = { mention };
 export { mention_text_module_default as default, mention };