@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/blocks/design-canvas.js

@@ -0,0 +1,452 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
+import { DesignCanvasInspector } from "./design-canvas-inspector.js";
+import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
+import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
+import { ResizableFloatingPanel } from "../ui/resizable.js";
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
+//#region src/blocks/design-canvas.tsx
+const TOOLS = [
+	{
+		tool: "move",
+		label: "Move",
+		shortcut: "V",
+		icon: /* @__PURE__ */ jsx(MousePointer2Icon, {})
+	},
+	{
+		tool: "frame",
+		label: "Frame",
+		shortcut: "F",
+		icon: /* @__PURE__ */ jsx(FrameIcon, {})
+	},
+	{
+		tool: "rectangle",
+		label: "Rectangle",
+		shortcut: "R",
+		icon: /* @__PURE__ */ jsx(SquareIcon, {})
+	},
+	{
+		tool: "ellipse",
+		label: "Ellipse",
+		shortcut: "O",
+		icon: /* @__PURE__ */ jsx(CircleIcon, {})
+	},
+	{
+		tool: "text",
+		label: "Text",
+		shortcut: "T",
+		icon: /* @__PURE__ */ jsx(TypeIcon, {})
+	}
+];
+const LAYER_ICONS = {
+	frame: /* @__PURE__ */ jsx(FrameIcon, {}),
+	rectangle: /* @__PURE__ */ jsx(SquareIcon, {}),
+	ellipse: /* @__PURE__ */ jsx(CircleIcon, {}),
+	text: /* @__PURE__ */ jsx(TypeIcon, {})
+};
+const NUDGE_DIRECTIONS = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const DEFAULT_TRANSFORM = {
+	x: 0,
+	y: 0,
+	scale: 1
+};
+const CLICK_TOLERANCE_PX = 4;
+const DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
+const CANVAS_KEY_SHORTCUTS = `${TOOLS.map((entry) => entry.shortcut).join(" ")} Enter Delete Backspace Escape`;
+const LAYER_KEY_SHORTCUTS = "Enter Space ArrowLeft ArrowRight ArrowUp ArrowDown Delete Backspace";
+function newLayerId(kind) {
+	return `${kind}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function toolForShortcut(key) {
+	return TOOLS.find((entry) => entry.shortcut === key.toUpperCase())?.tool;
+}
+function layerFromDraft(draft, id) {
+	return createDesignCanvasLayer(draft.kind, drawnDesignCanvasBounds(draft.kind, draft.start, draft.end, draft.clickTolerance), id);
+}
+function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selectedLayerId, defaultSelectedLayerId = null, onSelectedLayerIdChange, defaultTransform = DEFAULT_TRANSFORM, layout = "viewport", layersLabel = "Layers", propertiesLabel = "Properties", openLayersLabel = "Show layers", openPropertiesLabel = "Show properties", className, ...props }) {
+	const [internalLayers, setInternalLayers] = useState(defaultLayers);
+	const [internalSelectedLayerId, setInternalSelectedLayerId] = useState(defaultSelectedLayerId);
+	const transformRef = useRef(defaultTransform);
+	const [tool, setTool] = useState("move");
+	const [draft, setDraft] = useState(null);
+	const [layersOpen, setLayersOpen] = useState(false);
+	const [propertiesOpen, setPropertiesOpen] = useState(false);
+	const currentLayers = layers ?? internalLayers;
+	const currentSelectedLayerId = selectedLayerId === void 0 ? internalSelectedLayerId : selectedLayerId;
+	const selectedLayer = currentLayers.find((layer) => layer.id === currentSelectedLayerId);
+	function changeLayers(next) {
+		if (layers === void 0) setInternalLayers(next);
+		onLayersChange?.(next);
+	}
+	function selectLayer(layerId) {
+		if (selectedLayerId === void 0) setInternalSelectedLayerId(layerId);
+		onSelectedLayerIdChange?.(layerId);
+	}
+	function replaceLayer(next) {
+		changeLayers(currentLayers.map((layer) => layer.id === next.id ? next : layer));
+	}
+	function addLayer(layer) {
+		changeLayers([...currentLayers, layer]);
+		selectLayer(layer.id);
+		setTool("move");
+	}
+	function toWorldPoint(local) {
+		const { x, y, scale } = transformRef.current;
+		return {
+			x: (local.x - x) / scale,
+			y: (local.y - y) / scale
+		};
+	}
+	function worldPointAt(event) {
+		const bounds = event.currentTarget.getBoundingClientRect();
+		return toWorldPoint({
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
+		});
+	}
+	function addLayerAtViewportCenter(kind, canvas) {
+		const center = toWorldPoint({
+			x: canvas.clientWidth / 2,
+			y: canvas.clientHeight / 2
+		});
+		const bounds = drawnDesignCanvasBounds(kind, center, center, CLICK_TOLERANCE_PX / transformRef.current.scale);
+		addLayer(createDesignCanvasLayer(kind, bounds, newLayerId(kind)));
+	}
+	function beginDrawOrDeselect(event) {
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (tool === "move") {
+			selectLayer(null);
+			return;
+		}
+		if (!event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const point = worldPointAt(event);
+		setDraft({
+			kind: tool,
+			pointerId: event.pointerId,
+			start: point,
+			end: point,
+			clickTolerance: CLICK_TOLERANCE_PX / transformRef.current.scale
+		});
+	}
+	function resizeDraft(event) {
+		if (draft?.pointerId !== event.pointerId) return;
+		setDraft({
+			...draft,
+			end: worldPointAt(event)
+		});
+	}
+	function commitDraft(event) {
+		if (draft?.pointerId !== event.pointerId) return;
+		setDraft(null);
+		addLayer(layerFromDraft(draft, newLayerId(draft.kind)));
+	}
+	function cancelDraft(event) {
+		if (draft?.pointerId === event.pointerId) setDraft(null);
+	}
+	function editLayerWithKey(layer, event) {
+		const nudge = NUDGE_DIRECTIONS[event.key];
+		if (DELETE_KEYS.has(event.key)) {
+			changeLayers(currentLayers.filter((entry) => entry.id !== layer.id));
+			if (layer.id === currentSelectedLayerId) selectLayer(null);
+		} else if (nudge) {
+			const distance = event.shiftKey ? 10 : 1;
+			replaceLayer({
+				...layer,
+				x: layer.x + nudge.x * distance,
+				y: layer.y + nudge.y * distance
+			});
+		} else return false;
+		return true;
+	}
+	function handleLayerKey(layer, event) {
+		if (event.metaKey || event.ctrlKey || event.altKey) return;
+		if (event.key === "Enter" || event.key === " ") selectLayer(layer.id);
+		else if (!editLayerWithKey(layer, event)) return;
+		event.preventDefault();
+		if (DELETE_KEYS.has(event.key)) event.currentTarget.closest("[data-control-family=\"infinite-canvas\"][data-slot=\"root\"]")?.focus();
+	}
+	function handleShortcut(event) {
+		if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+		const shortcutTool = toolForShortcut(event.key);
+		if (shortcutTool) setTool(shortcutTool);
+		else if (event.key === "Escape") {
+			setDraft(null);
+			setTool("move");
+			selectLayer(null);
+		} else if (event.key === "Enter" && tool !== "move" && event.target === event.currentTarget) addLayerAtViewportCenter(tool, event.currentTarget);
+		else if (!selectedLayer || !editLayerWithKey(selectedLayer, event)) return;
+		event.preventDefault();
+	}
+	const layerList = /* @__PURE__ */ jsx(DesignCanvasLayerList, {
+		layers: currentLayers,
+		selectedLayerId: currentSelectedLayerId,
+		onSelect: selectLayer
+	});
+	const inspector = /* @__PURE__ */ jsx(DesignCanvasInspector, {
+		layer: selectedLayer,
+		onLayerChange: replaceLayer
+	});
+	const propertiesTitle = selectedLayer?.name ?? "Design";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container/design-canvas relative isolate overflow-hidden bg-background text-foreground", layout === "contained" ? "h-full min-h-0" : "h-svh", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(InfiniteCanvas, {
+				"aria-label": "Design canvas",
+				"aria-keyshortcuts": CANVAS_KEY_SHORTCUTS,
+				defaultTransform,
+				onTransformChange: (next) => {
+					transformRef.current = next;
+				},
+				"data-tool": tool,
+				className: cn("size-full", tool !== "move" && "cursor-crosshair"),
+				style: {
+					"--cui-infinite-canvas-radius": "0px",
+					"--cui-infinite-canvas-border-color": "transparent",
+					"--cui-infinite-canvas-background": "var(--muted)"
+				},
+				onPointerDown: beginDrawOrDeselect,
+				onPointerMove: resizeDraft,
+				onPointerUp: commitDraft,
+				onPointerCancel: cancelDraft,
+				onKeyDown: handleShortcut,
+				children: [/* @__PURE__ */ jsxs(InfiniteCanvasContent, {
+					className: cn(tool !== "move" && "[&>*]:pointer-events-none"),
+					children: [currentLayers.map((layer) => /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
+						layer,
+						selected: layer.id === currentSelectedLayerId,
+						onSelect: () => selectLayer(layer.id),
+						onKeyDown: (event) => handleLayerKey(layer, event),
+						onLayerChange: replaceLayer
+					}, layer.id)), draft ? /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
+						layer: layerFromDraft(draft, "draft"),
+						selected: true
+					}) : null]
+				}), /* @__PURE__ */ jsx(InfiniteCanvasControls, { className: "start-3 end-auto top-3 bottom-auto w-max @4xl/design-canvas:inset-x-0 @4xl/design-canvas:mx-auto" })]
+			}),
+			/* @__PURE__ */ jsx(ResizableFloatingPanel, {
+				side: "left",
+				defaultSize: 224,
+				minSize: 180,
+				maxSize: 360,
+				className: "hidden @4xl/design-canvas:flex",
+				children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+					label: layersLabel,
+					title: layersLabel,
+					children: layerList
+				})
+			}),
+			/* @__PURE__ */ jsx(ResizableFloatingPanel, {
+				defaultSize: 280,
+				minSize: 256,
+				maxSize: 440,
+				className: "hidden @xl/design-canvas:flex",
+				children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+					label: propertiesLabel,
+					title: propertiesTitle,
+					children: inspector
+				})
+			}),
+			/* @__PURE__ */ jsx(Drawer, {
+				side: "left",
+				open: layersOpen,
+				onOpenChange: setLayersOpen,
+				children: /* @__PURE__ */ jsx(DrawerContent, {
+					side: "left",
+					className: "gap-0 p-0",
+					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+						label: layersLabel,
+						title: layersLabel,
+						inDrawer: true,
+						children: layerList
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Drawer, {
+				side: "right",
+				open: propertiesOpen,
+				onOpenChange: setPropertiesOpen,
+				children: /* @__PURE__ */ jsx(DrawerContent, {
+					side: "right",
+					className: "gap-0 p-0",
+					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+						label: propertiesLabel,
+						title: propertiesTitle,
+						inDrawer: true,
+						children: inspector
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar, {
+				variant: "floating",
+				"aria-label": "Design tools",
+				className: "absolute start-4 bottom-4 w-max @4xl/design-canvas:inset-x-0 @4xl/design-canvas:mx-auto",
+				children: [
+					/* @__PURE__ */ jsx(ToolbarGroup, {
+						"aria-label": "Tools",
+						children: TOOLS.map((entry) => /* @__PURE__ */ jsx(DesignCanvasToolbarButton, {
+							label: entry.label,
+							hint: `${entry.label} · ${entry.shortcut}`,
+							pressed: tool === entry.tool,
+							onClick: () => setTool(entry.tool),
+							children: entry.icon
+						}, entry.tool))
+					}),
+					/* @__PURE__ */ jsx(ToolbarSeparator, { className: "@4xl/design-canvas:hidden" }),
+					/* @__PURE__ */ jsxs(ToolbarGroup, {
+						className: "@4xl/design-canvas:hidden",
+						children: [/* @__PURE__ */ jsx(DesignCanvasToolbarButton, {
+							label: openLayersLabel,
+							hint: openLayersLabel,
+							"aria-haspopup": "dialog",
+							"aria-expanded": layersOpen,
+							onClick: () => setLayersOpen(true),
+							children: /* @__PURE__ */ jsx(LayersIcon, {})
+						}), /* @__PURE__ */ jsx(DesignCanvasToolbarButton, {
+							label: openPropertiesLabel,
+							hint: openPropertiesLabel,
+							"aria-haspopup": "dialog",
+							"aria-expanded": propertiesOpen,
+							className: "@xl/design-canvas:hidden",
+							onClick: () => setPropertiesOpen(true),
+							children: /* @__PURE__ */ jsx(SlidersHorizontalIcon, {})
+						})]
+					})
+				]
+			}) })
+		]
+	});
+}
+function DesignCanvasPanel({ label, title, inDrawer = false, children }) {
+	const titleClassName = "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium";
+	const titleText = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		title,
+		children: title
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		"aria-label": label,
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [inDrawer ? /* @__PURE__ */ jsx(DrawerTitle, {
+			className: titleClassName,
+			children: titleText
+		}) : /* @__PURE__ */ jsx("h2", {
+			className: titleClassName,
+			children: titleText
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			className: "min-h-0 flex-1",
+			children
+		})]
+	});
+}
+function DesignCanvasLayerList({ layers, selectedLayerId, onSelect }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-0.5 p-2",
+		children: layers.toReversed().map((layer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			active: layer.id === selectedLayerId,
+			"aria-pressed": layer.id === selectedLayerId,
+			className: "w-full justify-start [&_svg]:size-3.5 [&_svg]:text-muted-foreground",
+			onClick: () => onSelect(layer.id),
+			children: [LAYER_ICONS[layer.kind], /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				title: layer.name,
+				children: layer.name
+			})]
+		}) }, layer.id))
+	});
+}
+function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerChange }) {
+	const fillColor = designCanvasFillColor(layer.fill);
+	const interactive = onSelect !== void 0;
+	return /* @__PURE__ */ jsxs(InfiniteCanvasItem, {
+		x: layer.x,
+		y: layer.y,
+		"aria-label": layer.name,
+		role: interactive ? "button" : void 0,
+		tabIndex: interactive ? 0 : void 0,
+		"aria-pressed": interactive ? selected : void 0,
+		"aria-keyshortcuts": interactive ? LAYER_KEY_SHORTCUTS : void 0,
+		"data-selected": selected || void 0,
+		className: "outline-primary data-selected:outline-2",
+		style: {
+			width: layer.width,
+			height: layer.height,
+			rotate: `${layer.rotation}deg`,
+			opacity: layer.opacity / 100
+		},
+		onPointerDown: onSelect,
+		onKeyDown,
+		onPositionChange: onLayerChange && ((position) => onLayerChange({
+			...layer,
+			x: Math.round(position.x),
+			y: Math.round(position.y)
+		})),
+		children: [
+			layer.kind === "frame" ? /* @__PURE__ */ jsx("span", {
+				className: "absolute start-0 bottom-full mb-1 whitespace-nowrap text-caption text-muted-foreground",
+				children: layer.name
+			}) : null,
+			layer.kind === "text" ? /* @__PURE__ */ jsx("p", {
+				className: "size-full overflow-hidden text-2xl leading-8 whitespace-nowrap",
+				style: { color: fillColor },
+				children: layer.text
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "size-full",
+				style: {
+					background: fillColor,
+					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
+				}
+			}),
+			selected ? /* @__PURE__ */ jsxs("span", {
+				className: "absolute inset-x-0 top-full mx-auto mt-1.5 w-max rounded-sm bg-primary px-1 text-micro whitespace-nowrap text-primary-foreground tabular-nums",
+				children: [
+					layer.width,
+					" × ",
+					layer.height
+				]
+			}) : null
+		]
+	});
+}
+function DesignCanvasToolbarButton({ label, hint, pressed, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(ToolbarButton, {
+			...props,
+			"aria-label": label,
+			iconOnly: true,
+			"aria-pressed": pressed,
+			"data-pressed": pressed ? "" : void 0
+		}),
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: hint })] });
+}
+//#endregion
+export { DesignCanvasBlock };

package/dist/blocks/discussion.d.ts

@@ -0,0 +1,28 @@
+import { ChatComposer } from "../chat-composer.js";
+import { ChatMessage } from "../chat-message.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/discussion.d.ts
+export type DiscussionComposerProps = Omit<ComponentProps<typeof ChatComposer>, "submitKey" | "children"> & {
+  label: string;
+  placeholder?: string;
+  submitLabel?: ReactNode;
+  secondaryAction?: ReactNode;
+  hint?: ReactNode;
+  autoFocus?: boolean;
+};
+export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, ...props }: DiscussionComposerProps): import("react").JSX.Element;
+export type DiscussionCommentProps = Omit<ComponentProps<typeof ChatMessage>, "from" | "layout" | "authorLabel" | "children"> & {
+  author: string;
+  avatar?: ReactNode;
+  sentAt: string;
+  timeLabel: ReactNode;
+  edited?: boolean;
+  children: ReactNode;
+  actions?: ReactNode;
+  onReply?: () => void;
+  replyLabel?: ReactNode;
+  replies?: ReactNode;
+  replyComposer?: ReactNode;
+};
+export declare function DiscussionComment({ author, avatar, sentAt, timeLabel, edited, children, actions, onReply, replyLabel, replies, replyComposer, ...props }: DiscussionCommentProps): import("react").JSX.Element;
+//#endregion

package/dist/blocks/discussion.js

@@ -0,0 +1,67 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { ChatComposer, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar } from "../chat-composer.js";
+import { ChatMessageReplies } from "../chat-message/social.js";
+import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
+import { Kbd, KbdGroup } from "../ui/kbd.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CornerDownRightIcon } from "lucide-react";
+//#region src/blocks/discussion.tsx
+function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, ...props }) {
+	return /* @__PURE__ */ jsx(ChatComposer, {
+		submitKey: "mod-enter",
+		...props,
+		children: /* @__PURE__ */ jsxs(ChatComposerShell, { children: [/* @__PURE__ */ jsx(ChatComposerTextarea, {
+			"aria-label": label,
+			placeholder,
+			autoFocus,
+			"aria-keyshortcuts": "Meta+Enter Control+Enter"
+		}), /* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground",
+			children: hint
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [secondaryAction, /* @__PURE__ */ jsx(ChatComposerSubmit, { children: submitLabel })]
+		})] })] })
+	});
+}
+function initials(name) {
+	return name.split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false, children, actions, onReply, replyLabel = "Reply", replies, replyComposer, ...props }) {
+	const hasReplies = Boolean(replies) || Boolean(replyComposer);
+	return /* @__PURE__ */ jsx(ChatMessage, {
+		from: "participant",
+		layout: "flat",
+		authorLabel: author,
+		...props,
+		children: /* @__PURE__ */ jsxs(ChatMessageRow, { children: [
+			/* @__PURE__ */ jsx(ChatMessageAvatar, { children: avatar ?? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: initials(author)
+			}) }),
+			/* @__PURE__ */ jsxs(ChatMessageBody, { children: [
+				/* @__PURE__ */ jsxs(ChatMessageHeader, { children: [
+					/* @__PURE__ */ jsx(ChatMessageAuthor, { children: author }),
+					/* @__PURE__ */ jsx(ChatMessageTime, {
+						dateTime: sentAt,
+						children: timeLabel
+					}),
+					edited ? /* @__PURE__ */ jsx("span", { children: "(edited)" }) : null
+				] }),
+				/* @__PURE__ */ jsx(ChatMessageContent, { children }),
+				onReply ? /* @__PURE__ */ jsx(ChatMessageFooter, { children: /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "xs",
+					onClick: onReply,
+					className: "-ms-2",
+					children: [/* @__PURE__ */ jsx(CornerDownRightIcon, { "aria-hidden": "true" }), replyLabel]
+				}) }) : null,
+				hasReplies ? /* @__PURE__ */ jsxs(ChatMessageReplies, { children: [replies, replyComposer] }) : null
+			] }),
+			actions ? /* @__PURE__ */ jsx(ChatMessageActions, { children: actions }) : null
+		] })
+	});
+}
+//#endregion
+export { DiscussionComment, DiscussionComposer };

package/dist/blocks/file-explorer-data.d.ts

@@ -52,5 +52,6 @@ export declare function groupFileExplorerItems<T extends {
   label: string;
   items: T[];
 }[];
+export declare function orderFileExplorerEntries(entries: readonly FileExplorerEntry[]): FileExplorerEntry[];
 export declare function searchFileExplorer(location: FileExplorerLocation, query: string): readonly FileExplorerSearchResult[];
 //#endregion

package/dist/blocks/file-explorer-data.js

@@ -52,6 +52,9 @@ function groupFileExplorerItems(items) {
 		items: groupedItems
 	}));
 }
+function orderFileExplorerEntries(entries) {
+	return groupFileExplorerItems(entries).flatMap((group) => group.items);
+}
 function searchFileExplorer(location, query) {
 	const normalizedQuery = query.trim().toLocaleLowerCase();
 	if (!normalizedQuery) return [];
@@ -71,4 +74,4 @@ function searchFileExplorer(location, query) {
 	return results;
 }
 //#endregion
-export { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer };
+export { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer };

package/dist/blocks/file-explorer.d.ts

@@ -16,9 +16,17 @@ export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "d
   sidebarTop?: ReactNode;
   sidebarFooter?: ReactNode;
   headerActions?: ReactNode;
+  headerMenuItems?: ReactNode;
   searchPlaceholder?: string | false;
+  searchLabel?: string;
+  clearSearchLabel?: string;
+  searchResultsLabel?: string;
+  searchStatusLabel?: (count: number, query: string) => string;
+  backLabel?: string;
+  moreActionsLabel?: string;
+  detailsLabel?: string;
   layout?: "viewport" | "contained";
 };
-export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, searchPlaceholder, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
+export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder, searchLabel, clearSearchLabel, searchResultsLabel, searchStatusLabel, backLabel, moreActionsLabel, detailsLabel, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
 //#endregion
 export type { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult };