@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/notification-center.mjs

@@ -0,0 +1,224 @@
+import { Badge } from "./badge.mjs";
+import { Button } from "./button.mjs";
+import { ScrollArea } from "./scroll-area.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Bell, Check, ClipboardList, RotateCcw, Trash2, X } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/notification-center.tsx
+const TONE_CHIP = {
+	default: "wwc:border-border wwc:bg-muted",
+	success: "wwc:border-green-600/40 wwc:bg-green-500/15",
+	warning: "wwc:border-amber-600/40 wwc:bg-amber-500/15",
+	danger: "wwc:border-red-600/40 wwc:bg-red-500/15"
+};
+/**
+* One floating card. Stacked with gaps rather than dividing a single surface. A hairline ring plus a
+* soft drop shadow define its edge against the frosted material — `ring` rather than `border` so the
+* outline sits outside the box and never shifts the card's own layout.
+*
+* `wwc-invert` (from core-tokens) runs the card on the opposite theme to the page: a charcoal card
+* with light text on a light page, a near-white card with dark text on a dark one. The card reads as
+* an object sitting ON the frosted panel rather than a tinted patch OF it. Because the inversion is
+* done with tokens, every descendant bound to a token — text, muted text, ring, buttons — follows.
+*/
+function CenterCard({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("wwc-invert", "wwc:rounded-xl wwc:bg-card wwc:p-3 wwc:text-card-foreground wwc:ring-1 wwc:ring-border/70 wwc:shadow-lg wwc:shadow-black/[0.07]", className),
+		children
+	});
+}
+function EmptyState({ icon: Icon, title, body }) {
+	return /* @__PURE__ */ jsxs(CenterCard, {
+		className: "wwc:py-8 wwc:text-center",
+		children: [
+			/* @__PURE__ */ jsx(Icon, { className: "wwc:mx-auto wwc:h-6 wwc:w-6 wwc:text-muted-foreground" }),
+			/* @__PURE__ */ jsx("p", {
+				className: "wwc:mt-2 wwc:text-sm wwc:font-medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "wwc:mt-1 wwc:text-xs wwc:text-muted-foreground",
+				children: body
+			})
+		]
+	});
+}
+function NotificationCenter({ open, onOpenChange, notifications = [], changes = [], view = "notifications", onDismiss, onClearAll, onUndo, onApplyAll, onDiscardAll, className }) {
+	React.useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => e.key === "Escape" && onOpenChange(false);
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [open, onOpenChange]);
+	if (!open) return null;
+	const pending = changes.filter((c) => !c.committed);
+	const applied = changes.filter((c) => c.committed);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Close notification centre",
+		className: "wwc:fixed wwc:inset-0 wwc:z-40 wwc:cursor-default",
+		onClick: () => onOpenChange(false)
+	}), /* @__PURE__ */ jsxs("aside", {
+		"aria-label": "Notification centre",
+		className: cn("wwc:fixed wwc:bottom-3 wwc:right-3 wwc:top-3 wwc:z-50 wwc:flex wwc:w-[360px] wwc:flex-col wwc:gap-2", "wwc:rounded-2xl wwc:bg-gradient-to-b wwc:from-background/70 wwc:to-background/45 wwc:p-2 wwc:text-foreground wwc:shadow-2xl wwc:backdrop-blur-md wwc:backdrop-saturate-150", "wwc:animate-in wwc:slide-in-from-right-4 wwc:fade-in-0 wwc:duration-200", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:px-1 wwc:pb-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:font-semibold",
+					children: view === "notifications" ? "Notifications" : "Changes"
+				}),
+				view === "changes" && changes.length > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "wwc:text-xs wwc:text-muted-foreground",
+					children: [
+						pending.length,
+						" uncommitted · ",
+						applied.length,
+						" applied"
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: true,
+					"aria-label": "Close",
+					className: "wwc:ml-auto wwc:h-7 wwc:w-7",
+					onClick: () => onOpenChange(false),
+					children: /* @__PURE__ */ jsx(X, { className: "wwc:h-4 wwc:w-4" })
+				})
+			]
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			className: "wwc:min-h-0 wwc:flex-1",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:pr-1",
+				children: view === "notifications" ? notifications.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+					icon: Bell,
+					title: "No notifications",
+					body: "You're all caught up."
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [notifications.map((n) => /* @__PURE__ */ jsx(CenterCard, {
+					className: "wwc:group wwc:relative",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-start wwc:gap-2",
+						children: [
+							n.unread && /* @__PURE__ */ jsx("span", { className: "wwc:mt-1.5 wwc:h-2 wwc:w-2 wwc:shrink-0 wwc:rounded-full wwc:bg-primary" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "wwc:min-w-0 wwc:flex-1",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-center wwc:gap-2",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:truncate wwc:text-sm wwc:font-medium",
+											children: n.title
+										}), n.kind && /* @__PURE__ */ jsx(Badge, {
+											variant: "outline",
+											className: cn("wwc:font-normal", TONE_CHIP[n.tone ?? "default"]),
+											children: n.kind
+										})]
+									}),
+									n.body && /* @__PURE__ */ jsx("p", {
+										className: "wwc:mt-0.5 wwc:text-xs wwc:text-muted-foreground",
+										children: n.body
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "wwc:mt-1 wwc:text-[11px] wwc:text-muted-foreground",
+										children: n.time
+									})
+								]
+							}),
+							onDismiss && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Dismiss ${n.title}`,
+								onClick: () => onDismiss(n.id),
+								className: "wwc:rounded wwc:p-0.5 wwc:text-muted-foreground wwc:opacity-0 wwc:transition-opacity wwc:focus:opacity-100 wwc:group-hover:opacity-100 wwc:hover:text-foreground",
+								children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3.5 wwc:w-3.5" })
+							})
+						]
+					})
+				}, n.id)), onClearAll && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "wwc:self-end wwc:text-xs",
+					onClick: onClearAll,
+					children: "Clear all"
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					pending.length > 0 && /* @__PURE__ */ jsx(CenterCard, {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:py-2",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "wwc:ml-auto wwc:flex wwc:gap-1.5",
+							children: [onApplyAll && /* @__PURE__ */ jsxs(Button, {
+								size: "sm",
+								className: "wwc:h-7 wwc:text-xs",
+								onClick: onApplyAll,
+								children: [/* @__PURE__ */ jsx(Check, { className: "wwc:h-3.5 wwc:w-3.5" }), "Apply all"]
+							}), onDiscardAll && /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								size: "sm",
+								className: "wwc:h-7 wwc:text-xs",
+								onClick: onDiscardAll,
+								children: [/* @__PURE__ */ jsx(Trash2, { className: "wwc:h-3.5 wwc:w-3.5" }), "Discard"]
+							})]
+						})
+					}),
+					pending.length === 0 && applied.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+						icon: ClipboardList,
+						title: "No uncommitted changes",
+						body: "Every mutation lands here first, to apply or discard as one set."
+					}) : null,
+					pending.map((c) => /* @__PURE__ */ jsxs(CenterCard, { children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								className: cn("wwc:font-mono wwc:font-normal", TONE_CHIP.default),
+								children: c.kind
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground",
+								children: c.time
+							}),
+							c.undoable !== false && onUndo && /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "wwc:ml-auto wwc:h-6 wwc:text-xs",
+								onClick: () => onUndo(c.id),
+								children: [/* @__PURE__ */ jsx(RotateCcw, { className: "wwc:h-3 wwc:w-3" }), "Undo"]
+							}),
+							c.undoable === false && /* @__PURE__ */ jsx("span", {
+								className: "wwc:ml-auto wwc:text-[10px] wwc:text-muted-foreground",
+								children: "not undoable"
+							})
+						]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "wwc:mt-1 wwc:text-sm",
+						children: c.summary
+					})] }, c.id)),
+					applied.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+						className: "wwc:px-1 wwc:pt-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+						children: "Applied"
+					}), applied.map((c) => /* @__PURE__ */ jsxs(CenterCard, {
+						className: "wwc:opacity-60",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2",
+							children: [/* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								className: cn("wwc:font-mono wwc:font-normal", TONE_CHIP.default),
+								children: c.kind
+							}), /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground",
+								children: c.time
+							})]
+						}), /* @__PURE__ */ jsx("p", {
+							className: "wwc:mt-1 wwc:text-sm",
+							children: c.summary
+						})]
+					}, c.id))] })
+				] })
+			})
+		})]
+	})] });
+}
+//#endregion
+export { NotificationCenter };
+
+//# sourceMappingURL=notification-center.mjs.map

package/dist/notification-center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center.mjs","names":[],"sources":["../src/notification-center.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Bell, ClipboardList, Check, RotateCcw, Trash2, X} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Badge} from \"./badge\";\nimport {Button} from \"./button\";\nimport {ScrollArea} from \"./scroll-area\";\n\n// A floating notification centre, modelled on macOS: a translucent column pinned to the right edge\n// with its own rounded cards, rather than an edge-to-edge Sheet. It overlays the app instead of\n// pushing it (PushPanel) and it is dismissible by clicking anywhere outside, or with Escape.\n//\n// It carries two streams because the WC3 shell has two: system notifications, and the changeset —\n// the uncommitted mutations every ontology edit lands in before being applied.\n\nexport interface NotificationItem {\n\tid: string;\n\ttitle: string;\n\tbody?: string;\n\t/** Pre-formatted, e.g. \"2m ago\" — the host owns the clock. */\n\ttime: string;\n\tunread?: boolean;\n\t/** Optional grouping label rendered as a chip, e.g. \"System\". */\n\tkind?: string;\n\ttone?: \"default\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport interface ChangeEntry {\n\tid: string;\n\t/** Mutation kind, e.g. \"create-object-type\". */\n\tkind: string;\n\tsummary: string;\n\ttime: string;\n\t/** Applied entries are immune to undo, matching the prototype's changeset. */\n\tcommitted?: boolean;\n\t/** False when the mutation's target no longer exists, so undo cannot be offered. */\n\tundoable?: boolean;\n}\n\nexport interface NotificationCenterProps {\n\topen: boolean;\n\tonOpenChange: (open: boolean) => void;\n\tnotifications?: NotificationItem[];\n\tchanges?: ChangeEntry[];\n\t/** Which stream to show. The host drives this from its own top-bar buttons. */\n\tview?: \"notifications\" | \"changes\";\n\tonDismiss?: (id: string) => void;\n\tonClearAll?: () => void;\n\tonUndo?: (id: string) => void;\n\tonApplyAll?: () => void;\n\tonDiscardAll?: () => void;\n\tclassName?: string;\n}\n\n// Tone is carried by a translucent tint and stroke, with the label left on `text-foreground`.\n// Two reasons, both from the cards' token inversion (see CenterCard):\n//  - the stock *Soft variants colour their label via a `dark:` variant, which keys off the page's\n//    `.dark` class and so does NOT follow the inversion — the label would fight the card.\n//  - the filled variants (white on green-600/amber-500) drop to 2.1–3.2:1, below AA.\n// A token-bound label inherits the card's own foreground, so it stays legible on either colour\n// while the tint still reads as green/amber/red.\nconst TONE_CHIP = {\n\tdefault: \"wwc:border-border wwc:bg-muted\",\n\tsuccess: \"wwc:border-green-600/40 wwc:bg-green-500/15\",\n\twarning: \"wwc:border-amber-600/40 wwc:bg-amber-500/15\",\n\tdanger: \"wwc:border-red-600/40 wwc:bg-red-500/15\",\n} as const;\n\n/**\n * One floating card. Stacked with gaps rather than dividing a single surface. A hairline ring plus a\n * soft drop shadow define its edge against the frosted material — `ring` rather than `border` so the\n * outline sits outside the box and never shifts the card's own layout.\n *\n * `wwc-invert` (from core-tokens) runs the card on the opposite theme to the page: a charcoal card\n * with light text on a light page, a near-white card with dark text on a dark one. The card reads as\n * an object sitting ON the frosted panel rather than a tinted patch OF it. Because the inversion is\n * done with tokens, every descendant bound to a token — text, muted text, ring, buttons — follows.\n */\nfunction CenterCard({children, className}: {children: React.ReactNode; className?: string}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc-invert\",\n\t\t\t\t\"wwc:rounded-xl wwc:bg-card wwc:p-3 wwc:text-card-foreground wwc:ring-1 wwc:ring-border/70 wwc:shadow-lg wwc:shadow-black/[0.07]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nfunction EmptyState({icon: Icon, title, body}: {icon: typeof Bell; title: string; body: string}) {\n\treturn (\n\t\t<CenterCard className=\"wwc:py-8 wwc:text-center\">\n\t\t\t<Icon className=\"wwc:mx-auto wwc:h-6 wwc:w-6 wwc:text-muted-foreground\" />\n\t\t\t<p className=\"wwc:mt-2 wwc:text-sm wwc:font-medium\">{title}</p>\n\t\t\t<p className=\"wwc:mt-1 wwc:text-xs wwc:text-muted-foreground\">{body}</p>\n\t\t</CenterCard>\n\t);\n}\n\nexport function NotificationCenter({\n\topen,\n\tonOpenChange,\n\tnotifications = [],\n\tchanges = [],\n\tview = \"notifications\",\n\tonDismiss,\n\tonClearAll,\n\tonUndo,\n\tonApplyAll,\n\tonDiscardAll,\n\tclassName,\n}: NotificationCenterProps) {\n\t// Escape closes, matching every other overlay in the system.\n\tReact.useEffect(() => {\n\t\tif (!open) return;\n\t\tconst onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onOpenChange(false);\n\t\tdocument.addEventListener(\"keydown\", onKey);\n\t\treturn () => document.removeEventListener(\"keydown\", onKey);\n\t}, [open, onOpenChange]);\n\n\tif (!open) return null;\n\n\tconst pending = changes.filter((c) => !c.committed);\n\tconst applied = changes.filter((c) => c.committed);\n\n\treturn (\n\t\t<>\n\t\t\t{/* Click-away target. Transparent — macOS does not dim the desktop behind the centre. */}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label=\"Close notification centre\"\n\t\t\t\tclassName=\"wwc:fixed wwc:inset-0 wwc:z-40 wwc:cursor-default\"\n\t\t\t\tonClick={() => onOpenChange(false)}\n\t\t\t/>\n\n\t\t\t<aside\n\t\t\t\taria-label=\"Notification centre\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Frosted glass. Three things make it read as a material rather than a translucent box:\n\t\t\t\t\t//  - blur radius stays moderate (blur-md). Too large averages the backdrop into a flat wash,\n\t\t\t\t\t//    which is indistinguishable from a solid fill.\n\t\t\t\t\t//  - saturate boost keeps colour behind vivid, so it looks like glass, not grey plastic.\n\t\t\t\t\t//  - a vertical gradient in the tint, so the material has depth instead of one flat alpha.\n\t\t\t\t\t// No border: separation comes from the material and the cards' shadows, not a stroke.\n\t\t\t\t\t\"wwc:fixed wwc:bottom-3 wwc:right-3 wwc:top-3 wwc:z-50 wwc:flex wwc:w-[360px] wwc:flex-col wwc:gap-2\",\n\t\t\t\t\t\"wwc:rounded-2xl wwc:bg-gradient-to-b wwc:from-background/70 wwc:to-background/45 wwc:p-2 wwc:text-foreground wwc:shadow-2xl wwc:backdrop-blur-md wwc:backdrop-saturate-150\",\n\t\t\t\t\t\"wwc:animate-in wwc:slide-in-from-right-4 wwc:fade-in-0 wwc:duration-200\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:px-1 wwc:pb-1\">\n\t\t\t\t\t<span className=\"wwc:text-sm wwc:font-semibold\">\n\t\t\t\t\t\t{view === \"notifications\" ? \"Notifications\" : \"Changes\"}\n\t\t\t\t\t</span>\n\t\t\t\t\t{view === \"changes\" && changes.length > 0 && (\n\t\t\t\t\t\t<span className=\"wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t{pending.length} uncommitted · {applied.length} applied\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\tclassName=\"wwc:ml-auto wwc:h-7 wwc:w-7\"\n\t\t\t\t\t\tonClick={() => onOpenChange(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<ScrollArea className=\"wwc:min-h-0 wwc:flex-1\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-2 wwc:pr-1\">\n\t\t\t\t\t\t{view === \"notifications\" ? (\n\t\t\t\t\t\t\tnotifications.length === 0 ? (\n\t\t\t\t\t\t\t\t<EmptyState icon={Bell} title=\"No notifications\" body=\"You're all caught up.\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{notifications.map((n) => (\n\t\t\t\t\t\t\t\t\t\t<CenterCard key={n.id} className=\"wwc:group wwc:relative\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-start wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t{n.unread && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:mt-1.5 wwc:h-2 wwc:w-2 wwc:shrink-0 wwc:rounded-full wwc:bg-primary\" />\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:min-w-0 wwc:flex-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"wwc:truncate wwc:text-sm wwc:font-medium\">{n.title}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{n.kind && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\"wwc:font-normal\", TONE_CHIP[n.tone ?? \"default\"])}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{n.kind}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{n.body && <p className=\"wwc:mt-0.5 wwc:text-xs wwc:text-muted-foreground\">{n.body}</p>}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"wwc:mt-1 wwc:text-[11px] wwc:text-muted-foreground\">{n.time}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t{onDismiss && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={`Dismiss ${n.title}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => onDismiss(n.id)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// Revealed on hover, as macOS does, but always reachable by keyboard.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:rounded wwc:p-0.5 wwc:text-muted-foreground wwc:opacity-0 wwc:transition-opacity wwc:focus:opacity-100 wwc:group-hover:opacity-100 wwc:hover:text-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<X className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</CenterCard>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t{onClearAll && (\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" className=\"wwc:self-end wwc:text-xs\" onClick={onClearAll}>\n\t\t\t\t\t\t\t\t\t\t\tClear all\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{pending.length > 0 && (\n\t\t\t\t\t\t\t\t\t<CenterCard className=\"wwc:flex wwc:items-center wwc:gap-2 wwc:py-2\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:ml-auto wwc:flex wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t\t\t\t{onApplyAll && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button size=\"sm\" className=\"wwc:h-7 wwc:text-xs\" onClick={onApplyAll}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\tApply all\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{onDiscardAll && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" className=\"wwc:h-7 wwc:text-xs\" onClick={onDiscardAll}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Trash2 className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\tDiscard\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</CenterCard>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{pending.length === 0 && applied.length === 0 ? (\n\t\t\t\t\t\t\t\t\t<EmptyState\n\t\t\t\t\t\t\t\t\t\ticon={ClipboardList}\n\t\t\t\t\t\t\t\t\t\ttitle=\"No uncommitted changes\"\n\t\t\t\t\t\t\t\t\t\tbody=\"Every mutation lands here first, to apply or discard as one set.\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null}\n\n\t\t\t\t\t\t\t\t{pending.map((c) => (\n\t\t\t\t\t\t\t\t\t<CenterCard key={c.id}>\n\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className={cn(\"wwc:font-mono wwc:font-normal\", TONE_CHIP.default)}>\n\t\t\t\t\t\t\t\t\t\t\t\t{c.kind}\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:text-muted-foreground\">{c.time}</span>\n\t\t\t\t\t\t\t\t\t\t\t{c.undoable !== false && onUndo && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:ml-auto wwc:h-6 wwc:text-xs\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => onUndo(c.id)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<RotateCcw className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\tUndo\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{c.undoable === false && (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:ml-auto wwc:text-[10px] wwc:text-muted-foreground\">not undoable</span>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<p className=\"wwc:mt-1 wwc:text-sm\">{c.summary}</p>\n\t\t\t\t\t\t\t\t\t</CenterCard>\n\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t\t{applied.length > 0 && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<p className=\"wwc:px-1 wwc:pt-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\tApplied\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t{applied.map((c) => (\n\t\t\t\t\t\t\t\t\t\t\t<CenterCard key={c.id} className=\"wwc:opacity-60\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className={cn(\"wwc:font-mono wwc:font-normal\", TONE_CHIP.default)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{c.kind}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:text-muted-foreground\">{c.time}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"wwc:mt-1 wwc:text-sm\">{c.summary}</p>\n\t\t\t\t\t\t\t\t\t\t\t</CenterCard>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</ScrollArea>\n\t\t\t</aside>\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/dist/number-input.d.mts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/number-input.d.ts
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment/decrement value */
+  step?: number;
+  /** Number of decimal places to show */
+  precision?: number;
+  /** Callback when value changes */
+  onChange?: (value: number | undefined) => void;
+  /** Current value */
+  value?: number;
+  /** Show increment/decrement buttons */
+  showControls?: boolean;
+}
+/** A numeric input with optional stepper controls. */
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { NumberInput };
+//# sourceMappingURL=number-input.d.mts.map

