@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/blocks/coding-agent.js

@@ -10,13 +10,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
 //#region src/blocks/coding-agent.tsx
 function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [], projects, activeTaskId, activeTaskTitle = "New task", onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout = "viewport", className, style, ...props }) {
-	const contained = layout === "contained";
+	const Heading = layout === "contained" ? "h2" : "h1";
 	const providerStyle = {
 		"--sidebar-width": "17.5rem",
 		...style
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
-		className: cn("overflow-hidden bg-background text-foreground", contained ? "relative h-full min-h-0" : "h-svh min-h-svh", className),
+		layout,
+		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(CodingAgentSidebar, {
@@ -26,7 +27,6 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 			navigation,
 			projects,
 			activeTaskId,
-			contained,
 			sidebarFooter,
 			onNavigationSelect,
 			onTaskSelect,
@@ -39,14 +39,15 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 				children: [
 					/* @__PURE__ */ jsx(SidebarTrigger, {
 						size: "xs",
-						className: "md:hidden"
+						className: "lg:hidden"
 					}),
 					/* @__PURE__ */ jsx(FolderIcon, {
 						className: "size-4 shrink-0 text-muted-foreground",
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ jsx("h1", {
+					/* @__PURE__ */ jsx(Heading, {
 						className: "min-w-0 flex-1 truncate text-label font-medium",
+						title: activeTaskTitle,
 						children: activeTaskTitle
 					}),
 					headerActions ? /* @__PURE__ */ jsx("div", {
@@ -61,7 +62,7 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 		})]
 	});
 }
-function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects, activeTaskId, contained, sidebarFooter, onNavigationSelect, onTaskSelect, onNewTask, onSearch }) {
+function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects, activeTaskId, sidebarFooter, onNavigationSelect, onTaskSelect, onNewTask, onSearch }) {
 	const { setOpenMobile } = useSidebar();
 	function finishMobileNavigation() {
 		setOpenMobile(false);
@@ -72,7 +73,6 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 	}
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible: "offcanvas",
-		className: contained ? "absolute! inset-y-0! h-full border-r border-sidebar-border" : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(SidebarHeader, {
 				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
@@ -90,16 +90,20 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 								})
 							}), /* @__PURE__ */ jsx("span", {
 								className: "truncate text-label font-semibold",
+								title: appName,
 								children: appName
 							})]
-						}), /* @__PURE__ */ jsx(Button, {
+						}), onSearch ? /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
 							size: "sm",
 							iconOnly: true,
 							"aria-label": "Search tasks",
 							onClick: onSearch,
-							children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5" })
-						})]
+							children: /* @__PURE__ */ jsx(SearchIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})
+						}) : null]
 					}),
 					/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 						size: "sm",
@@ -120,7 +124,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 						item.icon,
 						/* @__PURE__ */ jsx("span", { children: item.label }),
 						item.trailing ? /* @__PURE__ */ jsx("span", {
-							className: "ml-auto shrink-0",
+							className: "ms-auto shrink-0",
 							children: item.trailing
 						}) : null
 					]
