@namroodinc/liquid-editorial 0.1.7 → 0.1.9

package/dist/components/AssetCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Icon","useState","useCallback","_Fragment","Skeleton","forwardRef","Button","require_Icon","require_components_Button_index","require_components_Skeleton_index","react","react_jsx_runtime","Placeholder","icon","label","AssetImage","status","setStatus","ratio","setRatio","adopt","image","imageRef","alt","event","AssetCard","rest","className","fit","isSelected","isPending","src","actions","onSelect","name","meta","description","footer","AssetCardSkeleton","delay","index"],"sources":["../../../src/components/AssetCard/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nexport interface AssetCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name or crop label, displayed in full. */\n  name: string;\n  /** Thumbnail source. Omit to display the fallback icon. */\n  src?: string;\n  /** Alternative text for the preview; empty when the image is decorative. */\n  alt?: string;\n  /** Fallback for assets without a thumbnail, such as videos and PDFs. */\n  icon?: IconName;\n  /** Fill the frame, or show the complete image on an inset preview stage. */\n  fit?: \"cover\" | \"contain\";\n  /** Dimensions, size, ratio, or other metadata below the name. */\n  meta?: ReactNode;\n  /** Supporting content below the metadata, such as a source file name. */\n  description?: ReactNode;\n  /** Paint the selection fill and rail without changing the card's size. */\n  isSelected?: boolean;\n  /** Show an uploading overlay and disable the thumbnail action. */\n  isPending?: boolean;\n  /** Makes the thumbnail a selection toggle, independent of overlay and footer controls. */\n  onSelect?: () => void;\n  /** Badges, buttons, or menus pinned across the top of the thumbnail. */\n  actions?: ReactNode;\n  /** Actions or content below the card's text. */\n  footer?: ReactNode;\n}\n\nfunction Placeholder({ icon, label }: { icon: IconName; label?: string }) {\n  return <span className=\"ds-asset-card__placeholder ds-asset-tile__placeholder\"><Icon name={icon} size={24} aria-label={label} /></span>;\n}\n\n/** Remount for each source so failed and loaded states cannot leak to another image. */\nfunction AssetImage({ src, alt }: { src: string; alt: string }) {\n  const [status, setStatus] = useState<\"loading\" | \"loaded\" | \"failed\">(\"loading\");\n  // The picture's own shape lets a contained preview fill the stage exactly.\n  const [ratio, setRatio] = useState<number>();\n  const adopt = useCallback((image: HTMLImageElement) => {\n    setStatus(\"loaded\");\n    if (image.naturalWidth && image.naturalHeight) setRatio(image.naturalWidth / image.naturalHeight);\n  }, []);\n  // A cached image can finish before onLoad is attached. Only success is read\n  // here: an SVG without intrinsic size and a deferred lazy image also report\n  // a zero naturalWidth, so failure is left to the error event.\n  const imageRef = useCallback((image: HTMLImageElement | null) => {\n    if (!image?.complete) return;\n    if (image.naturalWidth > 0) adopt(image);\n    else image.decode().then(() => adopt(image), () => {});\n  }, [adopt]);\n\n  if (status === \"failed\") {\n    return <Placeholder icon=\"alert-triangle\" label={alt ? `${alt} (preview unavailable)` : \"Preview unavailable\"} />;\n  }\n\n  return <>\n    {status === \"loading\" && <Skeleton shape=\"block\" className=\"ds-asset-card__thumb-skeleton ds-asset-tile__thumb-skeleton\" />}\n    <img\n      ref={imageRef}\n      src={src}\n      alt={alt}\n      loading=\"lazy\"\n      data-loaded={status === \"loaded\" || undefined}\n      style={ratio ? ({ \"--asset-ratio\": ratio } as CSSProperties) : undefined}\n      onLoad={(event) => adopt(event.currentTarget)}\n      onError={() => setStatus(\"failed\")}\n    />\n  </>;\n}\n\n/** Shared presentation for assets, source files, and crop variants. */\nexport const AssetCard = forwardRef<HTMLDivElement, AssetCardProps>(function AssetCard(\n  {\n    name,\n    src,\n    alt = \"\",\n    icon = \"image\",\n    fit = \"cover\",\n    meta,\n    description,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    footer,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={[\"ds-asset-card\", \"ds-asset-tile\", className].filter(Boolean).join(\" \")}\n      data-fit={fit}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-card__thumb ds-asset-tile__thumb\">\n        {src ? <AssetImage key={src} src={src} alt={alt} /> : <Placeholder icon={icon} />}\n        {isPending && (\n          <span className=\"ds-asset-card__pending ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-card__spinner ds-asset-tile__spinner ds-icon--spin\" />\n            <span className=\"ds-asset-card__pending-label ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n        {/* Slots render only for truthy content, so `count && …` never leaves a stray 0. */}\n        {actions ? <div className=\"ds-asset-card__actions ds-asset-tile__actions\">{actions}</div> : null}\n        {onSelect && (\n          <Button\n            variant=\"simple\"\n            className=\"ds-asset-card__hit ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            aria-label={name}\n            isDisabled={isPending}\n            onClick={onSelect}\n          />\n        )}\n      </div>\n      <div className=\"ds-asset-card__text ds-asset-tile__text\">\n        <span className=\"ds-asset-card__name ds-asset-tile__name\">{name}</span>\n        {meta ? <div className=\"ds-asset-card__meta ds-asset-tile__meta\">{meta}</div> : null}\n        {description ? <div className=\"ds-asset-card__description\">{description}</div> : null}\n      </div>\n      {footer ? <div className=\"ds-asset-card__footer\">{footer}</div> : null}\n    </div>\n  );\n});\n\nexport interface AssetCardSkeletonProps {\n  /** Position in the collection, used for the skeleton stagger. */\n  index?: number;\n  /** Reserve the description line, for cards that pass `description`. */\n  description?: boolean;\n  /** Reserve a footer row the height of a small Button, for cards that pass `footer`. */\n  footer?: boolean;\n}\n\n/** A loading card. Match its slots to the real cards so nothing moves when they arrive. */\nexport function AssetCardSkeleton({ index = 0, description = false, footer = false }: AssetCardSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-card ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-card__thumb ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-card__text ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n        {description && <Skeleton shape=\"text\" width=\"65%\" style={delay} />}\n      </div>\n      {footer && (\n        <div className=\"ds-asset-card__footer\">\n          <Skeleton shape=\"block\" width=\"45%\" style={{ ...delay, blockSize: \"var(--field-height-sm)\" }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/AssetCard/index.d.cts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+export interface AssetCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
+    /** File name or crop label, displayed in full. */
+    name: string;
+    /** Thumbnail source. Omit to display the fallback icon. */
+    src?: string;
+    /** Alternative text for the preview; empty when the image is decorative. */
+    alt?: string;
+    /** Fallback for assets without a thumbnail, such as videos and PDFs. */
+    icon?: IconName;
+    /** Fill the frame, or show the complete image on an inset preview stage. */
+    fit?: "cover" | "contain";
+    /** Dimensions, size, ratio, or other metadata below the name. */
+    meta?: ReactNode;
+    /** Supporting content below the metadata, such as a source file name. */
+    description?: ReactNode;
+    /** Paint the selection fill and rail without changing the card's size. */
+    isSelected?: boolean;
+    /** Show an uploading overlay and disable the thumbnail action. */
+    isPending?: boolean;
+    /** Makes the thumbnail a selection toggle, independent of overlay and footer controls. */
+    onSelect?: () => void;
+    /** Badges, buttons, or menus pinned across the top of the thumbnail. */
+    actions?: ReactNode;
+    /** Actions or content below the card's text. */
+    footer?: ReactNode;
+}
+/** Shared presentation for assets, source files, and crop variants. */
+export declare const AssetCard: import("react").ForwardRefExoticComponent<AssetCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetCardSkeletonProps {
+    /** Position in the collection, used for the skeleton stagger. */
+    index?: number;
+    /** Reserve the description line, for cards that pass `description`. */
+    description?: boolean;
+    /** Reserve a footer row the height of a small Button, for cards that pass `footer`. */
+    footer?: boolean;
+}
+/** A loading card. Match its slots to the real cards so nothing moves when they arrive. */
+export declare function AssetCardSkeleton({ index, description, footer }: AssetCardSkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/AssetCard/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2CD,uEAAuE;AACvE,eAAO,MAAM,SAAS,2GAyDpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,2FAA2F;AAC3F,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,WAAmB,EAAE,MAAc,EAAE,EAAE,sBAAsB,+BAiB3G"}

package/dist/components/AssetCard/index.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+export interface AssetCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
+    /** File name or crop label, displayed in full. */
+    name: string;
+    /** Thumbnail source. Omit to display the fallback icon. */
+    src?: string;
+    /** Alternative text for the preview; empty when the image is decorative. */
+    alt?: string;
+    /** Fallback for assets without a thumbnail, such as videos and PDFs. */
+    icon?: IconName;
+    /** Fill the frame, or show the complete image on an inset preview stage. */
+    fit?: "cover" | "contain";
+    /** Dimensions, size, ratio, or other metadata below the name. */
+    meta?: ReactNode;
+    /** Supporting content below the metadata, such as a source file name. */
+    description?: ReactNode;
+    /** Paint the selection fill and rail without changing the card's size. */
+    isSelected?: boolean;
+    /** Show an uploading overlay and disable the thumbnail action. */
+    isPending?: boolean;
+    /** Makes the thumbnail a selection toggle, independent of overlay and footer controls. */
+    onSelect?: () => void;
+    /** Badges, buttons, or menus pinned across the top of the thumbnail. */
+    actions?: ReactNode;
+    /** Actions or content below the card's text. */
+    footer?: ReactNode;
+}
+/** Shared presentation for assets, source files, and crop variants. */
+export declare const AssetCard: import("react").ForwardRefExoticComponent<AssetCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetCardSkeletonProps {
+    /** Position in the collection, used for the skeleton stagger. */
+    index?: number;
+    /** Reserve the description line, for cards that pass `description`. */
+    description?: boolean;
+    /** Reserve a footer row the height of a small Button, for cards that pass `footer`. */
+    footer?: boolean;
+}
+/** A loading card. Match its slots to the real cards so nothing moves when they arrive. */
+export declare function AssetCardSkeleton({ index, description, footer }: AssetCardSkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AssetCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AssetCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2CD,uEAAuE;AACvE,eAAO,MAAM,SAAS,2GAyDpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,2FAA2F;AAC3F,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,WAAmB,EAAE,MAAc,EAAE,EAAE,sBAAsB,+BAiB3G"}

package/dist/components/AssetCard/index.js

@@ -0,0 +1,159 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as t } from "../Button/index.js";
+import { Skeleton as n } from "../Skeleton/index.js";
+import { forwardRef as r, useCallback as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/AssetCard/index.tsx
+function l({ icon: t, label: n }) {
+	return /* @__PURE__ */ s("span", {
+		className: "ds-asset-card__placeholder ds-asset-tile__placeholder",
+		children: /* @__PURE__ */ s(e, {
+			name: t,
+			size: 24,
+			"aria-label": n
+		})
+	});
+}
+function u({ src: e, alt: t }) {
+	let [r, u] = a("loading"), [d, f] = a(), p = i((e) => {
+		u("loaded"), e.naturalWidth && e.naturalHeight && f(e.naturalWidth / e.naturalHeight);
+	}, []), m = i((e) => {
+		e?.complete && (e.naturalWidth > 0 ? p(e) : e.decode().then(() => p(e), () => {}));
+	}, [p]);
+	return r === "failed" ? /* @__PURE__ */ s(l, {
+		icon: "alert-triangle",
+		label: t ? `${t} (preview unavailable)` : "Preview unavailable"
+	}) : /* @__PURE__ */ c(o, { children: [r === "loading" && /* @__PURE__ */ s(n, {
+		shape: "block",
+		className: "ds-asset-card__thumb-skeleton ds-asset-tile__thumb-skeleton"
+	}), /* @__PURE__ */ s("img", {
+		ref: m,
+		src: e,
+		alt: t,
+		loading: "lazy",
+		"data-loaded": r === "loaded" || void 0,
+		style: d ? { "--asset-ratio": d } : void 0,
+		onLoad: (e) => p(e.currentTarget),
+		onError: () => u("failed")
+	})] });
+}
+var d = r(function({ name: n, src: r, alt: i = "", icon: a = "image", fit: o = "cover", meta: d, description: f, isSelected: p = !1, isPending: m = !1, onSelect: h, actions: g, footer: _, className: v, ...y }, b) {
+	return /* @__PURE__ */ c("div", {
+		ref: b,
+		className: [
+			"ds-asset-card",
+			"ds-asset-tile",
+			v
+		].filter(Boolean).join(" "),
+		"data-fit": o,
+		"data-selected": p || void 0,
+		"data-pending": m || void 0,
+		...y,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "ds-asset-card__thumb ds-asset-tile__thumb",
+				children: [
+					r ? /* @__PURE__ */ s(u, {
+						src: r,
+						alt: i
+					}, r) : /* @__PURE__ */ s(l, { icon: a }),
+					m && /* @__PURE__ */ c("span", {
+						className: "ds-asset-card__pending ds-asset-tile__pending",
+						role: "status",
+						children: [/* @__PURE__ */ s(e, {
+							name: "spinner",
+							size: 20,
+							className: "ds-asset-card__spinner ds-asset-tile__spinner ds-icon--spin"
+						}), /* @__PURE__ */ s("span", {
+							className: "ds-asset-card__pending-label ds-asset-tile__pending-label",
+							children: "Uploading"
+						})]
+					}),
+					g ? /* @__PURE__ */ s("div", {
+						className: "ds-asset-card__actions ds-asset-tile__actions",
+						children: g
+					}) : null,
+					h && /* @__PURE__ */ s(t, {
+						variant: "simple",
+						className: "ds-asset-card__hit ds-asset-tile__hit",
+						"aria-pressed": p,
+						"aria-label": n,
+						isDisabled: m,
+						onClick: h
+					})
+				]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "ds-asset-card__text ds-asset-tile__text",
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: "ds-asset-card__name ds-asset-tile__name",
+						children: n
+					}),
+					d ? /* @__PURE__ */ s("div", {
+						className: "ds-asset-card__meta ds-asset-tile__meta",
+						children: d
+					}) : null,
+					f ? /* @__PURE__ */ s("div", {
+						className: "ds-asset-card__description",
+						children: f
+					}) : null
+				]
+			}),
+			_ ? /* @__PURE__ */ s("div", {
+				className: "ds-asset-card__footer",
+				children: _
+			}) : null
+		]
+	});
+});
+function f({ index: e = 0, description: t = !1, footer: r = !1 }) {
+	let i = { animationDelay: `calc(var(--skeleton-stagger) * ${e})` };
+	return /* @__PURE__ */ c("div", {
+		className: "ds-asset-card ds-asset-tile",
+		"data-loading": "true",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ s(n, {
+				shape: "block",
+				className: "ds-asset-card__thumb ds-asset-tile__thumb",
+				style: i
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "ds-asset-card__text ds-asset-tile__text",
+				children: [
+					/* @__PURE__ */ s(n, {
+						shape: "text",
+						width: "80%",
+						style: i
+					}),
+					/* @__PURE__ */ s(n, {
+						shape: "text",
+						width: "45%",
+						style: i
+					}),
+					t && /* @__PURE__ */ s(n, {
+						shape: "text",
+						width: "65%",
+						style: i
+					})
+				]
+			}),
+			r && /* @__PURE__ */ s("div", {
+				className: "ds-asset-card__footer",
+				children: /* @__PURE__ */ s(n, {
+					shape: "block",
+					width: "45%",
+					style: {
+						...i,
+						blockSize: "var(--field-height-sm)"
+					}
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { d as AssetCard, f as AssetCardSkeleton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/AssetCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","Placeholder","icon","label","AssetImage","status","setStatus","useState","ratio","setRatio","adopt","useCallback","image","imageRef","alt","Skeleton","event","AssetCard","forwardRef","rest","className","fit","isSelected","isPending","src","actions","onSelect","Button","name","meta","description","footer","AssetCardSkeleton","delay","index"],"sources":["../../../src/components/AssetCard/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nexport interface AssetCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name or crop label, displayed in full. */\n  name: string;\n  /** Thumbnail source. Omit to display the fallback icon. */\n  src?: string;\n  /** Alternative text for the preview; empty when the image is decorative. */\n  alt?: string;\n  /** Fallback for assets without a thumbnail, such as videos and PDFs. */\n  icon?: IconName;\n  /** Fill the frame, or show the complete image on an inset preview stage. */\n  fit?: \"cover\" | \"contain\";\n  /** Dimensions, size, ratio, or other metadata below the name. */\n  meta?: ReactNode;\n  /** Supporting content below the metadata, such as a source file name. */\n  description?: ReactNode;\n  /** Paint the selection fill and rail without changing the card's size. */\n  isSelected?: boolean;\n  /** Show an uploading overlay and disable the thumbnail action. */\n  isPending?: boolean;\n  /** Makes the thumbnail a selection toggle, independent of overlay and footer controls. */\n  onSelect?: () => void;\n  /** Badges, buttons, or menus pinned across the top of the thumbnail. */\n  actions?: ReactNode;\n  /** Actions or content below the card's text. */\n  footer?: ReactNode;\n}\n\nfunction Placeholder({ icon, label }: { icon: IconName; label?: string }) {\n  return <span className=\"ds-asset-card__placeholder ds-asset-tile__placeholder\"><Icon name={icon} size={24} aria-label={label} /></span>;\n}\n\n/** Remount for each source so failed and loaded states cannot leak to another image. */\nfunction AssetImage({ src, alt }: { src: string; alt: string }) {\n  const [status, setStatus] = useState<\"loading\" | \"loaded\" | \"failed\">(\"loading\");\n  // The picture's own shape lets a contained preview fill the stage exactly.\n  const [ratio, setRatio] = useState<number>();\n  const adopt = useCallback((image: HTMLImageElement) => {\n    setStatus(\"loaded\");\n    if (image.naturalWidth && image.naturalHeight) setRatio(image.naturalWidth / image.naturalHeight);\n  }, []);\n  // A cached image can finish before onLoad is attached. Only success is read\n  // here: an SVG without intrinsic size and a deferred lazy image also report\n  // a zero naturalWidth, so failure is left to the error event.\n  const imageRef = useCallback((image: HTMLImageElement | null) => {\n    if (!image?.complete) return;\n    if (image.naturalWidth > 0) adopt(image);\n    else image.decode().then(() => adopt(image), () => {});\n  }, [adopt]);\n\n  if (status === \"failed\") {\n    return <Placeholder icon=\"alert-triangle\" label={alt ? `${alt} (preview unavailable)` : \"Preview unavailable\"} />;\n  }\n\n  return <>\n    {status === \"loading\" && <Skeleton shape=\"block\" className=\"ds-asset-card__thumb-skeleton ds-asset-tile__thumb-skeleton\" />}\n    <img\n      ref={imageRef}\n      src={src}\n      alt={alt}\n      loading=\"lazy\"\n      data-loaded={status === \"loaded\" || undefined}\n      style={ratio ? ({ \"--asset-ratio\": ratio } as CSSProperties) : undefined}\n      onLoad={(event) => adopt(event.currentTarget)}\n      onError={() => setStatus(\"failed\")}\n    />\n  </>;\n}\n\n/** Shared presentation for assets, source files, and crop variants. */\nexport const AssetCard = forwardRef<HTMLDivElement, AssetCardProps>(function AssetCard(\n  {\n    name,\n    src,\n    alt = \"\",\n    icon = \"image\",\n    fit = \"cover\",\n    meta,\n    description,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    footer,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={[\"ds-asset-card\", \"ds-asset-tile\", className].filter(Boolean).join(\" \")}\n      data-fit={fit}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-card__thumb ds-asset-tile__thumb\">\n        {src ? <AssetImage key={src} src={src} alt={alt} /> : <Placeholder icon={icon} />}\n        {isPending && (\n          <span className=\"ds-asset-card__pending ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-card__spinner ds-asset-tile__spinner ds-icon--spin\" />\n            <span className=\"ds-asset-card__pending-label ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n        {/* Slots render only for truthy content, so `count && …` never leaves a stray 0. */}\n        {actions ? <div className=\"ds-asset-card__actions ds-asset-tile__actions\">{actions}</div> : null}\n        {onSelect && (\n          <Button\n            variant=\"simple\"\n            className=\"ds-asset-card__hit ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            aria-label={name}\n            isDisabled={isPending}\n            onClick={onSelect}\n          />\n        )}\n      </div>\n      <div className=\"ds-asset-card__text ds-asset-tile__text\">\n        <span className=\"ds-asset-card__name ds-asset-tile__name\">{name}</span>\n        {meta ? <div className=\"ds-asset-card__meta ds-asset-tile__meta\">{meta}</div> : null}\n        {description ? <div className=\"ds-asset-card__description\">{description}</div> : null}\n      </div>\n      {footer ? <div className=\"ds-asset-card__footer\">{footer}</div> : null}\n    </div>\n  );\n});\n\nexport interface AssetCardSkeletonProps {\n  /** Position in the collection, used for the skeleton stagger. */\n  index?: number;\n  /** Reserve the description line, for cards that pass `description`. */\n  description?: boolean;\n  /** Reserve a footer row the height of a small Button, for cards that pass `footer`. */\n  footer?: boolean;\n}\n\n/** A loading card. Match its slots to the real cards so nothing moves when they arrive. */\nexport function AssetCardSkeleton({ index = 0, description = false, footer = false }: AssetCardSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-card ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-card__thumb ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-card__text ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n        {description && <Skeleton shape=\"text\" width=\"65%\" style={delay} />}\n      </div>\n      {footer && (\n        <div className=\"ds-asset-card__footer\">\n          <Skeleton shape=\"block\" width=\"45%\" style={{ ...delay, blockSize: \"var(--field-height-sm)\" }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/AssetCard/style.css

@@ -0,0 +1,204 @@
+@layer components {
+  /* Rules that predate AssetCard also match the AssetTile class hooks, so
+   * hand-written tile markup keeps its styling. */
+  :is(.ds-asset-card, .ds-asset-tile) {
+    position: relative;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--color-surface);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    /* The rail exists on every tile, so selecting one never shifts the grid. */
+    box-shadow: inset var(--rail-width) 0 0 0 transparent;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  /* Loading placeholders are not interactive, so they never take the hover fill. */
+  :is(.ds-asset-card, .ds-asset-tile):hover:not([data-pending], [data-loading]) {
+    background: var(--field-hover);
+  }
+
+  :is(.ds-asset-card, .ds-asset-tile)[data-selected] {
+    background: var(--color-primary-soft);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  :is(.ds-asset-card, .ds-asset-tile)[data-pending] {
+    opacity: 70%;
+  }
+
+  :is(.ds-asset-card__thumb, .ds-asset-tile__thumb) {
+    position: relative;
+    aspect-ratio: var(--asset-thumb-aspect);
+    overflow: hidden;
+    border-radius: var(--field-radius);
+    background: var(--field-rest);
+    display: grid;
+    place-content: center;
+  }
+
+  /* A loading card's thumbnail is a block Skeleton; keep the frame's shape
+   * rather than the Skeleton's fixed block height. */
+  :is(.ds-asset-card, .ds-asset-tile) > :is(.ds-asset-card__thumb, .ds-asset-tile__thumb).ds-skeleton {
+    block-size: auto;
+  }
+
+  /* Placeholder lines fill the line boxes of the text they stand in for. */
+  :is(.ds-asset-card, .ds-asset-tile)[data-loading] :is(.ds-asset-card__text, .ds-asset-tile__text) > .ds-skeleton {
+    block-size: calc(var(--font-size-xs) * var(--line-height-body));
+  }
+
+  :is(.ds-asset-card, .ds-asset-tile)[data-loading] :is(.ds-asset-card__text, .ds-asset-tile__text) > .ds-skeleton:first-child {
+    block-size: calc(var(--font-size-sm) * var(--line-height-body));
+  }
+
+  /* Direct children only, so images inside overlay actions keep their own styling. */
+  :is(.ds-asset-card__thumb, .ds-asset-tile__thumb) > img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  :is(.ds-asset-card__thumb, .ds-asset-tile__thumb) > img[data-loaded] {
+    opacity: 100%;
+  }
+
+  :is(.ds-asset-card__thumb-skeleton, .ds-asset-tile__thumb-skeleton) {
+    position: absolute;
+    inset: 0;
+    block-size: 100%;
+    border-radius: 0;
+  }
+
+  :is(.ds-asset-card__placeholder, .ds-asset-tile__placeholder) {
+    display: grid;
+    place-content: center;
+    color: var(--color-text-muted);
+  }
+
+  :is(.ds-asset-card__pending, .ds-asset-tile__pending) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  :is(.ds-asset-card__actions, .ds-asset-tile__actions) {
+    position: absolute;
+    inset-block-start: var(--space-2);
+    inset-inline: var(--space-2);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    pointer-events: none;
+  }
+
+  :is(.ds-asset-card__actions, .ds-asset-tile__actions) > * {
+    pointer-events: auto;
+  }
+
+  /* The whole thumbnail is the selection target; the name stays readable text
+   * underneath rather than being swallowed by the button. */
+  :is(.ds-asset-card, .ds-asset-tile) :is(.ds-asset-card__hit, .ds-asset-tile__hit).ds-button {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  :is(.ds-asset-card__hit, .ds-asset-tile__hit).ds-button:focus-visible {
+    outline-offset: -2px;
+  }
+
+  /* Selection reads on the tile, so Button's hover and pressed fills never
+   * paint over the thumbnail. */
+  :is(.ds-asset-card, .ds-asset-tile) :is(.ds-asset-card__hit, .ds-asset-tile__hit).ds-button:is(:hover, :active):not(:disabled) {
+    background: transparent;
+  }
+
+  :is(.ds-asset-card__text, .ds-asset-tile__text) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  :is(.ds-asset-card__name, .ds-asset-tile__name) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+    overflow-wrap: anywhere;
+  }
+
+  :is(.ds-asset-card__meta, .ds-asset-tile__meta) {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-body);
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-card__meta,
+  .ds-asset-card__description {
+    overflow-wrap: anywhere;
+  }
+
+  .ds-asset-card__description {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-body);
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-card__footer {
+    margin-block-start: auto;
+  }
+
+  .ds-asset-card[data-fit="contain"] .ds-asset-card__thumb {
+    background: repeating-linear-gradient(135deg, var(--color-canvas) 0 12px, var(--color-surface) 12px 24px);
+  }
+
+  /* The picture takes its own shape (`--asset-ratio`, set once it loads) at the
+   * largest size that fits inside the inset stage, scaling small renditions up.
+   * Equal logical insets with auto margins centre it in either direction. */
+  .ds-asset-card[data-fit="contain"] .ds-asset-card__thumb > img {
+    /* Sizing the content box lets the outline wrap the picture without a sliver. */
+    box-sizing: content-box;
+    inset: var(--space-3);
+    margin: auto;
+    inline-size: min(
+      100% - 2 * (var(--space-3) + var(--control-border-width)),
+      (100% / (var(--asset-thumb-aspect)) - 2 * (var(--space-3) + var(--control-border-width)))
+        * (var(--asset-ratio, var(--asset-thumb-aspect)))
+    );
+    block-size: auto;
+    aspect-ratio: var(--asset-ratio, var(--asset-thumb-aspect));
+    object-fit: contain;
+    border: var(--control-border-width) solid var(--color-text);
+    box-shadow: var(--shadow-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(.ds-asset-card, .ds-asset-tile),
+    :is(.ds-asset-card__thumb, .ds-asset-tile__thumb) > img {
+      transition: none;
+    }
+  }
+}

package/dist/components/AssetGrid/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../Grid/index.cjs"),r=require("../Skeleton/index.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(...e){return e.filter(Boolean).join(` `)}var s=(0,i.forwardRef)(function({isLoading:e=!1,loadingCount:t=8,className:r,children:i,...s},l){return(0,a.jsx)(n.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:o(`ds-asset-grid`,r),"aria-busy":e||void 0,...s,children:e?Array.from({length:t},(e,t)=>(0,a.jsx)(c,{index:t},t)):i})});function c({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,a.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(r.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,a.jsx)(r.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var l=(0,i.forwardRef)(function({name:n,src:s,icon:c=`image`,meta:l,isSelected:u=!1,isPending:d=!1,onSelect:f,actions:p,className:m,...h},g){let[_,v]=(0,i.useState)(!1),[y,b]=(0,i.useState)(!1),x=!!s&&!_;return(0,a.jsxs)(`div`,{ref:g,className:o(`ds-asset-tile`,m),"data-selected":u||void 0,"data-pending":d||void 0,...h,children:[(0,a.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[x?(0,a.jsxs)(a.Fragment,{children:[!y&&(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,a.jsx)(`img`,{src:s,alt:``,loading:`lazy`,"data-loaded":y||void 0,onLoad:()=>b(!0),onError:()=>v(!0)})]}):(0,a.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,a.jsx)(e.t,{name:_?`alert-triangle`:c,size:24})}),d&&(0,a.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,a.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,a.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),p&&(0,a.jsx)(`div`,{className:`ds-asset-tile__actions`,children:p}),f&&(0,a.jsx)(t.Button,{variant:`simple`,className:`ds-asset-tile__hit`,"aria-pressed":u,"aria-label":n,isDisabled:d,onClick:f})]}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(`span`,{className:`ds-asset-tile__name`,children:n}),l&&(0,a.jsx)(`span`,{className:`ds-asset-tile__meta`,children:l})]})]})});function u({title:t,description:n,action:r}){return(0,a.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,a.jsx)(e.t,{name:`image`,size:24}),(0,a.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,a.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=s,exports.AssetGridEmpty=u,exports.AssetTile=l,exports.AssetTileSkeleton=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Grid/index.cjs"),n=require("../AssetCard/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=(0,r.forwardRef)(function({isLoading:e=!1,loadingCount:r=8,loadingCard:o,className:s,children:c,...l},u){return(0,i.jsx)(t.Grid,{ref:u,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:a(`ds-asset-grid`,s),"aria-busy":e||void 0,...l,children:e?Array.from({length:r},(e,t)=>(0,i.jsx)(n.AssetCardSkeleton,{...o,index:t},t)):c})});function s({title:t,description:n,action:r}){return(0,i.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,i.jsx)(e.t,{name:`image`,size:24}),(0,i.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,i.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=o,exports.AssetGridEmpty=s,exports.AssetTile=n.AssetCard,exports.AssetTileSkeleton=n.AssetCardSkeleton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/AssetGrid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","Grid","Skeleton","useState","_Fragment","Icon","Button","require_Icon","require_components_Button_index","require_components_Grid_index","require_components_Skeleton_index","react","react_jsx_runtime","cx","parts","AssetGrid","rest","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","AssetTile","hasFailed","setHasFailed","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders placeholder tiles instead of children. The grid keeps its\n   * geometry, so nothing moves when the real assets arrive.\n   */\n  isLoading?: boolean;\n  /** How many placeholder tiles to show while loading. */\n  loadingCount?: number;\n  children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n  { isLoading = false, loadingCount = 8, className, children, ...rest },\n  ref,\n) {\n  return (\n    <Grid\n      ref={ref}\n      columns=\"auto\"\n      gap=\"md\"\n      minColumnWidth=\"var(--asset-tile-min-width)\"\n      className={cx(\"ds-asset-grid\", className)}\n      aria-busy={isLoading || undefined}\n      {...rest}\n    >\n      {isLoading\n        ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n        : children}\n    </Grid>\n  );\n});\n\nexport interface AssetTileSkeletonProps {\n  /** Position in the grid — drives the stagger, nothing else. */\n  index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n      </div>\n    </div>\n  );\n}\n\nexport interface AssetTileProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name, shown in full — asset names are how people find things again. */\n  name: string;\n  /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n  src?: string;\n  /** Glyph shown when there is no thumbnail, or while one fails to load. */\n  icon?: IconName;\n  /** Second line: dimensions, size, date — whatever the library sorts by. */\n  meta?: ReactNode;\n  /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n  isSelected?: boolean;\n  /** The asset is still uploading or processing: dimmed, with a spinner. */\n  isPending?: boolean;\n  /** Makes the whole tile a selection target. */\n  onSelect?: () => void;\n  /** Badges or a menu, pinned to the top of the thumbnail. */\n  actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n  {\n    name,\n    src,\n    icon = \"image\",\n    meta,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [hasFailed, setHasFailed] = useState(false);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const showImage = Boolean(src) && !hasFailed;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\"ds-asset-tile\", className)}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-tile__thumb\">\n        {showImage ? (\n          <>\n            {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n            <img\n              src={src}\n              alt=\"\"\n              loading=\"lazy\"\n              data-loaded={isLoaded || undefined}\n              onLoad={() => setIsLoaded(true)}\n              onError={() => setHasFailed(true)}\n            />\n          </>\n        ) : (\n          <span className=\"ds-asset-tile__placeholder\">\n            <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n          </span>\n        )}\n\n        {isPending && (\n          <span className=\"ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n            <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n\n        {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n        {onSelect && (\n          <Button\n            variant=\"simple\"\n            className=\"ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            aria-label={name}\n            isDisabled={isPending}\n            onClick={onSelect}\n          />\n        )}\n      </div>\n\n      <div className=\"ds-asset-tile__text\">\n        <span className=\"ds-asset-tile__name\">{name}</span>\n        {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n      </div>\n    </div>\n  );\n});\n\nexport interface AssetGridEmptyProps {\n  title: string;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n  return (\n    <div className=\"ds-asset-empty\">\n      <Icon name=\"image\" size={24} />\n      <span className=\"ds-asset-empty__title\">{title}</span>\n      {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n      {action}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["forwardRef","Grid","AssetCardSkeleton","Icon","require_Icon","require_components_Grid_index","require_components_AssetCard_index","react","react_jsx_runtime","cx","parts","AssetGrid","rest","className","isLoading","loadingCount","loadingCard","i","children","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport { AssetCardSkeleton, type AssetCardSkeletonProps } from \"../AssetCard\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders placeholder tiles instead of children. The grid keeps its\n   * geometry, so nothing moves when the real assets arrive.\n   */\n  isLoading?: boolean;\n  /** How many placeholder tiles to show while loading. */\n  loadingCount?: number;\n  /** Slots each placeholder reserves; match the cards that replace them. */\n  loadingCard?: Omit<AssetCardSkeletonProps, \"index\">;\n  children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n  { isLoading = false, loadingCount = 8, loadingCard, className, children, ...rest },\n  ref,\n) {\n  return (\n    <Grid\n      ref={ref}\n      columns=\"auto\"\n      gap=\"md\"\n      minColumnWidth=\"var(--asset-tile-min-width)\"\n      className={cx(\"ds-asset-grid\", className)}\n      aria-busy={isLoading || undefined}\n      {...rest}\n    >\n      {isLoading\n        ? Array.from({ length: loadingCount }, (_, i) => <AssetCardSkeleton key={i} {...loadingCard} index={i} />)\n        : children}\n    </Grid>\n  );\n});\n\n// Existing entry points remain aliases to the shared card implementation.\nexport { AssetCard as AssetTile, AssetCardSkeleton as AssetTileSkeleton } from \"../AssetCard\";\nexport type { AssetCardProps as AssetTileProps, AssetCardSkeletonProps as AssetTileSkeletonProps } from \"../AssetCard\";\n\nexport interface AssetGridEmptyProps {\n  title: string;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n  return (\n    <div className=\"ds-asset-empty\">\n      <Icon name=\"image\" size={24} />\n      <span className=\"ds-asset-empty__title\">{title}</span>\n      {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n      {action}\n    </div>\n  );\n}\n"],"mappings":"A,8OAUA,SAASS,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAmBA,IAAaC,GAAA,EAAYX,EAAAA,WAAAA,CAA2C,SAClE,CAAE,YAAY,GAAO,eAAe,EAAG,cAAa,YAAW,WAAU,GAAGY,GAC5E,EACA,CACA,OACE,EAAAJ,EAAA,IAAA,CAACP,EAAAA,KAAD,CACO,MACL,QAAQ,OACR,IAAI,KACJ,eAAe,8BACf,UAAWQ,EAAG,gBAAiBI,CAAS,EACxC,YAAWC,GAAa,IAAA,GACxB,GAAIF,EAEH,SAAAE,EACG,MAAM,KAAK,CAAE,OAAQC,CAAa,GAAI,EAAG,KAAM,EAAAP,EAAA,IAAA,CAACN,EAAAA,kBAAD,CAA2B,GAAIc,EAAa,MAAOC,CAAI,EAA/BA,CAA+B,CAAC,EACvGC,CACA,CAAA,CAEV,CAAC,EAaD,SAAgBC,EAAe,CAAE,QAAO,cAAa,UAA+B,CAClF,OACE,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,EAAK,CAAA,GAC9B,EAAAK,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAyB,SAAAY,CAAY,CAAA,EACpDC,IAAe,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAA+B,SAAAa,CAAkB,CAAA,EAChFC,CACE,C,EAET,C"}

package/dist/components/AssetGrid/index.d.cts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from "react";
-import type { IconName } from "../Icon/icons.cjs";
+import { type AssetCardSkeletonProps } from "../AssetCard/index.cjs";
 export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Renders placeholder tiles instead of children. The grid keeps its
@@ -8,6 +8,8 @@ export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
     isLoading?: boolean;
     /** How many placeholder tiles to show while loading. */
     loadingCount?: number;
+    /** Slots each placeholder reserves; match the cards that replace them. */
+    loadingCard?: Omit<AssetCardSkeletonProps, "index">;
     children?: ReactNode;
 }
 /**
@@ -15,35 +17,8 @@ export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
  * a `TableFrame` when it is the page's collection, bare inside a drawer.
  */
 export declare const AssetGrid: import("react").ForwardRefExoticComponent<AssetGridProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface AssetTileSkeletonProps {
-    /** Position in the grid — drives the stagger, nothing else. */
-    index?: number;
-}
-/** One loading tile: thumbnail block, name line, meta line. */
-export declare function AssetTileSkeleton({ index }: AssetTileSkeletonProps): import("react").JSX.Element;
-export interface AssetTileProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
-    /** File name, shown in full — asset names are how people find things again. */
-    name: string;
-    /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */
-    src?: string;
-    /** Glyph shown when there is no thumbnail, or while one fails to load. */
-    icon?: IconName;
-    /** Second line: dimensions, size, date — whatever the library sorts by. */
-    meta?: ReactNode;
-    /** Paints the soft fill and the solid rail. Never changes the tile's size. */
-    isSelected?: boolean;
-    /** The asset is still uploading or processing: dimmed, with a spinner. */
-    isPending?: boolean;
-    /** Makes the whole tile a selection target. */
-    onSelect?: () => void;
-    /** Badges or a menu, pinned to the top of the thumbnail. */
-    actions?: ReactNode;
-}
-/**
- * One asset in the library. Selection paints a fill and a rail exactly like a
- * table row, so a grid and a list read as the same collection in two shapes.
- */
-export declare const AssetTile: import("react").ForwardRefExoticComponent<AssetTileProps & import("react").RefAttributes<HTMLDivElement>>;
+export { AssetCard as AssetTile, AssetCardSkeleton as AssetTileSkeleton } from "../AssetCard/index.cjs";
+export type { AssetCardProps as AssetTileProps, AssetCardSkeletonProps as AssetTileSkeletonProps } from "../AssetCard/index.cjs";
 export interface AssetGridEmptyProps {
     title: string;
     description?: ReactNode;

package/dist/components/AssetGrid/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAyEpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAGH,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC9F,YAAY,EAAE,cAAc,IAAI,cAAc,EAAE,sBAAsB,IAAI,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEvH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}