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

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { DocumentCard } from '../DocumentCard/index.js';
+import { FolderCard } from '../FolderCard/index.js';
+/**
+ * Picks the card that suits a row and supplies its labels. Extracted so the drag overlay can render
+ * the very cards being dragged rather than an approximation of them.
+ */
+export const HierarchyCard = t0 => {
+  const $ = _c(19);
+  const {
+    dropState,
+    href,
+    isHierarchyGroup,
+    isSelected: t1,
+    lockedUser,
+    row,
+    showTypePill: t2,
+    title
+  } = t0;
+  const isSelected = t1 === undefined ? false : t1;
+  const showTypePill = t2 === undefined ? false : t2;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const t3 = row._collectionSlug;
+  let t4;
+  let t5;
+  if ($[0] !== dropState || $[1] !== getEntityConfig || $[2] !== href || $[3] !== i18n || $[4] !== isHierarchyGroup || $[5] !== isSelected || $[6] !== lockedUser || $[7] !== row || $[8] !== showTypePill || $[9] !== title) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const collectionConfig = getEntityConfig({
+        collectionSlug: t3
+      });
+      if (isHierarchyGroup) {
+        let t6;
+        if ($[12] !== dropState || $[13] !== href || $[14] !== isSelected || $[15] !== lockedUser || $[16] !== row._hierarchyIcon || $[17] !== title) {
+          t6 = _jsx(FolderCard, {
+            dropState,
+            href,
+            icon: row._hierarchyIcon,
+            isSelected,
+            lockedUser,
+            title
+          });
+          $[12] = dropState;
+          $[13] = href;
+          $[14] = isSelected;
+          $[15] = lockedUser;
+          $[16] = row._hierarchyIcon;
+          $[17] = title;
+          $[18] = t6;
+        } else {
+          t6 = $[18];
+        }
+        t5 = t6;
+        break bb0;
+      }
+      t4 = _jsx(DocumentCard, {
+        collectionSlug: row._collectionSlug,
+        doc: row,
+        href,
+        isSelected,
+        lockedUser,
+        showType: showTypePill,
+        typeLabel: getTranslation(collectionConfig?.labels?.singular, i18n) || row._collectionLabel,
+        updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : undefined
+      });
+    }
+    $[0] = dropState;
+    $[1] = getEntityConfig;
+    $[2] = href;
+    $[3] = i18n;
+    $[4] = isHierarchyGroup;
+    $[5] = isSelected;
+    $[6] = lockedUser;
+    $[7] = row;
+    $[8] = showTypePill;
+    $[9] = title;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t4 = $[10];
+    t5 = $[11];
+  }
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useTranslation","DocumentCard","FolderCard","HierarchyCard","t0","$","dropState","href","isHierarchyGroup","isSelected","t1","lockedUser","row","showTypePill","t2","title","undefined","getEntityConfig","i18n","t3","_collectionSlug","t4","t5","Symbol","for","collectionConfig","collectionSlug","t6","_hierarchyIcon","_jsx","icon","doc","showType","typeLabel","labels","singular","_collectionLabel","updatedAt"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/HierarchyCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DocumentCard } from '../DocumentCard/index.js'\nimport { FolderCard } from '../FolderCard/index.js'\n\nexport type HierarchyCardProps = {\n  dropState?: 'invalid' | 'over'\n  href: string\n  isHierarchyGroup: boolean\n  isSelected?: boolean\n  lockedUser?: User\n  row: TableRow\n  showTypePill?: boolean\n  title: string\n}\n\n/**\n * Picks the card that suits a row and supplies its labels. Extracted so the drag overlay can render\n * the very cards being dragged rather than an approximation of them.\n */\nexport const HierarchyCard: React.FC<HierarchyCardProps> = ({\n  dropState,\n  href,\n  isHierarchyGroup,\n  isSelected = false,\n  lockedUser,\n  row,\n  showTypePill = false,\n  title,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: row._collectionSlug })\n\n  if (isHierarchyGroup) {\n    return (\n      <FolderCard\n        dropState={dropState}\n        href={href}\n        icon={row._hierarchyIcon}\n        isSelected={isSelected}\n        lockedUser={lockedUser}\n        title={title}\n      />\n    )\n  }\n\n  return (\n    <DocumentCard\n      collectionSlug={row._collectionSlug}\n      doc={row}\n      href={href}\n      isSelected={isSelected}\n      lockedUser={lockedUser}\n      showType={showTypePill}\n      // The pill labels a single document, so the singular label reads correctly (\"Media\");\n      // _collectionLabel is the plural used for the table column heading.\n      typeLabel={getTranslation(collectionConfig?.labels?.singular, i18n) || row._collectionLabel}\n      updatedAt={typeof row.updatedAt === 'string' ? row.updatedAt : undefined}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAa3B;;;;AAIA,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,SAAA;IAAAC,IAAA;IAAAC,gBAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAX,EAS3D;EALC,MAAAK,UAAA,GAAAC,EAAkB,KAAAM,SAAA,WAAlBN,EAAkB;EAGlB,MAAAG,YAAA,GAAAC,EAAoB,KAAAE,SAAA,WAApBF,EAAoB;EAGpB;IAAAG;EAAA,IAA4BlB,SAAA;EAC5B;IAAAmB;EAAA,IAAiBlB,cAAA;EAE0C,MAAAmB,EAAA,GAAAP,GAAA,CAAAQ,eAAA;EAAmB,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAE,IAAA,IAAAF,CAAA,QAAAa,IAAA,IAAAb,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,GAAA,IAAAP,CAAA,QAAAQ,YAAA,IAAAR,CAAA,QAAAU,KAAA;IAI1EO,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MAJJ,MAAAC,gBAAA,GAAyBR,eAAA;QAAAS,cAAA,EAAkCP;MAAmB,CAAC;MAAA,IAE3EX,gBAAA;QAAA,IAAAmB,EAAA;QAAA,IAAAtB,CAAA,SAAAC,SAAA,IAAAD,CAAA,SAAAE,IAAA,IAAAF,CAAA,SAAAI,UAAA,IAAAJ,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAO,GAAA,CAAAgB,cAAA,IAAAvB,CAAA,SAAAU,KAAA;UAEAY,EAAA,GAAAE,IAAA,CAAA3B,UAAA;YAAAI,SAAA;YAAAC,IAAA;YAAAuB,IAAA,EAGQlB,GAAA,CAAAgB,cAAA;YAAAnB,UAAA;YAAAE,UAAA;YAAAI;UAAA,C;;;;;;;;;;;QAHRO,EAAA,GAAAK,E;;;MAYFN,EAAA,GAAAQ,IAAA,CAAA5B,YAAA;QAAAyB,cAAA,EACkBd,GAAA,CAAAQ,eAAA;QAAAW,GAAA,EACXnB,GAAA;QAAAL,IAAA;QAAAE,UAAA;QAAAE,UAAA;QAAAqB,QAAA,EAIKnB,YAAA;QAAAoB,SAAA,EAGCpC,cAAA,CAAe4B,gBAAA,EAAAS,MAAA,EAAAC,QAAA,EAAoCjB,IAAA,KAASN,GAAA,CAAAwB,gBAAoB;QAAAC,SAAA,EAChF,OAAOzB,GAAA,CAAAyB,SAAA,KAAkB,WAAWzB,GAAA,CAAAyB,SAAA,GAAArB;MAAgB,C;;;;;;;;;;;;;;;;;;;;;SAVjEK,E;CAaJ","ignoreList":[]}

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

