@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/action-bar.js

@@ -1,7 +1,7 @@
 "use client";
-import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-bar.tsx

package/dist/activity.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { ScrollArea } from "./ui/scroll-area.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight, CircleAlert, CircleDashed, LoaderCircle } from "lucide-react";

package/dist/blocks/coding-agent.js

@@ -132,26 +132,23 @@ 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, {
+							}),
+							/* @__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;
@@ -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", {

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 { 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 { 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,17 @@
+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";
+};
+export declare function DesignCanvasBlock({ layers, defaultLayers, onLayersChange, selectedLayerId, defaultSelectedLayerId, onSelectedLayerIdChange, defaultTransform, layout, className, ...props }: DesignCanvasBlockProps): import("react").JSX.Element;
+//#endregion
+export type { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool };