@ctrl-ui/react 0.9.6 → 0.9.8

package/README.md

@@ -47,10 +47,46 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ t
 
 Controls size their own text: pick the control's `size`, or set its `--cui-*-font-size` knob in your theme, rather than wrapping the label in a `text-*` span.
 
-With Biome, the shipped GritQL plugin errors on text sizes in `className`: the type rungs, Tailwind's `text-xs`…`text-9xl`, and arbitrary `text-[13px]`. Adopt it folder by folder through `overrides` while you migrate:
+## Lint rules
+
+Two rules keep call sites honest, shipped for Biome, ESLint, and oxlint from one policy (`lint/class-policy.mjs`):
+
+- `no-component-style-classes` errors when `className` on a component imported from `@ctrl-ui/react` (or a `components/control-ui` directory) sets what the component owns: colors, type, padding, borders, radius, shadows, state styles such as `hover:` and `data-[…]:`, or `!important`. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
+- `no-raw-type-classes` errors on text sizes in any `className`: the type rungs, Tailwind's `text-xs`…`text-9xl`, and arbitrary `text-[13px]`. It reaches beyond Control UI, so adopt it folder by folder while you migrate.
+
+Biome, extending the shipped preset so rules added later arrive with the package update:
+
+```json
+{
+  "extends": ["@ctrl-ui/react/biome"],
+  "overrides": [{ "includes": ["src/features/**"], "plugins": ["./node_modules/@ctrl-ui/react/lint/no-raw-type-classes.grit"] }]
+}
+```
+
+ESLint flat config:
+
+```js
+import controlUi from "@ctrl-ui/react/eslint-plugin";
+
+export default [{ plugins: { "control-ui": controlUi }, rules: { "control-ui/no-component-style-classes": "error" } }];
+```
+
+oxlint, through its JS plugin support:
+
+```json
+{ "jsPlugins": ["@ctrl-ui/react/eslint-plugin"], "rules": { "control-ui/no-component-style-classes": "error" } }
+```
+
+When your app imports components through its own wrapper package or folder, declare that path so the rule follows those imports too:
+
+```js
+rules: { "control-ui/no-component-style-classes": ["error", { importSources: ["@acme/ui/components/"] }] }
+```
+
+Biome's Grit plugins take no options, so the package ships `control-ui-grit` to write the rules with your paths. Run it on install so a package update regenerates them, gitignore `.control-ui`, and list `./.control-ui/no-component-style-classes.grit` under `plugins` in place of the preset:
 
 ```json
-{ "overrides": [{ "includes": ["src/features/**"], "plugins": ["./node_modules/@ctrl-ui/react/lint/no-raw-type-classes.grit"] }] }
+{ "scripts": { "postinstall": "control-ui-grit --import-source=@acme/ui/components/ --out=.control-ui" } }
 ```
 
 ## Customize

package/dist/activity.d.ts

@@ -45,8 +45,10 @@ export type ActivityDetailProps = ComponentProps<"div"> & {
 export declare function ActivityDetail({ className, ...props }: ActivityDetailProps): import("react").JSX.Element;
 export type ActivityDetailLabelProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle>;
 export declare function ActivityDetailLabel({ className, ...props }: ActivityDetailLabelProps): import("react").JSX.Element;
+export type ActivityDetailTone = "default" | "destructive";
 export type ActivityDetailContentProps = ActivityStyleProps<ComponentProps<"div">, ActivityKnobStyle> & {
   format?: ActivityDetailFormat;
+  tone?: ActivityDetailTone;
 };
-export declare function ActivityDetailContent({ format, className, ...props }: ActivityDetailContentProps): import("react").JSX.Element;
+export declare function ActivityDetailContent({ format, tone, className, ...props }: ActivityDetailContentProps): import("react").JSX.Element;
 //#endregion

package/dist/activity.js

@@ -168,12 +168,13 @@ function ActivityDetailLabel({ className, ...props }) {
 		className: cn("uppercase", className)
 	});
 }
