@commenda/pathfinder 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @commenda/pathfinder
 
+## 0.2.0
+
+### Minor Changes
+
+- Polish component interactions, accessibility, motion, and documentation across the design system.
+  - Add the `Sidebar` name and types while retaining the existing `SideNav` exports.
+  - Add Table `controlsConfig` for embedding read-only tables and Dropdown `trailingIcon` support.
+  - Improve table filtering, date editing, pin menus, scroll shadows, resize guides, and pinned-column layering. Seal DataGrid pinned edges and prevent number changes from wheel scrolling.
+  - Reuse shared controls in Calendar and AI content, including Markdown tables, hover previews, attachment dialogs, and Toast feedback.
+  - Refine navigation, form controls, overlays, and feedback transitions, preserving keyboard and reduced-motion behavior.
+  - Refresh component documentation and restore inherited form props and stable design-rule references in AI documentation.
+
 ## 0.1.0
 
 Initial public registry release of Commenda's design system: React components,

package/dist/components/accordion/AccordionSection.js

@@ -16,9 +16,15 @@ var c = ({ item: c, variant: l, headingLevel: u, keepMounted: d }) => {
 		6: "h6"
 	}[u], m = c.disableConfig?.isDisabled, h = m && c.disableConfig?.reason ? c.disableConfig.reason : c.description;
 	return /* @__PURE__ */ o(s.Item, {
+		onPointerDownCapture: (e) => {
+			e.currentTarget.setAttribute("data-motion", "pointer");
+		},
+		onKeyDownCapture: (e) => {
+			e.currentTarget.removeAttribute("data-motion");
+		},
 		value: c.value,
 		disabled: m,
-		className: r("pf:min-w-0 pf:box-border", l === "card" ? "pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-lg pf:bg-background" : "pf:py-xs pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
+		className: r("pf:group/accordion-item pf:min-w-0 pf:box-border", l === "card" ? "pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-lg pf:bg-background" : "pf:py-xs pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
 		children: [/* @__PURE__ */ a(s.Header, {
 			render: /* @__PURE__ */ a(p, {}),
 			className: "pf:m-0",
@@ -43,7 +49,7 @@ var c = ({ item: c, variant: l, headingLevel: u, keepMounted: d }) => {
 					}),
 					/* @__PURE__ */ a("span", {
 						"aria-hidden": "true",
-						className: "pf:flex pf:items-center pf:justify-center pf:size-xl pf:shrink-0 pf:text-soft-pearl-800 pf:group-hover:text-soft-pearl-1000 pf:group-data-panel-open:rotate-180 pf:transition-transform pf:duration-(--pf-duration-base) pf:ease-(--pf-easing-out) pf:motion-reduce:transition-none",
+						className: "pf:flex pf:items-center pf:justify-center pf:size-xl pf:shrink-0 pf:text-soft-pearl-800 pf:group-hover:text-soft-pearl-1000 pf:group-data-panel-open:rotate-180 pf:transition-none pf:motion-safe:group-data-[motion=pointer]/accordion-item:transition-transform pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none",
 						children: /* @__PURE__ */ a(t, {
 							size: 16,
 							tone: "inherit"
@@ -53,7 +59,7 @@ var c = ({ item: c, variant: l, headingLevel: u, keepMounted: d }) => {
 			})
 		}), /* @__PURE__ */ a(s.Panel, {
 			keepMounted: d,
-			className: "pf:h-(--accordion-panel-height) pf:overflow-hidden pf:transition-[height] pf:duration-(--pf-duration-base) pf:ease-(--pf-easing-out) pf:data-starting-style:h-0 pf:data-ending-style:h-0 pf:motion-reduce:transition-none",
+			className: "pf:h-(--accordion-panel-height) pf:overflow-hidden pf:transition-none pf:motion-safe:group-data-[motion=pointer]/accordion-item:transition-[height] pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:data-starting-style:h-0 pf:data-ending-style:h-0 pf:motion-reduce:transition-none",
 			children: /* @__PURE__ */ a("div", {
 				className: r("pf:min-w-0 pf:font-body pf:text-copy-13 pf:text-soft-pearl-900 pf:wrap-anywhere", l === "card" ? "pf:px-xl pf:pb-xl" : "pf:px-md pf:pb-lg"),
 				children: c.content

package/dist/components/address-input/AddressInput.js

@@ -156,7 +156,7 @@ var m = l(() => import("./AddressCountryFlag.js")), h = {
 					disableConfig: { isDisabled: !!c.disableConfig?.isDisabled },
 					...C("region"),
 					errorConfig: T("region").errorConfig,
-					placeholder: g.value.country || c.regionConfig ? "Select state or region" : "Select country first"
+					placeholder: g.value.country || c.regionConfig ? "Select state or region" : "State or region"
 				}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, {
 					...T("region"),
 					name: c.readOnly && y ? void 0 : S("region"),

package/dist/components/artifact-card/ArtifactCard.js

@@ -13,7 +13,7 @@ function l({ title: l, meta: u, leading: d, onOpen: f, isOpen: p, stateConfig: m
 	return /* @__PURE__ */ c("article", {
 		"aria-label": l,
 		"aria-busy": m?.status === "generating" || void 0,
-		className: o("pf:relative pf:box-border pf:flex pf:min-w-0 pf:min-h-[64px] pf:flex-wrap pf:items-center pf:gap-lg pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:p-lg pf:font-body pf:hover:bg-soft-pearl-200", p ? "pf:bg-soft-pearl-200" : "pf:bg-background", m?.status === "failed" ? "pf:border-red-300" : "pf:border-soft-pearl-300", g),
+		className: o("pf:relative pf:box-border pf:flex pf:min-w-0 pf:min-h-[64px] pf:flex-wrap pf:items-center pf:gap-lg pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:p-lg pf:font-body pf:hover:bg-soft-pearl-200 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:focus-visible:transition-none pf:motion-reduce:transition-none", p ? "pf:bg-soft-pearl-200" : "pf:bg-background", m?.status === "failed" ? "pf:border-red-300" : "pf:border-soft-pearl-300", g),
 		children: [
 			/* @__PURE__ */ s("span", {
 				"aria-hidden": "true",

package/dist/components/artifact-panel/ArtifactPanel.js

@@ -20,30 +20,56 @@ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/artifact-panel/ArtifactPanel.tsx
 var C = "pf:box-border pf:flex pf:shrink-0 pf:max-w-[244px] pf:min-w-0 pf:h-[28px] pf:items-center pf:gap-xs pf:rounded-sm pf:px-sm pf:text-label-12-strong";
 function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onClose: k, layout: A = "docked", onExpand: j, resizeConfig: M, className: N }) {
-	let P = _(), F = y(null), I = y(null), L = T.find((e) => e.id === E) ?? T.at(0), R = v(() => T.map((e) => ({
+	let P = _(), F = y(null), I = y(null), L = y(!1), R = T.find((e) => e.id === E) ?? T.at(0);
+	g(() => {
+		let e = L.current;
+		L.current = !1;
+		let t = I.current;
+		if (!e || !t || typeof t.animate != "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let n = t.animate([{
+			opacity: 0,
+			transform: "translateY(4px)"
+		}, {
+			opacity: 1,
+			transform: "translateY(0)"
+		}], {
+			duration: 140,
+			easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+		});
+		return () => {
+			n.cancel();
+		};
+	}, [R?.id]);
+	let z = v(() => T.map((e) => ({
 		value: e.id,
 		label: e.title,
 		content: null
-	})), [T]), { containerRef: z, measurementRef: B, visible: V } = p(R, L?.id ?? null, !0, "Open artifacts", 2, !1), H = T.filter((e) => !V || V.includes(e.id)), U = T.length - H.length, W = () => {
-		k(), L?.returnFocusRef?.current?.focus();
-	}, G = (e) => {
+	})), [T]), { containerRef: B, measurementRef: V, visible: H } = p(z, R?.id ?? null, !0, "Open artifacts", 2, !1), U = T.filter((e) => !H || H.includes(e.id)), W = T.length - U.length, G = () => {
+		k(), R?.returnFocusRef?.current?.focus();
+	}, K = (e) => {
 		let t = T.findIndex((t) => t.id === e), n = T.at(t + 1) ?? (t > 0 ? T.at(t - 1) : void 0);
-		O(e), n ? L?.id === e && (D(n.id), requestAnimationFrame(() => {
-			(Array.from(z.current?.querySelectorAll("[role=\"tab\"]") ?? []).find((e) => e.dataset.artifactId === n.id) ?? I.current)?.focus();
-		})) : W();
+		O(e), n ? R?.id === e && (D(n.id), requestAnimationFrame(() => {
+			(Array.from(B.current?.querySelectorAll("[role=\"tab\"]") ?? []).find((e) => e.dataset.artifactId === n.id) ?? I.current)?.focus();
+		})) : G();
 	};
 	if (g(() => {
 		let e = F.current, t = (t) => {
-			t.key === "Escape" && !t.defaultPrevented && t.target instanceof Node && e?.contains(t.target) && (t.preventDefault(), t.stopPropagation(), k(), L?.returnFocusRef?.current?.focus());
+			t.key === "Escape" && !t.defaultPrevented && t.target instanceof Node && e?.contains(t.target) && (t.preventDefault(), t.stopPropagation(), k(), R?.returnFocusRef?.current?.focus());
 		};
 		return document.addEventListener("keydown", t), () => {
 			document.removeEventListener("keydown", t);
 		};
-	}, [L, k]), !L) return null;
-	let K = T.indexOf(L), q = `${P}-tab-${String(K)}`, J = `${P}-body`;
+	}, [R, k]), !R) return null;
+	let q = T.indexOf(R), J = `${P}-tab-${String(q)}`, Y = `${P}-body`;
 	return /* @__PURE__ */ S("section", {
 		"aria-label": w,
 		ref: F,
+		onPointerDownCapture: () => {
+			L.current = !0;
+		},
+		onKeyDownCapture: () => {
+			L.current = !1;
+		},
 		className: h("pf:relative pf:flex pf:min-w-0 pf:max-w-full pf:font-body", N),
 		style: { width: A === "docked" ? M?.value ?? 640 : "100%" },
 		children: [A === "docked" && M && /* @__PURE__ */ x(f, {
@@ -51,7 +77,7 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 			label: `Resize ${w}`,
 			variant: "edge",
 			edge: "start",
-			controls: J
+			controls: Y
 		}), /* @__PURE__ */ S("div", {
 			className: "pf:flex pf:min-w-0 pf:flex-1 pf:flex-col pf:overflow-hidden pf:rounded-xl pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background",
 			children: [
@@ -61,36 +87,36 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 						A === "chat-panel" && /* @__PURE__ */ x(n, {
 							size: "sm",
 							label: "Back to chat",
-							onClick: W,
+							onClick: G,
 							children: /* @__PURE__ */ x(l, {})
 						}),
 						/* @__PURE__ */ S("div", {
 							className: "pf:relative pf:min-w-0 pf:flex-1",
 							children: [/* @__PURE__ */ S("div", {
-								ref: z,
+								ref: B,
 								role: "tablist",
 								"aria-label": "Open artifacts",
 								className: "pf:flex pf:min-w-0 pf:items-center pf:gap-xxs pf:overflow-hidden",
-								children: [H.map((e) => /* @__PURE__ */ S("div", {
-									className: h(C, "pf:group/artifact", L.id === e.id && "pf:bg-soft-pearl-200"),
+								children: [U.map((e) => /* @__PURE__ */ S("div", {
+									className: h(C, "pf:group/artifact", R.id === e.id && "pf:bg-soft-pearl-200"),
 									children: [/* @__PURE__ */ S("button", {
 										type: "button",
 										role: "tab",
 										id: `${P}-tab-${String(T.indexOf(e))}`,
 										"data-artifact-id": e.id,
-										"aria-selected": L.id === e.id,
-										"aria-controls": J,
-										tabIndex: L.id === e.id ? 0 : -1,
+										"aria-selected": R.id === e.id,
+										"aria-controls": Y,
+										tabIndex: R.id === e.id ? 0 : -1,
 										onClick: () => {
 											D(e.id);
 										},
 										onKeyDown: (t) => {
 											if (t.key === "Delete") {
-												t.preventDefault(), G(e.id);
+												t.preventDefault(), K(e.id);
 												return;
 											}
-											let n = H.indexOf(e), r = getComputedStyle(t.currentTarget).direction === "rtl" ? -1 : 1, i = t.key === "ArrowRight" ? r : t.key === "ArrowLeft" ? -r : 0, a = t.key === "Home" ? H[0] : t.key === "End" ? H.at(-1) : i ? H[(n + i + H.length) % H.length] : void 0;
-											a && (t.preventDefault(), D(a.id), (z.current?.querySelectorAll("[role=\"tab\"]"))?.[H.indexOf(a)].focus());
+											let n = U.indexOf(e), r = getComputedStyle(t.currentTarget).direction === "rtl" ? -1 : 1, i = t.key === "ArrowRight" ? r : t.key === "ArrowLeft" ? -r : 0, a = t.key === "Home" ? U[0] : t.key === "End" ? U.at(-1) : i ? U[(n + i + U.length) % U.length] : void 0;
+											a && (t.preventDefault(), D(a.id), (B.current?.querySelectorAll("[role=\"tab\"]"))?.[U.indexOf(a)].focus());
 										},
 										title: e.title,
 										className: "pf:flex pf:min-w-0 pf:items-center pf:gap-xs pf:border-0 pf:bg-transparent pf:p-0 pf:text-inherit pf:font-body pf:text-label-12-strong pf:cursor-pointer pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
@@ -102,19 +128,19 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 										size: "xs",
 										label: `Close ${e.title}`,
 										onClick: () => {
-											G(e.id);
+											K(e.id);
 										},
-										className: h(L.id !== e.id && "pf:[@media(hover:hover)]:opacity-0 pf:group-hover/artifact:opacity-100 pf:group-focus-within/artifact:opacity-100"),
+										className: h(R.id !== e.id && "pf:[@media(hover:hover)]:opacity-0 pf:group-hover/artifact:opacity-100 pf:group-focus-within/artifact:opacity-100"),
 										children: /* @__PURE__ */ x(a, { size: 12 })
 									})]
-								}, e.id)), U > 0 && /* @__PURE__ */ x(s, {
+								}, e.id)), W > 0 && /* @__PURE__ */ x(s, {
 									menu: { groups: [{
 										id: "artifacts",
 										items: T.map((t) => ({
 											type: "action",
 											id: t.id,
 											label: t.title,
-											leadingIcon: L.id === t.id ? /* @__PURE__ */ x(e, {}) : void 0,
+											leadingIcon: R.id === t.id ? /* @__PURE__ */ x(e, {}) : void 0,
 											onClick: () => {
 												D(t.id);
 											}
@@ -123,12 +149,12 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 									trigger: /* @__PURE__ */ S(t, {
 										size: "sm",
 										variant: "tertiary",
-										"aria-label": `${String(U)} more artifacts; show all`,
-										children: ["+", U]
+										"aria-label": `${String(W)} more artifacts; show all`,
+										children: ["+", W]
 									})
 								})]
 							}), /* @__PURE__ */ S("div", {
-								ref: B,
+								ref: V,
 								"aria-hidden": "true",
 								className: "pf:pointer-events-none pf:invisible pf:absolute pf:top-0 pf:start-0 pf:flex pf:w-max pf:gap-xxs",
 								children: [T.map((e) => /* @__PURE__ */ S("div", {
@@ -158,7 +184,7 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 						A !== "chat-panel" && /* @__PURE__ */ x(n, {
 							size: "sm",
 							label: "Close artifact panel",
-							onClick: W,
+							onClick: G,
 							children: /* @__PURE__ */ x(a, {})
 						})
 					]
@@ -168,41 +194,41 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 					children: [
 						/* @__PURE__ */ x("div", {
 							className: "pf:min-w-0 pf:flex-1 pf:text-copy-12 pf:text-soft-pearl-800 pf:wrap-anywhere",
-							children: L.meta
+							children: R.meta
 						}),
-						L.versionConfig && /* @__PURE__ */ x(s, {
+						R.versionConfig && /* @__PURE__ */ x(s, {
 							trigger: /* @__PURE__ */ x(t, {
 								size: "sm",
 								variant: "tertiary",
-								children: L.versionConfig.items.find((e) => e.id === L.versionConfig?.value)?.label ?? "Version"
+								children: R.versionConfig.items.find((e) => e.id === R.versionConfig?.value)?.label ?? "Version"
 							}),
 							menu: { groups: [{
 								id: "versions",
-								items: L.versionConfig.items.map((t) => ({
+								items: R.versionConfig.items.map((t) => ({
 									type: "action",
 									id: t.id,
 									label: t.label,
-									leadingIcon: t.id === L.versionConfig?.value ? /* @__PURE__ */ x(e, {}) : void 0,
-									onClick: () => L.versionConfig?.onValueChange(t.id)
+									leadingIcon: t.id === R.versionConfig?.value ? /* @__PURE__ */ x(e, {}) : void 0,
+									onClick: () => R.versionConfig?.onValueChange(t.id)
 								}))
 							}] }
 						}),
-						L.actionConfig?.onDownload && /* @__PURE__ */ x(t, {
+						R.actionConfig?.onDownload && /* @__PURE__ */ x(t, {
 							size: "sm",
 							variant: "secondary",
-							onClick: L.actionConfig.onDownload,
-							disabled: L.stateConfig !== void 0 && L.stateConfig.status !== "ready",
+							onClick: R.actionConfig.onDownload,
+							disabled: R.stateConfig !== void 0 && R.stateConfig.status !== "ready",
 							children: "Download"
 						}),
-						L.actionConfig?.onCopy && /* @__PURE__ */ x(n, {
+						R.actionConfig?.onCopy && /* @__PURE__ */ x(n, {
 							size: "sm",
 							label: "Copy artifact",
-							onClick: L.actionConfig.onCopy,
-							disabled: L.stateConfig !== void 0 && L.stateConfig.status !== "ready",
+							onClick: R.actionConfig.onCopy,
+							disabled: R.stateConfig !== void 0 && R.stateConfig.status !== "ready",
 							children: /* @__PURE__ */ x(r, {})
 						}),
-						L.actionConfig?.menu && /* @__PURE__ */ x(s, {
-							menu: L.actionConfig.menu,
+						R.actionConfig?.menu && /* @__PURE__ */ x(s, {
+							menu: R.actionConfig.menu,
 							trigger: /* @__PURE__ */ x(n, {
 								size: "sm",
 								label: "Artifact actions",
@@ -213,16 +239,16 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 				}),
 				/* @__PURE__ */ x("div", {
 					ref: I,
-					id: J,
+					id: Y,
 					role: "tabpanel",
-					"aria-labelledby": H.includes(L) ? q : void 0,
-					"aria-label": H.includes(L) ? void 0 : L.title,
-					"aria-busy": L.stateConfig?.status === "loading" || L.stateConfig?.status === "generating" || void 0,
+					"aria-labelledby": U.includes(R) ? J : void 0,
+					"aria-label": U.includes(R) ? void 0 : R.title,
+					"aria-busy": R.stateConfig?.status === "loading" || R.stateConfig?.status === "generating" || void 0,
 					tabIndex: 0,
 					className: "pf:min-w-0 pf:flex-1 pf:overflow-auto pf:overscroll-contain pf:p-2xl pf:focus-visible:outline-2 pf:focus-visible:-outline-offset-2 pf:focus-visible:outline-blue-700",
-					children: L.stateConfig?.status === "loading" ? /* @__PURE__ */ S("div", {
+					children: R.stateConfig?.status === "loading" ? /* @__PURE__ */ S("div", {
 						role: "status",
-						"aria-label": L.stateConfig.label ?? "Loading artifact",
+						"aria-label": R.stateConfig.label ?? "Loading artifact",
 						className: "pf:flex pf:flex-col pf:gap-lg",
 						children: [
 							/* @__PURE__ */ x(o, { width: "40%" }),
@@ -235,26 +261,26 @@ function w({ label: w, items: T, value: E, onValueChange: D, onCloseTab: O, onCl
 							/* @__PURE__ */ x(o, { width: "85%" }),
 							/* @__PURE__ */ x(o, { width: "70%" })
 						]
-					}) : L.stateConfig?.status === "failed" ? /* @__PURE__ */ x("div", {
+					}) : R.stateConfig?.status === "failed" ? /* @__PURE__ */ x("div", {
 						role: "status",
 						className: "pf:flex pf:min-h-[240px] pf:h-full pf:items-center pf:justify-center",
 						children: /* @__PURE__ */ x(c, {
 							kind: "error",
 							title: "Couldn’t load this artifact",
-							description: L.stateConfig.message,
+							description: R.stateConfig.message,
 							primaryAction: {
 								label: "Retry",
-								onClick: L.stateConfig.onRetry
+								onClick: R.stateConfig.onRetry
 							}
 						})
-					}) : /* @__PURE__ */ S(b, { children: [L.stateConfig?.status === "generating" && /* @__PURE__ */ S("div", {
+					}) : /* @__PURE__ */ S(b, { children: [R.stateConfig?.status === "generating" && /* @__PURE__ */ S("div", {
 						role: "status",
 						className: "pf:flex pf:items-center pf:gap-sm pf:mb-md pf:text-copy-12",
 						children: [/* @__PURE__ */ x(i, {
 							value: null,
 							label: "Generating artifact"
-						}), L.stateConfig.label ?? "Generating…"]
-					}), L.content] })
+						}), R.stateConfig.label ?? "Generating…"]
+					}), R.content] })
 				})
 			]
 		})]

package/dist/components/attachment/Attachment.d.ts

@@ -1,7 +1,3 @@
 import type { AttachmentProps } from './attachment-types.js';
-/** ATTACH-01: Figma569:26294. 28px pill, radius6, hairline; original filename, max240.
- * ATTACH-02: Failed uploads persist with a red border/status icon; clicking retries.
- * ATTACH-03: Removal is a separate control, available while uploading; host owns cancellation.
- * ATTACH-04: Uploaded inputs are attachments; agent-generated outputs are artifacts.
- */
-export declare const Attachment: ({ item, layout, onDownload, saveConfig, onPreview, onRetry, onRemove, previewConfig, className, }: AttachmentProps) => import("react/jsx-runtime").JSX.Element;
+/** A host preview callback takes precedence; otherwise use the shared preview dialog. */
+export declare function Attachment(props: AttachmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/attachment/Attachment.js

@@ -4,73 +4,96 @@ import { ProgressRing as t } from "../status-icons/ProgressRing.js";
 import { XCloseIcon as n } from "../icons/XCloseIcon.js";
 import { Popover as r } from "../popover/Popover.js";
 import { StatusFailedIcon as i } from "../status-icons/StatusFailedIcon.js";
-import { FileTypeHelper as a } from "../file-types/file-type-helper.js";
-import { attachmentBodyClass as o, attachmentShellClass as s } from "./attachment-class-names.js";
-import { AttachmentCard as c } from "./AttachmentCard.js";
-import l from "clsx";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Dialog as a } from "../dialog/Dialog.js";
+import { FileTypeHelper as o } from "../file-types/file-type-helper.js";
+import { safeHref as s } from "../inline-reference/safe-href.js";
+import { attachmentBodyClass as c, attachmentShellClass as l } from "./attachment-class-names.js";
+import { AttachmentCard as u } from "./AttachmentCard.js";
+import d from "clsx";
+import { useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/attachment/Attachment.tsx
-var p = ({ item: p, layout: m = "pill", onDownload: h, saveConfig: g, onPreview: _, onRetry: v, onRemove: y, previewConfig: b, className: x }) => {
-	if (m === "card") return /* @__PURE__ */ d(c, {
-		item: p,
+var g = ({ item: a, layout: s = "pill", onDownload: f, saveConfig: g, onPreview: _, onRetry: v, onRemove: y, previewConfig: b, className: x }) => {
+	if (s === "card") return /* @__PURE__ */ m(u, {
+		item: a,
 		onPreview: _,
 		onRetry: v,
 		onRemove: y,
-		onDownload: h,
+		onDownload: f,
 		saveConfig: g,
-		className: x
+		className: x,
+		previewConfig: b
 	});
-	let S = p.upload?.status ?? "ready", C = S === "failed", w = C ? v : S === "ready" ? _ : void 0, T = /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+	let S = a.upload?.status ?? "ready", C = S === "failed", w = C ? v : S === "ready" ? _ : void 0, T = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
 		className: "pf:flex pf:shrink-0 pf:size-xl pf:items-center pf:justify-center",
-		children: p.upload?.status === "uploading" ? /* @__PURE__ */ d(t, {
-			value: p.upload.progress,
-			label: `Uploading ${p.filename}`
-		}) : C ? /* @__PURE__ */ d(i, { size: 16 }) : /* @__PURE__ */ d(e, {
+		children: a.upload?.status === "uploading" ? /* @__PURE__ */ m(t, {
+			value: a.upload.progress,
+			label: `Uploading ${a.filename}`
+		}) : C ? /* @__PURE__ */ m(i, { size: 16 }) : /* @__PURE__ */ m(e, {
 			size: 16,
-			kind: p.kind === "folder" ? "folder" : p.kind === "image" || p.mediaType?.startsWith("image/") ? "image" : a.fromFilename(p.filename)
+			kind: a.kind === "folder" ? "folder" : a.kind === "image" || a.mediaType?.startsWith("image/") ? "image" : o.fromFilename(a.filename)
 		})
-	}), /* @__PURE__ */ d("span", {
+	}), /* @__PURE__ */ m("span", {
 		className: "pf:min-w-0 pf:truncate",
-		children: p.filename
-	})] }), E = w || S === "ready" && b ? /* @__PURE__ */ d("button", {
+		children: a.filename
+	})] }), E = w || S === "ready" && b ? /* @__PURE__ */ m("button", {
 		type: "button",
-		className: l(o, "pf:cursor-pointer"),
-		"aria-label": `${C ? "Retry" : "Preview"} ${p.filename}`,
-		onClick: () => w?.(p),
+		className: d(c, "pf:cursor-pointer"),
+		"aria-label": `${C ? "Retry" : "Preview"} ${a.filename}`,
+		onClick: () => w?.(a),
 		children: T
-	}) : /* @__PURE__ */ d("span", {
-		className: o,
+	}) : /* @__PURE__ */ m("span", {
+		className: c,
 		children: T
 	});
-	return /* @__PURE__ */ f("span", {
+	return /* @__PURE__ */ h("span", {
 		"data-pf-attachment": "",
 		"data-status": S,
-		className: l(s, C ? "pf:border pf:border-red-300 pf:text-red-800" : "pf:border-[0.5px] pf:border-soft-pearl-300", S === "uploading" ? "pf:text-soft-pearl-800" : !C && "pf:text-soft-pearl-1000", x),
-		title: p.upload?.status === "failed" ? `${p.filename}: ${p.upload.error}` : p.filename,
+		className: d(l, C ? "pf:border pf:border-red-300 pf:text-red-800" : "pf:border-[0.5px] pf:border-soft-pearl-300", S === "uploading" ? "pf:text-soft-pearl-800" : !C && "pf:text-soft-pearl-1000", x),
 		children: [
-			S === "ready" && b ? /* @__PURE__ */ d(r, {
+			S === "ready" && b ? /* @__PURE__ */ m(r, {
 				mode: "preview",
-				title: p.filename,
+				title: a.filename,
 				trigger: E,
 				loadingConfig: { isLoading: b.isLoading ?? !1 },
 				children: b.content
 			}) : E,
-			p.upload?.status === "failed" && /* @__PURE__ */ d("span", {
+			a.upload?.status === "failed" && /* @__PURE__ */ m("span", {
 				className: "pf:sr-only",
 				role: "status",
-				children: p.upload.error
+				children: a.upload.error
 			}),
-			y && /* @__PURE__ */ d("button", {
+			y && /* @__PURE__ */ m("button", {
 				type: "button",
 				className: "pf:flex pf:shrink-0 pf:size-xl pf:items-center pf:justify-center pf:rounded-xs pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
-				"aria-label": `Remove ${p.filename}`,
+				"aria-label": `Remove ${a.filename}`,
 				onClick: () => {
-					y(p);
+					y(a);
 				},
-				children: /* @__PURE__ */ d(n, { size: 16 })
+				children: /* @__PURE__ */ m(n, { size: 16 })
 			})
 		]
 	});
 };
+function _(e) {
+	let [t, n] = f(!1), r = s(e.item.url), i = e.item.kind === "image" || e.item.mediaType?.startsWith("image/"), o = e.previewConfig ?? (r && i ? { content: /* @__PURE__ */ m("img", {
+		src: r,
+		alt: e.item.filename,
+		className: "pf:block pf:max-w-full pf:max-h-[60dvh] pf:object-contain pf:mx-auto"
+	}) } : void 0);
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(g, {
+		...e,
+		previewConfig: o,
+		onPreview: e.onPreview ?? (o ? () => {
+			n(!0);
+		} : void 0)
+	}), /* @__PURE__ */ m(a, {
+		open: t,
+		onOpenChange: n,
+		title: e.item.filename,
+		size: "lg",
+		children: o?.content
+	})] });
+}
 //#endregion
-export { p as Attachment };
+export { _ as Attachment };

package/dist/components/attachment/AttachmentCard.d.ts

@@ -1,3 +1,3 @@
 import type { AttachmentProps } from './attachment-types.js';
 /** ATTACH-05: Figma1445:98012/98094. Card attachments retain real names and separate saved/download actions. */
-export declare function AttachmentCard({ item, onPreview, onRetry, onRemove, onDownload, saveConfig, className, }: AttachmentProps): import("react/jsx-runtime").JSX.Element;
+export declare function AttachmentCard({ item, onPreview, onRetry, onRemove, onDownload, saveConfig, className, previewConfig, }: AttachmentProps): import("react/jsx-runtime").JSX.Element;