package/dist/number-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.mts","names":[],"sources":["../src/number-input.tsx"],"mappings":";;iBAIiB,yBAAyB,KAAK,MAAM,oBAAoB;;EAExE;;EAEA;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ;;EAEA;;;cAIK,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/number-input.mjs

@@ -0,0 +1,79 @@
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/number-input.tsx
+/** A numeric input with optional stepper controls. */
+const NumberInput = React.forwardRef(({ className, min, max, step = 1, precision, onChange, value, showControls = true, disabled, ...props }, ref) => {
+	const [internalValue, setInternalValue] = React.useState(value?.toString() || "");
+	React.useEffect(() => {
+		setInternalValue(value?.toString() || "");
+	}, [value]);
+	const formatValue = (val) => {
+		if (precision !== void 0) return Number(val.toFixed(precision));
+		return val;
+	};
+	const clampValue = (val) => {
+		let clamped = val;
+		if (min !== void 0 && clamped < min) clamped = min;
+		if (max !== void 0 && clamped > max) clamped = max;
+		return formatValue(clamped);
+	};
+	const handleChange = (newValue) => {
+		setInternalValue(newValue);
+		const num = parseFloat(newValue);
+		if (!isNaN(num)) {
+			const clamped = clampValue(num);
+			onChange?.(clamped);
+		} else if (newValue === "") onChange?.(void 0);
+	};
+	const increment = () => {
+		const newValue = clampValue((parseFloat(internalValue) || 0) + step);
+		setInternalValue(newValue.toString());
+		onChange?.(newValue);
+	};
+	const decrement = () => {
+		const newValue = clampValue((parseFloat(internalValue) || 0) - step);
+		setInternalValue(newValue.toString());
+		onChange?.(newValue);
+	};
+	const canIncrement = max === void 0 || (parseFloat(internalValue) || 0) < max;
+	const canDecrement = min === void 0 || (parseFloat(internalValue) || 0) > min;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:relative wwc:inline-flex wwc:items-center",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "number",
+			ref,
+			className: cn("wwc:flex wwc:h-9 wwc:w-full wwc:rounded-md wwc:border wwc:border-input wwc:bg-transparent wwc:px-3 wwc:py-1 wwc:text-sm wwc:shadow-sm wwc:transition-colors wwc:file:border-0 wwc:file:bg-transparent wwc:file:text-sm wwc:file:font-medium wwc:file:text-foreground wwc:placeholder:text-muted-foreground wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50", showControls && "wwc:pr-8", className),
+			value: internalValue,
+			onChange: (e) => handleChange(e.target.value),
+			min,
+			max,
+			step,
+			disabled,
+			...props
+		}), showControls && /* @__PURE__ */ jsxs("div", {
+			className: "wwc:absolute wwc:right-0 wwc:flex wwc:h-full wwc:flex-col wwc:border-l wwc:border-input",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: increment,
+				disabled: disabled || !canIncrement,
+				className: "wwc:flex wwc:h-1/2 wwc:w-6 wwc:items-center wwc:justify-center wwc:border-b wwc:border-input wwc:bg-background wwc:hover:bg-accent wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50",
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:h-3 wwc:w-3" })
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: decrement,
+				disabled: disabled || !canDecrement,
+				className: "wwc:flex wwc:h-1/2 wwc:w-6 wwc:items-center wwc:justify-center wwc:bg-background wwc:hover:bg-accent wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50",
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3 wwc:w-3" })
+			})]
+		})]
+	});
+});
+NumberInput.displayName = "NumberInput";
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=number-input.mjs.map

