@olympusoss/canvas 2.6.27 → 2.6.28

package/package.json

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

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>