-function ActivityDetailContent({ format = "text", className, ...props }) {
+function ActivityDetailContent({ format = "text", tone = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "activity",
 		"data-control-family": "activity",
 		"data-slot": "detail-content",
 		"data-format": format,
+		"data-tone": tone,
 		...props,
 		className: cn("min-w-0 whitespace-pre-wrap wrap-anywhere", format === "code" && "w-fit max-w-full", className)
 	});

package/dist/blocks/agent-run-sidebar.js

@@ -5,30 +5,30 @@ import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, Sideba
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "../ui/sidebar.js";
 import { agentRunStatusLabels } from "./agent-run-status.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BotIcon, Check, CircleAlert, CircleDashed, CirclePause, CircleSlash, LoaderCircle, PlusIcon } from "lucide-react";
+import { BotIcon, CheckIcon, CircleAlertIcon, CircleDashedIcon, CirclePauseIcon, CircleSlashIcon, LoaderCircleIcon, PlusIcon } from "lucide-react";
 //#region src/blocks/agent-run-sidebar.tsx
 const runStatusIcons = {
-	running: /* @__PURE__ */ jsx(LoaderCircle, {
+	running: /* @__PURE__ */ jsx(LoaderCircleIcon, {
 		className: "size-3.5 shrink-0 motion-safe:animate-spin",
 		"aria-hidden": "true"
 	}),
-	waiting: /* @__PURE__ */ jsx(CirclePause, {
+	waiting: /* @__PURE__ */ jsx(CirclePauseIcon, {
 		className: "size-3.5 shrink-0 text-warning-text",
 		"aria-hidden": "true"
 	}),
-	success: /* @__PURE__ */ jsx(Check, {
+	success: /* @__PURE__ */ jsx(CheckIcon, {
 		className: "size-3.5 shrink-0 text-success-text",
 		"aria-hidden": "true"
 	}),
-	error: /* @__PURE__ */ jsx(CircleAlert, {
+	error: /* @__PURE__ */ jsx(CircleAlertIcon, {
 		className: "size-3.5 shrink-0 text-destructive-text",
 		"aria-hidden": "true"
 	}),
-	cancelled: /* @__PURE__ */ jsx(CircleSlash, {
+	cancelled: /* @__PURE__ */ jsx(CircleSlashIcon, {
 		className: "size-3.5 shrink-0 text-muted-foreground",
 		"aria-hidden": "true"
 	}),
-	pending: /* @__PURE__ */ jsx(CircleDashed, {
+	pending: /* @__PURE__ */ jsx(CircleDashedIcon, {
 		className: "size-3.5 shrink-0 text-muted-foreground",
 		"aria-hidden": "true"
 	})
@@ -39,7 +39,8 @@ function AgentRunSidebar({ appName, brand, runs, activeRunId, sidebarFooter, onR
 		collapsible: "offcanvas",
 		children: [
 			/* @__PURE__ */ jsxs(SidebarHeader, {
-				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
+				divider: true,
+				className: "gap-1.5",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 items-center gap-2 px-1 py-1",
 					children: [brand ?? /* @__PURE__ */ jsx("span", {
@@ -65,11 +66,11 @@ function AgentRunSidebar({ appName, brand, runs, activeRunId, sidebarFooter, onR
 				}) }) }) : null]
 			}),
 			/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsxs(SidebarGroup, {
-				className: "gap-1 pt-1",
+				className: "gap-1",
 				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Runs" }), runs.length === 0 ? /* @__PURE__ */ jsx(Text, {
 					size: "caption",
 					tone: "muted",
-					className: "px-2",
+					className: "mx-2",
 					children: "No runs yet"
 				}) : /* @__PURE__ */ jsx(SidebarMenu, { children: runs.map((run) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 					size: "sm",

package/dist/blocks/agent-run.d.ts

@@ -4,6 +4,7 @@ import { Card } from "../ui/card.js";
 import { SidebarProviderProps } from "../ui/sidebar-provider.js";
 import "../ui/sidebar.js";
 import { TimelineItemProps } from "../ui/timeline.js";
+import { TypeSize } from "../ui/typography.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/agent-run.d.ts
 type AgentRunLayout = "viewport" | "contained";
@@ -22,8 +23,9 @@ export declare function AgentRunBlock({ appName, brand, runs, activeRunId, onRun
 export type AgentRunElapsedProps = Omit<ComponentProps<"time">, "dateTime" | "children"> & {
   startedAt: number;
   endedAt?: number;
+  size?: TypeSize;
 };
-export declare function AgentRunElapsed({ startedAt, endedAt, className, ...props }: AgentRunElapsedProps): import("react").JSX.Element;
+export declare function AgentRunElapsed({ startedAt, endedAt, size, className, ...props }: AgentRunElapsedProps): import("react").JSX.Element;
 export type AgentRunHeaderProps = Omit<ComponentProps<"header">, "title"> & {
   title: string;
   status: AgentRunStatus;

package/dist/blocks/agent-run.js

@@ -32,7 +32,8 @@ function AgentRunBlock({ appName = "Agents", brand, runs, activeRunId, onRunSele
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		layout,
-		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
+		surface: "background",
+		className: cn(layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(AgentRunSidebar, {
@@ -52,15 +53,20 @@ function AgentRunBlock({ appName = "Agents", brand, runs, activeRunId, onRunSele
 		})]
 	});
 }
-function AgentRunElapsed({ startedAt, endedAt, className, ...props }) {
+function AgentRunElapsed({ startedAt, endedAt, size = "label", className, ...props }) {
 	const now = useRunClock(endedAt === void 0);
 	const end = endedAt ?? now;
 	const ms = end === null ? null : Math.max(0, end - startedAt);
-	return /* @__PURE__ */ jsx("time", {
-		dateTime: ms === null ? void 0 : elapsedIsoDuration(ms),
-		className: cn("text-label tabular-nums text-muted-foreground", className),
-		...props,
-		children: ms === null ? "" : formatElapsed(ms)
+	return /* @__PURE__ */ jsx(Text, {
+		size,
+		tone: "muted",
+		numeric: true,
+		className,
+		children: /* @__PURE__ */ jsx("time", {
+			dateTime: ms === null ? void 0 : elapsedIsoDuration(ms),
+			...props,
+			children: ms === null ? "" : formatElapsed(ms)
+		})
 	});
 }
 function AgentRunHeader({ title, status, startedAt, endedAt, actions, className, ...props }) {
@@ -89,7 +95,7 @@ function AgentRunHeader({ title, status, startedAt, endedAt, actions, className,
 			startedAt === void 0 ? null : /* @__PURE__ */ jsx(AgentRunElapsed, {
 				startedAt,
 				endedAt,
-				className: "text-body"
+				size: "body"
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "ms-auto flex shrink-0 items-center gap-1",
@@ -205,7 +211,7 @@ function AgentRunToolCall({ name, summary, icon, input, output, errorText, start
 				children: formatToolValue(output)
 			})] }),
 			errorText === void 0 ? null : /* @__PURE__ */ jsxs(ActivityDetail, { children: [/* @__PURE__ */ jsx(ActivityDetailLabel, { children: "Error" }), /* @__PURE__ */ jsx(ActivityDetailContent, {
-				className: "text-destructive-text",
+				tone: "destructive",
 				children: errorText
 			})] })
 		] }) : null]
@@ -236,13 +242,15 @@ function AgentRunDetails({ title = "Details", items, ...props }) {
 		title,
 		...props,
 		children: /* @__PURE__ */ jsx("dl", {
-			className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 text-body",
+			className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2",
 			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "contents",
-				children: [/* @__PURE__ */ jsx("dt", {
-					className: "text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "dt",
+					tone: "muted",
 					children: item.label
-				}), /* @__PURE__ */ jsx("dd", {
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "dd",
 					className: "min-w-0 break-words",
 					children: item.value
 				})]

package/dist/blocks/coding-agent.js

@@ -5,8 +5,9 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
 import { Heading, Text } from "../ui/typography.js";
 import { ChatLayout, ChatThread } from "../chat-layout.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "../ui/item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
 //#region src/blocks/coding-agent.tsx
@@ -17,7 +18,8 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		layout,
-		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
+		surface: "background",
+		className: cn(layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(CodingAgentSidebar, {
@@ -78,7 +80,8 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 		collapsible: "offcanvas",
 		children: [
 			/* @__PURE__ */ jsxs(SidebarHeader, {
-				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
+				divider: true,
+				className: "gap-1.5",
 				children: [
 					sidebarTop,
 					/* @__PURE__ */ jsxs("div", {
@@ -117,25 +120,22 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					}) }) })
 				]
 			}),
-			/* @__PURE__ */ jsxs(SidebarContent, { children: [navigation.length > 0 ? /* @__PURE__ */ jsx(SidebarGroup, {
-				className: "pb-0",
-				children: /* @__PURE__ */ jsx(SidebarMenu, { children: navigation.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-					size: "sm",
-					onClick: () => {
-						onNavigationSelect?.(item);
-						finishMobileNavigation();
-					},
-					children: [
-						item.icon,
-						/* @__PURE__ */ jsx("span", { children: item.label }),
-						item.trailing ? /* @__PURE__ */ jsx("span", {
-							className: "ms-auto shrink-0",
-							children: item.trailing
-						}) : null
-					]
-				}) }, item.id)) })
-			}) : null, /* @__PURE__ */ jsxs(SidebarGroup, {
-				className: "gap-1 pt-1",
+			/* @__PURE__ */ jsxs(SidebarContent, { children: [navigation.length > 0 ? /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: navigation.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				size: "sm",
+				onClick: () => {
+					onNavigationSelect?.(item);
+					finishMobileNavigation();
+				},
+				children: [
+					item.icon,
+					/* @__PURE__ */ jsx("span", { children: item.label }),
+					item.trailing ? /* @__PURE__ */ jsx("span", {
+						className: "ms-auto shrink-0",
+						children: item.trailing
+					}) : null
+				]
+			}) }, item.id)) }) }) : null, /* @__PURE__ */ jsxs(SidebarGroup, {
+				className: "gap-1",
 				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Projects" }), /* @__PURE__ */ jsx("div", {
 					className: "grid gap-1",
 					children: projects.map((project) => /* @__PURE__ */ jsxs(Collapsible, {
@@ -157,28 +157,25 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 								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))
-						}) })]
+						] }), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { 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))
 				})]
 			})] }),
@@ -228,31 +225,15 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 			}) : null,
 			suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "mt-8 grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",
-				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-start",
-					onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion),
-					children: /* @__PURE__ */ jsxs("span", {
-						className: "flex min-w-0 flex-col items-start gap-3",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "text-primary-text",
-								children: suggestion.icon
-							}),
-							/* @__PURE__ */ jsx(Text, {
-								weight: "medium",
-								tone: "foreground",
-								children: suggestion.title
-							}),
-							suggestion.description ? /* @__PURE__ */ jsx(Text, {
-								size: "caption",
-								tone: "muted",
-								className: "leading-5",
-								children: suggestion.description
-							}) : null
-						]
-					})
+				children: suggestions.map((suggestion) => /* @__PURE__ */ jsxs(Item, {
+					variant: "outline",
+					render: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion)
+					}),
+					className: "min-h-28 w-full flex-col items-start text-start",
+					style: { "--cui-item-media-foreground": "var(--primary-text)" },
+					children: [/* @__PURE__ */ jsx(ItemMedia, { children: suggestion.icon }), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: suggestion.title }), suggestion.description ? /* @__PURE__ */ jsx(ItemDescription, { children: suggestion.description }) : null] })]
 				}, suggestion.id))
 			}) : null
 		]

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

