@diwauhris/ui 1.7.42 → 1.7.44

package/lib/assets/ui.css

@@ -514,6 +514,11 @@
   margin-right: auto;
 }
 
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+
 .-mr-1 {
   margin-right: -0.25rem;
 }
@@ -1207,6 +1212,10 @@
   min-width: 240px;
 }
 
+.min-w-\[3rem\] {
+  min-width: 3rem;
+}
+
 .min-w-\[400px\] {
   min-width: 400px;
 }
@@ -5136,6 +5145,9 @@ body {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.disabled\:hover\:bg-transparent:hover:disabled {
+  background-color: transparent;
+}
 .disabled\:active\:scale-100:active:disabled {
   --tw-scale-x: 1;
   --tw-scale-y: 1;

package/lib/index.cjs

@@ -747,12 +747,18 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 	(0, react.useEffect)(() => {
 		if (!open || !triggerRef.current) return;
 		const rect = triggerRef.current.getBoundingClientRect();
+		const MARGIN = 8;
+		const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+		const spaceAbove = rect.top - MARGIN;
+		const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
+		const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
 		setPanelStyle({
 			position: "fixed",
-			top: rect.bottom + 4,
+			...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
 			left: rect.left,
 			zIndex: 9999,
-			width: rect.width
+			width: rect.width,
+			maxHeight
 		});
 	}, [open]);
 	const handleSelect = (0, react.useCallback)((opt) => {
@@ -855,7 +861,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 				role: "listbox",
 				"aria-labelledby": effectiveTriggerId,
 				style: panelStyle,
-				className: "overflow-y-auto max-h-60 rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
+				className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
 				children: flatItems.map((fi, i) => {
 					if (fi.type === "group") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 						role: "presentation",
@@ -6206,25 +6212,30 @@ function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = tr
 *     - 250 × 84 px rounded rectangles (rx=14)
 *     - Root (depth 0): dark navy fill (#0f172a), white text
 *     - Children: white fill (#fff), slate border (#e2e8f0)
+*     - Muted tone: dashed border, slate-50 fill, muted text (inactive units)
 *     - drop-shadow: 0 6px 12px rgba(15,23,42,0.08)
-*     - Name: 13px, font-weight 800, centered
+*     - Name: 13px, font-weight 800, centered, ellipsis + tooltip when too long
 *     - Description: 11px, font-weight 600, #64748b / #cbd5e1 (root)
-*     - Selected: indigo border overlay ring
+*     - Hover: indigo-300 border; Selected: indigo border + overlay ring
 *   Connectors:
 *     - Stepped orthogonal path: M→V→H→V
 *     - Stroke: #cbd5e1, stroke-width 1.5
 *   Canvas:
-*     - Viewport sized to container; fit-to-view on render
-*     - Zoom: scaleExtent [0.05, 1.8]
-*     - Pan: mouse/touch drag
+*     - Fits the tree to the viewport until the user zooms or pans; after that
+*       the user's view is kept across re-renders, data refreshes and resizes
+*       (e.g. a modal hiding the page scrollbar). "Fit to screen" or a new
+*       `fitKey` hands control back to auto-fit.
+*     - Zoom: scaleExtent [0.05, 1.8]; wheel / pinch / buttons / keyboard
+*     - Pan: mouse/touch drag (a drag never counts as a node click)
 *     - Layout: nodeSize [280, 185] — horizontal × vertical spacing
 *   Controls:
-*     - ZoomIn, Reset, ZoomOut buttons (top-right overlay panel)
+*     - Zoom in, zoom %, Zoom out, Fit to screen (top-right overlay panel)
 *
 * Accessibility:
-*   - SVG has role="img" + aria-label
-*   - Zoom controls have aria-label
-*   - Keyboard: Tab to control buttons; diagram itself is navigated visually
+*   - SVG has an aria-label; role="img" when read-only, role="group" when nodes are selectable
+*   - Selectable nodes are focusable buttons (Tab, Enter / Space to select)
+*   - Keyboard on the chart: + / = zoom in, - zoom out, 0 fit to screen
+*   - Respects prefers-reduced-motion for button zoom transitions
 *   - Note: full ARIA tree semantics are not possible in an SVG diagram;
 *     use OrgUnitTree for a fully keyboard-accessible list-based alternative
 *
@@ -6236,6 +6247,13 @@ function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = tr
 *     aria-label="Company organization chart"
 *   />
 */
+var SYNTHETIC_ROOT_ID = "__synthetic_root__";
+var NODE_W = 250;
+var NODE_H = 84;
+var TEXT_MAX_W = 218;
+var MIN_SCALE = .05;
+var MAX_SCALE = 1.8;
+var BUTTON_ZOOM_STEP = 1.2;
 function buildD3Tree(nodes) {
 	function convert(node, depth) {
 		return {
@@ -6244,161 +6262,344 @@ function buildD3Tree(nodes) {
 			description: node.description ?? "",
 			isRoot: depth === 0,
 			isSyntheticRoot: false,
+			isMuted: node.tone === "muted",
 			originalId: node.id,
 			children: node.children?.map((c) => convert(c, depth + 1))
 		};
 	}
 	if (nodes.length === 1) return convert(nodes[0], 0);
 	return {
-		id: "__synthetic_root__",
+		id: SYNTHETIC_ROOT_ID,
 		name: "",
 		description: "",
 		isRoot: true,
 		isSyntheticRoot: true,
-		originalId: "__synthetic_root__",
+		isMuted: false,
+		originalId: SYNTHETIC_ROOT_ID,
 		children: nodes.map((n) => convert(n, 0))
 	};
 }
-function OrgChart({ nodes, selectedId, onSelect, height = "75vh", "aria-label": ariaLabel = "Organization chart", className = "" }) {
+/** Writes `text` into an SVG text element, truncating with an ellipsis to fit `maxWidth`. */
+function fitText(el, text, maxWidth, fontSize) {
+	el.textContent = text;
+	if (!text) return;
+	const measured = typeof el.getComputedTextLength === "function" ? el.getComputedTextLength() : 0;
+	if (!measured) {
+		const maxChars = Math.max(1, Math.floor(maxWidth / (fontSize * .6)));
+		if (text.length > maxChars) el.textContent = `${text.slice(0, maxChars - 1).trimEnd()}…`;
+		return;
+	}
+	if (measured <= maxWidth) return;
+	let lo = 0;
+	let hi = text.length - 1;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		el.textContent = `${text.slice(0, mid).trimEnd()}…`;
+		if (el.getComputedTextLength() <= maxWidth) lo = mid;
+		else hi = mid - 1;
+	}
+	el.textContent = `${text.slice(0, lo).trimEnd()}…`;
+}
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function OrgChart({ nodes, selectedId, onSelect, fitKey, height = "75vh", "aria-label": ariaLabel = "Organization chart", className = "" }) {
 	const svgRef = (0, react.useRef)(null);
 	const zoomRef = (0, react.useRef)(null);
-	const initialTransformRef = (0, react.useRef)(null);
 	const treeBoundsRef = (0, react.useRef)(null);
-	const uid = (0, react.useId)().replace(/:/g, "");
+	const autoFitRef = (0, react.useRef)(true);
+	const programmaticRef = (0, react.useRef)(false);
+	const pendingFitRef = (0, react.useRef)(false);
+	const lastSizeRef = (0, react.useRef)(null);
+	const onSelectRef = (0, react.useRef)(onSelect);
+	const selectedIdRef = (0, react.useRef)(selectedId);
+	const scaleFrameRef = (0, react.useRef)(0);
+	const [scale, setScale] = (0, react.useState)(1);
+	const uid = `oc-${(0, react.useId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const interactive = Boolean(onSelect);
+	const isEmpty = nodes.length === 0;
+	const getSize = () => {
+		const rect = svgRef.current?.getBoundingClientRect();
+		return {
+			width: rect?.width ?? 0,
+			height: rect?.height ?? 0
+		};
+	};
+	/** Applies a transform without handing control away from auto-fit. */
+	const applyTransform = (t) => {
+		if (!svgRef.current || !zoomRef.current) return;
+		const svg = d3.select(svgRef.current);
+		svg.interrupt();
+		programmaticRef.current = true;
+		try {
+			svg.call(zoomRef.current.transform, t);
+		} finally {
+			programmaticRef.current = false;
+		}
+	};
 	const fitToView = () => {
 		if (!svgRef.current || !zoomRef.current || !treeBoundsRef.current) return;
-		const { width: W, height: H } = svgRef.current.getBoundingClientRect();
-		if (W === 0 || H === 0) return;
+		const { width: W, height: H } = getSize();
+		if (W === 0 || H === 0) {
+			pendingFitRef.current = true;
+			return;
+		}
+		pendingFitRef.current = false;
 		const { minX, maxX, minY, maxY } = treeBoundsRef.current;
-		const contentLeft = minX - 125;
-		const contentRight = maxX + 125;
-		const contentTop = minY - 42;
-		const contentBottom = maxY + 42;
+		const contentLeft = minX - NODE_W / 2;
+		const contentRight = maxX + NODE_W / 2;
+		const contentTop = minY - NODE_H / 2;
+		const contentBottom = maxY + NODE_H / 2;
 		const contentWidth = contentRight - contentLeft;
 		const contentHeight = contentBottom - contentTop;
 		const scaleX = (W - 80) / Math.max(1, contentWidth);
 		const scaleY = (H - 80) / Math.max(1, contentHeight);
-		const scale = Math.max(.05, Math.min(1.8, scaleX, scaleY));
-		const contentCenterX = (contentLeft + contentRight) / 2;
-		const contentCenterY = (contentTop + contentBottom) / 2;
-		const tx = W / 2 - contentCenterX * scale;
-		const ty = H / 2 - contentCenterY * scale;
-		const t = d3.zoomIdentity.translate(tx, ty).scale(scale);
-		initialTransformRef.current = t;
-		d3.select(svgRef.current).call(zoomRef.current.transform, t);
+		const k = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scaleX, scaleY));
+		const tx = W / 2 - (contentLeft + contentRight) / 2 * k;
+		const ty = H / 2 - (contentTop + contentBottom) / 2 * k;
+		applyTransform(d3.zoomIdentity.translate(tx, ty).scale(k));
 	};
-	(0, react.useEffect)(() => {
-		if (!svgRef.current || nodes.length === 0) return;
+	/** Fit, and go back to keeping the chart fitted (Fit button, new fitKey). */
+	const resetToFit = () => {
+		autoFitRef.current = true;
+		fitToView();
+	};
+	const zoomBy = (factor) => {
+		if (!svgRef.current || !zoomRef.current) return;
+		autoFitRef.current = false;
 		const svg = d3.select(svgRef.current);
-		svg.selectAll("*").remove();
-		const treeData = buildD3Tree(nodes);
-		const root = d3.hierarchy(treeData);
-		d3.tree().nodeSize([280, 185])(root);
-		const descendants = root.descendants();
+		if (prefersReducedMotion()) svg.interrupt().call(zoomRef.current.scaleBy, factor);
+		else svg.transition().duration(250).call(zoomRef.current.scaleBy, factor);
+	};
+	(0, react.useEffect)(() => {
+		onSelectRef.current = onSelect;
+	}, [onSelect]);
+	(0, react.useEffect)(() => {
+		const svgEl = svgRef.current;
+		if (!svgEl) return;
+		const svg = d3.select(svgEl);
+		const viewport = svg.append("g").attr("class", "oc-viewport");
+		viewport.append("g").attr("class", "oc-links");
+		viewport.append("g").attr("class", "oc-nodes");
+		const zoom = d3.zoom().scaleExtent([MIN_SCALE, MAX_SCALE]).extent(() => {
+			const { width, height } = getSize();
+			return [[0, 0], [Math.max(1, width), Math.max(1, height)]];
+		}).clickDistance(5).filter((event) => {
+			if (event.type === "dblclick") return false;
+			const e = event;
+			return (!e.ctrlKey || event.type === "wheel") && !e.button;
+		}).on("zoom", (event) => {
+			viewport.attr("transform", event.transform.toString());
+			if (!programmaticRef.current) autoFitRef.current = false;
+			cancelAnimationFrame(scaleFrameRef.current);
+			scaleFrameRef.current = requestAnimationFrame(() => setScale(event.transform.k));
+		});
+		zoomRef.current = zoom;
+		svg.call(zoom);
+		const ro = new ResizeObserver(() => {
+			const size = getSize();
+			if (size.width === 0 || size.height === 0) return;
+			const last = lastSizeRef.current;
+			lastSizeRef.current = size;
+			if (autoFitRef.current || pendingFitRef.current || !last) {
+				fitToView();
+				return;
+			}
+			const dx = (size.width - last.width) / 2;
+			const dy = (size.height - last.height) / 2;
+			if (dx === 0 && dy === 0) return;
+			const t = d3.zoomTransform(svgEl);
+			applyTransform(d3.zoomIdentity.translate(t.x + dx, t.y + dy).scale(t.k));
+		});
+		ro.observe(svgEl);
+		return () => {
+			ro.disconnect();
+			cancelAnimationFrame(scaleFrameRef.current);
+			svg.interrupt().on(".zoom", null);
+			svg.selectAll("*").remove();
+			zoomRef.current = null;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const svgEl = svgRef.current;
+		if (!svgEl) return;
+		const svg = d3.select(svgEl);
+		const linkLayer = svg.select("g.oc-links");
+		const nodeLayer = svg.select("g.oc-nodes");
+		if (nodes.length === 0) {
+			linkLayer.selectAll("*").remove();
+			nodeLayer.selectAll("*").remove();
+			treeBoundsRef.current = null;
+			return;
+		}
+		const root = d3.hierarchy(buildD3Tree(nodes));
+		const pointRoot = d3.tree().nodeSize([280, 185])(root);
+		const descendants = pointRoot.descendants();
 		treeBoundsRef.current = {
 			minX: d3.min(descendants, (d) => d.x) ?? 0,
 			maxX: d3.max(descendants, (d) => d.x) ?? 0,
 			minY: d3.min(descendants, (d) => d.y) ?? 0,
 			maxY: d3.max(descendants, (d) => d.y) ?? 0
 		};
-		const g = svg.append("g");
-		const zoom = d3.zoom().scaleExtent([.05, 1.8]).on("zoom", (e) => g.attr("transform", e.transform.toString()));
-		zoomRef.current = zoom;
-		svg.call(zoom);
-		g.selectAll("path").data(root.links().filter((l) => !l.source.data.isSyntheticRoot)).join("path").attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 1.5).attr("d", (link) => {
-			const sx = link.source.x ?? 0;
-			const sy = link.source.y ?? 0;
-			const tx = link.target.x ?? 0;
-			const ty = link.target.y ?? 0;
-			return `M${sx},${sy}V${(sy + ty) / 2}H${tx}V${ty}`;
+		linkLayer.selectAll("path").data(pointRoot.links().filter((l) => !l.source.data.isSyntheticRoot), (l) => `${l.source.data.originalId}>${l.target.data.originalId}`).join("path").attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 1.5).attr("d", (link) => {
+			const mid = (link.source.y + link.target.y) / 2;
+			return `M${link.source.x},${link.source.y}V${mid}H${link.target.x}V${link.target.y}`;
 		});
-		const node = g.selectAll("g.node").data(root.descendants().filter((d) => !d.data.isSyntheticRoot)).join("g").attr("class", "node").attr("transform", (d) => `translate(${d.x},${d.y})`).style("cursor", (d) => d.data.originalId !== "__synthetic_root__" ? "pointer" : "default").on("click", (_e, d) => {
-			if (d.data.isSyntheticRoot) return;
-			onSelect?.(d.data.originalId);
+		const node = nodeLayer.selectAll("g.oc-node").data(descendants.filter((d) => !d.data.isSyntheticRoot), (d) => d.data.originalId).join((enter) => {
+			const g = enter.append("g").attr("class", "oc-node");
+			g.append("title");
+			g.append("rect").attr("class", "oc-card").attr("x", -125).attr("y", -42).attr("width", NODE_W).attr("height", NODE_H).attr("rx", 14).attr("filter", "drop-shadow(0 6px 12px rgba(15,23,42,0.08))");
+			g.append("rect").attr("class", "oc-ring").attr("x", -128).attr("y", -45).attr("width", 256).attr("height", 90).attr("rx", 16).attr("fill", "none");
+			g.append("text").attr("class", "oc-name").attr("text-anchor", "middle").attr("y", -8).attr("font-size", 13).attr("font-weight", 800);
+			g.append("text").attr("class", "oc-desc").attr("text-anchor", "middle").attr("y", 16).attr("font-size", 11).attr("font-weight", 600);
+			return g;
+		}).attr("transform", (d) => `translate(${d.x},${d.y})`).classed("is-root", (d) => d.data.isRoot).classed("is-muted", (d) => d.data.isMuted).classed("is-selected", (d) => d.data.originalId === selectedIdRef.current).attr("aria-label", (d) => d.data.description ? `${d.data.name}, ${d.data.description}` : d.data.name).on("click", (_e, d) => onSelectRef.current?.(d.data.originalId)).on("keydown", (event, d) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelectRef.current?.(d.data.originalId);
+		}).on("focus", (_e, d) => {
+			if (!zoomRef.current) return;
+			const { width: W, height: H } = getSize();
+			const [sx, sy] = d3.zoomTransform(svgEl).apply([d.x, d.y]);
+			const margin = 24;
+			if (sx >= margin && sx <= W - margin && sy >= margin && sy <= H - margin) return;
+			autoFitRef.current = false;
+			svg.interrupt().call(zoomRef.current.translateTo, d.x, d.y);
 		});
-		node.append("rect").attr("x", -125).attr("y", -42).attr("width", 250).attr("height", 84).attr("rx", 14).attr("fill", (d) => d.data.isRoot ? "#0f172a" : "#fff").attr("stroke", (d) => {
-			if (selectedId && d.data.originalId === selectedId) return "#6366f1";
-			return d.data.isRoot ? "#0f172a" : "#e2e8f0";
-		}).attr("stroke-width", (d) => selectedId && d.data.originalId === selectedId ? 2.5 : 1).attr("filter", "drop-shadow(0 6px 12px rgba(15,23,42,0.08))");
-		node.append("text").attr("text-anchor", "middle").attr("y", -8).attr("font-size", 13).attr("font-weight", 800).attr("fill", (d) => d.data.isRoot ? "#fff" : "#0f172a").text((d) => d.data.name);
-		node.append("text").attr("text-anchor", "middle").attr("y", 16).attr("font-size", 11).attr("font-weight", 600).attr("fill", (d) => d.data.isRoot ? "#cbd5e1" : "#64748b").text((d) => d.data.description);
-		if (selectedId) node.filter((d) => d.data.originalId === selectedId).append("rect").attr("x", -128).attr("y", -45).attr("width", 256).attr("height", 90).attr("rx", 16).attr("fill", "none").attr("stroke", "#6366f1").attr("stroke-width", 2.5).attr("opacity", .6);
-		requestAnimationFrame(() => {
-			fitToView();
+		node.select("title").text((d) => d.data.description ? `${d.data.name}\n${d.data.description}` : d.data.name);
+		node.select("text.oc-name").each(function(d) {
+			fitText(this, d.data.name, TEXT_MAX_W, 13);
+		});
+		node.select("text.oc-desc").each(function(d) {
+			fitText(this, d.data.description, TEXT_MAX_W, 11);
 		});
+		if (autoFitRef.current || pendingFitRef.current) fitToView();
+	}, [nodes]);
+	(0, react.useEffect)(() => {
+		if (!svgRef.current) return;
+		d3.select(svgRef.current).selectAll("g.oc-node").attr("tabindex", interactive ? 0 : null).attr("role", interactive ? "button" : null);
+	}, [interactive, nodes]);
+	(0, react.useEffect)(() => {
+		selectedIdRef.current = selectedId;
+		if (!svgRef.current) return;
+		d3.select(svgRef.current).selectAll("g.oc-node").classed("is-selected", (d) => d.data.originalId === selectedId).attr("aria-pressed", interactive ? (d) => String(d.data.originalId === selectedId) : null);
 	}, [
-		nodes,
 		selectedId,
-		onSelect
+		interactive,
+		nodes
 	]);
+	const fitKeyRef = (0, react.useRef)(fitKey);
 	(0, react.useEffect)(() => {
-		const el = svgRef.current;
-		if (!el) return;
-		const ro = new ResizeObserver(() => {
-			fitToView();
-		});
-		ro.observe(el);
-		return () => ro.disconnect();
-	}, []);
-	const zoomBy = (factor) => {
-		if (!svgRef.current || !zoomRef.current) return;
-		d3.select(svgRef.current).transition().duration(250).call(zoomRef.current.scaleBy, factor);
-	};
-	const resetZoom = () => {
-		fitToView();
+		if (fitKeyRef.current === fitKey) return;
+		fitKeyRef.current = fitKey;
+		resetToFit();
+	}, [fitKey]);
+	const handleKeyDown = (event) => {
+		if (event.ctrlKey || event.metaKey || event.altKey || isEmpty) return;
+		if (event.key === "+" || event.key === "=") zoomBy(BUTTON_ZOOM_STEP);
+		else if (event.key === "-" || event.key === "_") zoomBy(1 / BUTTON_ZOOM_STEP);
+		else if (event.key === "0") resetToFit();
+		else return;
+		event.preventDefault();
 	};
+	const atMax = scale >= 1.7990000000000002;
+	const atMin = scale <= .051000000000000004;
 	const controlBtnClass = [
 		"appearance-none border-0 bg-none font-[inherit]",
 		"flex items-center justify-center rounded-lg p-2",
-		"text-slate-400 transition hover:bg-slate-100 hover:text-slate-700",
-		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30"
+		"text-slate-500 transition hover:bg-slate-100 hover:text-slate-700",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		"disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
 	].join(" ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `relative w-full overflow-hidden bg-slate-50/50 ${className}`,
+		className: `relative w-full overflow-hidden bg-slate-50/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 ${className}`,
 		style: { height },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute right-4 top-4 z-10 flex flex-col gap-2 rounded-lg border border-slate-100 bg-white p-2 shadow-md",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: () => zoomBy(1.2),
-					"aria-label": "Zoom in",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: resetZoom,
-					"aria-label": "Reset zoom",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcw, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: () => zoomBy(.8),
-					"aria-label": "Zoom out",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
-						size: 16,
+		tabIndex: isEmpty ? void 0 : 0,
+		"aria-keyshortcuts": isEmpty ? void 0 : "+ - 0",
+		onKeyDown: handleKeyDown,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        #${uid} .oc-card { fill: #fff; stroke: #e2e8f0; stroke-width: 1; transition: stroke 120ms ease; }
+        #${uid} .oc-name { fill: #0f172a; }
+        #${uid} .oc-desc { fill: #64748b; }
+        #${uid} .oc-node.is-root .oc-card { fill: #0f172a; stroke: #0f172a; }
+        #${uid} .oc-node.is-root .oc-name { fill: #fff; }
+        #${uid} .oc-node.is-root .oc-desc { fill: #cbd5e1; }
+        #${uid} .oc-node.is-muted .oc-card { fill: #f8fafc; stroke: #94a3b8; stroke-dasharray: 5 4; }
+        #${uid} .oc-node.is-muted .oc-name { fill: #475569; }
+        #${uid} .oc-node.is-muted .oc-desc { fill: #94a3b8; }
+        #${uid} .oc-node.is-root.is-muted .oc-card { fill: #334155; stroke: #94a3b8; }
+        #${uid} .oc-node.is-root.is-muted .oc-name { fill: #e2e8f0; }
+        #${uid} .oc-node.is-root.is-muted .oc-desc { fill: #cbd5e1; }
+        #${uid} .oc-ring { stroke: #6366f1; stroke-width: 2.5; opacity: 0; pointer-events: none; }
+        #${uid}.is-interactive .oc-node { cursor: pointer; }
+        #${uid}.is-interactive .oc-node:hover .oc-card { stroke: #a5b4fc; stroke-width: 1.5; }
+        #${uid} .oc-node.is-selected .oc-card,
+        #${uid}.is-interactive .oc-node.is-selected:hover .oc-card { stroke: #6366f1; stroke-width: 2.5; }
+        #${uid} .oc-node.is-selected .oc-ring { opacity: 0.6; }
+        #${uid} .oc-node:focus { outline: none; }
+        #${uid} .oc-node:focus-visible .oc-ring { opacity: 1; stroke: #2563eb; }
+      ` }),
+			!isEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "absolute right-4 top-4 z-10 flex flex-col items-center gap-1 rounded-lg border border-slate-100 bg-white p-1.5 shadow-md",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: () => zoomBy(BUTTON_ZOOM_STEP),
+						disabled: atMax,
+						"aria-label": "Zoom in",
+						title: "Zoom in (+)",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "min-w-[3rem] select-none text-center text-[11px] font-semibold tabular-nums text-slate-500",
+						children: [Math.round(scale * 100), "%"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: () => zoomBy(1 / BUTTON_ZOOM_STEP),
+						disabled: atMin,
+						"aria-label": "Zoom out",
+						title: "Zoom out (-)",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "my-0.5 h-px w-6 bg-slate-100",
 						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: resetToFit,
+						"aria-label": "Fit to screen",
+						title: "Fit to screen (0)",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Scan, {
+							size: 16,
+							"aria-hidden": "true"
+						})
 					})
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			ref: svgRef,
-			id: uid,
-			width: "100%",
-			height: "100%",
-			className: "block touch-none",
-			role: "img",
-			"aria-label": ariaLabel
-		})]
+				]
+			}),
+			isEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm font-semibold text-slate-500",
+				children: "No units to display"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				ref: svgRef,
+				id: uid,
+				width: "100%",
+				height: "100%",
+				className: `block touch-none ${interactive ? "is-interactive" : ""}`,
+				role: interactive ? "group" : "img",
+				"aria-label": ariaLabel
+			})
+		]
 	});
 }
 //#endregion

