@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/blocks/design-canvas-inspector.js

@@ -1,11 +1,11 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
-import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
+import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/blocks/design-canvas.d.ts

@@ -11,7 +11,11 @@ export type DesignCanvasBlockProps = Omit<ComponentProps<"div">, "children" | "d
   onSelectedLayerIdChange?: (layerId: string | null) => void;
   defaultTransform?: InfiniteCanvasTransform;
   layout?: "viewport" | "contained";
+  layersLabel?: string;
+  propertiesLabel?: string;
+  openLayersLabel?: string;
+  openPropertiesLabel?: string;
 };
-export declare function DesignCanvasBlock({ layers, defaultLayers, onLayersChange, selectedLayerId, defaultSelectedLayerId, onSelectedLayerIdChange, defaultTransform, layout, className, ...props }: DesignCanvasBlockProps): import("react").JSX.Element;
+export declare function DesignCanvasBlock({ layers, defaultLayers, onLayersChange, selectedLayerId, defaultSelectedLayerId, onSelectedLayerIdChange, defaultTransform, layout, layersLabel, propertiesLabel, openLayersLabel, openPropertiesLabel, className, ...props }: DesignCanvasBlockProps): import("react").JSX.Element;
 //#endregion
 export type { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool };

package/dist/blocks/design-canvas.js