package/dist/number-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.mjs","names":[],"sources":["../src/number-input.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown, ChevronUp} from \"lucide-react\";\nimport * as React from \"react\";\n\nexport interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\"> {\n\t/** Minimum value */\n\tmin?: number;\n\t/** Maximum value */\n\tmax?: number;\n\t/** Step increment/decrement value */\n\tstep?: number;\n\t/** Number of decimal places to show */\n\tprecision?: number;\n\t/** Callback when value changes */\n\tonChange?: (value: number | undefined) => void;\n\t/** Current value */\n\tvalue?: number;\n\t/** Show increment/decrement buttons */\n\tshowControls?: boolean;\n}\n\n/** A numeric input with optional stepper controls. */\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n\t({className, min, max, step = 1, precision, onChange, value, showControls = true, disabled, ...props}, ref) => {\n\t\tconst [internalValue, setInternalValue] = React.useState<string>(value?.toString() || \"\");\n\n\t\tReact.useEffect(() => {\n\t\t\tsetInternalValue(value?.toString() || \"\");\n\t\t}, [value]);\n\n\t\tconst formatValue = (val: number): number => {\n\t\t\tif (precision !== undefined) {\n\t\t\t\treturn Number(val.toFixed(precision));\n\t\t\t}\n\t\t\treturn val;\n\t\t};\n\n\t\tconst clampValue = (val: number): number => {\n\t\t\tlet clamped = val;\n\t\t\tif (min !== undefined && clamped < min) clamped = min;\n\t\t\tif (max !== undefined && clamped > max) clamped = max;\n\t\t\treturn formatValue(clamped);\n\t\t};\n\n\t\tconst handleChange = (newValue: string) => {\n\t\t\tsetInternalValue(newValue);\n\t\t\tconst num = parseFloat(newValue);\n\t\t\tif (!isNaN(num)) {\n\t\t\t\tconst clamped = clampValue(num);\n\t\t\t\tonChange?.(clamped);\n\t\t\t} else if (newValue === \"\") {\n\t\t\t\tonChange?.(undefined);\n\t\t\t}\n\t\t};\n\n\t\tconst increment = () => {\n\t\t\tconst current = parseFloat(internalValue) || 0;\n\t\t\tconst newValue = clampValue(current + step);\n\t\t\tsetInternalValue(newValue.toString());\n\t\t\tonChange?.(newValue);\n\t\t};\n\n\t\tconst decrement = () => {\n\t\t\tconst current = parseFloat(internalValue) || 0;\n\t\t\tconst newValue = clampValue(current - step);\n\t\t\tsetInternalValue(newValue.toString());\n\t\t\tonChange?.(newValue);\n\t\t};\n\n\t\tconst canIncrement = max === undefined || (parseFloat(internalValue) || 0) < max;\n\t\tconst canDecrement = min === undefined || (parseFloat(internalValue) || 0) > min;\n\n\t\treturn (\n\t\t\t<div className=\"wwc:relative wwc:inline-flex wwc:items-center\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:flex wwc:h-9 wwc:w-full wwc:rounded-md wwc:border wwc:border-input wwc:bg-transparent wwc:px-3 wwc:py-1 wwc:text-sm wwc:shadow-sm wwc:transition-colors wwc:file:border-0 wwc:file:bg-transparent wwc:file:text-sm wwc:file:font-medium wwc:file:text-foreground wwc:placeholder:text-muted-foreground wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50\",\n\t\t\t\t\t\tshowControls && \"wwc:pr-8\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tvalue={internalValue}\n\t\t\t\t\tonChange={(e) => handleChange(e.target.value)}\n\t\t\t\t\tmin={min}\n\t\t\t\t\tmax={max}\n\t\t\t\t\tstep={step}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t{showControls && (\n\t\t\t\t\t<div className=\"wwc:absolute wwc:right-0 wwc:flex wwc:h-full wwc:flex-col wwc:border-l wwc:border-input\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={increment}\n\t\t\t\t\t\t\tdisabled={disabled || !canIncrement}\n\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:h-1/2 wwc:w-6 wwc:items-center wwc:justify-center wwc:border-b wwc:border-input wwc:bg-background wwc:hover:bg-accent wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronUp className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={decrement}\n\t\t\t\t\t\t\tdisabled={disabled || !canDecrement}\n\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:h-1/2 wwc:w-6 wwc:items-center wwc:justify-center wwc:bg-background wwc:hover:bg-accent wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronDown className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nNumberInput.displayName = \"NumberInput\";\n\nexport {NumberInput};\n"],"mappings":";;;;;;AAsBA,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,KAAK,KAAK,OAAO,GAAG,WAAW,UAAU,OAAO,eAAe,MAAM,UAAU,GAAG,SAAQ,QAAQ;CAC9G,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAiB,OAAO,SAAS,KAAK,EAAE;CAExF,MAAM,gBAAgB;EACrB,iBAAiB,OAAO,SAAS,KAAK,EAAE;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,QAAwB;EAC5C,IAAI,cAAc,KAAA,GACjB,OAAO,OAAO,IAAI,QAAQ,SAAS,CAAC;EAErC,OAAO;CACR;CAEA,MAAM,cAAc,QAAwB;EAC3C,IAAI,UAAU;EACd,IAAI,QAAQ,KAAA,KAAa,UAAU,KAAK,UAAU;EAClD,IAAI,QAAQ,KAAA,KAAa,UAAU,KAAK,UAAU;EAClD,OAAO,YAAY,OAAO;CAC3B;CAEA,MAAM,gBAAgB,aAAqB;EAC1C,iBAAiB,QAAQ;EACzB,MAAM,MAAM,WAAW,QAAQ;EAC/B,IAAI,CAAC,MAAM,GAAG,GAAG;GAChB,MAAM,UAAU,WAAW,GAAG;GAC9B,WAAW,OAAO;EACnB,OAAO,IAAI,aAAa,IACvB,WAAW,KAAA,CAAS;CAEtB;CAEA,MAAM,kBAAkB;EAEvB,MAAM,WAAW,YADD,WAAW,aAAa,KAAK,KACP,IAAI;EAC1C,iBAAiB,SAAS,SAAS,CAAC;EACpC,WAAW,QAAQ;CACpB;CAEA,MAAM,kBAAkB;EAEvB,MAAM,WAAW,YADD,WAAW,aAAa,KAAK,KACP,IAAI;EAC1C,iBAAiB,SAAS,SAAS,CAAC;EACpC,WAAW,QAAQ;CACpB;CAEA,MAAM,eAAe,QAAQ,KAAA,MAAc,WAAW,aAAa,KAAK,KAAK;CAC7E,MAAM,eAAe,QAAQ,KAAA,MAAc,WAAW,aAAa,KAAK,KAAK;CAE7E,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,oBAAC,SAAD;GACC,MAAK;GACA;GACL,WAAW,GACV,0bACA,gBAAgB,YAChB,SACD;GACA,OAAO;GACP,WAAW,MAAM,aAAa,EAAE,OAAO,KAAK;GACvC;GACA;GACC;GACI;GACV,GAAI;EACJ,CAAA,GACA,gBACA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,UAAD;IACC,MAAK;IACL,SAAS;IACT,UAAU,YAAY,CAAC;IACvB,WAAU;IACV,UAAU;IAEV,UAAA,oBAAC,WAAD,EAAW,WAAU,kBAAmB,CAAA;GACjC,CAAA,GACR,oBAAC,UAAD;IACC,MAAK;IACL,SAAS;IACT,UAAU,YAAY,CAAC;IACvB,WAAU;IACV,UAAU;IAEV,UAAA,oBAAC,aAAD,EAAa,WAAU,kBAAmB,CAAA;GACnC,CAAA,CACJ;EAEF,CAAA,CAAA;;AAEP,CACD;AACA,YAAY,cAAc"}