package/lib/index.mjs

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, RotateCcw, Search as Search$1, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X, ZoomIn, ZoomOut } from "lucide-react";
+import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, Scan, Search as Search$1, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X, ZoomIn, ZoomOut } from "lucide-react";
 import Calendar$1 from "react-calendar";
 import { format, isValid, parse } from "date-fns";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -723,12 +723,18 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 	useEffect(() => {
 		if (!open || !triggerRef.current) return;
 		const rect = triggerRef.current.getBoundingClientRect();
+		const MARGIN = 8;
+		const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+		const spaceAbove = rect.top - MARGIN;
+		const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
+		const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
 		setPanelStyle({
 			position: "fixed",
-			top: rect.bottom + 4,
+			...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
 			left: rect.left,
 			zIndex: 9999,
-			width: rect.width
+			width: rect.width,
+			maxHeight
 		});
 	}, [open]);
 	const handleSelect = useCallback((opt) => {
@@ -831,7 +837,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 				role: "listbox",
 				"aria-labelledby": effectiveTriggerId,
 				style: panelStyle,
-				className: "overflow-y-auto max-h-60 rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
+				className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
 				children: flatItems.map((fi, i) => {
 					if (fi.type === "group") return /* @__PURE__ */ jsx("li", {
 						role: "presentation",
@@ -6135,25 +6141,30 @@ function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = tr
 *     - 250 × 84 px rounded rectangles (rx=14)
 *     - Root (depth 0): dark navy fill (#0f172a), white text
 *     - Children: white fill (#fff), slate border (#e2e8f0)
+*     - Muted tone: dashed border, slate-50 fill, muted text (inactive units)
 *     - drop-shadow: 0 6px 12px rgba(15,23,42,0.08)
-*     - Name: 13px, font-weight 800, centered
+*     - Name: 13px, font-weight 800, centered, ellipsis + tooltip when too long
 *     - Description: 11px, font-weight 600, #64748b / #cbd5e1 (root)
-*     - Selected: indigo border overlay ring
+*     - Hover: indigo-300 border; Selected: indigo border + overlay ring
 *   Connectors:
 *     - Stepped orthogonal path: M→V→H→V
 *     - Stroke: #cbd5e1, stroke-width 1.5
 *   Canvas:
-*     - Viewport sized to container; fit-to-view on render
-*     - Zoom: scaleExtent [0.05, 1.8]
-*     - Pan: mouse/touch drag
+*     - Fits the tree to the viewport until the user zooms or pans; after that
+*       the user's view is kept across re-renders, data refreshes and resizes
+*       (e.g. a modal hiding the page scrollbar). "Fit to screen" or a new
+*       `fitKey` hands control back to auto-fit.
+*     - Zoom: scaleExtent [0.05, 1.8]; wheel / pinch / buttons / keyboard
+*     - Pan: mouse/touch drag (a drag never counts as a node click)
 *     - Layout: nodeSize [280, 185] — horizontal × vertical spacing
 *   Controls:
-*     - ZoomIn, Reset, ZoomOut buttons (top-right overlay panel)
+*     - Zoom in, zoom %, Zoom out, Fit to screen (top-right overlay panel)
 *
 * Accessibility:
-*   - SVG has role="img" + aria-label
-*   - Zoom controls have aria-label
-*   - Keyboard: Tab to control buttons; diagram itself is navigated visually
+*   - SVG has an aria-label; role="img" when read-only, role="group" when nodes are selectable
+*   - Selectable nodes are focusable buttons (Tab, Enter / Space to select)
+*   - Keyboard on the chart: + / = zoom in, - zoom out, 0 fit to screen
+*   - Respects prefers-reduced-motion for button zoom transitions
 *   - Note: full ARIA tree semantics are not possible in an SVG diagram;
 *     use OrgUnitTree for a fully keyboard-accessible list-based alternative
 *
@@ -6165,6 +6176,13 @@ function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = tr
 *     aria-label="Company organization chart"
 *   />
 */
+var SYNTHETIC_ROOT_ID = "__synthetic_root__";
+var NODE_W = 250;
+var NODE_H = 84;
+var TEXT_MAX_W = 218;
+var MIN_SCALE = .05;
+var MAX_SCALE = 1.8;
+var BUTTON_ZOOM_STEP = 1.2;
 function buildD3Tree(nodes) {
 	function convert(node, depth) {
 		return {
@@ -6173,161 +6191,344 @@ function buildD3Tree(nodes) {
 			description: node.description ?? "",
 			isRoot: depth === 0,
 			isSyntheticRoot: false,
+			isMuted: node.tone === "muted",
 			originalId: node.id,
 			children: node.children?.map((c) => convert(c, depth + 1))
 		};
 	}
 	if (nodes.length === 1) return convert(nodes[0], 0);
 	return {
-		id: "__synthetic_root__",
+		id: SYNTHETIC_ROOT_ID,
 		name: "",
 		description: "",
 		isRoot: true,
 		isSyntheticRoot: true,
-		originalId: "__synthetic_root__",
+		isMuted: false,
+		originalId: SYNTHETIC_ROOT_ID,
 		children: nodes.map((n) => convert(n, 0))
 	};
 }
-function OrgChart({ nodes, selectedId, onSelect, height = "75vh", "aria-label": ariaLabel = "Organization chart", className = "" }) {
+/** Writes `text` into an SVG text element, truncating with an ellipsis to fit `maxWidth`. */
+function fitText(el, text, maxWidth, fontSize) {
+	el.textContent = text;
+	if (!text) return;
+	const measured = typeof el.getComputedTextLength === "function" ? el.getComputedTextLength() : 0;
+	if (!measured) {
+		const maxChars = Math.max(1, Math.floor(maxWidth / (fontSize * .6)));
+		if (text.length > maxChars) el.textContent = `${text.slice(0, maxChars - 1).trimEnd()}…`;
+		return;
+	}
+	if (measured <= maxWidth) return;
+	let lo = 0;
+	let hi = text.length - 1;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		el.textContent = `${text.slice(0, mid).trimEnd()}…`;
+		if (el.getComputedTextLength() <= maxWidth) lo = mid;
+		else hi = mid - 1;
+	}
+	el.textContent = `${text.slice(0, lo).trimEnd()}…`;
+}
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function OrgChart({ nodes, selectedId, onSelect, fitKey, height = "75vh", "aria-label": ariaLabel = "Organization chart", className = "" }) {
 	const svgRef = useRef(null);
 	const zoomRef = useRef(null);
-	const initialTransformRef = useRef(null);
 	const treeBoundsRef = useRef(null);
-	const uid = useId().replace(/:/g, "");
+	const autoFitRef = useRef(true);
+	const programmaticRef = useRef(false);
+	const pendingFitRef = useRef(false);
+	const lastSizeRef = useRef(null);
+	const onSelectRef = useRef(onSelect);
+	const selectedIdRef = useRef(selectedId);
+	const scaleFrameRef = useRef(0);
+	const [scale, setScale] = useState(1);
+	const uid = `oc-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const interactive = Boolean(onSelect);
+	const isEmpty = nodes.length === 0;
+	const getSize = () => {
+		const rect = svgRef.current?.getBoundingClientRect();
+		return {
+			width: rect?.width ?? 0,
+			height: rect?.height ?? 0
+		};
+	};
+	/** Applies a transform without handing control away from auto-fit. */
+	const applyTransform = (t) => {
+		if (!svgRef.current || !zoomRef.current) return;
+		const svg = d3.select(svgRef.current);
+		svg.interrupt();
+		programmaticRef.current = true;
+		try {
+			svg.call(zoomRef.current.transform, t);
+		} finally {
+			programmaticRef.current = false;
+		}
+	};
 	const fitToView = () => {
 		if (!svgRef.current || !zoomRef.current || !treeBoundsRef.current) return;
-		const { width: W, height: H } = svgRef.current.getBoundingClientRect();
-		if (W === 0 || H === 0) return;
+		const { width: W, height: H } = getSize();
+		if (W === 0 || H === 0) {
+			pendingFitRef.current = true;
+			return;
+		}
+		pendingFitRef.current = false;
 		const { minX, maxX, minY, maxY } = treeBoundsRef.current;
-		const contentLeft = minX - 125;
-		const contentRight = maxX + 125;
-		const contentTop = minY - 42;
-		const contentBottom = maxY + 42;
+		const contentLeft = minX - NODE_W / 2;
+		const contentRight = maxX + NODE_W / 2;
+		const contentTop = minY - NODE_H / 2;
+		const contentBottom = maxY + NODE_H / 2;
 		const contentWidth = contentRight - contentLeft;
 		const contentHeight = contentBottom - contentTop;
 		const scaleX = (W - 80) / Math.max(1, contentWidth);
 		const scaleY = (H - 80) / Math.max(1, contentHeight);
-		const scale = Math.max(.05, Math.min(1.8, scaleX, scaleY));
-		const contentCenterX = (contentLeft + contentRight) / 2;
-		const contentCenterY = (contentTop + contentBottom) / 2;
-		const tx = W / 2 - contentCenterX * scale;
-		const ty = H / 2 - contentCenterY * scale;
-		const t = d3.zoomIdentity.translate(tx, ty).scale(scale);
-		initialTransformRef.current = t;
-		d3.select(svgRef.current).call(zoomRef.current.transform, t);
+		const k = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scaleX, scaleY));
+		const tx = W / 2 - (contentLeft + contentRight) / 2 * k;
+		const ty = H / 2 - (contentTop + contentBottom) / 2 * k;
+		applyTransform(d3.zoomIdentity.translate(tx, ty).scale(k));
 	};
-	useEffect(() => {
-		if (!svgRef.current || nodes.length === 0) return;
+	/** Fit, and go back to keeping the chart fitted (Fit button, new fitKey). */
+	const resetToFit = () => {
+		autoFitRef.current = true;
+		fitToView();
+	};
+	const zoomBy = (factor) => {
+		if (!svgRef.current || !zoomRef.current) return;
+		autoFitRef.current = false;
 		const svg = d3.select(svgRef.current);
-		svg.selectAll("*").remove();
-		const treeData = buildD3Tree(nodes);
-		const root = d3.hierarchy(treeData);
-		d3.tree().nodeSize([280, 185])(root);
-		const descendants = root.descendants();
+		if (prefersReducedMotion()) svg.interrupt().call(zoomRef.current.scaleBy, factor);
+		else svg.transition().duration(250).call(zoomRef.current.scaleBy, factor);
+	};
+	useEffect(() => {
+		onSelectRef.current = onSelect;
+	}, [onSelect]);
+	useEffect(() => {
+		const svgEl = svgRef.current;
+		if (!svgEl) return;
+		const svg = d3.select(svgEl);
+		const viewport = svg.append("g").attr("class", "oc-viewport");
+		viewport.append("g").attr("class", "oc-links");
+		viewport.append("g").attr("class", "oc-nodes");
+		const zoom = d3.zoom().scaleExtent([MIN_SCALE, MAX_SCALE]).extent(() => {
+			const { width, height } = getSize();
+			return [[0, 0], [Math.max(1, width), Math.max(1, height)]];
+		}).clickDistance(5).filter((event) => {
+			if (event.type === "dblclick") return false;
+			const e = event;
+			return (!e.ctrlKey || event.type === "wheel") && !e.button;
+		}).on("zoom", (event) => {
+			viewport.attr("transform", event.transform.toString());
+			if (!programmaticRef.current) autoFitRef.current = false;
+			cancelAnimationFrame(scaleFrameRef.current);
+			scaleFrameRef.current = requestAnimationFrame(() => setScale(event.transform.k));
+		});
+		zoomRef.current = zoom;
+		svg.call(zoom);
+		const ro = new ResizeObserver(() => {
+			const size = getSize();
+			if (size.width === 0 || size.height === 0) return;
+			const last = lastSizeRef.current;
+			lastSizeRef.current = size;
+			if (autoFitRef.current || pendingFitRef.current || !last) {
+				fitToView();
+				return;
+			}
+			const dx = (size.width - last.width) / 2;
+			const dy = (size.height - last.height) / 2;
+			if (dx === 0 && dy === 0) return;
+			const t = d3.zoomTransform(svgEl);
+			applyTransform(d3.zoomIdentity.translate(t.x + dx, t.y + dy).scale(t.k));
+		});
+		ro.observe(svgEl);
+		return () => {
+			ro.disconnect();
+			cancelAnimationFrame(scaleFrameRef.current);
+			svg.interrupt().on(".zoom", null);
+			svg.selectAll("*").remove();
+			zoomRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const svgEl = svgRef.current;
+		if (!svgEl) return;
+		const svg = d3.select(svgEl);
+		const linkLayer = svg.select("g.oc-links");
+		const nodeLayer = svg.select("g.oc-nodes");
+		if (nodes.length === 0) {
+			linkLayer.selectAll("*").remove();
+			nodeLayer.selectAll("*").remove();
+			treeBoundsRef.current = null;
+			return;
+		}
+		const root = d3.hierarchy(buildD3Tree(nodes));
+		const pointRoot = d3.tree().nodeSize([280, 185])(root);
+		const descendants = pointRoot.descendants();
 		treeBoundsRef.current = {
 			minX: d3.min(descendants, (d) => d.x) ?? 0,
 			maxX: d3.max(descendants, (d) => d.x) ?? 0,
 			minY: d3.min(descendants, (d) => d.y) ?? 0,
 			maxY: d3.max(descendants, (d) => d.y) ?? 0
 		};
-		const g = svg.append("g");
-		const zoom = d3.zoom().scaleExtent([.05, 1.8]).on("zoom", (e) => g.attr("transform", e.transform.toString()));
-		zoomRef.current = zoom;
-		svg.call(zoom);
-		g.selectAll("path").data(root.links().filter((l) => !l.source.data.isSyntheticRoot)).join("path").attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 1.5).attr("d", (link) => {
-			const sx = link.source.x ?? 0;
-			const sy = link.source.y ?? 0;
-			const tx = link.target.x ?? 0;
-			const ty = link.target.y ?? 0;
-			return `M${sx},${sy}V${(sy + ty) / 2}H${tx}V${ty}`;
+		linkLayer.selectAll("path").data(pointRoot.links().filter((l) => !l.source.data.isSyntheticRoot), (l) => `${l.source.data.originalId}>${l.target.data.originalId}`).join("path").attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 1.5).attr("d", (link) => {
+			const mid = (link.source.y + link.target.y) / 2;
+			return `M${link.source.x},${link.source.y}V${mid}H${link.target.x}V${link.target.y}`;
 		});
-		const node = g.selectAll("g.node").data(root.descendants().filter((d) => !d.data.isSyntheticRoot)).join("g").attr("class", "node").attr("transform", (d) => `translate(${d.x},${d.y})`).style("cursor", (d) => d.data.originalId !== "__synthetic_root__" ? "pointer" : "default").on("click", (_e, d) => {
-			if (d.data.isSyntheticRoot) return;
-			onSelect?.(d.data.originalId);
+		const node = nodeLayer.selectAll("g.oc-node").data(descendants.filter((d) => !d.data.isSyntheticRoot), (d) => d.data.originalId).join((enter) => {
+			const g = enter.append("g").attr("class", "oc-node");
+			g.append("title");
+			g.append("rect").attr("class", "oc-card").attr("x", -125).attr("y", -42).attr("width", NODE_W).attr("height", NODE_H).attr("rx", 14).attr("filter", "drop-shadow(0 6px 12px rgba(15,23,42,0.08))");
+			g.append("rect").attr("class", "oc-ring").attr("x", -128).attr("y", -45).attr("width", 256).attr("height", 90).attr("rx", 16).attr("fill", "none");
+			g.append("text").attr("class", "oc-name").attr("text-anchor", "middle").attr("y", -8).attr("font-size", 13).attr("font-weight", 800);
+			g.append("text").attr("class", "oc-desc").attr("text-anchor", "middle").attr("y", 16).attr("font-size", 11).attr("font-weight", 600);
+			return g;
+		}).attr("transform", (d) => `translate(${d.x},${d.y})`).classed("is-root", (d) => d.data.isRoot).classed("is-muted", (d) => d.data.isMuted).classed("is-selected", (d) => d.data.originalId === selectedIdRef.current).attr("aria-label", (d) => d.data.description ? `${d.data.name}, ${d.data.description}` : d.data.name).on("click", (_e, d) => onSelectRef.current?.(d.data.originalId)).on("keydown", (event, d) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelectRef.current?.(d.data.originalId);
+		}).on("focus", (_e, d) => {
+			if (!zoomRef.current) return;
+			const { width: W, height: H } = getSize();
+			const [sx, sy] = d3.zoomTransform(svgEl).apply([d.x, d.y]);
+			const margin = 24;
+			if (sx >= margin && sx <= W - margin && sy >= margin && sy <= H - margin) return;
+			autoFitRef.current = false;
+			svg.interrupt().call(zoomRef.current.translateTo, d.x, d.y);
 		});
-		node.append("rect").attr("x", -125).attr("y", -42).attr("width", 250).attr("height", 84).attr("rx", 14).attr("fill", (d) => d.data.isRoot ? "#0f172a" : "#fff").attr("stroke", (d) => {
-			if (selectedId && d.data.originalId === selectedId) return "#6366f1";
-			return d.data.isRoot ? "#0f172a" : "#e2e8f0";
-		}).attr("stroke-width", (d) => selectedId && d.data.originalId === selectedId ? 2.5 : 1).attr("filter", "drop-shadow(0 6px 12px rgba(15,23,42,0.08))");
-		node.append("text").attr("text-anchor", "middle").attr("y", -8).attr("font-size", 13).attr("font-weight", 800).attr("fill", (d) => d.data.isRoot ? "#fff" : "#0f172a").text((d) => d.data.name);
-		node.append("text").attr("text-anchor", "middle").attr("y", 16).attr("font-size", 11).attr("font-weight", 600).attr("fill", (d) => d.data.isRoot ? "#cbd5e1" : "#64748b").text((d) => d.data.description);
-		if (selectedId) node.filter((d) => d.data.originalId === selectedId).append("rect").attr("x", -128).attr("y", -45).attr("width", 256).attr("height", 90).attr("rx", 16).attr("fill", "none").attr("stroke", "#6366f1").attr("stroke-width", 2.5).attr("opacity", .6);
-		requestAnimationFrame(() => {
-			fitToView();
+		node.select("title").text((d) => d.data.description ? `${d.data.name}\n${d.data.description}` : d.data.name);
+		node.select("text.oc-name").each(function(d) {
+			fitText(this, d.data.name, TEXT_MAX_W, 13);
+		});
+		node.select("text.oc-desc").each(function(d) {
+			fitText(this, d.data.description, TEXT_MAX_W, 11);
 		});
+		if (autoFitRef.current || pendingFitRef.current) fitToView();
+	}, [nodes]);
+	useEffect(() => {
+		if (!svgRef.current) return;
+		d3.select(svgRef.current).selectAll("g.oc-node").attr("tabindex", interactive ? 0 : null).attr("role", interactive ? "button" : null);
+	}, [interactive, nodes]);
+	useEffect(() => {
+		selectedIdRef.current = selectedId;
+		if (!svgRef.current) return;
+		d3.select(svgRef.current).selectAll("g.oc-node").classed("is-selected", (d) => d.data.originalId === selectedId).attr("aria-pressed", interactive ? (d) => String(d.data.originalId === selectedId) : null);
 	}, [
-		nodes,
 		selectedId,
-		onSelect
+		interactive,
+		nodes
 	]);
+	const fitKeyRef = useRef(fitKey);
 	useEffect(() => {
-		const el = svgRef.current;
-		if (!el) return;
-		const ro = new ResizeObserver(() => {
-			fitToView();
-		});
-		ro.observe(el);
-		return () => ro.disconnect();
-	}, []);
-	const zoomBy = (factor) => {
-		if (!svgRef.current || !zoomRef.current) return;
-		d3.select(svgRef.current).transition().duration(250).call(zoomRef.current.scaleBy, factor);
-	};
-	const resetZoom = () => {
-		fitToView();
+		if (fitKeyRef.current === fitKey) return;
+		fitKeyRef.current = fitKey;
+		resetToFit();
+	}, [fitKey]);
+	const handleKeyDown = (event) => {
+		if (event.ctrlKey || event.metaKey || event.altKey || isEmpty) return;
+		if (event.key === "+" || event.key === "=") zoomBy(BUTTON_ZOOM_STEP);
+		else if (event.key === "-" || event.key === "_") zoomBy(1 / BUTTON_ZOOM_STEP);
+		else if (event.key === "0") resetToFit();
+		else return;
+		event.preventDefault();
 	};
+	const atMax = scale >= 1.7990000000000002;
+	const atMin = scale <= .051000000000000004;
 	const controlBtnClass = [
 		"appearance-none border-0 bg-none font-[inherit]",
 		"flex items-center justify-center rounded-lg p-2",
-		"text-slate-400 transition hover:bg-slate-100 hover:text-slate-700",
-		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30"
+		"text-slate-500 transition hover:bg-slate-100 hover:text-slate-700",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+		"disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
 	].join(" ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: `relative w-full overflow-hidden bg-slate-50/50 ${className}`,
+		className: `relative w-full overflow-hidden bg-slate-50/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 ${className}`,
 		style: { height },
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "absolute right-4 top-4 z-10 flex flex-col gap-2 rounded-lg border border-slate-100 bg-white p-2 shadow-md",
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: () => zoomBy(1.2),
-					"aria-label": "Zoom in",
-					children: /* @__PURE__ */ jsx(ZoomIn, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: resetZoom,
-					"aria-label": "Reset zoom",
-					children: /* @__PURE__ */ jsx(RotateCcw, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: controlBtnClass,
-					onClick: () => zoomBy(.8),
-					"aria-label": "Zoom out",
-					children: /* @__PURE__ */ jsx(ZoomOut, {
-						size: 16,
+		tabIndex: isEmpty ? void 0 : 0,
+		"aria-keyshortcuts": isEmpty ? void 0 : "+ - 0",
+		onKeyDown: handleKeyDown,
+		children: [
+			/* @__PURE__ */ jsx("style", { children: `
+        #${uid} .oc-card { fill: #fff; stroke: #e2e8f0; stroke-width: 1; transition: stroke 120ms ease; }
+        #${uid} .oc-name { fill: #0f172a; }
+        #${uid} .oc-desc { fill: #64748b; }
+        #${uid} .oc-node.is-root .oc-card { fill: #0f172a; stroke: #0f172a; }
+        #${uid} .oc-node.is-root .oc-name { fill: #fff; }
+        #${uid} .oc-node.is-root .oc-desc { fill: #cbd5e1; }
+        #${uid} .oc-node.is-muted .oc-card { fill: #f8fafc; stroke: #94a3b8; stroke-dasharray: 5 4; }
+        #${uid} .oc-node.is-muted .oc-name { fill: #475569; }
+        #${uid} .oc-node.is-muted .oc-desc { fill: #94a3b8; }
+        #${uid} .oc-node.is-root.is-muted .oc-card { fill: #334155; stroke: #94a3b8; }
+        #${uid} .oc-node.is-root.is-muted .oc-name { fill: #e2e8f0; }
+        #${uid} .oc-node.is-root.is-muted .oc-desc { fill: #cbd5e1; }
+        #${uid} .oc-ring { stroke: #6366f1; stroke-width: 2.5; opacity: 0; pointer-events: none; }
+        #${uid}.is-interactive .oc-node { cursor: pointer; }
+        #${uid}.is-interactive .oc-node:hover .oc-card { stroke: #a5b4fc; stroke-width: 1.5; }
+        #${uid} .oc-node.is-selected .oc-card,
+        #${uid}.is-interactive .oc-node.is-selected:hover .oc-card { stroke: #6366f1; stroke-width: 2.5; }
+        #${uid} .oc-node.is-selected .oc-ring { opacity: 0.6; }
+        #${uid} .oc-node:focus { outline: none; }
+        #${uid} .oc-node:focus-visible .oc-ring { opacity: 1; stroke: #2563eb; }
+      ` }),
+			!isEmpty && /* @__PURE__ */ jsxs("div", {
+				className: "absolute right-4 top-4 z-10 flex flex-col items-center gap-1 rounded-lg border border-slate-100 bg-white p-1.5 shadow-md",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: () => zoomBy(BUTTON_ZOOM_STEP),
+						disabled: atMax,
+						"aria-label": "Zoom in",
+						title: "Zoom in (+)",
+						children: /* @__PURE__ */ jsx(ZoomIn, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-[3rem] select-none text-center text-[11px] font-semibold tabular-nums text-slate-500",
+						children: [Math.round(scale * 100), "%"]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: () => zoomBy(1 / BUTTON_ZOOM_STEP),
+						disabled: atMin,
+						"aria-label": "Zoom out",
+						title: "Zoom out (-)",
+						children: /* @__PURE__ */ jsx(ZoomOut, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "my-0.5 h-px w-6 bg-slate-100",
 						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: controlBtnClass,
+						onClick: resetToFit,
+						"aria-label": "Fit to screen",
+						title: "Fit to screen (0)",
+						children: /* @__PURE__ */ jsx(Scan, {
+							size: 16,
+							"aria-hidden": "true"
+						})
 					})
-				})
-			]
-		}), /* @__PURE__ */ jsx("svg", {
-			ref: svgRef,
-			id: uid,
-			width: "100%",
-			height: "100%",
-			className: "block touch-none",
-			role: "img",
-			"aria-label": ariaLabel
-		})]
+				]
+			}),
+			isEmpty && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm font-semibold text-slate-500",
+				children: "No units to display"
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				ref: svgRef,
+				id: uid,
+				width: "100%",
+				height: "100%",
+				className: `block touch-none ${interactive ? "is-interactive" : ""}`,
+				role: interactive ? "group" : "img",
+				"aria-label": ariaLabel
+			})
+		]
 	});
 }
 //#endregion

package/lib/types/ui-library/gallery/org-chart/OrgChart.d.ts

@@ -13,25 +13,30 @@
  *     - 250 × 84 px rounded rectangles (rx=14)
  *     - Root (depth 0): dark navy fill (#0f172a), white text
  *     - Children: white fill (#fff), slate border (#e2e8f0)
+ *     - Muted tone: dashed border, slate-50 fill, muted text (inactive units)
  *     - drop-shadow: 0 6px 12px rgba(15,23,42,0.08)
- *     - Name: 13px, font-weight 800, centered
+ *     - Name: 13px, font-weight 800, centered, ellipsis + tooltip when too long
  *     - Description: 11px, font-weight 600, #64748b / #cbd5e1 (root)
- *     - Selected: indigo border overlay ring
+ *     - Hover: indigo-300 border; Selected: indigo border + overlay ring
  *   Connectors:
  *     - Stepped orthogonal path: M→V→H→V
  *     - Stroke: #cbd5e1, stroke-width 1.5
  *   Canvas:
- *     - Viewport sized to container; fit-to-view on render
- *     - Zoom: scaleExtent [0.05, 1.8]
- *     - Pan: mouse/touch drag
+ *     - Fits the tree to the viewport until the user zooms or pans; after that
+ *       the user's view is kept across re-renders, data refreshes and resizes
+ *       (e.g. a modal hiding the page scrollbar). "Fit to screen" or a new
+ *       `fitKey` hands control back to auto-fit.
+ *     - Zoom: scaleExtent [0.05, 1.8]; wheel / pinch / buttons / keyboard
+ *     - Pan: mouse/touch drag (a drag never counts as a node click)
  *     - Layout: nodeSize [280, 185] — horizontal × vertical spacing
  *   Controls:
- *     - ZoomIn, Reset, ZoomOut buttons (top-right overlay panel)
+ *     - Zoom in, zoom %, Zoom out, Fit to screen (top-right overlay panel)
  *
  * Accessibility:
- *   - SVG has role="img" + aria-label
- *   - Zoom controls have aria-label
- *   - Keyboard: Tab to control buttons; diagram itself is navigated visually
+ *   - SVG has an aria-label; role="img" when read-only, role="group" when nodes are selectable
+ *   - Selectable nodes are focusable buttons (Tab, Enter / Space to select)
+ *   - Keyboard on the chart: + / = zoom in, - zoom out, 0 fit to screen
+ *   - Respects prefers-reduced-motion for button zoom transitions
  *   - Note: full ARIA tree semantics are not possible in an SVG diagram;
  *     use OrgUnitTree for a fully keyboard-accessible list-based alternative
  *
@@ -50,6 +55,11 @@ export interface OrgChartNode {
     label: string;
     /** Secondary text line inside the node. */
     description?: string;
+    /**
+     * Visual tone. `'muted'` renders a dashed, greyed-out card — use it for
+     * inactive or archived units. Default: `'default'`.
+     */
+    tone?: 'default' | 'muted';
     /** Child nodes. */
     children?: OrgChartNode[];
 }
@@ -62,8 +72,14 @@ export interface OrgChartProps {
     nodes: OrgChartNode[];
     /** Currently selected node id — renders an indigo ring on the node. */
     selectedId?: string;
-    /** Called when a node is clicked. */
+    /** Called when a node is clicked (or activated with Enter / Space). */
     onSelect?: (id: string) => void;
+    /**
+     * Changing this value re-fits the tree to the viewport, discarding the
+     * user's zoom/pan. Use it when the chart shows a new context (e.g. a
+     * different company scope). Data refreshes alone keep the user's view.
+     */
+    fitKey?: string | number;
     /**
      * Container height. Default: '75vh' — matching the production CompanyStructurePage.
      * Pass a fixed pixel value for demos: '480px'.
@@ -74,4 +90,4 @@ export interface OrgChartProps {
     /** Additional class on the root container div. */
     className?: string;
 }
-export declare function OrgChart({ nodes, selectedId, onSelect, height, 'aria-label': ariaLabel, className, }: OrgChartProps): import("react").JSX.Element;
+export declare function OrgChart({ nodes, selectedId, onSelect, fitKey, height, 'aria-label': ariaLabel, className, }: OrgChartProps): import("react").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.42",
+  "version": "1.7.44",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [