@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/composer/composer-suggestion-list.mjs

@@ -0,0 +1,160 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-suggestion-list.tsx
+const composerSuggestionList = tv({
+	slots: {
+		root: [
+			"absolute inset-x-0 bottom-full w-auto overflow-y-auto",
+			"mb-2 max-h-60 overflow-x-hidden rounded-container p-1",
+			"bg-layer-popover text-foreground ring-1 ring-line-seam shadow-float"
+		],
+		group: ["flex flex-col"],
+		groupLabel: ["py-1.5", "px-2.5 pt-2 pb-1 font-sans text-caption font-bold text-foreground-hint"],
+		item: [
+			"flex w-full items-center text-left",
+			"min-h-9 cursor-pointer gap-2.5 rounded-chip px-2.5 py-1",
+			"font-sans text-callout font-medium text-foreground",
+			"hover:bg-brand-soft data-[highlighted=true]:bg-brand-soft",
+			"data-[disabled=true]:cursor-default data-[disabled=true]:text-foreground-disabled",
+			"data-[disabled=true]:hover:bg-transparent"
+		],
+		content: ["flex min-w-0 flex-1 items-center gap-1.5 text-left"],
+		icon: ["shrink-0"],
+		title: ["min-w-0 truncate"],
+		aside: ["ml-auto flex max-w-[33%] min-w-0 shrink-0 items-center justify-end"],
+		meta: ["text-caption text-foreground-hint"]
+	},
+	variants: {
+		separated: {
+			true: { group: ["-mx-1 mt-1 border-t border-line-hairline px-1 pt-1"] },
+			false: {}
+		},
+		iconVariant: {
+			avatar: {},
+			framed: { icon: ["flex size-[19px] items-center justify-center rounded-sticker", "bg-fill-muted text-foreground-muted [&_svg]:size-[11px]"] },
+			auxiliary: { icon: ["-ml-1 size-3", "text-foreground-hint"] },
+			inline: { icon: ["flex size-3.5 items-center justify-center [&_svg]:size-3.5", "text-foreground-hint"] }
+		},
+		metaVariant: {
+			text: { meta: "min-w-0 flex-1 basis-0 truncate" },
+			code: { meta: ["min-w-0 truncate font-mono", "text-mono-meta text-foreground-hint"] }
+		}
+	},
+	defaultVariants: {
+		separated: false,
+		iconVariant: "avatar",
+		metaVariant: "text"
+	}
+});
+function ComposerSuggestionList({ className, render, ...props }) {
+	const { root } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-list",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionGroup({ separated, className, render, ...props }) {
+	const { group } = composerSuggestionList({ separated });
+	const defaultProps = {
+		"data-slot": "composer-suggestion-group",
+		className: group({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionGroupLabel({ className, render, ...props }) {
+	const { groupLabel } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-group-label",
+		className: groupLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionOption({ className, render, ...props }) {
+	const { item } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-option",
+		className: item({ className }),
+		role: "option"
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionContent({ className, render, ...props }) {
+	const { content } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionIcon({ variant = "avatar", className, render, ...props }) {
+	const { icon } = composerSuggestionList({ iconVariant: variant });
+	const defaultProps = {
+		"data-slot": "composer-suggestion-icon",
+		className: icon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionTitle({ className, render, ...props }) {
+	const { title } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionAside({ className, render, ...props }) {
+	const { aside } = composerSuggestionList();
+	const defaultProps = {
+		"data-slot": "composer-suggestion-aside",
+		className: aside({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerSuggestionMeta({ variant = "text", className, render, ...props }) {
+	const { meta } = composerSuggestionList({ metaVariant: variant });
+	const defaultProps = {
+		"data-slot": "composer-suggestion-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ComposerSuggestionAside, ComposerSuggestionContent, ComposerSuggestionGroup, ComposerSuggestionGroupLabel, ComposerSuggestionIcon, ComposerSuggestionList, ComposerSuggestionMeta, ComposerSuggestionOption, ComposerSuggestionTitle };

package/dist/components/composer/composer-toolbar-label.d.mts

@@ -0,0 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-toolbar-label.d.ts
+export type ComposerToolbarLabelProps = useRender.ComponentProps<"label">;
+export declare function ComposerToolbarLabel({ className, render, ...props }: ComposerToolbarLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/composer/composer-toolbar-label.mjs

@@ -0,0 +1,24 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer-toolbar-label.tsx
+const composerToolbarLabel = tv({ slots: { root: [
+	"inline-flex cursor-pointer select-none items-center",
+	"min-h-8 gap-2",
+	"font-sans text-callout font-semibold text-foreground",
+	"has-data-disabled:cursor-not-allowed has-data-disabled:text-foreground-disabled"
+] } });
+function ComposerToolbarLabel({ className, render, ...props }) {
+	const { root } = composerToolbarLabel();
+	const defaultProps = {
+		"data-slot": "composer-toolbar-label",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "label",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ComposerToolbarLabel };

package/dist/components/composer/composer.d.mts

@@ -0,0 +1,20 @@
+import { ButtonProps } from "../button/button.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer.d.ts
+export type ComposerProps = useRender.ComponentProps<"div">;
+export declare function Composer({ className, render, ...props }: ComposerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerInputProps = useRender.ComponentProps<"textarea">;
+export declare function ComposerInput({ className, render, ...props }: ComposerInputProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerToolbarProps = useRender.ComponentProps<"div">;
+export declare function ComposerToolbar({ className, render, ...props }: ComposerToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerActionsProps = useRender.ComponentProps<"div">;
+export declare function ComposerActions({ className, render, ...props }: ComposerActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerMetaProps = useRender.ComponentProps<"div">;
+export declare function ComposerMeta({ className, render, ...props }: ComposerMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerIconButtonProps = Omit<ButtonProps, "className" | "size" | "variant"> & {
+  className?: string;
+};
+export declare function ComposerIconButton({ className, ...props }: ComposerIconButtonProps): import("react").JSX.Element;
+export type ComposerSubmitProps = Omit<ButtonProps, "variant">;
+export declare function ComposerSubmit({ type, className, ...props }: ComposerSubmitProps): import("react").JSX.Element;
+//#endregion

package/dist/components/composer/composer.mjs

@@ -0,0 +1,88 @@
+import { Button } from "../button/button.mjs";
+import { composer } from "./composer.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/composer/composer.tsx
+function Composer({ className, render, ...props }) {
+	const { root } = composer();
+	const defaultProps = {
+		"data-slot": "composer",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerInput({ className, render, ...props }) {
+	const { input } = composer();
+	const defaultProps = {
+		rows: 1,
+		"data-slot": "composer-input",
+		className: input({ className })
+	};
+	return useRender({
+		defaultTagName: "textarea",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerToolbar({ className, render, ...props }) {
+	const { toolbar } = composer();
+	const defaultProps = {
+		"data-slot": "composer-toolbar",
+		className: toolbar({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerActions({ className, render, ...props }) {
+	const { actions } = composer();
+	const defaultProps = {
+		"data-slot": "composer-actions",
+		className: actions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerMeta({ className, render, ...props }) {
+	const { meta } = composer();
+	const defaultProps = {
+		"data-slot": "composer-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ComposerIconButton({ className, ...props }) {
+	const { iconButton } = composer();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "icon-md",
+		variant: "ghost",
+		className: iconButton({ className }),
+		...props
+	});
+}
+function ComposerSubmit({ type = "submit", className, ...props }) {
+	const { submit } = composer();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		className: submit({ className }),
+		type,
+		variant: "accent"
+	});
+}
+//#endregion
+export { Composer, ComposerActions, ComposerIconButton, ComposerInput, ComposerMeta, ComposerSubmit, ComposerToolbar };

package/dist/components/composer/composer.recipe.mjs

@@ -0,0 +1,29 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/composer/composer.recipe.ts
+const composer = tv({ slots: {
+	root: [
+		"flex w-full flex-col gap-2 p-2",
+		"rounded-container border-[1.5px] px-3 pt-3 pb-[calc(var(--control-embedded-inset)-1px)]",
+		"border-line-field bg-layer-card text-foreground shadow-none",
+		"has-focus-visible:shadow-focus"
+	],
+	input: [
+		"max-h-32 w-full resize-none bg-transparent outline-none",
+		"field-sizing-content overflow-y-auto",
+		"min-h-6 px-0.5",
+		"font-sans text-body font-normal text-foreground",
+		"placeholder:text-foreground-hint"
+	],
+	toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset"],
+	actions: ["flex items-center gap-embedded-inset"],
+	meta: ["flex items-center", "gap-embedded-inset"],
+	iconButton: [
+		"size-8 rounded-chip text-foreground-muted",
+		"disabled:border-transparent disabled:bg-transparent",
+		"aria-disabled:border-transparent aria-disabled:bg-transparent",
+		"[&_svg:not([class*='size-'])]:size-4.5"
+	],
+	submit: ["rounded-chip"]
+} });
+//#endregion
+export { composer };

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

@@ -0,0 +1,10 @@
+import { Composer, ComposerActions, ComposerActionsProps, ComposerIconButton, ComposerIconButtonProps, ComposerInput, ComposerInputProps, ComposerMeta, ComposerMetaProps, ComposerProps, ComposerSubmit, ComposerSubmitProps, ComposerToolbar, ComposerToolbarProps } from "./composer.mjs";
+import { ComposerAttachment, ComposerAttachmentBody, ComposerAttachmentBodyProps, ComposerAttachmentFailedOverlay, ComposerAttachmentFailedOverlayProps, ComposerAttachmentFile, ComposerAttachmentFileProps, ComposerAttachmentImage, ComposerAttachmentImageProps, ComposerAttachmentMeta, ComposerAttachmentMetaProps, ComposerAttachmentProps, ComposerAttachmentRemove, ComposerAttachmentRemoveProps, ComposerAttachmentTitle, ComposerAttachmentTitleProps, ComposerAttachmentUploadProgressBar, ComposerAttachmentUploadProgressBarProps, ComposerAttachmentUploadingOverlay, ComposerAttachmentUploadingOverlayProps, ComposerAttachments, ComposerAttachmentsProps } from "./composer-attachments.mjs";
+import { ComposerAttachmentsScrollArea, ComposerAttachmentsScrollAreaProps } from "./composer-attachments-scroll-area.mjs";
+import { SortableComposerAttachment, SortableComposerAttachmentProps, SortableComposerAttachments, SortableComposerAttachmentsProps, SortableComposerAttachmentsScroll } from "./sortable-composer-attachments.mjs";
+import { ComposerDropOverlay, ComposerDropOverlayLabel, ComposerDropOverlayLabelProps, ComposerDropOverlayPrompt, ComposerDropOverlayPromptProps, ComposerDropOverlayProps } from "./composer-drop-overlay.mjs";
+import { ComposerSuggestionAside, ComposerSuggestionAsideProps, ComposerSuggestionContent, ComposerSuggestionContentProps, ComposerSuggestionGroup, ComposerSuggestionGroupLabel, ComposerSuggestionGroupLabelProps, ComposerSuggestionGroupProps, ComposerSuggestionIcon, ComposerSuggestionIconProps, ComposerSuggestionList, ComposerSuggestionListProps, ComposerSuggestionMeta, ComposerSuggestionMetaProps, ComposerSuggestionOption, ComposerSuggestionOptionProps, ComposerSuggestionTitle, ComposerSuggestionTitleProps } from "./composer-suggestion-list.mjs";
+import { ComposerRoot, ComposerRootProps } from "./composer-root.mjs";
+import { ComposerToolbarLabel, ComposerToolbarLabelProps } from "./composer-toolbar-label.mjs";
+import { ComposerSuggestionTriggerMatch, ComposerSuggestionsInputProps, ComposerSuggestionsListProps, ComposerSuggestionsOptionProps, UseComposerSuggestionsParams, useComposerSuggestions } from "./use-composer-suggestions.mjs";
+export { Composer, ComposerActions, type ComposerActionsProps, ComposerAttachment, ComposerAttachmentBody, type ComposerAttachmentBodyProps, ComposerAttachmentFailedOverlay, type ComposerAttachmentFailedOverlayProps, ComposerAttachmentFile, type ComposerAttachmentFileProps, ComposerAttachmentImage, type ComposerAttachmentImageProps, ComposerAttachmentMeta, type ComposerAttachmentMetaProps, type ComposerAttachmentProps, ComposerAttachmentRemove, type ComposerAttachmentRemoveProps, ComposerAttachmentTitle, type ComposerAttachmentTitleProps, ComposerAttachmentUploadProgressBar, type ComposerAttachmentUploadProgressBarProps, ComposerAttachmentUploadingOverlay, type ComposerAttachmentUploadingOverlayProps, ComposerAttachments, type ComposerAttachmentsProps, ComposerAttachmentsScrollArea, type ComposerAttachmentsScrollAreaProps, ComposerDropOverlay, ComposerDropOverlayLabel, type ComposerDropOverlayLabelProps, ComposerDropOverlayPrompt, type ComposerDropOverlayPromptProps, type ComposerDropOverlayProps, ComposerIconButton, type ComposerIconButtonProps, ComposerInput, type ComposerInputProps, ComposerMeta, type ComposerMetaProps, type ComposerProps, ComposerRoot, type ComposerRootProps, ComposerSubmit, type ComposerSubmitProps, ComposerSuggestionAside, type ComposerSuggestionAsideProps, ComposerSuggestionContent, type ComposerSuggestionContentProps, ComposerSuggestionGroup, ComposerSuggestionGroupLabel, type ComposerSuggestionGroupLabelProps, type ComposerSuggestionGroupProps, ComposerSuggestionIcon, type ComposerSuggestionIconProps, ComposerSuggestionList, type ComposerSuggestionListProps, ComposerSuggestionMeta, type ComposerSuggestionMetaProps, ComposerSuggestionOption, type ComposerSuggestionOptionProps, ComposerSuggestionTitle, type ComposerSuggestionTitleProps, type ComposerSuggestionTriggerMatch, type ComposerSuggestionsInputProps, type ComposerSuggestionsListProps, type ComposerSuggestionsOptionProps, ComposerToolbar, ComposerToolbarLabel, type ComposerToolbarLabelProps, type ComposerToolbarProps, SortableComposerAttachment, type SortableComposerAttachmentProps, SortableComposerAttachments, type SortableComposerAttachmentsProps, SortableComposerAttachmentsScroll, type UseComposerSuggestionsParams, useComposerSuggestions };

package/dist/components/composer/sortable-composer-attachments.d.mts

@@ -0,0 +1,37 @@
+import { DragMessages } from "../drag/drag-announcements.mjs";
+import { ReactNode } from "react";
+//#region src/components/composer/sortable-composer-attachments.d.ts
+export type SortableComposerAttachmentsProps = {
+  items: readonly string[];
+  onReorder: (items: string[]) => void;
+  children: ReactNode;
+  /**
+   * Your translations of the drag's instructions and announcements. Each step
+   * is said by the attachment's `label` and its position; never by its id.
+   */
+  messages?: Partial<DragMessages>;
+  /**
+   * Where the lifted copy renders: `document.body` by default, so a
+   * transformed ancestor (a drawer, a dialog) doesn't offset it. `null`
+   * renders it in place.
+   */
+  container?: Element | DocumentFragment | null;
+};
+/** Wrap / flex-pack attachment reorder (mixed widths). */
+export declare function SortableComposerAttachments(props: SortableComposerAttachmentsProps): import("react").JSX.Element;
+/** Horizontal scroll strip reorder — wraps `ComposerAttachmentsScrollArea`. */
+export declare function SortableComposerAttachmentsScroll(props: SortableComposerAttachmentsProps): import("react").JSX.Element;
+export type SortableComposerAttachmentProps = {
+  id: string;
+  label: string;
+  children: ReactNode;
+};
+/**
+ * The lifted attachment's own slot stays in the flex flow: at 40% while it is
+ * still home, the dashed place once it stands anywhere else. DragLift holds
+ * the copy that follows the hand; the root reads these `children` for it.
+ * Live draft reorder moves this slot to the drop index; wrap skips strategy
+ * transforms so siblings FLIP via layout instead of wrong gaps.
+ */
+export declare function SortableComposerAttachment({ id, label, children }: SortableComposerAttachmentProps): import("react").JSX.Element;
+//#endregion

package/dist/components/composer/sortable-composer-attachments.mjs

@@ -0,0 +1,247 @@
+import { ComposerAttachmentsScrollArea } from "./composer-attachments-scroll-area.mjs";
+import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
+import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
+import { useDragSensors } from "../drag/drag-sensors.mjs";
+import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
+import { Children, createContext, isValidElement, use, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, closestCenter, pointerWithin } from "@dnd-kit/core";
+import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/components/composer/sortable-composer-attachments.tsx
+/** Whether the lifted attachment still stands at its own index. */
+const SortableAttachmentsHomeContext = createContext(true);
+/**
+* Mixed-width flex-wrap cannot be predicted by rectSortingStrategy. Preview
+* position by live DOM reorder on dragOver instead; strategy returns null so
+* siblings are not shifted by incorrect transforms on top of that reflow.
+* @see https://github.com/clauderic/dnd-kit/issues/44
+*/
+const liveReorderStrategy = () => null;
+/**
+* Prefer pointer hits; if the active droppable is still under the pointer /
+* closest center, keep it so layout reflow alone cannot claim a neighbor.
+*/
+const sortableCollisionDetection = (args) => {
+	const pointerCollisions = pointerWithin(args);
+	const collisions = pointerCollisions.length > 0 ? pointerCollisions : closestCenter(args);
+	const self = collisions.find((collision) => collision.id === args.active.id);
+	return self ? [self] : collisions;
+};
+function reorderItems(items, activeId, overId) {
+	const oldIndex = items.indexOf(String(activeId));
+	const newIndex = items.indexOf(String(overId));
+	if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return null;
+	return arrayMove([...items], oldIndex, newIndex);
+}
+function pointerFromDragEvent(event) {
+	const { activatorEvent, delta } = event;
+	if (!activatorEvent || !("clientX" in activatorEvent) || !("clientY" in activatorEvent) || typeof activatorEvent.clientX !== "number" || typeof activatorEvent.clientY !== "number") return null;
+	return {
+		x: activatorEvent.clientX + delta.x,
+		y: activatorEvent.clientY + delta.y
+	};
+}
+function samePointer(a, b, tolerance = .5) {
+	return Math.abs(a.x - b.x) <= tolerance && Math.abs(a.y - b.y) <= tolerance;
+}
+/** Attachment tiles keyed by id; also the source of the DragOverlay ghost content. */
+function attachmentsById(children) {
+	const byId = /* @__PURE__ */ new Map();
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child) || child.props.id == null) return;
+		byId.set(String(child.props.id), child);
+	});
+	return byId;
+}
+function setOrder(positions, ids) {
+	positions.clear();
+	ids.forEach((id, index) => positions.set(id, index));
+}
+/**
+* An attachment is said by its `label`, at its position. Over another
+* attachment the dragged one already stands where it would drop (live
+* reorder); with nothing under the hand it is home.
+*/
+function attachmentAnnouncementSource({ labels, home, draft }) {
+	return {
+		name: (id) => labels.get(String(id)) ?? "",
+		place: (id, overId) => {
+			const positions = overId == null ? home : draft;
+			const index = positions.get(String(id));
+			return index == null ? null : {
+				place: "",
+				position: index + 1,
+				count: positions.size
+			};
+		}
+	};
+}
+function SortableComposerAttachmentsRoot({ items, onReorder, children, messages, container, axis, strategy }) {
+	const dndContextId = useId();
+	const listRef = useRef(null);
+	const [activeId, setActiveId] = useState(null);
+	const [draftIds, setDraftIds] = useState([]);
+	const [overlay, setOverlay] = useState(null);
+	const [listMinHeight, setListMinHeight] = useState();
+	const draftIdsRef = useRef([]);
+	const lastReorderPointerRef = useRef(null);
+	const sensors = useDragSensors();
+	const liftContainer = useLiftContainer(container);
+	const attachments = useMemo(() => attachmentsById(children), [children]);
+	const itemIds = useMemo(() => items.map(String), [items]);
+	const [announced] = useState(() => ({
+		labels: /* @__PURE__ */ new Map(),
+		home: /* @__PURE__ */ new Map(),
+		draft: /* @__PURE__ */ new Map()
+	}));
+	useLayoutEffect(() => {
+		announced.labels.clear();
+		for (const [id, child] of attachments) if (child.props.label != null) announced.labels.set(id, child.props.label);
+		setOrder(announced.home, itemIds);
+	}, [
+		announced,
+		attachments,
+		itemIds
+	]);
+	const accessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: createDragAnnouncements(attachmentAnnouncementSource(announced), messages)
+	}), [announced, messages]);
+	const horizontal = axis === "x";
+	const displayIds = activeId !== null ? draftIds : itemIds;
+	const home = activeId === null || draftIds.indexOf(activeId) === itemIds.indexOf(activeId);
+	const orderedChildren = useMemo(() => displayIds.flatMap((id) => {
+		const child = attachments.get(id);
+		return child ? [child] : [];
+	}), [attachments, displayIds]);
+	const listClassName = horizontal ? "contents" : "flex w-full min-w-0 flex-wrap content-start items-start gap-2 py-1.5";
+	const handleDragStart = useCallback(({ active }) => {
+		const id = String(active.id);
+		lastReorderPointerRef.current = null;
+		const nextDraft = [...itemIds];
+		draftIdsRef.current = nextDraft;
+		setOrder(announced.draft, nextDraft);
+		setDraftIds(nextDraft);
+		if (!horizontal && listRef.current) setListMinHeight(listRef.current.getBoundingClientRect().height);
+		setActiveId(id);
+		setOverlay(attachments.get(id)?.props.children ?? null);
+	}, [
+		announced,
+		attachments,
+		horizontal,
+		itemIds
+	]);
+	const handleDragOver = useCallback(({ active, over, activatorEvent, delta }) => {
+		if (!over || active.id === over.id) return;
+		const next = reorderItems(draftIdsRef.current, active.id, over.id);
+		if (!next) return;
+		const pointer = pointerFromDragEvent({
+			activatorEvent,
+			delta
+		});
+		if (pointer && lastReorderPointerRef.current && samePointer(pointer, lastReorderPointerRef.current)) return;
+		if (pointer) lastReorderPointerRef.current = pointer;
+		draftIdsRef.current = next;
+		setOrder(announced.draft, next);
+		setDraftIds(next);
+	}, [announced]);
+	const clearDrag = useCallback(() => {
+		lastReorderPointerRef.current = null;
+		draftIdsRef.current = [];
+		setActiveId(null);
+		setDraftIds([]);
+		setOverlay(null);
+		setListMinHeight(void 0);
+	}, []);
+	const handleDragCancel = useCallback(() => {
+		clearDrag();
+	}, [clearDrag]);
+	const handleDragEnd = useCallback(() => {
+		onReorder(draftIdsRef.current);
+		clearDrag();
+	}, [clearDrag, onReorder]);
+	return /* @__PURE__ */ jsxs(DndContext, {
+		id: dndContextId,
+		accessibility,
+		sensors,
+		collisionDetection: sortableCollisionDetection,
+		autoScroll: false,
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragCancel: handleDragCancel,
+		onDragEnd: handleDragEnd,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			"data-slot": "sortable-composer-attachments-list",
+			className: listClassName,
+			style: listMinHeight != null ? { minHeight: listMinHeight } : void 0,
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: displayIds,
+				strategy,
+				children: /* @__PURE__ */ jsx(SortableAttachmentsHomeContext, {
+					value: home,
+					children: orderedChildren
+				})
+			})
+		}), /* @__PURE__ */ jsx(DragLift, {
+			className: "rounded-control",
+			container: liftContainer,
+			children: activeId && overlay ? overlay : null
+		})]
+	});
+}
+/** Wrap / flex-pack attachment reorder (mixed widths). */
+function SortableComposerAttachments(props) {
+	return /* @__PURE__ */ jsx(SortableComposerAttachmentsRoot, {
+		...props,
+		axis: "xy",
+		strategy: liveReorderStrategy
+	});
+}
+/** Horizontal scroll strip reorder — wraps `ComposerAttachmentsScrollArea`. */
+function SortableComposerAttachmentsScroll(props) {
+	return /* @__PURE__ */ jsx(ComposerAttachmentsScrollArea, { children: /* @__PURE__ */ jsx(SortableComposerAttachmentsRoot, {
+		...props,
+		axis: "x",
+		strategy: horizontalListSortingStrategy
+	}) });
+}
+/**
+* The lifted attachment's own slot stays in the flex flow: at 40% while it is
+* still home, the dashed place once it stands anywhere else. DragLift holds
+* the copy that follows the hand; the root reads these `children` for it.
+* Live draft reorder moves this slot to the drop index; wrap skips strategy
+* transforms so siblings FLIP via layout instead of wrong gaps.
+*/
+function SortableComposerAttachment({ id, label, children }) {
+	const home = use(SortableAttachmentsHomeContext);
+	const siblingTransition = useDragSiblingTransition();
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		animateLayoutChanges: defaultAnimateLayoutChanges,
+		transition: siblingTransition
+	});
+	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
+	const style = {
+		transform: isDragging ? void 0 : CSS.Translate.toString(transform),
+		transition: isDragging ? void 0 : transition,
+		zIndex: isDragging ? 0 : void 0
+	};
+	const place = isDragging && !home;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		"aria-label": `Reorder ${label}`,
+		className: "relative w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing data-drop-place:[&>:not([data-slot=drop-placeholder])]:invisible",
+		"data-dragging": isDragging ? "true" : void 0,
+		"data-drag-origin": isDragging && home ? "" : void 0,
+		"data-drop-place": place ? "" : void 0,
+		"data-slot": "sortable-composer-attachment",
+		style,
+		...sortableAttributes,
+		...listeners,
+		children: [children, place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0" }) : null]
+	});
+}
+//#endregion
+export { SortableComposerAttachment, SortableComposerAttachments, SortableComposerAttachmentsScroll };