@@ -0,0 +1,53 @@
+import type { User } from 'payload';
+import React from 'react';
+import type { HierarchyDragData } from '../../../../providers/HierarchyDnd/types.js';
+import type { TableRow } from '../../HierarchyTable/types.js';
+export type PlaneItemProps = {
+    /**
+     * Ids of the folders between the root and the folder currently open, so a folder can't be dropped
+     * into its own subtree.
+     */
+    ancestorIds: (number | string)[];
+    baseClass: string;
+    /** Flat index across every band, which is the space selection gestures operate in. */
+    flatIndex: number;
+    hierarchySlug: string;
+    href: string;
+    /**
+     * Turns the card into a plain selectable tile: no drag activation and no dragging treatment. Set
+     * by planes that have nowhere to drop, such as the flat collection grid.
+     */
+    isDragDisabled: boolean;
+    isHierarchyGroup: boolean;
+    isSelected: boolean;
+    lockedUser?: User;
+    onClickCapture: (event: React.MouseEvent, flatIndex: number) => void;
+    onDoubleClick: (event: React.MouseEvent, href: string) => void;
+    onKeyDown: (event: React.KeyboardEvent, flatIndex: number) => void;
+    /**
+     * Called on pointer-down over an unselected card, so dragging one collapses the selection onto it
+     * before the drag payload is read - the way a file browser behaves.
+     */
+    onPointerDownUnselected: (flatIndex: number) => void;
+    parentFieldName: string;
+    /**
+     * Hands the card element to the plane, which hit-tests it during marquee selection.
+     */
+    registerNode: (flatIndex: number, node: HTMLElement | null) => void;
+    row: TableRow;
+    /**
+     * Payload for dragging the whole current selection. Shared by every selected card, so it is built
+     * once per render rather than per card.
+     */
+    selectionDragData: HierarchyDragData;
+    showTypePill: boolean;
+    title: string;
+};
+/**
+ * One card in the plane: a drag source always, and a drop target when it is a folder.
+ *
+ * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be
+ * called inside the plane's row loop.
+ */
+export declare const PlaneItem: React.FC<PlaneItemProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/PlaneItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,6CAA6C,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,sFAAsF;IACtF,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,cAAc,EAAE,OAAO,CAAA;IACvB,gBAAgB,EAAE,OAAO,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAClE;;;OAGG;IACH,uBAAuB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,eAAe,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnE,GAAG,EAAE,QAAQ,CAAA;IACb;;;OAGG;IACH,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmJ9C,CAAA"}

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