package/dist/object-drawing-toolbar.d.mts

@@ -0,0 +1,38 @@
+import * as React from "react";
+//#region src/object-drawing-toolbar.d.ts
+/** The drawing tools in the tool group (one active at a time). */
+export type DrawingTool = "select" | "pan" | "line" | "circle" | "rectangle" | "polygon";
+export interface ObjectDrawingToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Canvas mode: `true` = Editing (draw/modify), `false` = Viewing (pan/zoom). */
+  defaultEditing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  /** The active drawing tool. */
+  defaultTool?: DrawingTool;
+  onToolChange?: (tool: DrawingTool) => void;
+  /** Current fill color. */
+  defaultFillColor?: string;
+  onFillColorChange?: (color: string) => void;
+  /** Current stroke color. */
+  defaultStrokeColor?: string;
+  onStrokeColorChange?: (color: string) => void;
+  /** Object opacity, 0–100. */
+  defaultOpacity?: number;
+  onOpacityChange?: (opacity: number) => void;
+  /** Snap-to-90° toggle. */
+  defaultAngleSnap?: boolean;
+  onAngleSnapChange?: (enabled: boolean) => void;
+  /** Fires when the unlink button is pressed. */
+  onUnlink?: () => void;
+  /** Fires when the Import button is pressed. */
+  onImport?: () => void;
+}
+/**
+ * A single-line horizontal toolbar for a 2D canvas drawing tool, composed entirely from Core
+ * components: a mode pill and drawing-tool group (`ToolbarButton`), fill/stroke color pickers
+ * (`ToolbarColorPicker`), an opacity `Slider`, a 90°-snap toggle, and unlink / import actions —
+ * separated by `ToolbarSeparator`s. Renders bare (no border/background) so the host owns the chrome.
+ */
+declare const ObjectDrawingToolbar: React.ForwardRefExoticComponent<ObjectDrawingToolbarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ObjectDrawingToolbar };
+//# sourceMappingURL=object-drawing-toolbar.d.mts.map