@@ -1,6 +1,7 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { Heading } from "../ui/typography.js";
+import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { ColorPickerArea } from "../ui/color-picker-area.js";
 import { ColorPickerHue } from "../ui/color-picker-sliders.js";
@@ -9,7 +10,6 @@ import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea }
 import { ColorPickerEyeDropper, ColorPickerInput } from "../ui/color-picker-values.js";
 import { ColorPicker, ColorPickerContent, 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.js

@@ -11,7 +11,7 @@ import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/to
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
 import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
@@ -53,10 +53,10 @@ const TOOLS = [
 	}
 ];
 const LAYER_ICONS = {
-	frame: /* @__PURE__ */ jsx(FrameIcon, {}),
-	rectangle: /* @__PURE__ */ jsx(SquareIcon, {}),
-	ellipse: /* @__PURE__ */ jsx(CircleIcon, {}),
-	text: /* @__PURE__ */ jsx(TypeIcon, {})
+	frame: /* @__PURE__ */ jsx(FrameIcon, { className: "text-muted-foreground" }),
+	rectangle: /* @__PURE__ */ jsx(SquareIcon, { className: "text-muted-foreground" }),
+	ellipse: /* @__PURE__ */ jsx(CircleIcon, { className: "text-muted-foreground" }),
+	text: /* @__PURE__ */ jsx(TypeIcon, { className: "text-muted-foreground" })
 };
 const NUDGE_DIRECTIONS = {
 	ArrowLeft: {
@@ -246,7 +246,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onPointerCancel: cancelDraft,
 				onKeyDown: handleShortcut,
 				children: [/* @__PURE__ */ jsxs(InfiniteCanvasContent, {
-					className: cn(tool !== "move" && "[&>*]:pointer-events-none"),
+					className: cn(tool !== "move" && "pointer-events-none"),
 					children: [currentLayers.map((layer) => /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
 						layer,
 						selected: layer.id === currentSelectedLayerId,
@@ -288,7 +288,6 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onOpenChange: setLayersOpen,
 				children: /* @__PURE__ */ jsx(DrawerContent, {
 					side: "left",
-					className: "gap-0 p-0",
 					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
 						label: layersLabel,
 						title: layersLabel,
@@ -303,7 +302,6 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onOpenChange: setPropertiesOpen,
 				children: /* @__PURE__ */ jsx(DrawerContent, {
 					side: "right",
-					className: "gap-0 p-0",
 					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
 						label: propertiesLabel,
 						title: propertiesTitle,
@@ -353,24 +351,27 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	});
 }
 function DesignCanvasPanel({ label, title, inDrawer = false, children }) {
-	const titleClassName = "flex h-11 shrink-0 items-center border-b px-3";
-	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} text-caption font-medium`,
-			children: titleText
-		}) : /* @__PURE__ */ jsx(Heading, {
-			level: 2,
-			size: "caption",
-			weight: "medium",
-			className: titleClassName,
-			children: titleText
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-11 shrink-0 items-center border-b px-3",
+			children: inDrawer ? /* @__PURE__ */ jsx(DrawerTitle, {
+				className: "truncate",
+				title,
+				style: {
+					"--cui-popup-title-font-size": "var(--text-caption)",
+					"--cui-popup-title-font-weight": "var(--font-weight-medium)"
+				},
+				children: title
+			}) : /* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				size: "caption",
+				weight: "medium",
+				className: "truncate",
+				title,
+				children: title
+			})
 		}), /* @__PURE__ */ jsx(ScrollArea, {
 			className: "min-h-0 flex-1",
 			children
@@ -385,7 +386,8 @@ function DesignCanvasLayerList({ layers, selectedLayerId, onSelect }) {
 			size: "sm",
 			active: layer.id === selectedLayerId,
 			"aria-pressed": layer.id === selectedLayerId,
-			className: "w-full justify-start [&_svg]:size-3.5 [&_svg]:text-muted-foreground",
+			className: "w-full justify-start",
+			style: { "--cui-button-icon": "calc(var(--spacing) * 3.5)" },
 			onClick: () => onSelect(layer.id),
 			children: [LAYER_ICONS[layer.kind], /* @__PURE__ */ jsx("span", {
 				className: "truncate",
@@ -407,7 +409,6 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 		"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,
@@ -442,15 +443,21 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
 				}
 			}),
-			selected ? /* @__PURE__ */ jsxs(Text, {
-				size: "micro",
-				className: "absolute inset-x-0 top-full mx-auto mt-1.5 w-max rounded-sm bg-primary px-1 whitespace-nowrap text-primary-foreground tabular-nums",
-				children: [
-					layer.width,
-					" × ",
-					layer.height
-				]
-			}) : null
+			selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "absolute inset-0 outline-2 outline-primary"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-x-0 top-full mx-auto mt-1.5 flex w-max rounded-sm bg-primary px-1 whitespace-nowrap text-primary-foreground",
+				children: /* @__PURE__ */ jsxs(Text, {
+					size: "micro",
+					numeric: true,
+					children: [
+						layer.width,
+						" × ",
+						layer.height
+					]
+				})
+			})] }) : null
 		]
 	});
 }

package/dist/blocks/discussion.js

@@ -70,7 +70,7 @@ function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondar
 			error ? /* @__PURE__ */ jsx(Text, {
 				as: "p",
 				role: "alert",
-				className: "px-3",
+				className: "mx-3",
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx(Text, {