@@ -0,0 +1,145 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import React, { useMemo } from 'react';
+import { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js';
+import { DragPreviewItem } from '../DragPreviewItem/index.js';
+import { HierarchyCard } from '../HierarchyCard/index.js';
+/**
+ * One card in the plane: a drag source always, and a drop target when it is a folder.
+ *
+ * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be
+ * called inside the plane's row loop.
+ */
+export const PlaneItem = ({
+  ancestorIds,
+  baseClass,
+  flatIndex,
+  hierarchySlug,
+  href,
+  isDragDisabled,
+  isHierarchyGroup,
+  isSelected,
+  lockedUser,
+  onClickCapture,
+  onDoubleClick,
+  onKeyDown,
+  onPointerDownUnselected,
+  parentFieldName,
+  registerNode,
+  row,
+  selectionDragData,
+  showTypePill,
+  title
+}) => {
+  const {
+    activeDrag,
+    canDrop
+  } = useHierarchyDnd();
+  const rowDragData = useMemo(() => ({
+    type: 'hierarchy-items',
+    items: [{
+      id: row.id,
+      collectionSlug: row._collectionSlug,
+      title
+    }],
+    onMoveSuccess: selectionDragData.onMoveSuccess,
+    preview: [/*#__PURE__*/_jsx(DragPreviewItem, {
+      isHierarchyGroup: isHierarchyGroup,
+      row: row
+    }, "preview")]
+  }), [isHierarchyGroup, row, selectionDragData.onMoveSuccess, title]);
+  // Dragging a card that is part of the selection moves the whole selection; dragging an unselected
+  // one moves just it.
+  const dragData = isSelected ? selectionDragData : rowDragData;
+  const dropData = useMemo(() => isHierarchyGroup ? {
+    type: 'hierarchy-folder',
+    allowedCollections: row._allowedCollections,
+    ancestorIds,
+    folderId: row.id,
+    hierarchySlug,
+    parentFieldName,
+    title
+  } : undefined, [ancestorIds, hierarchySlug, isHierarchyGroup, parentFieldName, row, title]);
+  const rowKey = `${row._collectionSlug}-${row.id}`;
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef: setDragRef
+  } = useDraggable({
+    id: `hierarchy-card-${rowKey}`,
+    data: dragData,
+    disabled: isDragDisabled || Boolean(lockedUser)
+  });
+  const {
+    isOver,
+    setNodeRef: setDropRef
+  } = useDroppable({
+    id: `hierarchy-card-drop-${rowKey}`,
+    data: dropData,
+    disabled: isDragDisabled || !dropData
+  });
+  const dropState = isOver && dropData ? canDrop(dropData) ? 'over' : 'invalid' : undefined;
+  // A folder is both a drag source and a drop target, and the plane needs the same node for marquee
+  // hit-testing, so one callback fans it out to all three.
+  const setNodeRef = node => {
+    setDragRef(node);
+    setDropRef(node);
+    registerNode(flatIndex, node);
+  };
+  /*
+  * Every card in the active drag fades, not just the one under the pointer, so a multi-card move
+  * shows what is travelling. Membership is tested against the drag's own items rather than by
+  * comparing payload identity, which would silently stop matching the moment the plane re-rendered
+  * and rebuilt the shared selection payload mid-drag.
+  */
+  const isBeingDragged = !isDragDisabled && (isDragging || Boolean(activeDrag?.items.some(item => item.collectionSlug === row._collectionSlug && String(item.id) === String(row.id))));
+  /*
+  * dnd-kit's sensors activate through listeners named exactly `onPointerDown` and `onKeyDown`, which
+  * are also the events this card needs for selection. Spreading `listeners` and then declaring
+  * either prop would silently overwrite the activator and no drag would ever start, so the two are
+  * composed by hand and the rest of the listeners spread as-is.
+  */
+  const {
+    onKeyDown: onDragKeyDown,
+    onPointerDown: onDragPointerDown,
+    ...remainingListeners
+  } = listeners ?? {};
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the card's own link remains the keyboard-operable control; these handlers only layer pointer selection and drag gestures on top of it
+    /*#__PURE__*/
+    _jsx("li", {
+      ...attributes,
+      ...remainingListeners,
+      className: [`${baseClass}__item`, isBeingDragged && `${baseClass}__item--dragging`].filter(Boolean).join(' '),
+      onClickCapture: event => onClickCapture(event, flatIndex),
+      onDoubleClick: event_0 => onDoubleClick(event_0, href),
+      onKeyDown: event_1 => {
+        onDragKeyDown?.(event_1);
+        onKeyDown(event_1, flatIndex);
+      },
+      onPointerDown: event_2 => {
+        // The sensor goes first so it sees the untouched event; the selection collapse that follows
+        // only schedules React state, which the sensor never reads.
+        onDragPointerDown?.(event_2);
+        if (!isSelected) {
+          onPointerDownUnselected(flatIndex);
+        }
+      },
+      ref: setNodeRef,
+      children: /*#__PURE__*/_jsx(HierarchyCard, {
+        dropState: dropState,
+        href: href,
+        isHierarchyGroup: isHierarchyGroup,
+        isSelected: isSelected,
+        lockedUser: lockedUser,
+        row: row,
+        showTypePill: showTypePill,
+        title: title
+      })
+    })
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useDraggable","useDroppable","React","useMemo","useHierarchyDnd","DragPreviewItem","HierarchyCard","PlaneItem","ancestorIds","baseClass","flatIndex","hierarchySlug","href","isDragDisabled","isHierarchyGroup","isSelected","lockedUser","onClickCapture","onDoubleClick","onKeyDown","onPointerDownUnselected","parentFieldName","registerNode","row","selectionDragData","showTypePill","title","activeDrag","canDrop","rowDragData","type","items","id","collectionSlug","_collectionSlug","onMoveSuccess","preview","_jsx","dragData","dropData","allowedCollections","_allowedCollections","folderId","undefined","rowKey","attributes","isDragging","listeners","setNodeRef","setDragRef","data","disabled","Boolean","isOver","setDropRef","dropState","node","isBeingDragged","some","item","String","onDragKeyDown","onPointerDown","onDragPointerDown","remainingListeners","className","filter","join","event","ref"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/PlaneItem/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport { useDraggable, useDroppable } from '@dnd-kit/core'\nimport React, { useMemo } from 'react'\n\nimport type {\n  HierarchyDragData,\n  HierarchyDropData,\n} from '../../../../providers/HierarchyDnd/types.js'\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js'\nimport { DragPreviewItem } from '../DragPreviewItem/index.js'\nimport { HierarchyCard } from '../HierarchyCard/index.js'\n\nexport type PlaneItemProps = {\n  /**\n   * Ids of the folders between the root and the folder currently open, so a folder can't be dropped\n   * into its own subtree.\n   */\n  ancestorIds: (number | string)[]\n  baseClass: string\n  /** Flat index across every band, which is the space selection gestures operate in. */\n  flatIndex: number\n  hierarchySlug: string\n  href: string\n  /**\n   * Turns the card into a plain selectable tile: no drag activation and no dragging treatment. Set\n   * by planes that have nowhere to drop, such as the flat collection grid.\n   */\n  isDragDisabled: boolean\n  isHierarchyGroup: boolean\n  isSelected: boolean\n  lockedUser?: User\n  onClickCapture: (event: React.MouseEvent, flatIndex: number) => void\n  onDoubleClick: (event: React.MouseEvent, href: string) => void\n  onKeyDown: (event: React.KeyboardEvent, flatIndex: number) => void\n  /**\n   * Called on pointer-down over an unselected card, so dragging one collapses the selection onto it\n   * before the drag payload is read - the way a file browser behaves.\n   */\n  onPointerDownUnselected: (flatIndex: number) => void\n  parentFieldName: string\n  /**\n   * Hands the card element to the plane, which hit-tests it during marquee selection.\n   */\n  registerNode: (flatIndex: number, node: HTMLElement | null) => void\n  row: TableRow\n  /**\n   * Payload for dragging the whole current selection. Shared by every selected card, so it is built\n   * once per render rather than per card.\n   */\n  selectionDragData: HierarchyDragData\n  showTypePill: boolean\n  title: string\n}\n\n/**\n * One card in the plane: a drag source always, and a drop target when it is a folder.\n *\n * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be\n * called inside the plane's row loop.\n */\nexport const PlaneItem: React.FC<PlaneItemProps> = ({\n  ancestorIds,\n  baseClass,\n  flatIndex,\n  hierarchySlug,\n  href,\n  isDragDisabled,\n  isHierarchyGroup,\n  isSelected,\n  lockedUser,\n  onClickCapture,\n  onDoubleClick,\n  onKeyDown,\n  onPointerDownUnselected,\n  parentFieldName,\n  registerNode,\n  row,\n  selectionDragData,\n  showTypePill,\n  title,\n}) => {\n  const { activeDrag, canDrop } = useHierarchyDnd()\n\n  const rowDragData = useMemo<HierarchyDragData>(\n    () => ({\n      type: 'hierarchy-items',\n      items: [{ id: row.id, collectionSlug: row._collectionSlug, title }],\n      onMoveSuccess: selectionDragData.onMoveSuccess,\n      preview: [<DragPreviewItem isHierarchyGroup={isHierarchyGroup} key=\"preview\" row={row} />],\n    }),\n    [isHierarchyGroup, row, selectionDragData.onMoveSuccess, title],\n  )\n\n  // Dragging a card that is part of the selection moves the whole selection; dragging an unselected\n  // one moves just it.\n  const dragData = isSelected ? selectionDragData : rowDragData\n\n  const dropData = useMemo<HierarchyDropData | undefined>(\n    () =>\n      isHierarchyGroup\n        ? {\n            type: 'hierarchy-folder',\n            allowedCollections: row._allowedCollections as string[] | undefined,\n            ancestorIds,\n            folderId: row.id,\n            hierarchySlug,\n            parentFieldName,\n            title,\n          }\n        : undefined,\n    [ancestorIds, hierarchySlug, isHierarchyGroup, parentFieldName, row, title],\n  )\n\n  const rowKey = `${row._collectionSlug}-${row.id}`\n\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef: setDragRef,\n  } = useDraggable({\n    id: `hierarchy-card-${rowKey}`,\n    data: dragData,\n    disabled: isDragDisabled || Boolean(lockedUser),\n  })\n\n  const { isOver, setNodeRef: setDropRef } = useDroppable({\n    id: `hierarchy-card-drop-${rowKey}`,\n    data: dropData,\n    disabled: isDragDisabled || !dropData,\n  })\n\n  const dropState = isOver && dropData ? (canDrop(dropData) ? 'over' : 'invalid') : undefined\n\n  // A folder is both a drag source and a drop target, and the plane needs the same node for marquee\n  // hit-testing, so one callback fans it out to all three.\n  const setNodeRef = (node: HTMLElement | null) => {\n    setDragRef(node)\n    setDropRef(node)\n    registerNode(flatIndex, node)\n  }\n\n  /*\n   * Every card in the active drag fades, not just the one under the pointer, so a multi-card move\n   * shows what is travelling. Membership is tested against the drag's own items rather than by\n   * comparing payload identity, which would silently stop matching the moment the plane re-rendered\n   * and rebuilt the shared selection payload mid-drag.\n   */\n  const isBeingDragged =\n    !isDragDisabled &&\n    (isDragging ||\n      Boolean(\n        activeDrag?.items.some(\n          (item) =>\n            item.collectionSlug === row._collectionSlug && String(item.id) === String(row.id),\n        ),\n      ))\n\n  /*\n   * dnd-kit's sensors activate through listeners named exactly `onPointerDown` and `onKeyDown`, which\n   * are also the events this card needs for selection. Spreading `listeners` and then declaring\n   * either prop would silently overwrite the activator and no drag would ever start, so the two are\n   * composed by hand and the rest of the listeners spread as-is.\n   */\n  const {\n    onKeyDown: onDragKeyDown,\n    onPointerDown: onDragPointerDown,\n    ...remainingListeners\n  } = listeners ?? {}\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the card's own link remains the keyboard-operable control; these handlers only layer pointer selection and drag gestures on top of it\n    <li\n      {...attributes}\n      {...remainingListeners}\n      className={[`${baseClass}__item`, isBeingDragged && `${baseClass}__item--dragging`]\n        .filter(Boolean)\n        .join(' ')}\n      onClickCapture={(event) => onClickCapture(event, flatIndex)}\n      onDoubleClick={(event) => onDoubleClick(event, href)}\n      onKeyDown={(event) => {\n        onDragKeyDown?.(event)\n        onKeyDown(event, flatIndex)\n      }}\n      onPointerDown={(event) => {\n        // The sensor goes first so it sees the untouched event; the selection collapse that follows\n        // only schedules React state, which the sensor never reads.\n        onDragPointerDown?.(event)\n\n        if (!isSelected) {\n          onPointerDownUnselected(flatIndex)\n        }\n      }}\n      ref={setNodeRef}\n    >\n      <HierarchyCard\n        dropState={dropState}\n        href={href}\n        isHierarchyGroup={isHierarchyGroup}\n        isSelected={isSelected}\n        lockedUser={lockedUser}\n        row={row}\n        showTypePill={showTypePill}\n        title={title}\n      />\n    </li>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,YAAY,EAAEC,YAAY,QAAQ;AAC3C,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAQ/B,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,QAAQ;AAChC,SAASC,aAAa,QAAQ;AA4C9B;;;;;;AAMA,OAAO,MAAMC,SAAA,GAAsCA,CAAC;EAClDC,WAAW;EACXC,SAAS;EACTC,SAAS;EACTC,aAAa;EACbC,IAAI;EACJC,cAAc;EACdC,gBAAgB;EAChBC,UAAU;EACVC,UAAU;EACVC,cAAc;EACdC,aAAa;EACbC,SAAS;EACTC,uBAAuB;EACvBC,eAAe;EACfC,YAAY;EACZC,GAAG;EACHC,iBAAiB;EACjBC,YAAY;EACZC;AAAK,CACN;EACC,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAE,GAAGxB,eAAA;EAEhC,MAAMyB,WAAA,GAAc1B,OAAA,CAClB,OAAO;IACL2B,IAAA,EAAM;IACNC,KAAA,EAAO,CAAC;MAAEC,EAAA,EAAIT,GAAA,CAAIS,EAAE;MAAEC,cAAA,EAAgBV,GAAA,CAAIW,eAAe;MAAER;IAAM,EAAE;IACnES,aAAA,EAAeX,iBAAA,CAAkBW,aAAa;IAC9CC,OAAA,EAAS,C,aAACC,IAAA,CAAChC,eAAA;MAAgBS,gBAAA,EAAkBA,gBAAA;MAAgCS,GAAA,EAAKA;OAAf;EACrE,IACA,CAACT,gBAAA,EAAkBS,GAAA,EAAKC,iBAAA,CAAkBW,aAAa,EAAET,KAAA,CAAM;EAGjE;EACA;EACA,MAAMY,QAAA,GAAWvB,UAAA,GAAaS,iBAAA,GAAoBK,WAAA;EAElD,MAAMU,QAAA,GAAWpC,OAAA,CACf,MACEW,gBAAA,GACI;IACEgB,IAAA,EAAM;IACNU,kBAAA,EAAoBjB,GAAA,CAAIkB,mBAAmB;IAC3CjC,WAAA;IACAkC,QAAA,EAAUnB,GAAA,CAAIS,EAAE;IAChBrB,aAAA;IACAU,eAAA;IACAK;EACF,IACAiB,SAAA,EACN,CAACnC,WAAA,EAAaG,aAAA,EAAeG,gBAAA,EAAkBO,eAAA,EAAiBE,GAAA,EAAKG,KAAA,CAAM;EAG7E,MAAMkB,MAAA,GAAS,GAAGrB,GAAA,CAAIW,eAAe,IAAIX,GAAA,CAAIS,EAAE,EAAE;EAEjD,MAAM;IACJa,UAAU;IACVC,UAAU;IACVC,SAAS;IACTC,UAAA,EAAYC;EAAU,CACvB,GAAGjD,YAAA,CAAa;IACfgC,EAAA,EAAI,kBAAkBY,MAAA,EAAQ;IAC9BM,IAAA,EAAMZ,QAAA;IACNa,QAAA,EAAUtC,cAAA,IAAkBuC,OAAA,CAAQpC,UAAA;EACtC;EAEA,MAAM;IAAEqC,MAAM;IAAEL,UAAA,EAAYM;EAAU,CAAE,GAAGrD,YAAA,CAAa;IACtD+B,EAAA,EAAI,uBAAuBY,MAAA,EAAQ;IACnCM,IAAA,EAAMX,QAAA;IACNY,QAAA,EAAUtC,cAAA,IAAkB,CAAC0B;EAC/B;EAEA,MAAMgB,SAAA,GAAYF,MAAA,IAAUd,QAAA,GAAYX,OAAA,CAAQW,QAAA,IAAY,SAAS,YAAaI,SAAA;EAElF;EACA;EACA,MAAMK,UAAA,GAAcQ,IAAA;IAClBP,UAAA,CAAWO,IAAA;IACXF,UAAA,CAAWE,IAAA;IACXlC,YAAA,CAAaZ,SAAA,EAAW8C,IAAA;EAC1B;EAEA;;;;;;EAMA,MAAMC,cAAA,GACJ,CAAC5C,cAAA,KACAiC,UAAA,IACCM,OAAA,CACEzB,UAAA,EAAYI,KAAA,CAAM2B,IAAA,CACfC,IAAA,IACCA,IAAA,CAAK1B,cAAc,KAAKV,GAAA,CAAIW,eAAe,IAAI0B,MAAA,CAAOD,IAAA,CAAK3B,EAAE,MAAM4B,MAAA,CAAOrC,GAAA,CAAIS,EAAE,GAEtF;EAEJ;;;;;;EAMA,MAAM;IACJb,SAAA,EAAW0C,aAAa;IACxBC,aAAA,EAAeC,iBAAiB;IAChC,GAAGC;EAAA,CACJ,GAAGjB,SAAA,IAAa,CAAC;EAElB;IACE;;IACAV,IAAA,CAAC;MACE,GAAGQ,UAAU;MACb,GAAGmB,kBAAkB;MACtBC,SAAA,EAAW,CAAC,GAAGxD,SAAA,QAAiB,EAAEgD,cAAA,IAAkB,GAAGhD,SAAA,kBAA2B,CAAC,CAChFyD,MAAM,CAACd,OAAA,EACPe,IAAI,CAAC;MACRlD,cAAA,EAAiBmD,KAAA,IAAUnD,cAAA,CAAemD,KAAA,EAAO1D,SAAA;MACjDQ,aAAA,EAAgBkD,OAAA,IAAUlD,aAAA,CAAckD,OAAA,EAAOxD,IAAA;MAC/CO,SAAA,EAAYiD,OAAA;QACVP,aAAA,GAAgBO,OAAA;QAChBjD,SAAA,CAAUiD,OAAA,EAAO1D,SAAA;MACnB;MACAoD,aAAA,EAAgBM,OAAA;QACd;QACA;QACAL,iBAAA,GAAoBK,OAAA;QAEpB,IAAI,CAACrD,UAAA,EAAY;UACfK,uBAAA,CAAwBV,SAAA;QAC1B;MACF;MACA2D,GAAA,EAAKrB,UAAA;gBAEL,aAAAX,IAAA,CAAC/B,aAAA;QACCiD,SAAA,EAAWA,SAAA;QACX3C,IAAA,EAAMA,IAAA;QACNE,gBAAA,EAAkBA,gBAAA;QAClBC,UAAA,EAAYA,UAAA;QACZC,UAAA,EAAYA,UAAA;QACZO,GAAA,EAAKA,GAAA;QACLE,YAAA,EAAcA,YAAA;QACdC,KAAA,EAAOA;;;;AAIf","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the
+ * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.
+ */
+export declare function getThumbnailSrc({ doc }: {
+    doc: Record<string, unknown>;
+}): string | undefined;
+//# sourceMappingURL=getThumbnailSrc.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThumbnailSrc.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyCards/getThumbnailSrc.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,GAAG,MAAM,GAAG,SAAS,CAc7F"}

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.js

@@ -0,0 +1,21 @@
+import { getBestFitFromSizes, isImage } from 'payload/shared';
+/**
+ * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the
+ * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.
+ */
+export function getThumbnailSrc({
+  doc
+}) {
+  const mimeType = doc.mimeType;
+  const isFileImage = mimeType ? isImage(mimeType) : false;
+  if (!isFileImage) {
+    return doc.thumbnailURL;
+  }
+  return getBestFitFromSizes({
+    sizes: doc.sizes,
+    thumbnailURL: doc.thumbnailURL,
+    url: doc.url,
+    width: doc.width
+  });
+}
+//# sourceMappingURL=getThumbnailSrc.js.map

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThumbnailSrc.js","names":["getBestFitFromSizes","isImage","getThumbnailSrc","doc","mimeType","isFileImage","thumbnailURL","sizes","url","width"],"sources":["../../../../src/views/HierarchyList/HierarchyCards/getThumbnailSrc.ts"],"sourcesContent":["import { getBestFitFromSizes, isImage } from 'payload/shared'\n\n/**\n * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the\n * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.\n */\nexport function getThumbnailSrc({ doc }: { doc: Record<string, unknown> }): string | undefined {\n  const mimeType = doc.mimeType as string | undefined\n  const isFileImage = mimeType ? isImage(mimeType) : false\n\n  if (!isFileImage) {\n    return doc.thumbnailURL as string\n  }\n\n  return getBestFitFromSizes({\n    sizes: doc.sizes as Record<string, { url?: string; width?: number }>,\n    thumbnailURL: doc.thumbnailURL as string,\n    url: doc.url as string,\n    width: doc.width as number,\n  })\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAE7C;;;;AAIA,OAAO,SAASC,gBAAgB;EAAEC;AAAG,CAAoC;EACvE,MAAMC,QAAA,GAAWD,GAAA,CAAIC,QAAQ;EAC7B,MAAMC,WAAA,GAAcD,QAAA,GAAWH,OAAA,CAAQG,QAAA,IAAY;EAEnD,IAAI,CAACC,WAAA,EAAa;IAChB,OAAOF,GAAA,CAAIG,YAAY;EACzB;EAEA,OAAON,mBAAA,CAAoB;IACzBO,KAAA,EAAOJ,GAAA,CAAII,KAAK;IAChBD,YAAA,EAAcH,GAAA,CAAIG,YAAY;IAC9BE,GAAA,EAAKL,GAAA,CAAIK,GAAG;IACZC,KAAA,EAAON,GAAA,CAAIM;EACb;AACF","ignoreList":[]}

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

@@ -0,0 +1,115 @@
+@layer payload-default {
+  /*
+   * The plane stacks one band per group (folders, then documents) but owns the selection gestures
+   * itself, so a marquee or a Shift-click range can run across bands. It is also the containing
+   * block for the marquee, which is why the bands can't be the positioned elements.
+   */
+  .hierarchy-card-grid {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hierarchy-card-grid__band {
+    display: grid;
+    /*
+     * Holds the layout until the plane has been measured, which can only happen on the client: the
+     * measured count (2/4/5/8) then lands as an inline style - see `useColumnCount` in index.tsx.
+     * `auto-fill` is used rather than a fixed count because it resolves to the same ~200px card
+     * target the tiers aim for, so the first paint already matches the measured result closely and
+     * the grid doesn't visibly reflow on hydration.
+     */
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacer-3);
+    /*
+     * Matches the horizontal gutter the tables get from their own cells, so cards line up with
+     * the header above them instead of sitting flush against the panel edge.
+     */
+    padding-inline: var(--gutter-h);
+    padding-block-start: var(--spacer-4);
+    padding-block-end: var(--spacer-2);
+    margin: 0;
+    list-style: none;
+  }
+
+  /*
+   * Folders sit on the same grid as the documents - same columns, same gap - so the two bands read as
+   * one surface. Only the end padding differs, since the documents band below supplies that gap.
+   */
+  .hierarchy-card-grid__band--folders {
+    padding-block-end: var(--spacer-0);
+  }
+
+  /*
+   * Distinguishes documents that aren't grouped under any folder, e.g. "Documents not in a Folder"
+   * at the root of a hierarchy. Only some bands get one, so the band below tightens its own top
+   * padding rather than doubling up on the label's own spacing.
+   */
+  .hierarchy-card-grid__band-label {
+    margin: 0;
+    padding-inline: var(--gutter-h);
+    padding-block-start: var(--spacer-4);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .hierarchy-card-grid__band--labeled {
+    padding-block-start: var(--spacer-3);
+  }
+
+  /*
+   * Claims the container's leftover height so click-away and drag selection work over the empty
+   * space below the cards, not just the gaps between them. Only the last band grows, and its
+   * `align-content` has to be pinned to the start because a grid's default would otherwise stretch
+   * the auto-sized rows into that space.
+   */
+  .hierarchy-card-grid--fill-height {
+    flex-grow: 1;
+  }
+
+  .hierarchy-card-grid--fill-height .hierarchy-card-grid__band:last-child {
+    flex-grow: 1;
+    align-content: start;
+  }
+
+  /* Lets each card stretch to fill its grid cell rather than collapsing to content height. */
+  .hierarchy-card-grid__item {
+    display: flex;
+    min-width: 0;
+    /*
+     * A card is selected on click and opened on double click, so text selection would only ever be
+     * an accidental by-product of either gesture.
+     */
+    user-select: none;
+  }
+
+  .hierarchy-card-grid__item > * {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Cards stay in place while they are being dragged and fade instead, so the row keeps its shape and
+   * the stack under the cursor is the thing that reads as moving.
+   */
+  .hierarchy-card-grid__item--dragging {
+    opacity: 0.5;
+  }
+
+  /*
+   * Drag-selection marquee: an accent hairline over a translucent accent fill, mirroring the
+   * file-browser treatment. Absolutely positioned, so it stays out of the bands' flow, and inert
+   * so it never intercepts the pointer mid-drag.
+   */
+  .hierarchy-card-grid__marquee {
+    position: absolute;
+    z-index: 1;
+    border: var(--stroke-width-small) solid var(--color-border-selected);
+    background: color-mix(in srgb, var(--color-border-selected) 20%, transparent);
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,80 @@
+import type { User } from 'payload';
+import React from 'react';
+import type { TableRow } from '../HierarchyTable/types.js';
+import './index.css';
+/**
+ * Rows are drawn from several collections whose ids can collide, so identity is the pair.
+ */
+export declare const getRowKey: (row: TableRow) => string;
+/**
+ * One horizontal group of cards. Bands stack vertically and share a single selection scope, so a
+ * range selection or a marquee can run from a folder straight through the documents below it.
+ */
+export type PlaneBand = {
+    /**
+     * Hierarchy rows render as folder cards, related documents render as document cards.
+     */
+    isHierarchyGroup: boolean;
+    key: string;
+    /**
+     * Accessible name for this band, so each list is distinguishable when several render.
+     */
+    label?: string;
+    rows: TableRow[];
+    /**
+     * Heading rendered above the band, e.g. distinguishing documents with no folder from the ones
+     * inside a folder. Separate from `label` because that one is read on every band as an accessible
+     * name, while this is opt-in and only some bands need it.
+     */
+    visibleLabel?: string;
+};
+export type HierarchyCardGridProps = {
+    /**
+     * Ids of the folders between the root and the folder currently open, so a folder can't be dropped
+     * into its own subtree.
+     */
+    ancestorIds?: (number | string)[];
+    /**
+     * Fallback accessible name for bands that don't carry their own label.
+     */
+    ariaLabel?: string;
+    bands: PlaneBand[];
+    /**
+     * Grows the plane to fill the remaining height of its container, so click-away and drag selection
+     * reach the empty space below the cards rather than only the gaps between them. Requires the
+     * container to be a flex column.
+     */
+    fillHeight?: boolean;
+    /**
+     * Returns the user currently editing a row, mirroring the table's lock affordance. Locked rows
+     * cannot be selected, so their cards render a lock indicator.
+     */
+    getRowLockedUser?: (row: TableRow) => undefined | User;
+    /**
+     * Slug of the collection that owns the folder tree, used to address drop destinations.
+     */
+    hierarchySlug?: string;
+    /**
+     * Renders the cards as plain selectable tiles, with no drag activation and no dragging treatment.
+     * For planes with nowhere to drop, such as the flat collection grid outside the hierarchy view.
+     */
+    isDragDisabled?: boolean;
+    /**
+     * Clears the selection once a drop has moved it, since those documents are no longer on this page.
+     */
+    onMoveSuccess?: () => void;
+    /**
+     * Toggles a single row's selected state. Multi-card intents (replace, range) are resolved into
+     * the minimum set of per-row toggles by the plane, so consumers only implement one operation.
+     */
+    onSelectionChange: (row: TableRow) => void;
+    selectedKeys: Set<string>;
+    /**
+     * Renders each document card's collection label as a pill over its thumbnail. Defaults to showing
+     * the pill only when the documents span more than one collection - a grid of a single document
+     * type labels itself, so the pill would repeat the same word on every card.
+     */
+    showCollectionType?: boolean;
+};
+export declare function HierarchyCardGrid({ ancestorIds, ariaLabel, bands, fillHeight, getRowLockedUser, hierarchySlug, isDragDisabled, onMoveSuccess, onSelectionChange, selectedKeys, showCollectionType, }: HierarchyCardGridProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyCards/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,OAAO,KAA4D,MAAM,OAAO,CAAA;AAGhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAM1D,OAAO,aAAa,CAAA;AAIpB;;GAEG;AACH,eAAO,MAAM,SAAS,QAAS,QAAQ,KAAG,MAA4C,CAAA;AAoHtF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,GAAG,IAAI,CAAA;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B;;;OAGG;IACH,iBAAiB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAgB,EAChB,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,cAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,qBA+ZxB"}