package/dist/object-drawing-toolbar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-drawing-toolbar.d.mts","names":[],"sources":["../src/object-drawing-toolbar.tsx"],"mappings":";;;YAwBY;iBAsCK,kCAAkC,KAAK,MAAM,eAAe;;EAE5E;EACA,mBAAmB;;EAEnB,cAAc;EACd,gBAAgB,MAAM;;EAEtB;EACA,qBAAqB;;EAErB;EACA,uBAAuB;;EAEvB;EACA,mBAAmB;;EAEnB;EACA,qBAAqB;;EAErB;;EAEA;;;;;;;;cASK,sBAAoB,MAAA,0BAAA,4BAAA,MAAA,cAAA"}

package/dist/object-drawing-toolbar.mjs

@@ -0,0 +1,172 @@
+import { HoverTooltip, TooltipProvider } from "./tooltip.mjs";
+import { Slider } from "./slider.mjs";
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "./toolbar.mjs";
+import { ToolbarColorPicker } from "./toolbar-color-picker.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Circle, Hand, Lock, LockOpen, Minus, MousePointer2, PaintBucket, Pencil, PencilLine, Pentagon, Square, Unlink, Upload } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/object-drawing-toolbar.tsx
+/** Selection / navigation tools. */
+const SELECT_TOOLS = [{
+	id: "select",
+	label: "Select",
+	icon: /* @__PURE__ */ jsx(MousePointer2, { className: "wwc:h-4 wwc:w-4" })
+}, {
+	id: "pan",
+	label: "Pan",
+	icon: /* @__PURE__ */ jsx(Hand, { className: "wwc:h-4 wwc:w-4" })
+}];
+/** Shape drawing tools. */
+const SHAPE_TOOLS = [
+	{
+		id: "line",
+		label: "Line",
+		icon: /* @__PURE__ */ jsx(Minus, { className: "wwc:h-4 wwc:w-4" })
+	},
+	{
+		id: "circle",
+		label: "Circle",
+		icon: /* @__PURE__ */ jsx(Circle, { className: "wwc:h-4 wwc:w-4" })
+	},
+	{
+		id: "rectangle",
+		label: "Rectangle",
+		icon: /* @__PURE__ */ jsx(Square, { className: "wwc:h-4 wwc:w-4" })
+	},
+	{
+		id: "polygon",
+		label: "Polygon",
+		icon: /* @__PURE__ */ jsx(Pentagon, { className: "wwc:h-4 wwc:w-4" })
+	}
+];
+/**
+* A single-line horizontal toolbar for a 2D canvas drawing tool, composed entirely from Core
+* components: a mode pill and drawing-tool group (`ToolbarButton`), fill/stroke color pickers
+* (`ToolbarColorPicker`), an opacity `Slider`, a 90°-snap toggle, and unlink / import actions —
+* separated by `ToolbarSeparator`s. Renders bare (no border/background) so the host owns the chrome.
+*/
+const ObjectDrawingToolbar = React.forwardRef(({ className, defaultEditing = true, onEditingChange, defaultTool = "select", onToolChange, defaultFillColor = "#2563EB", onFillColorChange, defaultStrokeColor = "#7C3AED", onStrokeColorChange, defaultOpacity = 80, onOpacityChange, defaultAngleSnap = false, onAngleSnapChange, onUnlink, onImport, ...rest }, ref) => {
+	const [editing, setEditing] = React.useState(defaultEditing);
+	const [tool, setTool] = React.useState(defaultTool);
+	const [fillColor, setFillColor] = React.useState(defaultFillColor);
+	const [strokeColor, setStrokeColor] = React.useState(defaultStrokeColor);
+	const [opacity, setOpacity] = React.useState(defaultOpacity);
+	const [angleSnap, setAngleSnap] = React.useState(defaultAngleSnap);
+	const renderTool = (t) => /* @__PURE__ */ jsx(HoverTooltip, {
+		content: t.label,
+		side: "bottom",
+		children: /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: true,
+			label: t.label,
+			active: tool === t.id,
+			onClick: () => {
+				setTool(t.id);
+				onToolChange?.(t.id);
+			},
+			children: t.icon
+		})
+	}, t.id);
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delayDuration: 200,
+		children: /* @__PURE__ */ jsxs(Toolbar, {
+			ref,
+			variant: "bare",
+			"aria-label": "Object drawing tools",
+			className: cn("wwc:gap-1", className),
+			...rest,
+			children: [/* @__PURE__ */ jsxs(ToolbarButton, {
+				variant: editing ? "default" : "outline",
+				"aria-pressed": editing,
+				className: "wwc:gap-1.5 wwc:px-3",
+				onClick: () => {
+					const next = !editing;
+					setEditing(next);
+					onEditingChange?.(next);
+				},
+				children: [/* @__PURE__ */ jsx(Pencil, { className: "wwc:h-4 wwc:w-4" }), /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:font-medium",
+					children: editing ? "Editing" : "Edit"
+				})]
+			}), editing && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				SELECT_TOOLS.map(renderTool),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				SHAPE_TOOLS.map(renderTool),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				/* @__PURE__ */ jsx(ToolbarColorPicker, {
+					label: "Fill color",
+					icon: /* @__PURE__ */ jsx(PaintBucket, { className: "wwc:h-4 wwc:w-4" }),
+					value: fillColor,
+					onValueChange: (c) => {
+						setFillColor(c);
+						onFillColorChange?.(c);
+					}
+				}),
+				/* @__PURE__ */ jsx(ToolbarColorPicker, {
+					label: "Stroke color",
+					icon: /* @__PURE__ */ jsx(PencilLine, { className: "wwc:h-4 wwc:w-4" }),
+					value: strokeColor,
+					onValueChange: (c) => {
+						setStrokeColor(c);
+						onStrokeColorChange?.(c);
+					}
+				}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:whitespace-nowrap wwc:text-xs wwc:text-muted-foreground",
+						children: "Opacity"
+					}), /* @__PURE__ */ jsx(Slider, {
+						"aria-label": "Opacity",
+						value: [opacity],
+						min: 0,
+						max: 100,
+						onValueChange: (v) => {
+							setOpacity(v[0]);
+							onOpacityChange?.(v[0]);
+						},
+						className: "wwc:w-20"
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				/* @__PURE__ */ jsxs(ToolbarButton, {
+					active: angleSnap,
+					label: angleSnap ? "Unlock 90° snap" : "Lock to 90° snap",
+					className: "wwc:gap-1 wwc:px-2",
+					onClick: () => {
+						const next = !angleSnap;
+						setAngleSnap(next);
+						onAngleSnapChange?.(next);
+					},
+					children: [angleSnap ? /* @__PURE__ */ jsx(Lock, { className: "wwc:!h-3 wwc:!w-3" }) : /* @__PURE__ */ jsx(LockOpen, { className: "wwc:!h-3 wwc:!w-3" }), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:font-semibold",
+						children: "90°"
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					icon: true,
+					label: "Unlink",
+					onClick: onUnlink,
+					children: /* @__PURE__ */ jsx(Unlink, { className: "wwc:h-4 wwc:w-4" })
+				}),
+				/* @__PURE__ */ jsxs(ToolbarButton, {
+					variant: "outline",
+					className: "wwc:gap-1.5 wwc:px-3",
+					onClick: onImport,
+					children: [/* @__PURE__ */ jsx(Upload, { className: "wwc:h-3.5 wwc:w-3.5" }), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm",
+						children: "Import"
+					})]
+				})
+			] })]
+		})
+	});
+});
+ObjectDrawingToolbar.displayName = "ObjectDrawingToolbar";
+//#endregion
+export { ObjectDrawingToolbar };
+
+//# sourceMappingURL=object-drawing-toolbar.mjs.map

