@camstack/ui-library 1.1.32 → 1.1.33

package/dist/composites/slide-over-panel.d.ts

@@ -6,6 +6,30 @@ export interface SlideOverPanelProps {
     readonly subtitle?: ReactNode;
     readonly footer?: ReactNode;
     readonly children: ReactNode;
+    /**
+     * Width of the DESKTOP (`md+`) in-container slide-over. Ignored on mobile,
+     * where the panel is a full-width, viewport-anchored bottom sheet. Pass a
+     * responsive class (e.g. `md:w-[420px]`) — a bare `w-*` would also constrain
+     * the mobile sheet. Default: `md:w-[360px]`.
+     */
     readonly widthClass?: string;
 }
+/**
+ * SlideOverPanel — a detail surface anchored to context on desktop and to the
+ * viewport on mobile.
+ *
+ * - **Desktop (`md+`):** an in-container, NON-modal slide-over pinned to the
+ *   right edge of the nearest positioned ancestor. The host reserves space with
+ *   a matching `md:pr-*` so the panel sits beside its content (e.g. the
+ *   multi-node pipeline matrix), not over it.
+ * - **Mobile (`< md`):** a MODAL bottom sheet pinned to the viewport
+ *   (`position: fixed`). It never derives its size from the surrounding
+ *   container, so it can't stretch across a horizontally-laid-out node matrix
+ *   and overflow the page — the previous behaviour when it was a fixed-width
+ *   `absolute` panel anchored to the wide matrix wrapper.
+ *
+ * The whole desktop⇄mobile transform is pure Tailwind responsive classes on one
+ * element — no layout-shift on hydration, no portal. JS is used only to lock
+ * body scroll behind the mobile sheet and to wire Escape-to-close.
+ */
 export declare function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass, }: SlideOverPanelProps): import("react").JSX.Element | null;

package/dist/index.cjs

@@ -13129,7 +13129,26 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 }
 //#endregion
 //#region src/composites/slide-over-panel.tsx
-function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass = "w-[360px]" }) {
+/**
+* SlideOverPanel — a detail surface anchored to context on desktop and to the
+* viewport on mobile.
+*
+* - **Desktop (`md+`):** an in-container, NON-modal slide-over pinned to the
+*   right edge of the nearest positioned ancestor. The host reserves space with
+*   a matching `md:pr-*` so the panel sits beside its content (e.g. the
+*   multi-node pipeline matrix), not over it.
+* - **Mobile (`< md`):** a MODAL bottom sheet pinned to the viewport
+*   (`position: fixed`). It never derives its size from the surrounding
+*   container, so it can't stretch across a horizontally-laid-out node matrix
+*   and overflow the page — the previous behaviour when it was a fixed-width
+*   `absolute` panel anchored to the wide matrix wrapper.
+*
+* The whole desktop⇄mobile transform is pure Tailwind responsive classes on one
+* element — no layout-shift on hydration, no portal. JS is used only to lock
+* body scroll behind the mobile sheet and to wire Escape-to-close.
+*/
+function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass = "md:w-[360px]" }) {
+	const isMobile = useIsMobile();
 	(0, react$1.useEffect)(() => {
 		if (!open) return;
 		const onEsc = (e) => {
@@ -13138,14 +13157,31 @@ function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widt
 		window.addEventListener("keydown", onEsc);
 		return () => window.removeEventListener("keydown", onEsc);
 	}, [open, onClose]);
+	(0, react$1.useEffect)(() => {
+		if (!open || !isMobile) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	}, [open, isMobile]);
 	if (!open) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-		className: cn("absolute top-0 right-0 bottom-0 z-20 flex flex-col", "bg-surface border-l border-border shadow-xl", widthClass),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "fixed inset-0 z-40 bg-black/50 md:hidden",
+		onClick: onClose,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col", "max-h-[85dvh] rounded-t-2xl border-t border-border", "bg-surface shadow-2xl pb-[env(safe-area-inset-bottom)]", "md:absolute md:inset-x-auto md:top-0 md:right-0 md:bottom-0 md:z-20", "md:max-h-none md:rounded-none md:border-t-0 md:border-l md:pb-0", widthClass),
 		role: "dialog",
-		"aria-modal": "false",
+		"aria-modal": isMobile ? "true" : "false",
 		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex shrink-0 justify-center pt-2 pb-1 md:hidden",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-1 w-9 rounded-full bg-foreground-subtle/30" })
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-				className: "flex items-start justify-between gap-2 px-4 py-3 border-b border-border",
+				className: "flex shrink-0 items-start justify-between gap-2 px-4 py-3 border-b border-border",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -13164,15 +13200,15 @@ function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widt
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex-1 min-h-0 overflow-y-auto px-4 py-3",
+				className: "flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-3",
 				children
 			}),
 			footer !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-				className: "flex items-center gap-2 justify-end px-4 py-3 border-t border-border",