@@ -132,50 +136,43 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					children: projects.map((project) => /* @__PURE__ */ jsxs(Collapsible, {
 						defaultOpen: project.open ?? true,
 						className: "min-w-0",
-						children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-							className: "flex h-[var(--control-h-sm)] w-full items-center gap-2 rounded-[var(--radius-popup-item)] px-2 text-caption font-medium hover:bg-foreground/6",
-							children: [
-								/* @__PURE__ */ jsx(ChevronRightIcon, {
-									className: "size-3.5 shrink-0 text-muted-foreground",
+						children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, { children: [
+							/* @__PURE__ */ jsx(ChevronRightIcon, {
+								className: "size-3.5 shrink-0 text-muted-foreground",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex shrink-0 items-center text-muted-foreground",
+								children: project.icon ?? /* @__PURE__ */ jsx(FolderIcon, {
+									className: "size-4",
 									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "flex shrink-0 items-center text-muted-foreground",
-									children: project.icon ?? /* @__PURE__ */ jsx(FolderIcon, {
-										className: "size-4",
-										"aria-hidden": "true"
-									})
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: project.name
 								})
-							]
-						}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
-							className: "mt-1 pl-5",
-							children: project.tasks.map((task) => {
-								const isActive = task.id === activeTaskId;
-								return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-									size: "sm",
-									isActive,
-									"aria-current": isActive ? "page" : void 0,
-									onClick: () => {
-										onTaskSelect?.(task, project);
-										finishMobileNavigation();
-									},
-									children: [
-										/* @__PURE__ */ jsx(CircleIcon, {
-											className: "size-1.5 fill-current opacity-35",
-											"aria-hidden": "true"
-										}),
-										/* @__PURE__ */ jsx("span", { children: task.title }),
-										task.trailing ? /* @__PURE__ */ jsx("span", {
-											className: "ml-auto shrink-0",
-											children: task.trailing
-										}) : null
-									]
-								}) }, task.id);
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: project.name
 							})
+						] }), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
+							className: "mt-1 ps-5",
+							children: project.tasks.map((task) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+								size: "sm",
+								isActive: task.id === activeTaskId,
+								onClick: () => {
+									onTaskSelect?.(task, project);
+									finishMobileNavigation();
+								},
+								children: [
+									/* @__PURE__ */ jsx(CircleIcon, {
+										className: "size-1.5 fill-current opacity-35",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("span", { children: task.title }),
+									task.trailing ? /* @__PURE__ */ jsx("span", {
+										className: "ms-auto shrink-0",
+										children: task.trailing
+									}) : null
+								]
+							}) }, task.id))
 						}) })]
 					}, project.id))
 				})]