package/dist/object-drawing-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-drawing-toolbar.mjs","names":[],"sources":["../src/object-drawing-toolbar.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {\n\tCircle,\n\tHand,\n\tLock,\n\tLockOpen,\n\tMinus,\n\tMousePointer2,\n\tPaintBucket,\n\tPencil,\n\tPencilLine,\n\tPentagon,\n\tSquare,\n\tUnlink,\n\tUpload,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Slider} from \"./slider\";\nimport {Toolbar, ToolbarButton, ToolbarSeparator} from \"./toolbar\";\nimport {ToolbarColorPicker} from \"./toolbar-color-picker\";\nimport {HoverTooltip, TooltipProvider} from \"./tooltip\";\n\n/** The drawing tools in the tool group (one active at a time). */\nexport type DrawingTool = \"select\" | \"pan\" | \"line\" | \"circle\" | \"rectangle\" | \"polygon\";\n\ninterface ToolDef {\n\tid: DrawingTool;\n\tlabel: string;\n\ticon: React.ReactNode;\n}\n\n/** Selection / navigation tools. */\nconst SELECT_TOOLS: ToolDef[] = [\n\t{\n\t\tid: \"select\",\n\t\tlabel: \"Select\",\n\t\ticon: <MousePointer2 className=\"wwc:h-4 wwc:w-4\" />,\n\t},\n\t{id: \"pan\", label: \"Pan\", icon: <Hand className=\"wwc:h-4 wwc:w-4\" />},\n];\n\n/** Shape drawing tools. */\nconst SHAPE_TOOLS: ToolDef[] = [\n\t{\n\t\tid: \"line\",\n\t\tlabel: \"Line\",\n\t\ticon: <Minus className=\"wwc:h-4 wwc:w-4\" />,\n\t},\n\t{\n\t\tid: \"circle\",\n\t\tlabel: \"Circle\",\n\t\ticon: <Circle className=\"wwc:h-4 wwc:w-4\" />,\n\t},\n\t{id: \"rectangle\", label: \"Rectangle\", icon: <Square className=\"wwc:h-4 wwc:w-4\" />},\n\t{\n\t\tid: \"polygon\",\n\t\tlabel: \"Polygon\",\n\t\ticon: <Pentagon className=\"wwc:h-4 wwc:w-4\" />,\n\t},\n];\n\nexport interface ObjectDrawingToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** Canvas mode: `true` = Editing (draw/modify), `false` = Viewing (pan/zoom). */\n\tdefaultEditing?: boolean;\n\tonEditingChange?: (editing: boolean) => void;\n\t/** The active drawing tool. */\n\tdefaultTool?: DrawingTool;\n\tonToolChange?: (tool: DrawingTool) => void;\n\t/** Current fill color. */\n\tdefaultFillColor?: string;\n\tonFillColorChange?: (color: string) => void;\n\t/** Current stroke color. */\n\tdefaultStrokeColor?: string;\n\tonStrokeColorChange?: (color: string) => void;\n\t/** Object opacity, 0–100. */\n\tdefaultOpacity?: number;\n\tonOpacityChange?: (opacity: number) => void;\n\t/** Snap-to-90° toggle. */\n\tdefaultAngleSnap?: boolean;\n\tonAngleSnapChange?: (enabled: boolean) => void;\n\t/** Fires when the unlink button is pressed. */\n\tonUnlink?: () => void;\n\t/** Fires when the Import button is pressed. */\n\tonImport?: () => void;\n}\n\n/**\n * A single-line horizontal toolbar for a 2D canvas drawing tool, composed entirely from Core\n * components: a mode pill and drawing-tool group (`ToolbarButton`), fill/stroke color pickers\n * (`ToolbarColorPicker`), an opacity `Slider`, a 90°-snap toggle, and unlink / import actions —\n * separated by `ToolbarSeparator`s. Renders bare (no border/background) so the host owns the chrome.\n */\nconst ObjectDrawingToolbar = React.forwardRef<HTMLDivElement, ObjectDrawingToolbarProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdefaultEditing = true,\n\t\t\tonEditingChange,\n\t\t\tdefaultTool = \"select\",\n\t\t\tonToolChange,\n\t\t\tdefaultFillColor = \"#2563EB\",\n\t\t\tonFillColorChange,\n\t\t\tdefaultStrokeColor = \"#7C3AED\",\n\t\t\tonStrokeColorChange,\n\t\t\tdefaultOpacity = 80,\n\t\t\tonOpacityChange,\n\t\t\tdefaultAngleSnap = false,\n\t\t\tonAngleSnapChange,\n\t\t\tonUnlink,\n\t\t\tonImport,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [editing, setEditing] = React.useState(defaultEditing);\n\t\tconst [tool, setTool] = React.useState<DrawingTool>(defaultTool);\n\t\tconst [fillColor, setFillColor] = React.useState(defaultFillColor);\n\t\tconst [strokeColor, setStrokeColor] = React.useState(defaultStrokeColor);\n\t\tconst [opacity, setOpacity] = React.useState(defaultOpacity);\n\t\tconst [angleSnap, setAngleSnap] = React.useState(defaultAngleSnap);\n\n\t\tconst renderTool = (t: ToolDef) => (\n\t\t\t<HoverTooltip key={t.id} content={t.label} side=\"bottom\">\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon\n\t\t\t\t\tlabel={t.label}\n\t\t\t\t\tactive={tool === t.id}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetTool(t.id);\n\t\t\t\t\t\tonToolChange?.(t.id);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{t.icon}\n\t\t\t\t</ToolbarButton>\n\t\t\t</HoverTooltip>\n\t\t);\n\n\t\treturn (\n\t\t\t<TooltipProvider delayDuration={200}>\n\t\t\t\t<Toolbar\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvariant=\"bare\"\n\t\t\t\t\taria-label=\"Object drawing tools\"\n\t\t\t\t\tclassName={cn(\"wwc:gap-1\", className)}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{/* 1 — Mode toggle */}\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tvariant={editing ? \"default\" : \"outline\"}\n\t\t\t\t\t\taria-pressed={editing}\n\t\t\t\t\t\tclassName=\"wwc:gap-1.5 wwc:px-3\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tconst next = !editing;\n\t\t\t\t\t\t\tsetEditing(next);\n\t\t\t\t\t\t\tonEditingChange?.(next);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Pencil className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t<span className=\"wwc:text-sm wwc:font-medium\">{editing ? \"Editing\" : \"Edit\"}</span>\n\t\t\t\t\t</ToolbarButton>\n\n\t\t\t\t\t{/* The tools only show in Editing mode; View mode collapses to just the Edit button. */}\n\t\t\t\t\t{editing && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 2a — Selection / navigation tools (each with a tooltip) */}\n\t\t\t\t\t\t\t{SELECT_TOOLS.map(renderTool)}\n\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 2b — Shape drawing tools */}\n\t\t\t\t\t\t\t{SHAPE_TOOLS.map(renderTool)}\n\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 3 — Fill & stroke color */}\n\t\t\t\t\t\t\t<ToolbarColorPicker\n\t\t\t\t\t\t\t\tlabel=\"Fill color\"\n\t\t\t\t\t\t\t\ticon={<PaintBucket className=\"wwc:h-4 wwc:w-4\" />}\n\t\t\t\t\t\t\t\tvalue={fillColor}\n\t\t\t\t\t\t\t\tonValueChange={(c) => {\n\t\t\t\t\t\t\t\t\tsetFillColor(c);\n\t\t\t\t\t\t\t\t\tonFillColorChange?.(c);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToolbarColorPicker\n\t\t\t\t\t\t\t\tlabel=\"Stroke color\"\n\t\t\t\t\t\t\t\ticon={<PencilLine className=\"wwc:h-4 wwc:w-4\" />}\n\t\t\t\t\t\t\t\tvalue={strokeColor}\n\t\t\t\t\t\t\t\tonValueChange={(c) => {\n\t\t\t\t\t\t\t\t\tsetStrokeColor(c);\n\t\t\t\t\t\t\t\t\tonStrokeColorChange?.(c);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 4 — Opacity */}\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t<span className=\"wwc:whitespace-nowrap wwc:text-xs wwc:text-muted-foreground\">Opacity</span>\n\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\taria-label=\"Opacity\"\n\t\t\t\t\t\t\t\t\tvalue={[opacity]}\n\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\t\t\t\tonValueChange={(v) => {\n\t\t\t\t\t\t\t\t\t\tsetOpacity(v[0]);\n\t\t\t\t\t\t\t\t\t\tonOpacityChange?.(v[0]);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:w-20\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 5 — Angle snap */}\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tactive={angleSnap}\n\t\t\t\t\t\t\t\tlabel={angleSnap ? \"Unlock 90° snap\" : \"Lock to 90° snap\"}\n\t\t\t\t\t\t\t\tclassName=\"wwc:gap-1 wwc:px-2\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tconst next = !angleSnap;\n\t\t\t\t\t\t\t\t\tsetAngleSnap(next);\n\t\t\t\t\t\t\t\t\tonAngleSnapChange?.(next);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{angleSnap ? <Lock className=\"wwc:!h-3 wwc:!w-3\" /> : <LockOpen className=\"wwc:!h-3 wwc:!w-3\" />}\n\t\t\t\t\t\t\t\t<span className=\"wwc:text-xs wwc:font-semibold\">90°</span>\n\t\t\t\t\t\t\t</ToolbarButton>\n\n\t\t\t\t\t\t\t<ToolbarSeparator />\n\n\t\t\t\t\t\t\t{/* 6 — Actions */}\n\t\t\t\t\t\t\t<ToolbarButton icon label=\"Unlink\" onClick={onUnlink}>\n\t\t\t\t\t\t\t\t<Unlink className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t\t\t<ToolbarButton variant=\"outline\" className=\"wwc:gap-1.5 wwc:px-3\" onClick={onImport}>\n\t\t\t\t\t\t\t\t<Upload className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t<span className=\"wwc:text-sm\">Import</span>\n\t\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Toolbar>\n\t\t\t</TooltipProvider>\n\t\t);\n\t},\n);\nObjectDrawingToolbar.displayName = \"ObjectDrawingToolbar\";\n\nexport {ObjectDrawingToolbar};\n"],"mappings":"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"}