+				className: "flex shrink-0 items-center gap-2 justify-end px-4 py-3 border-t border-border",
 				children: footer
 			})
 		]
-	});
+	})] });
 }
 //#endregion
 //#region src/composites/step-tree-master.tsx

package/dist/index.js

@@ -13105,7 +13105,26 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 }
 //#endregion
 //#region src/composites/slide-over-panel.tsx
-function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass = "w-[360px]" }) {
+/**
+* SlideOverPanel — a detail surface anchored to context on desktop and to the
+* viewport on mobile.
+*
+* - **Desktop (`md+`):** an in-container, NON-modal slide-over pinned to the
+*   right edge of the nearest positioned ancestor. The host reserves space with
+*   a matching `md:pr-*` so the panel sits beside its content (e.g. the
+*   multi-node pipeline matrix), not over it.
+* - **Mobile (`< md`):** a MODAL bottom sheet pinned to the viewport
+*   (`position: fixed`). It never derives its size from the surrounding
+*   container, so it can't stretch across a horizontally-laid-out node matrix
+*   and overflow the page — the previous behaviour when it was a fixed-width
+*   `absolute` panel anchored to the wide matrix wrapper.
+*
+* The whole desktop⇄mobile transform is pure Tailwind responsive classes on one
+* element — no layout-shift on hydration, no portal. JS is used only to lock
+* body scroll behind the mobile sheet and to wire Escape-to-close.
+*/
+function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass = "md:w-[360px]" }) {
+	const isMobile = useIsMobile();
 	useEffect(() => {
 		if (!open) return;
 		const onEsc = (e) => {
@@ -13114,14 +13133,31 @@ function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widt
 		window.addEventListener("keydown", onEsc);
 		return () => window.removeEventListener("keydown", onEsc);
 	}, [open, onClose]);
+	useEffect(() => {
+		if (!open || !isMobile) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	}, [open, isMobile]);
 	if (!open) return null;
-	return /* @__PURE__ */ jsxs("aside", {
-		className: cn("absolute top-0 right-0 bottom-0 z-20 flex flex-col", "bg-surface border-l border-border shadow-xl", widthClass),
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-40 bg-black/50 md:hidden",
+		onClick: onClose,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsxs("aside", {
+		className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col", "max-h-[85dvh] rounded-t-2xl border-t border-border", "bg-surface shadow-2xl pb-[env(safe-area-inset-bottom)]", "md:absolute md:inset-x-auto md:top-0 md:right-0 md:bottom-0 md:z-20", "md:max-h-none md:rounded-none md:border-t-0 md:border-l md:pb-0", widthClass),
 		role: "dialog",
-		"aria-modal": "false",
+		"aria-modal": isMobile ? "true" : "false",
 		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 justify-center pt-2 pb-1 md:hidden",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("div", { className: "h-1 w-9 rounded-full bg-foreground-subtle/30" })
+			}),
 			/* @__PURE__ */ jsxs("header", {
-				className: "flex items-start justify-between gap-2 px-4 py-3 border-b border-border",
+				className: "flex shrink-0 items-start justify-between gap-2 px-4 py-3 border-b border-border",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ jsx("div", {
@@ -13140,15 +13176,15 @@ function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widt
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex-1 min-h-0 overflow-y-auto px-4 py-3",
+				className: "flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-3",
 				children
 			}),
 			footer !== void 0 && /* @__PURE__ */ jsx("footer", {
-				className: "flex items-center gap-2 justify-end px-4 py-3 border-t border-border",
+				className: "flex shrink-0 items-center gap-2 justify-end px-4 py-3 border-t border-border",
 				children: footer
 			})
 		]
-	});
+	})] });
 }
 //#endregion
 //#region src/composites/step-tree-master.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",