@@ -3,14 +3,15 @@ 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 { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
-import { ResizableFloatingPanel } from "../ui/resizable.js";
-import { Toolbar, ToolbarButton, ToolbarGroup } from "../ui/toolbar.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, MousePointer2Icon, SquareIcon, TypeIcon } from "lucide-react";
+import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
 	{
@@ -74,6 +75,9 @@ const DEFAULT_TRANSFORM = {
 	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)}`;
 }
@@ -83,12 +87,14 @@ function toolForShortcut(key) {
 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", className, ...props }) {
+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);
@@ -103,14 +109,33 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	function replaceLayer(next) {
 		changeLayers(currentLayers.map((layer) => layer.id === next.id ? next : layer));
 	}
-	function worldPointAt(event) {
-		const bounds = event.currentTarget.getBoundingClientRect();
+	function addLayer(layer) {
+		changeLayers([...currentLayers, layer]);
+		selectLayer(layer.id);
+		setTool("move");
+	}
+	function toWorldPoint(local) {
 		const { x, y, scale } = transformRef.current;
 		return {
-			x: (event.clientX - bounds.left - x) / scale,
-			y: (event.clientY - bounds.top - y) / scale
+			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") {
@@ -138,48 +163,63 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	}
 	function commitDraft(event) {
 		if (draft?.pointerId !== event.pointerId) return;
-		const layer = layerFromDraft(draft, newLayerId(draft.kind));
 		setDraft(null);
-		changeLayers([...currentLayers, layer]);
-		selectLayer(layer.id);
-		setTool("move");
+		addLayer(layerFromDraft(draft, newLayerId(draft.kind)));
 	}
 	function cancelDraft(event) {
 		if (draft?.pointerId === event.pointerId) setDraft(null);
 	}
-	function editSelectedLayerWithKey(event) {
-		if (!selectedLayer) return false;
+	function editLayerWithKey(layer, event) {
 		const nudge = NUDGE_DIRECTIONS[event.key];
-		if (event.key === "Delete" || event.key === "Backspace") {
-			changeLayers(currentLayers.filter((layer) => layer.id !== selectedLayer.id));
-			selectLayer(null);
+		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({
-				...selectedLayer,
-				x: selectedLayer.x + nudge.x * distance,
-				y: selectedLayer.y + nudge.y * distance
+				...layer,
+				x: layer.x + nudge.x * distance,
+				y: layer.y + nudge.y * distance
 			});
 		} else return false;
 		return true;
 	}
-	function handleShortcut(event) {
+	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 (!editSelectedLayerWithKey(event)) return;
+		} 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;
@@ -202,12 +242,13 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 						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: "top-3 right-auto bottom-auto left-3 @4xl/design-canvas:left-1/2 @4xl/design-canvas:-translate-x-1/2" })]
+				}), /* @__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",
@@ -215,30 +256,10 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				minSize: 180,
 				maxSize: 360,
 				className: "hidden @4xl/design-canvas:flex",
-				children: /* @__PURE__ */ jsxs("aside", {
-					"aria-label": "Layers",
-					className: "flex min-h-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ jsx("h2", {
-						className: "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium",
-						children: "Layers"
-					}), /* @__PURE__ */ jsx(ScrollArea, {
-						className: "min-h-0 flex-1",
-						children: /* @__PURE__ */ jsx("ul", {
-							className: "flex flex-col gap-0.5 p-2",
-							children: currentLayers.toReversed().map((layer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
-								variant: "ghost",
-								size: "sm",
-								active: layer.id === currentSelectedLayerId,
-								"aria-pressed": layer.id === currentSelectedLayerId,
-								className: "w-full justify-start [&_svg]:size-3.5 [&_svg]:text-muted-foreground",
-								onClick: () => selectLayer(layer.id),
-								children: [LAYER_ICONS[layer.kind], /* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: layer.name
-								})]
-							}) }, layer.id))
-						})
-					})]
+				children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+					label: layersLabel,
+					title: layersLabel,
+					children: layerList
 				})
 			}),
 			/* @__PURE__ */ jsx(ResizableFloatingPanel, {
@@ -246,37 +267,133 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				minSize: 256,
 				maxSize: 440,
 				className: "hidden @xl/design-canvas:flex",
-				children: /* @__PURE__ */ jsxs("aside", {
-					"aria-label": "Properties",
-					className: "flex min-h-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ jsx("h2", {
-						className: "flex h-11 shrink-0 items-center border-b px-3 text-caption font-medium",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: selectedLayer?.name ?? "Design"
-						})
-					}), /* @__PURE__ */ jsx(ScrollArea, {
-						className: "min-h-0 flex-1",
-						children: /* @__PURE__ */ jsx(DesignCanvasInspector, {
-							layer: selectedLayer,
-							onLayerChange: replaceLayer
-						})
-					})]
+				children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
+					label: propertiesLabel,
+					title: propertiesTitle,
+					children: inspector
 				})
 			}),
-			/* @__PURE__ */ jsx(DesignCanvasToolbar, {
-				tool,
-				onToolChange: setTool
-			})
+			/* @__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 DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
+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: {
@@ -286,6 +403,7 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
 			opacity: layer.opacity / 100
 		},
 		onPointerDown: onSelect,
+		onKeyDown,
 		onPositionChange: onLayerChange && ((position) => onLayerChange({
 			...layer,
 			x: Math.round(position.x),
@@ -293,7 +411,7 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
 		})),
 		children: [
 			layer.kind === "frame" ? /* @__PURE__ */ jsx("span", {
-				className: "absolute bottom-full left-0 mb-1 whitespace-nowrap text-caption text-muted-foreground",
+				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", {
@@ -308,7 +426,7 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
 				}
 			}),
 			selected ? /* @__PURE__ */ jsxs("span", {
-				className: "absolute top-full left-1/2 mt-1.5 -translate-x-1/2 rounded-sm bg-primary px-1 text-[10px] leading-4 whitespace-nowrap text-primary-foreground tabular-nums",
+				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,
 					" × ",
@@ -318,29 +436,17 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onLayerChange }) {
 		]
 	});
 }
-function DesignCanvasToolbar({ tool, onToolChange }) {
-	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Toolbar, {
-		variant: "floating",
-		"aria-label": "Design tools",
-		className: "absolute bottom-4 left-4 w-max @4xl/design-canvas:left-1/2 @4xl/design-canvas:-translate-x-1/2",
-		children: /* @__PURE__ */ jsx(ToolbarGroup, {
-			"aria-label": "Tools",
-			children: TOOLS.map((entry) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				render: /* @__PURE__ */ jsx(ToolbarButton, {
-					"aria-label": entry.label,
-					iconOnly: true,
-					"aria-pressed": tool === entry.tool,
-					"data-pressed": tool === entry.tool ? "" : void 0,
-					onClick: () => onToolChange(entry.tool)
-				}),
-				children: entry.icon
-			}), /* @__PURE__ */ jsxs(TooltipContent, { children: [
-				entry.label,
-				" · ",
-				entry.shortcut
-			] })] }, entry.tool))
-		})
-	}) });
+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 };