@payloadcms/ui 4.0.0-internal.a7ca468 → 4.0.0-internal.af6aad0

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.css

@@ -0,0 +1,216 @@
+@layer payload-default {
+  /*
+   * Every state ring is a spread-only box-shadow rather than a border, so the selected state can
+   * double the stroke width without taking layout space - a widening border would grow the card's
+   * auto height and shift the whole grid row below it. The ring is drawn outside the card box, so
+   * it also never crops the thumbnail it surrounds.
+   */
+  .hierarchy-document-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    overflow: hidden;
+    box-shadow: 0 0 0 var(--stroke-width-small) var(--color-border);
+  }
+
+  /*
+   * :not(--selected) so the hover ring cannot win over the accent ring on a selected card - both
+   * rules live in the same layer and file, and the hover selector would otherwise have the higher
+   * specificity.
+   */
+  .hierarchy-document-card:not(.hierarchy-document-card--selected):hover {
+    box-shadow: 0 0 0 var(--stroke-width-small) var(--special-border-translucent-strong);
+  }
+
+  .hierarchy-document-card--selected {
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+
+  /* Thumbnail */
+
+  .hierarchy-document-card__thumbnail-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    background: var(--color-bg-secondary);
+  }
+
+  .hierarchy-document-card__thumbnail {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Type badge, overlaid on the thumbnail */
+
+  .hierarchy-document-card__type {
+    position: absolute;
+    inset-block-start: var(--spacer-2-5);
+    inset-inline-start: var(--spacer-2-5);
+    display: inline-flex;
+    align-items: center;
+    /* Leaves room for the lock indicator in the opposite corner */
+    max-width: calc(100% - var(--spacer-6));
+    padding-inline: var(--spacer-1);
+    padding-block: var(--spacer-0);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+    color: black;
+    border: var(--stroke-width-small) solid var(--color-border);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Content */
+
+  .hierarchy-document-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+    padding-inline: var(--spacer-3);
+    padding-block-start: var(--spacer-2-5);
+    padding-block-end: var(--spacer-3);
+    min-width: 0;
+    border-block-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .hierarchy-document-card__link {
+    display: block;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* Stretches the title link across the card so the whole surface navigates */
+  .hierarchy-document-card__link::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
+  /*
+   * The stretched overlay above is intentionally hit-testable, but left alone it also swallows
+   * hover on the title - suppressing the truncated-title tooltip, because a native `title`
+   * tooltip only resolves against ancestors of the hit element and the attribute sits on this
+   * span. Lifting just the title restores it; the title still navigates because it lives inside
+   * the anchor. The metadata rows are deliberately NOT lifted, so the whole card stays navigable.
+   */
+  .hierarchy-document-card__title {
+    position: relative;
+    z-index: 2;
+  }
+
+  /*
+   * Custom property rows may contain their own controls, so they alone are lifted above the
+   * overlay. Clicks here will not navigate.
+   */
+  .hierarchy-document-card__extra {
+    position: relative;
+    z-index: 2;
+  }
+
+  .hierarchy-document-card__title {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  }
+
+  /* Properties */
+
+  .hierarchy-document-card__properties {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .hierarchy-document-card__property {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-0-5, 2px);
+    min-width: 0;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text-secondary);
+  }
+
+  .hierarchy-document-card__property-label {
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+
+  .hierarchy-document-card__property-value {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--color-text-secondary);
+  }
+
+  /* Status pill - mirrors the token pairs used by the table status cell */
+
+  .hierarchy-document-card__status {
+    display: inline-flex;
+    /* The pill is a direct child of the stretch-aligned properties column, so it shrink-wraps here */
+    align-self: flex-start;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--spacer-1);
+    padding-block: var(--spacer-0);
+    border-radius: var(--radius-medium);
+    white-space: nowrap;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .hierarchy-document-card__status--published {
+    background: var(--color-bg-selected);
+    color: var(--color-text-brand);
+  }
+
+  .hierarchy-document-card__status--draft {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .hierarchy-document-card__status--changed {
+    background: var(--color-bg-warning-tertiary);
+    color: var(--color-text-warning);
+  }
+
+  .hierarchy-document-card__status--previously-published {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  /* Lock indicator */
+
+  .hierarchy-document-card__corner-slot {
+    position: absolute;
+    inset-block-start: var(--spacer-2);
+    inset-inline-end: var(--spacer-2);
+    /* Above both the stretched link and the raised text, so selecting never navigates */
+    z-index: 3;
+  }
+}

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.d.ts

@@ -0,0 +1,20 @@
+import type { User } from 'payload';
+import React from 'react';
+import './index.css';
+export type DocumentCardProps = {
+    children?: React.ReactNode;
+    collectionSlug: string;
+    doc: Record<string, unknown>;
+    href: string;
+    isSelected?: boolean;
+    /**
+     * The user currently editing this document. When set, a lock indicator is shown and the card
+     * cannot be selected.
+     */
+    lockedUser?: User;
+    showType?: boolean;
+    typeLabel?: string;
+    updatedAt?: string;
+};
+export declare const DocumentCard: React.FC<DocumentCardProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/DocumentCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAkB,MAAM,OAAO,CAAA;AAStC,OAAO,aAAa,CAAA;AAsBpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwHpD,CAAA"}

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.js

@@ -0,0 +1,182 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Link } from '../../../../elements/Link/index.js';
+import { Locked } from '../../../../elements/Locked/index.js';
+import { Thumbnail } from '../../../../elements/Thumbnail/index.js';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { formatRelativeDate } from '../../../../utilities/formatRelativeDate.js';
+import { getThumbnailSrc } from '../getThumbnailSrc.js';
+import './index.css';
+const baseClass = 'hierarchy-document-card';
+/**
+ * Mirrors the labels and modifier classes of the table `StatusCell` so cards and rows read the
+ * same. Unknown statuses fall back to the raw value with the neutral `draft` treatment.
+ */
+const statusLabels = {
+  changed: 'Changed',
+  draft: 'Draft',
+  previouslyPublished: 'Previously Published',
+  published: 'Published'
+};
+const statusModifiers = {
+  changed: 'changed',
+  draft: 'draft',
+  previouslyPublished: 'previously-published',
+  published: 'published'
+};
+export const DocumentCard = ({
+  children,
+  collectionSlug,
+  doc,
+  href,
+  isSelected = false,
+  lockedUser,
+  showType = false,
+  typeLabel,
+  updatedAt
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const uploadConfig = collectionConfig?.upload;
+  const isPreviewAllowed = uploadConfig?.displayPreview ?? true;
+  const hasOwnFile = typeof doc.filename === 'string' && doc.filename.length > 0;
+  const isOwnUpload = Boolean(uploadConfig) && isPreviewAllowed && hasOwnFile;
+  // Falls back to the first field of type `upload` on the collection (resolved server-side), so a
+  // card can surface a thumbnail even when the collection itself isn't upload-enabled.
+  const useAsThumbnail = collectionConfig?.admin?.useAsThumbnail;
+  const relatedUploadDoc = !isOwnUpload && useAsThumbnail && typeof doc[useAsThumbnail] === 'object' && doc[useAsThumbnail] ? doc[useAsThumbnail] : undefined;
+  const thumbnailDoc = isOwnUpload ? doc : relatedUploadDoc;
+  const thumbnailSrc = thumbnailDoc ? getThumbnailSrc({
+    doc: thumbnailDoc
+  }) : undefined;
+  const hasThumbnailImage = Boolean(thumbnailSrc);
+  const title = getDocTitle({
+    doc,
+    titleField: collectionConfig?.admin?.useAsTitle || 'id'
+  });
+  const status = getDocStatus({
+    doc
+  });
+  const hasTypePill = showType && Boolean(typeLabel);
+  // Creating the formatter is expensive, so build one per language rather than one per render.
+  const relativeTimeFormat = useMemo(() => getLongRelativeTimeFormat(i18n.language), [i18n.language]);
+  const updatedLabel = useMemo(() => updatedAt ? formatRelativeDate({
+    relativeTimeFormat,
+    value: updatedAt
+  }) : undefined, [relativeTimeFormat, updatedAt]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass,
+    // The corner slot holds the lock indicator, and content below it must reserve space for it.
+    lockedUser && `${baseClass}--has-corner-slot`, isSelected && `${baseClass}--selected`].filter(Boolean).join(' '),
+    "data-selected": isSelected ? 'true' : undefined,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__thumbnail-wrap`,
+      children: [hasThumbnailImage && /*#__PURE__*/_jsx(Thumbnail, {
+        className: `${baseClass}__thumbnail`,
+        collectionSlug: isOwnUpload ? collectionConfig?.slug : undefined,
+        doc: thumbnailDoc,
+        fileSrc: thumbnailSrc,
+        imageCacheTag: isOwnUpload && uploadConfig?.cacheTags ? doc.updatedAt : undefined,
+        size: "expand",
+        uploadConfig: isOwnUpload ? uploadConfig : undefined
+      }), hasTypePill && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__type`,
+        children: typeLabel
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx(Link, {
+        className: `${baseClass}__link`,
+        draggable: false,
+        href: href,
+        children: /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__title`,
+          title: title,
+          children: title
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__properties`,
+        children: [updatedLabel && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__property`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__property-label`,
+            children: "Updated"
+          }), /*#__PURE__*/_jsx("time", {
+            className: `${baseClass}__property-value`,
+            dateTime: updatedAt,
+            children: updatedLabel
+          })]
+        }), status && /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__status ${baseClass}__status--${statusModifiers[status] || 'draft'}`,
+          children: statusLabels[status] || status
+        }), children ? /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__extra`,
+          children: children
+        }) : null]
+      })]
+    }), lockedUser && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__corner-slot`,
+      children: /*#__PURE__*/_jsx(Locked, {
+        user: lockedUser
+      })
+    }), isSelected && !lockedUser && /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: "Selected"
+    })]
+  });
+};
+/**
+ * Cards spell the unit out ("2 days ago") per the design, whereas the shared
+ * `getRelativeTimeFormat` helper is deliberately `narrow` ("2d ago") for the dense dashboard
+ * widgets. Falls back to English on locales Intl does not recognise.
+ */
+function getLongRelativeTimeFormat(language) {
+  try {
+    return new Intl.RelativeTimeFormat(language, {
+      numeric: 'auto',
+      style: 'long'
+    });
+  } catch {
+    return new Intl.RelativeTimeFormat('en', {
+      numeric: 'auto',
+      style: 'long'
+    });
+  }
+}
+function getDocTitle({
+  doc,
+  titleField
+}) {
+  const rawTitle = doc[titleField];
+  if (typeof rawTitle === 'string' || typeof rawTitle === 'number') {
+    return String(rawTitle);
+  }
+  const {
+    id
+  } = doc;
+  if (typeof id === 'string' || typeof id === 'number') {
+    return String(id);
+  }
+  return '';
+}
+/**
+ * Prefers `_displayStatus` because the list view enriches docs with it to surface `changed`,
+ * falling back to the persisted `_status`.
+ */
+function getDocStatus({
+  doc
+}) {
+  const rawStatus = doc._displayStatus ?? doc._status;
+  return typeof rawStatus === 'string' && rawStatus.length > 0 ? rawStatus : undefined;
+}
+//# sourceMappingURL=index.js.map

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","Link","Locked","Thumbnail","useConfig","useTranslation","formatRelativeDate","getThumbnailSrc","baseClass","statusLabels","changed","draft","previouslyPublished","published","statusModifiers","DocumentCard","children","collectionSlug","doc","href","isSelected","lockedUser","showType","typeLabel","updatedAt","getEntityConfig","i18n","collectionConfig","uploadConfig","upload","isPreviewAllowed","displayPreview","hasOwnFile","filename","length","isOwnUpload","Boolean","useAsThumbnail","admin","relatedUploadDoc","undefined","thumbnailDoc","thumbnailSrc","hasThumbnailImage","title","getDocTitle","titleField","useAsTitle","status","getDocStatus","hasTypePill","relativeTimeFormat","getLongRelativeTimeFormat","language","updatedLabel","value","_jsxs","className","filter","join","_jsx","slug","fileSrc","imageCacheTag","cacheTags","size","draggable","dateTime","user","Intl","RelativeTimeFormat","numeric","style","rawTitle","String","id","rawStatus","_displayStatus","_status"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/DocumentCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { Link } from '../../../../elements/Link/index.js'\nimport { Locked } from '../../../../elements/Locked/index.js'\nimport { Thumbnail } from '../../../../elements/Thumbnail/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { formatRelativeDate } from '../../../../utilities/formatRelativeDate.js'\nimport { getThumbnailSrc } from '../getThumbnailSrc.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-document-card'\n\n/**\n * Mirrors the labels and modifier classes of the table `StatusCell` so cards and rows read the\n * same. Unknown statuses fall back to the raw value with the neutral `draft` treatment.\n */\nconst statusLabels: Record<string, string> = {\n  changed: 'Changed',\n  draft: 'Draft',\n  previouslyPublished: 'Previously Published',\n  published: 'Published',\n}\n\nconst statusModifiers: Record<string, string> = {\n  changed: 'changed',\n  draft: 'draft',\n  previouslyPublished: 'previously-published',\n  published: 'published',\n}\n\nexport type DocumentCardProps = {\n  children?: React.ReactNode\n  collectionSlug: string\n  doc: Record<string, unknown>\n  href: string\n  isSelected?: boolean\n  /**\n   * The user currently editing this document. When set, a lock indicator is shown and the card\n   * cannot be selected.\n   */\n  lockedUser?: User\n  showType?: boolean\n  typeLabel?: string\n  updatedAt?: string\n}\n\nexport const DocumentCard: React.FC<DocumentCardProps> = ({\n  children,\n  collectionSlug,\n  doc,\n  href,\n  isSelected = false,\n  lockedUser,\n  showType = false,\n  typeLabel,\n  updatedAt,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const uploadConfig = collectionConfig?.upload\n  const isPreviewAllowed = uploadConfig?.displayPreview ?? true\n  const hasOwnFile = typeof doc.filename === 'string' && doc.filename.length > 0\n  const isOwnUpload = Boolean(uploadConfig) && isPreviewAllowed && hasOwnFile\n\n  // Falls back to the first field of type `upload` on the collection (resolved server-side), so a\n  // card can surface a thumbnail even when the collection itself isn't upload-enabled.\n  const useAsThumbnail = collectionConfig?.admin?.useAsThumbnail\n  const relatedUploadDoc =\n    !isOwnUpload && useAsThumbnail && typeof doc[useAsThumbnail] === 'object' && doc[useAsThumbnail]\n      ? (doc[useAsThumbnail] as Record<string, unknown>)\n      : undefined\n  const thumbnailDoc = isOwnUpload ? doc : relatedUploadDoc\n\n  const thumbnailSrc = thumbnailDoc ? getThumbnailSrc({ doc: thumbnailDoc }) : undefined\n  const hasThumbnailImage = Boolean(thumbnailSrc)\n\n  const title = getDocTitle({ doc, titleField: collectionConfig?.admin?.useAsTitle || 'id' })\n  const status = getDocStatus({ doc })\n  const hasTypePill = showType && Boolean(typeLabel)\n\n  // Creating the formatter is expensive, so build one per language rather than one per render.\n  const relativeTimeFormat = useMemo(\n    () => getLongRelativeTimeFormat(i18n.language),\n    [i18n.language],\n  )\n\n  const updatedLabel = useMemo(\n    () => (updatedAt ? formatRelativeDate({ relativeTimeFormat, value: updatedAt }) : undefined),\n    [relativeTimeFormat, updatedAt],\n  )\n\n  return (\n    <div\n      className={[\n        baseClass,\n        // The corner slot holds the lock indicator, and content below it must reserve space for it.\n        lockedUser && `${baseClass}--has-corner-slot`,\n        isSelected && `${baseClass}--selected`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-selected={isSelected ? 'true' : undefined}\n    >\n      <div className={`${baseClass}__thumbnail-wrap`}>\n        {hasThumbnailImage && (\n          <Thumbnail\n            className={`${baseClass}__thumbnail`}\n            collectionSlug={isOwnUpload ? collectionConfig?.slug : undefined}\n            doc={thumbnailDoc}\n            fileSrc={thumbnailSrc}\n            imageCacheTag={\n              isOwnUpload && uploadConfig?.cacheTags ? (doc.updatedAt as string) : undefined\n            }\n            size=\"expand\"\n            uploadConfig={isOwnUpload ? uploadConfig : undefined}\n          />\n        )}\n        {hasTypePill && <span className={`${baseClass}__type`}>{typeLabel}</span>}\n      </div>\n\n      <div className={`${baseClass}__content`}>\n        {/* The link is a sibling of the checkbox and stretches over the whole card via ::after */}\n        {/* The card itself is the drag handle; a link's native drag would fight the pointer sensor. */}\n        <Link className={`${baseClass}__link`} draggable={false} href={href}>\n          <span className={`${baseClass}__title`} title={title}>\n            {title}\n          </span>\n        </Link>\n\n        <div className={`${baseClass}__properties`}>\n          {updatedLabel && (\n            <div className={`${baseClass}__property`}>\n              <span className={`${baseClass}__property-label`}>Updated</span>\n              <time className={`${baseClass}__property-value`} dateTime={updatedAt}>\n                {updatedLabel}\n              </time>\n            </div>\n          )}\n\n          {status && (\n            <span\n              className={`${baseClass}__status ${baseClass}__status--${statusModifiers[status] || 'draft'}`}\n            >\n              {statusLabels[status] || status}\n            </span>\n          )}\n\n          {children ? <div className={`${baseClass}__extra`}>{children}</div> : null}\n        </div>\n      </div>\n\n      {lockedUser && (\n        <div className={`${baseClass}__corner-slot`}>\n          <Locked user={lockedUser} />\n        </div>\n      )}\n\n      {/*\n        The accent border is the only visual signal that the card is selected. Suppressed when\n        locked, so this never contradicts the lock indicator's own announcement.\n      */}\n      {isSelected && !lockedUser && <span className=\"sr-only\">Selected</span>}\n    </div>\n  )\n}\n\n/**\n * Cards spell the unit out (\"2 days ago\") per the design, whereas the shared\n * `getRelativeTimeFormat` helper is deliberately `narrow` (\"2d ago\") for the dense dashboard\n * widgets. Falls back to English on locales Intl does not recognise.\n */\nfunction getLongRelativeTimeFormat(language: string): Intl.RelativeTimeFormat {\n  try {\n    return new Intl.RelativeTimeFormat(language, { numeric: 'auto', style: 'long' })\n  } catch {\n    return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'long' })\n  }\n}\n\nfunction getDocTitle({\n  doc,\n  titleField,\n}: {\n  doc: Record<string, unknown>\n  titleField: string\n}): string {\n  const rawTitle = doc[titleField]\n\n  if (typeof rawTitle === 'string' || typeof rawTitle === 'number') {\n    return String(rawTitle)\n  }\n\n  const { id } = doc\n\n  if (typeof id === 'string' || typeof id === 'number') {\n    return String(id)\n  }\n\n  return ''\n}\n\n/**\n * Prefers `_displayStatus` because the list view enriches docs with it to surface `changed`,\n * falling back to the persisted `_status`.\n */\nfunction getDocStatus({ doc }: { doc: Record<string, unknown> }): string | undefined {\n  const rawStatus = doc._displayStatus ?? doc._status\n\n  return typeof rawStatus === 'string' && rawStatus.length > 0 ? rawStatus : undefined\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.css

@@ -0,0 +1,38 @@
+@layer payload-default {
+  /*
+   * A fixed 40px square, so a stack of these has a predictable footprint regardless of the aspect
+   * ratio of whatever was picked up.
+   */
+  .hierarchy-drag-preview-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-6);
+    height: var(--spacer-6);
+    overflow: hidden;
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+  }
+
+  /* Fills the square and crops, rather than letter-boxing a wide image inside it. */
+  .hierarchy-drag-preview-item__thumbnail {
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .hierarchy-drag-preview-item__icon {
+    display: flex;
+    color: var(--color-icon);
+
+    svg {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+    }
+  }
+}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TableRow } from '../../HierarchyTable/types.js';
+import './index.css';
+/**
+ * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag
+ * stays legible under the cursor instead of covering the folders it is aiming for.
+ *
+ * `Thumbnail` already falls back to the generic file graphic when a document has no image, so
+ * non-upload collections need no special case here - only folders, which have an icon instead.
+ */
+export declare const DragPreviewItem: React.FC<{
+    isHierarchyGroup: boolean;
+    row: TableRow;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/DragPreviewItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAM7D,OAAO,aAAa,CAAA;AAIpB;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,QAAQ,CAAA;CACd,CA2BA,CAAA"}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Thumbnail } from '../../../../elements/Thumbnail/index.js';
+import { FolderIcon } from '../../../../icons/Folder/index.js';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { getThumbnailSrc } from '../getThumbnailSrc.js';
+import './index.css';
+const baseClass = 'hierarchy-drag-preview-item';
+/**
+ * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag
+ * stays legible under the cursor instead of covering the folders it is aiming for.
+ *
+ * `Thumbnail` already falls back to the generic file graphic when a document has no image, so
+ * non-upload collections need no special case here - only folders, which have an icon instead.
+ */
+export const DragPreviewItem = t0 => {
+  const $ = _c(7);
+  const {
+    isHierarchyGroup,
+    row
+  } = t0;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const t1 = row._collectionSlug;
+  let t2;
+  let t3;
+  if ($[0] !== getEntityConfig || $[1] !== isHierarchyGroup || $[2] !== row) {
+    t3 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const collectionConfig = getEntityConfig({
+        collectionSlug: t1
+      });
+      const uploadConfig = collectionConfig?.upload;
+      if (isHierarchyGroup) {
+        let t4;
+        if ($[5] !== row._hierarchyIcon) {
+          t4 = _jsx("div", {
+            className: baseClass,
+            children: _jsx("span", {
+              className: `${baseClass}__icon`,
+              children: row._hierarchyIcon || _jsx(FolderIcon, {})
+            })
+          });
+          $[5] = row._hierarchyIcon;
+          $[6] = t4;
+        } else {
+          t4 = $[6];
+        }
+        t3 = t4;
+        break bb0;
+      }
+      t2 = _jsx("div", {
+        className: baseClass,
+        children: _jsx(Thumbnail, {
+          className: `${baseClass}__thumbnail`,
+          collectionSlug: collectionConfig?.slug,
+          doc: row,
+          fileSrc: getThumbnailSrc({
+            doc: row
+          }),
+          imageCacheTag: uploadConfig?.cacheTags ? row.updatedAt : undefined,
+          size: "expand",
+          uploadConfig
+        })
+      });
+    }
+    $[0] = getEntityConfig;
+    $[1] = isHierarchyGroup;
+    $[2] = row;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  if (t3 !== Symbol.for("react.early_return_sentinel")) {
+    return t3;
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Thumbnail","FolderIcon","useConfig","getThumbnailSrc","baseClass","DragPreviewItem","t0","$","isHierarchyGroup","row","getEntityConfig","t1","_collectionSlug","t2","t3","Symbol","for","collectionConfig","collectionSlug","uploadConfig","upload","t4","_hierarchyIcon","_jsx","className","children","slug","doc","fileSrc","imageCacheTag","cacheTags","updatedAt","undefined","size"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/DragPreviewItem/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { Thumbnail } from '../../../../elements/Thumbnail/index.js'\nimport { FolderIcon } from '../../../../icons/Folder/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { getThumbnailSrc } from '../getThumbnailSrc.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-drag-preview-item'\n\n/**\n * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag\n * stays legible under the cursor instead of covering the folders it is aiming for.\n *\n * `Thumbnail` already falls back to the generic file graphic when a document has no image, so\n * non-upload collections need no special case here - only folders, which have an icon instead.\n */\nexport const DragPreviewItem: React.FC<{\n  isHierarchyGroup: boolean\n  row: TableRow\n}> = ({ isHierarchyGroup, row }) => {\n  const { getEntityConfig } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: row._collectionSlug })\n  const uploadConfig = collectionConfig?.upload\n\n  if (isHierarchyGroup) {\n    return (\n      <div className={baseClass}>\n        <span className={`${baseClass}__icon`}>{row._hierarchyIcon || <FolderIcon />}</span>\n      </div>\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionConfig?.slug}\n        doc={row}\n        fileSrc={getThumbnailSrc({ doc: row })}\n        imageCacheTag={uploadConfig?.cacheTags ? (row.updatedAt as string) : undefined}\n        size=\"expand\"\n        uploadConfig={uploadConfig}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;;;;AAOA,OAAO,MAAMC,eAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,gBAAA;IAAAC;EAAA,IAAAH,EAAyB;EAC7B;IAAAI;EAAA,IAA4BR,SAAA;EAE+B,MAAAS,EAAA,GAAAF,GAAA,CAAAG,eAAA;EAAmB,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAP,CAAA,QAAAG,eAAA,IAAAH,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAE,GAAA;IAK1EK,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MALJ,MAAAC,gBAAA,GAAyBP,eAAA;QAAAQ,cAAA,EAAkCP;MAAmB,CAAC;MAC/E,MAAAQ,YAAA,GAAqBF,gBAAA,EAAAG,MAAA;MAAkB,IAEnCZ,gBAAA;QAAA,IAAAa,EAAA;QAAA,IAAAd,CAAA,QAAAE,GAAA,CAAAa,cAAA;UAEAD,EAAA,GAAAE,IAAA,CAAC;YAAAC,SAAA,EAAApB,SAAA;YAAAqB,QAAA,EACCF,IAAA,CAAC;cAAAC,SAAA,EAAgB,GAAApB,SAAA,QAAoB;cAAAqB,QAAA,EAAGhB,GAAA,CAAAa,cAAA,IAAsBC,IAAA,CAAAtB,UAAA,IAAC;YAAA,C;;;;;;;QADjEa,EAAA,GAAAO,E;;;MAOFR,EAAA,GAAAU,IAAA,CAAC;QAAAC,SAAA,EAAApB,SAAA;QAAAqB,QAAA,EACCF,IAAA,CAAAvB,SAAA;UAAAwB,SAAA,EACa,GAAApB,SAAA,aAAyB;UAAAc,cAAA,EACpBD,gBAAA,EAAAS,IAAA;UAAAC,GAAA,EACXlB,GAAA;UAAAmB,OAAA,EACIzB,eAAA;YAAAwB,GAAA,EAAuBlB;UAAA,CAAI;UAAAoB,aAAA,EACrBV,YAAA,EAAAW,SAAA,GAA2BrB,GAAA,CAAAsB,SAAA,GAAAC,SAA2B;UAAAC,IAAA,EAChE;UAAAd;QAAA,C;;;;;;;;;;;;;;;SAPTN,E;CAYJ","ignoreList":[]}