@@ -191,7 +188,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 function CodingAgentConversation({ children, composer, className, ...props }) {
 	return /* @__PURE__ */ jsx(ChatLayout, {
 		chrome: "embedded",
-		className: cn("h-full min-h-0 max-w-none", className),
+		className,
 		...props,
 		children: /* @__PURE__ */ jsx(ChatThread, {
 			composer: /* @__PURE__ */ jsx("div", {
@@ -218,11 +215,11 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 				})
 			}),
 			/* @__PURE__ */ jsx("h2", {
-				className: "text-balance text-xl font-medium tracking-tight sm:text-2xl",
+				className: "text-balance text-heading-3 sm:text-heading-2",
 				children: title
 			}),
 			description ? /* @__PURE__ */ jsx("p", {
-				className: "mt-2 max-w-xl text-sm leading-6 text-muted-foreground",
+				className: "mt-2 max-w-xl text-pretty text-body text-muted-foreground",
 				children: description
 			}) : null,
 			suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
@@ -230,7 +227,7 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 				children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Button, {
 					variant: "surface",
 					size: "lg",
-					className: "h-auto min-h-28 w-full items-start justify-start whitespace-normal rounded-[var(--radius-panel)] px-4 py-4 text-left",
+					className: "h-auto min-h-28 w-full items-start justify-start whitespace-normal rounded-[var(--radius-panel)] px-4 py-4 text-start",
 					onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion),
 					children: /* @__PURE__ */ jsxs("span", {
 						className: "flex min-w-0 flex-col items-start gap-3",
@@ -240,7 +237,7 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 								children: suggestion.icon
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-sm font-medium leading-5 text-foreground",
+								className: "text-body font-medium text-foreground",
 								children: suggestion.title
 							}),
 							suggestion.description ? /* @__PURE__ */ jsx("span", {

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

@@ -0,0 +1,32 @@
+//#region src/blocks/design-canvas-data.d.ts
+export type DesignCanvasLayerKind = "frame" | "rectangle" | "ellipse" | "text";
+export type DesignCanvasTool = "move" | DesignCanvasLayerKind;
+export type DesignCanvasFill = {
+  color: string;
+  opacity: number;
+  visible: boolean;
+};
+export type DesignCanvasLayer = {
+  id: string;
+  name: string;
+  kind: DesignCanvasLayerKind;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  opacity: number;
+  cornerRadius: number;
+  fill: DesignCanvasFill | null;
+  text?: string;
+};
+export type DesignCanvasPoint = {
+  x: number;
+  y: number;
+};
+export type DesignCanvasBounds = Pick<DesignCanvasLayer, "x" | "y" | "width" | "height">;
+export declare function drawnDesignCanvasBounds(kind: DesignCanvasLayerKind, start: DesignCanvasPoint, end: DesignCanvasPoint, clickTolerance: number): DesignCanvasBounds;
+export declare function createDesignCanvasLayer(kind: DesignCanvasLayerKind, bounds: DesignCanvasBounds, id: string): DesignCanvasLayer;
+export declare function resizeDesignCanvasLayer(layer: DesignCanvasLayer, size: Partial<Pick<DesignCanvasLayer, "width" | "height">>, aspectRatioLocked: boolean): DesignCanvasLayer;
+export declare function designCanvasFillColor(fill: DesignCanvasFill | null): string;
+//#endregion

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

@@ -0,0 +1,100 @@
+//#region src/blocks/design-canvas-data.ts
+const NEW_LAYER_DEFAULTS = {
+	frame: {
+		name: "Frame",
+		width: 320,
+		height: 200,
+		fill: {
+			color: "#FFFFFF",
+			opacity: 100,
+			visible: true
+		}
+	},
+	rectangle: {
+		name: "Rectangle",
+		width: 120,
+		height: 120,
+		fill: {
+			color: "#D9D9D9",
+			opacity: 100,
+			visible: true
+		}
+	},
+	ellipse: {
+		name: "Ellipse",
+		width: 120,
+		height: 120,
+		fill: {
+			color: "#D9D9D9",
+			opacity: 100,
+			visible: true
+		}
+	},
+	text: {
+		name: "Text",
+		width: 160,
+		height: 32,
+		fill: {
+			color: "#000000",
+			opacity: 100,
+			visible: true
+		},
+		text: "Text"
+	}
+};
+function drawnDesignCanvasBounds(kind, start, end, clickTolerance) {
+	const width = Math.abs(end.x - start.x);
+	const height = Math.abs(end.y - start.y);
+	if (Math.max(width, height) < clickTolerance) {
+		const defaults = NEW_LAYER_DEFAULTS[kind];
+		return {
+			x: Math.round(start.x - defaults.width / 2),
+			y: Math.round(start.y - defaults.height / 2),
+			width: defaults.width,
+			height: defaults.height
+		};
+	}
+	return {
+		x: Math.round(Math.min(start.x, end.x)),
+		y: Math.round(Math.min(start.y, end.y)),
+		width: Math.max(1, Math.round(width)),
+		height: Math.max(1, Math.round(height))
+	};
+}
+function createDesignCanvasLayer(kind, bounds, id) {
+	return {
+		...NEW_LAYER_DEFAULTS[kind],
+		...bounds,
+		id,
+		kind,
+		rotation: 0,
+		opacity: 100,
+		cornerRadius: 0
+	};
+}
+function resizeDesignCanvasLayer(layer, size, aspectRatioLocked) {
+	const aspectRatio = layer.width / layer.height;
+	if (size.width !== void 0) {
+		const height = aspectRatioLocked ? Math.round(size.width / aspectRatio) : layer.height;
+		return {
+			...layer,
+			width: size.width,
+			height
+		};
+	}
+	if (size.height !== void 0) {
+		const width = aspectRatioLocked ? Math.round(size.height * aspectRatio) : layer.width;
+		return {
+			...layer,
+			width,
+			height: size.height
+		};
+	}
+	return layer;
+}
+function designCanvasFillColor(fill) {
+	if (!fill?.visible) return "transparent";
+	return `color-mix(in srgb, ${fill.color} ${fill.opacity}%, transparent)`;
+}
+//#endregion
+export { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds, resizeDesignCanvasLayer };

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

@@ -0,0 +1,8 @@
+import { DesignCanvasLayer } from "./design-canvas-data.js";
+//#region src/blocks/design-canvas-inspector.d.ts
+export type DesignCanvasInspectorProps = {
+  layer: DesignCanvasLayer | undefined;
+  onLayerChange: (layer: DesignCanvasLayer) => void;
+};
+export declare function DesignCanvasInspector({ layer, onLayerChange }: DesignCanvasInspectorProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,238 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.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";
+import { BlendIcon, EyeIcon, EyeOffIcon, Link2Icon, MinusIcon, PlusIcon, RotateCwIcon, SquareRoundCornerIcon, Unlink2Icon } from "lucide-react";
+//#region src/blocks/design-canvas-inspector.tsx
+const WHOLE_NUMBER_FORMAT = {
+	useGrouping: false,
+	maximumFractionDigits: 0
+};
+const DEFAULT_FILL = {
+	color: "#D9D9D9",
+	opacity: 100,
+	visible: true
+};
+function DesignCanvasInspector({ layer, onLayerChange }) {
+	const [aspectRatioLocked, setAspectRatioLocked] = useState(false);
+	if (!layer) return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [/* @__PURE__ */ jsx(EmptyTitle, { children: "Nothing selected" }), /* @__PURE__ */ jsx(EmptyDescription, { children: "Select a layer to edit its position, size, and fill." })] })
+	});
+	const update = (patch) => onLayerChange({
+		...layer,
+		...patch
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [
+			/* @__PURE__ */ jsxs(InspectorSection, {
+				title: "Position",
+				children: [
+					/* @__PURE__ */ jsx(ScrubField, {
+						label: "X position",
+						prefix: "X",
+						value: layer.x,
+						onValueChange: (x) => update({ x })
+					}),
+					/* @__PURE__ */ jsx(ScrubField, {
+						label: "Y position",
+						prefix: "Y",
+						value: layer.y,
+						onValueChange: (y) => update({ y })
+					}),
+					/* @__PURE__ */ jsx(ScrubField, {
+						label: "Rotation",
+						className: "col-start-1",
+						prefix: /* @__PURE__ */ jsx(RotateCwIcon, {}),
+						value: layer.rotation,
+						min: -360,
+						max: 360,
+						format: {
+							...WHOLE_NUMBER_FORMAT,
+							style: "unit",
+							unit: "degree",
+							unitDisplay: "narrow"
+						},
+						onValueChange: (rotation) => update({ rotation })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(InspectorSection, {
+				title: "Layout",
+				children: [
+					/* @__PURE__ */ jsx(ScrubField, {
+						label: "Width",
+						prefix: "W",
+						value: layer.width,
+						min: 1,
+						onValueChange: (width) => onLayerChange(resizeDesignCanvasLayer(layer, { width }, aspectRatioLocked))
+					}),
+					/* @__PURE__ */ jsx(ScrubField, {
+						label: "Height",
+						prefix: "H",
+						value: layer.height,
+						min: 1,
+						onValueChange: (height) => onLayerChange(resizeDesignCanvasLayer(layer, { height }, aspectRatioLocked))
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						size: "sm",
+						variant: "ghost",
+						iconOnly: true,
+						"aria-label": "Lock aspect ratio",
+						pressed: aspectRatioLocked,
+						onPressedChange: setAspectRatioLocked,
+						children: aspectRatioLocked ? /* @__PURE__ */ jsx(Link2Icon, {}) : /* @__PURE__ */ jsx(Unlink2Icon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(InspectorSection, {
+				title: "Appearance",
+				children: [/* @__PURE__ */ jsx(ScrubField, {
+					label: "Layer opacity",
+					prefix: /* @__PURE__ */ jsx(BlendIcon, {}),
+					suffix: "%",
+					value: layer.opacity,
+					min: 0,
+					max: 100,
+					onValueChange: (opacity) => update({ opacity })
+				}), /* @__PURE__ */ jsx(ScrubField, {
+					label: "Corner radius",
+					prefix: /* @__PURE__ */ jsx(SquareRoundCornerIcon, {}),
+					value: layer.cornerRadius,
+					min: 0,
+					onValueChange: (cornerRadius) => update({ cornerRadius })
+				})]
+			}),
+			/* @__PURE__ */ jsx(InspectorSection, {
+				title: "Fill",
+				action: layer.fill ? null : /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					iconOnly: true,
+					"aria-label": "Add fill",
+					onClick: () => update({ fill: DEFAULT_FILL }),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}),
+				children: layer.fill ? /* @__PURE__ */ jsx(FillRow, {
+					fill: layer.fill,
+					onFillChange: (fill) => update({ fill }),
+					onRemove: () => update({ fill: null })
+				}) : null
+			})
+		]
+	});
+}
+function InspectorSection({ title, action, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "flex flex-col gap-2 border-b px-3 py-3",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex h-6 items-center justify-between",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-caption font-medium",
+				children: title
+			}), action]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-2 empty:hidden",
+			children
+		})]
+	});
+}
+function ScrubField({ label, className, prefix, suffix, value, onValueChange, min, max, format = WHOLE_NUMBER_FORMAT }) {
+	return /* @__PURE__ */ jsx(NumberField, {
+		size: "sm",
+		className,
+		value,
+		min,
+		max,
+		format,
+		onValueChange: (next) => {
+			if (next !== null) onValueChange(next);
+		},
+		children: /* @__PURE__ */ jsxs(NumberFieldGroup, {
+			className: "w-full",
+			children: [
+				prefix ? /* @__PURE__ */ jsx(NumberFieldScrubArea, { children: prefix }) : null,
+				/* @__PURE__ */ jsx(NumberFieldInput, { "aria-label": label }),
+				suffix ? /* @__PURE__ */ jsx(NumberFieldScrubArea, { children: suffix }) : null
+			]
+		})
+	});
+}
+function FillRow({ fill, onFillChange, onRemove }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ColorPicker, {
+		value: fill.color,
+		alpha: false,
+		onValueChange: (color) => onFillChange({
+			...fill,
+			color
+		}),
+		children: [/* @__PURE__ */ jsxs(InputGroup, {
+			size: "sm",
+			className: "col-span-2",
+			children: [
+				/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(ColorPickerTrigger, { "aria-label": "Choose fill color" }) }),
+				/* @__PURE__ */ jsx(ColorPickerInput, { "aria-label": "Fill color" }),
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "h-4"
+				}),
+				/* @__PURE__ */ jsx(NumberField, {
+					value: fill.opacity,
+					min: 0,
+					max: 100,
+					format: WHOLE_NUMBER_FORMAT,
+					className: "shrink-0",
+					onValueChange: (opacity) => {
+						if (opacity !== null) onFillChange({
+							...fill,
+							opacity
+						});
+					},
+					children: /* @__PURE__ */ jsxs(NumberFieldGroup, {
+						className: "w-full",
+						children: [/* @__PURE__ */ jsx(NumberFieldInput, { "aria-label": "Fill opacity" }), /* @__PURE__ */ jsx(NumberFieldScrubArea, { children: "%" })]
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(ColorPickerContent, {
+			side: "left",
+			align: "start",
+			children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, {}), /* @__PURE__ */ jsx(ColorPickerHue, { className: "flex-1" })]
+			})]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex",
+		children: [/* @__PURE__ */ jsx(Toggle, {
+			size: "sm",
+			variant: "ghost",
+			iconOnly: true,
+			"aria-label": "Show fill",
+			pressed: fill.visible,
+			onPressedChange: (visible) => onFillChange({
+				...fill,
+				visible
+			}),
+			children: fill.visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			iconOnly: true,
+			"aria-label": "Remove fill",
+			onClick: onRemove,
+			children: /* @__PURE__ */ jsx(MinusIcon, {})
+		})]
+	})] });
+}
+//#endregion
+export { DesignCanvasInspector };

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

@@ -0,0 +1,21 @@
+import { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool } from "./design-canvas-data.js";
+import { InfiniteCanvasTransform } from "../ui/infinite-canvas.js";
+import { ComponentProps } from "react";
+//#region src/blocks/design-canvas.d.ts
+export type DesignCanvasBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
+  layers?: readonly DesignCanvasLayer[];
+  defaultLayers?: readonly DesignCanvasLayer[];
+  onLayersChange?: (layers: DesignCanvasLayer[]) => void;
+  selectedLayerId?: string | null;
+  defaultSelectedLayerId?: string | null;
+  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, layersLabel, propertiesLabel, openLayersLabel, openPropertiesLabel, className, ...props }: DesignCanvasBlockProps): import("react").JSX.Element;
+//#endregion
+export type { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool };