@arcadeai/design-system 3.48.0 → 3.49.1

package/dist/components/ui/molecules/mcp-server-picker/server-card.js

@@ -3,13 +3,12 @@
 import { cn as e } from "../../../../lib/utils.js";
 import { t } from "../../../../dist-Ber_p4PA.js";
 import { i as n, n as r, r as i, t as a } from "../../../../tooltip-34vRSwJG.js";
-import { UnoptimizedMarker as o } from "../../atoms/unoptimized-marker.js";
-import { McpToolkitAvatar as s } from "./toolkit-avatar.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { ChevronRight as d, KeyRound as f } from "lucide-react";
+import { McpToolkitAvatar as o } from "./toolkit-avatar.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronRight as u, KeyRound as d } from "lucide-react";
 //#region lib/components/ui/molecules/mcp-server-picker/server-card.tsx
-var p = t("flex items-stretch rounded-lg border transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] motion-reduce:transition-colors", {
+var f = t("flex items-stretch rounded-lg border transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] motion-reduce:transition-colors", {
 	variants: { selectionState: {
 		selected: "border-foreground/45 bg-muted/20 shadow-[var(--shadow-card)]",
 		partial: "border-foreground/45 border-dashed bg-muted/20 shadow-[var(--shadow-card)]",
@@ -20,105 +19,100 @@ var p = t("flex items-stretch rounded-lg border transition-[background-color,bor
 	} },
 	defaultVariants: { selectionState: "none" }
 });
-function m(e, t) {
+function p(e, t) {
 	return t ? e === "selected" ? "setup-selected" : e === "partial" ? "setup-partial" : "setup-none" : e;
 }
-function h(e) {
+function m(e) {
 	return e === "selected" ? !0 : e === "partial" ? "mixed" : !1;
 }
-function g({ name: e, description: t, toolkitId: n, version: r, isUnoptimized: i, selectionState: a, onToggle: c }) {
-	return /* @__PURE__ */ u("button", {
-		"aria-label": `${a === "selected" ? "Remove all" : "Add all"} ${e} tools${i ? " (unoptimized)" : ""}`,
-		"aria-pressed": h(a),
+function h({ name: e, description: t, toolkitId: n, version: r, selectionState: i, onToggle: a }) {
+	return /* @__PURE__ */ l("button", {
+		"aria-label": `${i === "selected" ? "Remove all" : "Add all"} ${e} tools`,
+		"aria-pressed": m(i),
 		className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l-lg px-3 py-2.5 text-left transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100",
-		onClick: c,
+		onClick: a,
 		title: t || void 0,
 		type: "button",
-		children: [
-			/* @__PURE__ */ l(s, {
-				name: e,
-				size: "md",
-				toolkitId: n
-			}),
-			/* @__PURE__ */ u("span", {
-				className: "flex min-w-0 flex-1 items-baseline gap-1.5",
-				children: [/* @__PURE__ */ l("span", {
-					className: "min-w-0 truncate font-medium text-base capitalize",
-					children: e
-				}), r ? /* @__PURE__ */ u("span", {
-					className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
-					children: ["v", r]
-				}) : null]
-			}),
-			/* @__PURE__ */ l(o, { active: i })
-		]
+		children: [/* @__PURE__ */ c(o, {
+			name: e,
+			size: "md",
+			toolkitId: n
+		}), /* @__PURE__ */ l("span", {
+			className: "flex min-w-0 flex-1 items-baseline gap-1.5",
+			children: [/* @__PURE__ */ c("span", {
+				className: "min-w-0 truncate font-medium text-base capitalize",
+				children: e
+			}), r ? /* @__PURE__ */ l("span", {
+				className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
+				children: ["v", r]
+			}) : null]
+		})]
 	});
 }
-function _({ name: e, toolsLabel: t, onCustomize: n }) {
-	return /* @__PURE__ */ u("button", {
+function g({ name: e, toolsLabel: t, onCustomize: n }) {
+	return /* @__PURE__ */ l("button", {
 		"aria-label": `Choose individual tools for ${e}`,
 		className: "flex min-w-[5.5rem] shrink-0 cursor-pointer items-center justify-end gap-1.5 rounded-r-lg border-border/60 border-l px-2.5 text-muted-foreground text-xs transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-muted/40 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100",
 		"data-slot": "mcp-server-card-customize",
 		onClick: n,
 		type: "button",
-		children: [/* @__PURE__ */ l("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: "whitespace-nowrap tabular-nums",
 			children: t
-		}), /* @__PURE__ */ l(d, {
+		}), /* @__PURE__ */ c(u, {
 			"aria-hidden": !0,
 			className: "size-3 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth)] motion-reduce:transition-none"
 		})]
 	});
 }
-function v({ name: e, onSetup: t }) {
-	return /* @__PURE__ */ l(i, { children: /* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(n, { render: /* @__PURE__ */ l("button", {
+function _({ name: e, onSetup: t }) {
+	return /* @__PURE__ */ c(i, { children: /* @__PURE__ */ l(a, { children: [/* @__PURE__ */ c(n, { render: /* @__PURE__ */ c("button", {
 		"aria-label": `Set up ${e}`,
 		className: "flex shrink-0 cursor-pointer items-center justify-center border-border/60 border-l bg-warning/10 px-2.5 text-warning transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset",
 		"data-slot": "mcp-server-card-setup",
 		onClick: t,
 		type: "button",
-		children: /* @__PURE__ */ l(f, {
+		children: /* @__PURE__ */ c(d, {
 			"aria-hidden": !0,
 			className: "size-4"
 		})
-	}) }), /* @__PURE__ */ u(r, {
+	}) }), /* @__PURE__ */ l(r, {
 		className: "max-w-56 flex-col items-start gap-0.5 text-left",
 		side: "top",
-		children: [/* @__PURE__ */ l("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: "font-semibold",
 			children: "Setup required"
-		}), /* @__PURE__ */ l("span", { children: "This server isn't ready yet. It needs some configuration before its tools work." })]
+		}), /* @__PURE__ */ c("span", { children: "This server isn't ready yet. It needs some configuration before its tools work." })]
 	})] }) });
 }
-function y({ name: t, description: n, toolkitId: r, version: i, toolCount: a, selectedToolCount: o = 0, selectionState: s = "none", isUnoptimized: c = !1, needsSetup: d = !1, onSetup: f, onToggle: h, onCustomize: y, className: b, ...x }) {
-	let S = s === "partial" ? `${o}/${a} tools` : `${a} ${a === 1 ? "tool" : "tools"}`;
-	return /* @__PURE__ */ u("div", {
-		...x,
-		className: e(p({ selectionState: m(s, d) }), b),
+function v({ name: t, description: n, toolkitId: r, version: i, toolCount: a, selectedToolCount: o = 0, selectionState: s = "none", needsSetup: u = !1, onSetup: d, onToggle: m, onCustomize: v, className: y, ...b }) {
+	let x = s === "partial" ? `${o}/${a} tools` : `${a} ${a === 1 ? "tool" : "tools"}`;
+	return /* @__PURE__ */ l("div", {
+		...b,
+		className: e(f({ selectionState: p(s, u) }), y),
 		"data-slot": "mcp-server-card",
-		"data-status": d ? "needs-setup" : s,
+		"data-status": u ? "needs-setup" : s,
 		children: [
-			/* @__PURE__ */ l(g, {
+			/* @__PURE__ */ c(h, {
 				description: n,
-				isUnoptimized: c,
 				name: t,
-				onToggle: h,
+				onToggle: m,
 				selectionState: s,
 				toolkitId: r,
 				version: i
 			}),
-			d ? /* @__PURE__ */ l(v, {
+			u ? /* @__PURE__ */ c(_, {
 				name: t,
-				onSetup: f
+				onSetup: d
 			}) : null,
-			/* @__PURE__ */ l(_, {
+			/* @__PURE__ */ c(g, {
 				name: t,
-				onCustomize: y,
-				toolsLabel: S
+				onCustomize: v,
+				toolsLabel: x
 			})
 		]
 	});
 }
-var b = c.memo(y);
+var y = s.memo(v);
 //#endregion
-export { b as McpServerCard, p as mcpServerCardShellVariants };
+export { y as McpServerCard, f as mcpServerCardShellVariants };

package/dist/components/ui/molecules/mcp-server-picker/tool-card.d.ts

@@ -14,14 +14,9 @@ export type McpToolCardProps = {
     selected?: boolean;
     destructive?: boolean;
     readOnly?: boolean;
-    /**
-     * Tool sourced from an unoptimized toolkit. Renders a `{}` marker in the
-     * leading metadata slot.
-     */
-    isUnoptimized?: boolean;
     onToggle?: () => void;
 } & Omit<React.ComponentProps<"button">, "onClick" | "onToggle" | "name">;
-declare function McpToolCardImpl({ name, rawName, version, description, selected, destructive, readOnly, isUnoptimized, onToggle, className, ...rest }: McpToolCardProps): React.JSX.Element;
+declare function McpToolCardImpl({ name, rawName, version, description, selected, destructive, readOnly, onToggle, className, ...rest }: McpToolCardProps): React.JSX.Element;
 export declare const McpToolCard: React.MemoExoticComponent<typeof McpToolCardImpl>;
 export {};
 //# sourceMappingURL=tool-card.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/tool-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAE1E,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,aAAqB,EACrB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAmFlB;AAED,eAAO,MAAM,WAAW,mDAA8B,CAAC"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAE1E,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkFlB;AAED,eAAO,MAAM,WAAW,mDAA8B,CAAC"}

package/dist/components/ui/molecules/mcp-server-picker/tool-card.js

@@ -2,66 +2,61 @@
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
 import { i as t, n, r, t as i } from "../../../../tooltip-34vRSwJG.js";
-import { UnoptimizedMarker as a } from "../../atoms/unoptimized-marker.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Check as l } from "lucide-react";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Check as c } from "lucide-react";
 //#region lib/components/ui/molecules/mcp-server-picker/tool-card.tsx
-function u({ name: o, rawName: u, version: d, description: f, selected: p = !1, destructive: m = !1, readOnly: h = !1, isUnoptimized: g = !1, onToggle: _, className: v, ...y }) {
-	let b = /* @__PURE__ */ c("button", {
-		...y,
-		"aria-pressed": p,
-		className: e("flex cursor-pointer items-start gap-2.5 rounded-lg border p-3 text-left transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100", p ? "border-foreground/45 bg-muted/20 shadow-[var(--shadow-card)]" : "border-border hover:border-foreground/40 hover:shadow-[var(--shadow-card-hover)]", v),
+function l({ name: a, rawName: l, version: u, description: d, selected: f = !1, destructive: p = !1, readOnly: m = !1, onToggle: h, className: g, ..._ }) {
+	let v = /* @__PURE__ */ s("button", {
+		..._,
+		"aria-pressed": f,
+		className: e("flex cursor-pointer items-start gap-2.5 rounded-lg border p-3 text-left transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100", f ? "border-foreground/45 bg-muted/20 shadow-[var(--shadow-card)]" : "border-border hover:border-foreground/40 hover:shadow-[var(--shadow-card-hover)]", g),
 		"data-slot": "mcp-tool-card",
-		"data-status": p ? "selected" : "none",
-		onClick: _,
+		"data-status": f ? "selected" : "none",
+		onClick: h,
 		type: "button",
-		children: [/* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ o("span", {
 			"aria-hidden": !0,
-			className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors", p ? "border-primary bg-primary text-primary-foreground" : "border-input"),
-			children: p ? /* @__PURE__ */ s(l, { className: "size-3" }) : null
-		}), /* @__PURE__ */ c("span", {
+			className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors", f ? "border-primary bg-primary text-primary-foreground" : "border-input"),
+			children: f ? /* @__PURE__ */ o(c, { className: "size-3" }) : null
+		}), /* @__PURE__ */ s("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ c("span", {
+			children: [/* @__PURE__ */ s("span", {
 				className: "flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ c("span", {
+				children: [/* @__PURE__ */ s("span", {
 					className: "flex min-w-0 items-baseline gap-1.5",
-					children: [
-						/* @__PURE__ */ s("span", {
-							className: "truncate font-medium text-sm",
-							children: o
-						}),
-						d ? /* @__PURE__ */ c("span", {
-							className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
-							children: ["v", d]
-						}) : null,
-						/* @__PURE__ */ s(a, { active: g })
-					]
-				}), /* @__PURE__ */ c("span", {
+					children: [/* @__PURE__ */ o("span", {
+						className: "truncate font-medium text-sm",
+						children: a
+					}), u ? /* @__PURE__ */ s("span", {
+						className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
+						children: ["v", u]
+					}) : null]
+				}), /* @__PURE__ */ s("span", {
 					className: "flex shrink-0 items-center gap-1.5 self-start",
-					children: [m ? /* @__PURE__ */ s("span", {
+					children: [p ? /* @__PURE__ */ o("span", {
 						className: "ds-focus-in rounded-full bg-destructive/10 px-1.5 py-0.5 font-medium text-[10px] text-destructive uppercase tracking-wide",
 						children: "Destructive"
-					}) : null, h ? /* @__PURE__ */ s("span", {
+					}) : null, m ? /* @__PURE__ */ o("span", {
 						className: "ds-focus-in rounded-full bg-muted px-1.5 py-0.5 font-medium text-[10px] text-muted-foreground uppercase tracking-wide",
 						children: "Read-only"
 					}) : null]
 				})]
-			}), f ? /* @__PURE__ */ s("span", {
+			}), d ? /* @__PURE__ */ o("span", {
 				className: "mt-0.5 line-clamp-1 text-muted-foreground text-xs leading-snug",
-				children: f
+				children: d
 			}) : null]
 		})]
 	});
-	return f ? /* @__PURE__ */ s(r, { children: /* @__PURE__ */ c(i, { children: [/* @__PURE__ */ s(t, { render: b }), /* @__PURE__ */ c(n, {
+	return d ? /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, { render: v }), /* @__PURE__ */ s(n, {
 		className: "max-w-xs flex-col items-start gap-0.5 text-left text-xs",
 		side: "bottom",
-		children: [u && u !== o ? /* @__PURE__ */ s("span", {
+		children: [l && l !== a ? /* @__PURE__ */ o("span", {
 			className: "font-medium",
-			children: u
-		}) : null, /* @__PURE__ */ s("span", { children: f })]
-	})] }) }) : b;
+			children: l
+		}) : null, /* @__PURE__ */ o("span", { children: d })]
+	})] }) }) : v;
 }
-var d = o.memo(u);
+var u = a.memo(l);
 //#endregion
-export { d as McpToolCard };
+export { u as McpToolCard };

package/dist/components/ui/molecules/scroll-fade-area.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type ScrollFadeAreaProps = {
+    children: ReactNode;
+    /** Classes for the outer sizing context. Defaults fill a flex column. */
+    className?: string;
+    /** Classes for the inner scroll viewport (padding, child spacing). */
+    viewportClassName?: string;
+};
+/**
+ * Vertical scroll area with "there's more" affordances on whichever edge still
+ * has hidden content: a fade-to-background gradient plus a soft inset shadow.
+ * Both appear per edge and only when that edge can actually scroll.
+ *
+ * This draws gradient overlays from `useScrollFade`'s `edges` rather than
+ * spreading the hook's `maskImage` style. A mask fades content to fully
+ * transparent, which reads too strongly in dark mode; gradient overlays fade to
+ * the surface color and let us dial the intensity per theme (see the
+ * `dark:from-background/40` stops below). Horizontal scrollers that want the
+ * lighter mask treatment should consume `useScrollFade("x").style` directly.
+ *
+ * The overlays fade to the `background` token, so place this on a
+ * background-colored surface; on a `card`/`muted` surface the gradient seams.
+ * Such callers want the mask treatment instead.
+ */
+export declare function ScrollFadeArea({ children, className, viewportClassName, }: ScrollFadeAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=scroll-fade-area.d.ts.map

package/dist/components/ui/molecules/scroll-fade-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-fade-area.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/scroll-fade-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,+BAiCrB"}

package/dist/components/ui/molecules/scroll-fade-area.js

@@ -0,0 +1,25 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { useScrollFade as t } from "../../../hooks/use-scroll-fade.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/scroll-fade-area.tsx
+function i({ children: i, className: a, viewportClassName: o }) {
+	let s = t("y"), c = [s.edges.start && "inset 0 8px 12px -10px color-mix(in oklch, var(--shadow-color) 3%, transparent)", s.edges.end && "inset 0 -12px 16px -10px color-mix(in oklch, var(--shadow-color) 6%, transparent)"].filter(Boolean).join(", ") || void 0;
+	return /* @__PURE__ */ r("div", {
+		className: e("relative min-h-0 flex-1", a),
+		children: [
+			s.edges.start ? /* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent dark:from-background/40" }) : null,
+			s.edges.end ? /* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t from-background to-transparent dark:from-background/40" }) : null,
+			/* @__PURE__ */ n("div", {
+				className: e("h-full overflow-y-auto transition-shadow duration-200", o),
+				onScroll: s.onScroll,
+				ref: s.ref,
+				style: { boxShadow: c },
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+export { i as ScrollFadeArea };

package/dist/hooks/use-scroll-fade.d.ts

@@ -3,10 +3,17 @@
  * dynamic mask-image — a lightweight "there's more" hint with no extra DOM.
  * Works on either axis and only fades an edge you can actually scroll toward.
  * Attach `ref` + `onScroll` to the scrollable element and spread `style`.
+ *
+ * Also returns `edges` ({ start, end }) for callers that want to draw their own
+ * edge affordance (e.g. a shadow) only when there is hidden content.
  */
 export declare function useScrollFade(axis: "x" | "y"): {
     ref: (el: HTMLDivElement | null) => void;
     onScroll: () => void;
+    edges: {
+        start: boolean;
+        end: boolean;
+    };
     style: {
         maskImage: string;
         WebkitMaskImage: string;

package/dist/hooks/use-scroll-fade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-fade.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-scroll-fade.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG;cA+CpC,cAAc,GAAG,IAAI;;;;;;EAsC7B"}
+{"version":3,"file":"use-scroll-fade.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-scroll-fade.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG;cA+CpC,cAAc,GAAG,IAAI;;;;;;;;;;EAuC7B"}

package/dist/hooks/use-scroll-fade.js

@@ -28,6 +28,7 @@ function i(i) {
 	return (a.start || a.end) && (p = `linear-gradient(${i === "x" ? "to right" : "to bottom"}, ${a.start ? `transparent 0, black ${r}px` : "black 0"}, ${a.end ? `black calc(100% - ${r}px), transparent 100%` : "black 100%"})`), {
 		ref: f,
 		onScroll: u,
+		edges: a,
 		style: p ? {
 			maskImage: p,
 			WebkitMaskImage: p