@olympusoss/canvas 2.6.27 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olympusoss/canvas",
-	"version": "2.6.27",
+	"version": "2.7.0",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",

package/src/components/atoms/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
 					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
 				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
+				link: "text-primary hover:text-brand",
 			},
 			size: {
 				default: "h-9 px-4 py-2",
@@ -37,7 +37,8 @@ export interface ButtonProps
 	/**
 	 * Visual emphasis preset. `default` is the primary action, `destructive`
 	 * is for irreversible actions, `outline` and `secondary` are quieter,
-	 * `ghost` is borderless, `link` looks like body-text underlined.
+	 * `ghost` is borderless, `link` looks like body-text with a soft
+	 * color shift on hover (no underline).
 	 * @default "default"
 	 */
 	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";

package/src/components/charts/service-health-list.tsx

@@ -41,17 +41,29 @@ export const ServiceHealthList = React.forwardRef<HTMLDivElement, ServiceHealthL
 				<ul className="flex flex-col gap-2.5">
 					{items.map((item) => {
 						const hsl = DOT_TOKENS[item.status];
+						const isHealthy = item.status === "healthy";
 						return (
 							<li key={item.name} className="flex items-center gap-2.5 text-[13px]">
-								<span
-									role="img"
-									className="size-2 shrink-0 rounded-full"
-									style={{
-										background: `hsl(${hsl})`,
-										boxShadow: `0 0 0 3px hsl(${hsl} / 0.18)`,
-									}}
-									aria-label={`Status: ${item.status}`}
-								/>
+								<span className="relative flex size-2 shrink-0">
+									{isHealthy && (
+										<span
+											aria-hidden
+											className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+											style={{ background: `hsl(${hsl})` }}
+										/>
+									)}
+									<span
+										role="img"
+										aria-label={`Status: ${item.status}`}
+										className="relative inline-flex size-2 rounded-full"
+										style={{
+											background: `hsl(${hsl})`,
+											boxShadow: isHealthy
+												? `0 0 6px hsl(${hsl}), 0 0 0 3px hsl(${hsl} / 0.18)`
+												: `0 0 0 3px hsl(${hsl} / 0.18)`,
+										}}
+									/>
+								</span>
 								<span className="flex-1 font-medium">{item.name}</span>
 								{item.meta?.map((cell, i) => (
 									<span

package/src/components/molecules/breadcrumb.tsx

@@ -76,11 +76,7 @@ const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
 		const Comp = asChild ? Slot : "a";
 
 		return (
-			<Comp
-				ref={ref}
-				className={cn("transition-colors hover:text-foreground", className)}
-				{...props}
-			/>
+			<Comp ref={ref} className={cn("transition-colors hover:text-brand", className)} {...props} />
 		);
 	},
 );

package/src/components/molecules/page-header.tsx

@@ -44,11 +44,11 @@ export function PageHeader({
 							<span key={crumb.label} className="flex items-center gap-1">
 								{crumb.href ? (
 									LinkComp ? (
-										<LinkComp href={crumb.href} className="hover:text-foreground transition-colors">
+										<LinkComp href={crumb.href} className="hover:text-brand transition-colors">
 											{crumb.label}
 										</LinkComp>
 									) : (
-										<a href={crumb.href} className="hover:text-foreground transition-colors">
+										<a href={crumb.href} className="hover:text-brand transition-colors">
 											{crumb.label}
 										</a>
 									)

package/src/components/molecules/tooltip.tsx

@@ -3,6 +3,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface TooltipProviderProps
@@ -129,22 +130,25 @@ export interface TooltipContentProps
 const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
 	TooltipContentProps
->(({ className, sideOffset = 6, children, ...props }, ref) => (
-	<TooltipPrimitive.Portal>
-		<TooltipPrimitive.Content
-			ref={ref}
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 max-w-xs overflow-hidden rounded-md border border-border/50 bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 origin-[var(--radix-tooltip-content-transform-origin)]",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<TooltipPrimitive.Arrow width={10} height={5} style={{ fill: "hsl(var(--popover))" }} />
-		</TooltipPrimitive.Content>
-	</TooltipPrimitive.Portal>
-));
+>(({ className, sideOffset = 6, children, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<TooltipPrimitive.Portal container={container ?? undefined}>
+			<TooltipPrimitive.Content
+				ref={ref}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 max-w-xs overflow-hidden rounded-md border border-border/50 bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 origin-[var(--radix-tooltip-content-transform-origin)]",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow width={10} height={5} style={{ fill: "hsl(var(--popover))" }} />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/organisms/accordion.tsx

@@ -103,7 +103,7 @@ const AccordionTrigger = React.forwardRef<
 		<AccordionPrimitive.Trigger
 			ref={ref}
 			className={cn(
-				"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+				"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-colors hover:text-brand text-left [&[data-state=open]>svg]:rotate-180",
 				className,
 			)}
 			{...props}

package/src/components/organisms/alert-dialog.tsx

@@ -3,6 +3,7 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../atoms/button";
 
@@ -115,19 +116,22 @@ export interface AlertDialogContentProps
 const AlertDialogContent = React.forwardRef<
 	React.ElementRef<typeof AlertDialogPrimitive.Content>,
 	AlertDialogContentProps
->(({ className, ...props }, ref) => (
-	<AlertDialogPortal>
-		<AlertDialogOverlay />
-		<AlertDialogPrimitive.Content
-			ref={ref}
-			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-				className,
-			)}
-			{...props}
-		/>
-	</AlertDialogPortal>
-));
+>(({ className, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<AlertDialogPortal container={container ?? undefined}>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+});
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/organisms/carousel.tsx

@@ -191,7 +191,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
 					"absolute  h-8 w-8 rounded-full",
 					orientation === "horizontal"
 						? "-left-12 top-1/2 -translate-y-1/2"
-						: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+						: "-top-10 left-1/2 -translate-x-1/2 rotate-90",
 					className,
 				)}
 				disabled={!canScrollPrev}
@@ -219,7 +219,7 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<ty
 					"absolute h-8 w-8 rounded-full",
 					orientation === "horizontal"
 						? "-right-12 top-1/2 -translate-y-1/2"
-						: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+						: "-bottom-10 left-1/2 -translate-x-1/2 rotate-90",
 					className,
 				)}
 				disabled={!canScrollNext}

package/src/components/organisms/context-menu.tsx

@@ -4,6 +4,7 @@ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface ContextMenuProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {
@@ -154,18 +155,21 @@ export interface ContextMenuContentProps
 const ContextMenuContent = React.forwardRef<
 	React.ElementRef<typeof ContextMenuPrimitive.Content>,
 	ContextMenuContentProps
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.Portal>
-		<ContextMenuPrimitive.Content
-			ref={ref}
-			className={cn(
-				"z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
-				className,
-			)}
-			{...props}
-		/>
-	</ContextMenuPrimitive.Portal>
-));
+>(({ className, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<ContextMenuPrimitive.Portal container={container ?? undefined}>
+			<ContextMenuPrimitive.Content
+				ref={ref}
+				className={cn(
+					"z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
+					className,
+				)}
+				{...props}
+			/>
+		</ContextMenuPrimitive.Portal>
+	);
+});
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 export interface ContextMenuItemProps

package/src/components/organisms/dashboard-grid.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { GripVertical } from "lucide-react";
+import { GripVertical, Trash2 } from "lucide-react";
 import * as React from "react";
 import type { Layout, Layouts } from "react-grid-layout";
 import GridLayout from "react-grid-layout";
@@ -332,24 +332,33 @@ export const DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps
 					preventCollision={false}
 				>
 					{items.map((item) => (
-						<div key={item.i} className="group/dashboard-grid-item flex flex-col overflow-hidden">
+						<div key={item.i} className="group/dashboard-grid-item relative h-full overflow-hidden">
+							{/* Inner wrapper forces the rendered widget to fill the cell —
+							    consumers shouldn't have to add `h-full` to every card just to
+							    make rows align. Kept separate from the drag handle so the
+							    `*:h-full *:w-full` rule doesn't blow up the absolute handle. */}
+							<div className="h-full w-full *:h-full *:w-full">{renderItem(item)}</div>
 							{editing && (
-								<div
-									role="button"
-									tabIndex={0}
-									className="dashboard-grid-handle flex h-7 shrink-0 cursor-grab items-center justify-center rounded-t-xl border-b border-border bg-muted/30 text-muted-foreground active:cursor-grabbing"
-									aria-label={`Drag ${item.i}`}
-								>
-									<GripVertical className="h-3.5 w-3.5" />
-								</div>
+								<>
+									<div
+										role="button"
+										tabIndex={0}
+										className="dashboard-grid-handle absolute right-2 top-2 z-10 flex h-6 w-6 cursor-grab items-center justify-center rounded-md border border-border bg-background/80 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-accent hover:text-foreground active:cursor-grabbing"
+										aria-label={`Drag ${item.i}`}
+									>
+										<GripVertical className="h-3.5 w-3.5" />
+									</div>
+									<button
+										type="button"
+										onClick={() => onItemsChange?.(items.filter((it) => it.i !== item.i))}
+										className="absolute bottom-2 left-1/2 z-10 flex h-7 -translate-x-1/2 items-center gap-1.5 rounded-md border border-border bg-background/80 px-2.5 text-xs font-medium text-destructive shadow-sm backdrop-blur-sm transition-colors hover:bg-destructive hover:text-destructive-foreground"
+										aria-label={`Remove ${item.i}`}
+									>
+										<Trash2 className="h-3.5 w-3.5" />
+										Remove
+									</button>
+								</>
 							)}
-							{/* The inner wrapper forces ANY direct child of the rendered widget to
-							    fill the cell (`*:h-full *:w-full`). This is the grid's job, not the
-							    widget's — consumers shouldn't have to add `h-full` to every card just
-							    to make rows align. */}
-							<div className="min-h-0 flex-1 overflow-hidden *:h-full *:w-full">
-								{renderItem(item)}
-							</div>
 						</div>
 					))}
 				</ResponsiveGridLayout>

package/src/components/organisms/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 /* ────────────────────────────────────────────────────────────────
@@ -183,25 +184,28 @@ export interface DialogContentProps
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
 	DialogContentProps
->(({ className, children, ...props }, ref) => (
-	<DialogPortal>
-		<DialogOverlay />
-		<DialogPrimitive.Content
-			ref={ref}
-			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-				<X className="h-4 w-4" />
-				<span className="sr-only">Close</span>
-			</DialogPrimitive.Close>
-		</DialogPrimitive.Content>
-	</DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<DialogPortal container={container ?? undefined}>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+					<X className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/organisms/drawer.tsx

@@ -3,14 +3,23 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 const Drawer = ({
 	shouldScaleBackground = true,
+	container,
 	...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-	<DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
-);
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
+	const fallbackContainer = usePortalContainer();
+	return (
+		<DrawerPrimitive.Root
+			shouldScaleBackground={shouldScaleBackground}
+			container={container ?? fallbackContainer ?? undefined}
+			{...props}
+		/>
+	);
+};
 Drawer.displayName = "Drawer";
 
 const DrawerTrigger = DrawerPrimitive.Trigger;
@@ -31,6 +40,18 @@ const DrawerOverlay = React.forwardRef<
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
+const DrawerHandle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Handle>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Handle>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Handle
+		ref={ref}
+		className={cn("mx-auto mt-4 !h-2 !w-[100px] rounded-full bg-muted", className)}
+		{...props}
+	/>
+));
+DrawerHandle.displayName = "DrawerHandle";
+
 const DrawerContent = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
@@ -45,7 +66,7 @@ const DrawerContent = React.forwardRef<
 			)}
 			{...props}
 		>
-			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+			<DrawerHandle />
 			{children}
 		</DrawerPrimitive.Content>
 	</DrawerPortal>
@@ -92,6 +113,7 @@ export {
 	DrawerContent,
 	DrawerDescription,
 	DrawerFooter,
+	DrawerHandle,
 	DrawerHeader,
 	DrawerOverlay,
 	DrawerPortal,

package/src/components/organisms/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface DropdownMenuProps extends React.ComponentProps<typeof DropdownMenuPrimitive.Root> {
@@ -220,20 +221,23 @@ export interface DropdownMenuContentProps
 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 	DropdownMenuContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<DropdownMenuPrimitive.Portal>
-		<DropdownMenuPrimitive.Content
-			ref={ref}
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
-				className,
-			)}
-			{...props}
-		/>
-	</DropdownMenuPrimitive.Portal>
-));
+>(({ className, sideOffset = 4, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<DropdownMenuPrimitive.Portal container={container ?? undefined}>
+			<DropdownMenuPrimitive.Content
+				ref={ref}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+					"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+});
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 export interface DropdownMenuItemProps

package/src/components/organisms/editors/prose-canvas-classes.ts

@@ -23,8 +23,8 @@ export const PROSE_CANVAS_CLASSES = [
 	"[&_em]:italic",
 	"[&_u]:underline [&_u]:underline-offset-2",
 	"[&_s]:line-through",
-	// links
-	"[&_a]:text-brand [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-brand/40 hover:[&_a]:decoration-brand",
+	// links — brand color, fades slightly on hover (no underline)
+	"[&_a]:text-brand [&_a]:transition-colors hover:[&_a]:text-brand/80",
 	// code
 	"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-foreground",
 	"[&_pre]:rounded-md [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/50 [&_pre]:p-3 [&_pre]:my-3 [&_pre]:overflow-x-auto",

package/src/components/organisms/menubar.tsx

@@ -4,6 +4,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface MenubarProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> {
@@ -272,21 +273,24 @@ export interface MenubarContentProps
 const MenubarContent = React.forwardRef<
 	React.ElementRef<typeof MenubarPrimitive.Content>,
 	MenubarContentProps
->(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-	<MenubarPrimitive.Portal>
-		<MenubarPrimitive.Content
-			ref={ref}
-			align={align}
-			alignOffset={alignOffset}
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
-				className,
-			)}
-			{...props}
-		/>
-	</MenubarPrimitive.Portal>
-));
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<MenubarPrimitive.Portal container={container ?? undefined}>
+			<MenubarPrimitive.Content
+				ref={ref}
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-menubar-content-transform-origin)]",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPrimitive.Portal>
+	);
+});
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 export interface MenubarItemProps

package/src/components/organisms/navbar.tsx

@@ -47,7 +47,7 @@ const NavBar = React.forwardRef<HTMLElement, NavBarProps>(
 								<LinkEl
 									key={link.href}
 									href={link.href}
-									className="text-sm font-medium text-muted-foreground no-underline transition-colors hover:text-foreground"
+									className="text-sm font-medium text-muted-foreground no-underline transition-colors hover:text-brand"
 									{...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 								>
 									{link.label}
@@ -79,7 +79,7 @@ const NavBar = React.forwardRef<HTMLElement, NavBarProps>(
 										key={link.href}
 										href={link.href}
 										onClick={() => setMobileOpen(false)}
-										className="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground"
+										className="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-brand"
 										{...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 									>
 										{link.label}

package/src/components/organisms/popover.tsx

@@ -3,6 +3,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface PopoverProps extends React.ComponentProps<typeof PopoverPrimitive.Root> {
@@ -125,20 +126,23 @@ export interface PopoverContentProps
 const PopoverContent = React.forwardRef<
 	React.ElementRef<typeof PopoverPrimitive.Content>,
 	PopoverContentProps
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-	<PopoverPrimitive.Portal>
-		<PopoverPrimitive.Content
-			ref={ref}
-			align={align}
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-popover-content-transform-origin)]",
-				className,
-			)}
-			{...props}
-		/>
-	</PopoverPrimitive.Portal>
-));
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<PopoverPrimitive.Portal container={container ?? undefined}>
+			<PopoverPrimitive.Content
+				ref={ref}
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-popover-content-transform-origin)]",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/components/organisms/resizable.tsx

@@ -5,11 +5,30 @@ import { Group, Panel, Separator } from "react-resizable-panels";
 
 import { cn } from "../../lib/utils";
 
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof Group>) => (
-	<Group
-		className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
-		{...props}
-	/>
+/**
+ * `react-resizable-panels` v4 emits `data-group` on the panel group and forces
+ * inline `height: 100%; width: 100%`, which means a `className="h-32"` passed
+ * directly to the group is ignored. The library expects the parent to size it.
+ *
+ * To keep `<ResizablePanelGroup className="h-32">` ergonomic for consumers, we
+ * wrap the library's `Group` in a sizing container — `className` lands on that
+ * wrapper, the inner `Group` then fills 100%.
+ *
+ * Orientation note: the library only emits `aria-orientation` on the
+ * `Separator` (and the separator's orientation is OPPOSITE the group's — a
+ * horizontal group has vertical separators). So group flex direction is set
+ * here in JS from the prop, while separator dimension styles key off
+ * `aria-orientation=horizontal` (separator inside a `vertical` group).
+ */
+const ResizablePanelGroup = ({
+	className,
+	orientation,
+	style,
+	...props
+}: React.ComponentProps<typeof Group>) => (
+	<div className={cn("flex h-full w-full", className)} style={style}>
+		<Group orientation={orientation} {...props} />
+	</div>
 );
 
 const ResizablePanel = Panel;
@@ -23,7 +42,7 @@ const ResizableHandle = ({
 }) => (
 	<Separator
 		className={cn(
-			"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
 			className,
 		)}
 		{...props}

package/src/components/organisms/select.tsx

@@ -265,7 +265,12 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
 					<Check className="h-4 w-4" />
 				</SelectPrimitive.ItemIndicator>
 			</span>
-			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+			<SelectPrimitive.ItemText>
+				{/* Wrap children in a flex row so an inline icon + label compose
+				 * horizontally instead of stacking — Tailwind's preflight makes
+				 * <svg> block-level, which would otherwise push the text below. */}
+				<span className="flex items-center gap-2">{children}</span>
+			</SelectPrimitive.ItemText>
 		</SelectPrimitive.Item>
 	),
 );

package/src/components/organisms/sheet.tsx

@@ -5,6 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
+import { usePortalContainer } from "../../lib/portal-container";
 import { cn } from "../../lib/utils";
 
 export interface SheetProps extends React.ComponentProps<typeof SheetPrimitive.Root> {
@@ -158,18 +159,25 @@ export interface SheetContentProps
 const SheetContent = React.forwardRef<
 	React.ElementRef<typeof SheetPrimitive.Content>,
 	SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-	<SheetPortal>
-		<SheetOverlay />
-		<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-				<X className="h-4 w-4" />
-				<span className="sr-only">Close</span>
-			</SheetPrimitive.Close>
-			{children}
-		</SheetPrimitive.Content>
-	</SheetPortal>
-));
+>(({ side = "right", className, children, ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<SheetPortal container={container ?? undefined}>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				ref={ref}
+				className={cn(sheetVariants({ side }), className)}
+				{...props}
+			>
+				<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+					<X className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+				{children}
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
+});
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/index.ts

@@ -364,6 +364,7 @@ export {
 	DrawerContent,
 	DrawerDescription,
 	DrawerFooter,
+	DrawerHandle,
 	DrawerHeader,
 	DrawerOverlay,
 	DrawerPortal,

package/styles/tokens.css

@@ -39,7 +39,7 @@
 		--muted-foreground: 240 3.8% 46.1%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
-		--destructive: 0 84.2% 60.2%;
+		--destructive: 4 78% 50%;
 		--destructive-foreground: 0 0% 98%;
 		--brand: 213 94% 68%;
 		--brand-foreground: 0 0% 100%;
@@ -77,7 +77,7 @@
 		--stat-blue: 217 91% 60%;        /* #3b82f6 */
 		--stat-success: 160 84% 39%;     /* #10b981 */
 		--stat-purple: 258 90% 66%;      /* #8b5cf6 */
-		--stat-destructive: 0 84% 60%;   /* #ef4444 */
+		--stat-destructive: 4 78% 50%;   /* #df341d */
 		--stat-amber: 38 92% 50%;        /* #f59e0b */
 
 		/* ── Typography ────────────────────────────────────────────── */
@@ -119,7 +119,7 @@
 		--accent: 225 14% 22%;
 		--accent-foreground: 220 14% 92%;
 
-		--destructive: 0 70% 45%;
+		--destructive: 4 88% 62%;
 		--destructive-foreground: 0 0% 98%;
 		--brand: 213 94% 68%;
 		--brand-foreground: 0 0% 100%;
@@ -151,7 +151,7 @@
 		--stat-blue: 217 91% 60%;
 		--stat-success: 160 84% 39%;
 		--stat-purple: 258 90% 66%;
-		--stat-destructive: 0 84% 60%;
+		--stat-destructive: 4 88% 62%;
 		--stat-amber: 38 92% 50%;
 	}
 
@@ -163,6 +163,45 @@
 		background: hsl(var(--background));
 		color: hsl(var(--foreground));
 	}
+
+	/* ──────────────────────────────────────────────────────────────
+	 * Themed scrollbars — applied globally so every overflow:auto /
+	 * overflow:scroll element in canvas (and consumer apps that load
+	 * tokens.css) gets canvas-token-tinted scrollbars instead of the
+	 * stark OS defaults. WebKit (Chrome/Safari) uses pseudo-elements;
+	 * Firefox uses the `scrollbar-*` properties. Both target the
+	 * `--muted-foreground` token at 30%/45%/60% opacity for
+	 * idle/hover/active so scrollbars stay subtle in dark mode and
+	 * still legible in light mode.
+	 * ────────────────────────────────────────────────────────────── */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+	}
+	*::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	*::-webkit-scrollbar-thumb {
+		background-color: hsl(var(--muted-foreground) / 0.3);
+		border-radius: 6px;
+		/* Border creates the inset gap that makes the thumb feel like a
+		 * floating pill rather than filling the gutter. */
+		border: 2px solid transparent;
+		background-clip: content-box;
+	}
+	*::-webkit-scrollbar-thumb:hover {
+		background-color: hsl(var(--muted-foreground) / 0.45);
+	}
+	*::-webkit-scrollbar-thumb:active {
+		background-color: hsl(var(--muted-foreground) / 0.6);
+	}
+	*::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 }
 
 @custom-variant dark (&:is(.dark *));