@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.c6494b5

package/dist/elements/IframeLoader/index.js

@@ -1,94 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ShimmerEffect } from '../ShimmerEffect/index.js';
-import './index.scss';
-const shimmerDelays = {
-  minVisible: 300,
-  show: 1000
-};
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { DelayedSpinner } from '../DelayedSpinner/index.js';
+import './index.css';
 const baseClass = 'iframe-loader';
 /**
  * Loads an `iframe` element with the given source behind a loading indicator.
- * Notable behaviors:
- * 1. Only show if the load takes longer than x ms.
- * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
  */
 export const IframeLoader = ({
   onLoad: onLoadFromProps,
   src,
+  srcDoc,
   title,
   ...rest
 }) => {
-  const [isLoading, setIsLoading] = useState(Boolean(src));
-  const [showShimmer, setShowShimmer] = useState(false);
-  const shimmerShownAtRef = useRef(0);
-  const showTimerRef = useRef(null);
-  const hideTimerRef = useRef(null);
-  const clearTimers = useCallback(() => {
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
-  useEffect(() => {
-    clearTimers();
-    setIsLoading(Boolean(src));
-    setShowShimmer(false);
-    shimmerShownAtRef.current = 0;
-    if (!src) {
-      return;
-    }
-    showTimerRef.current = setTimeout(() => {
-      setShowShimmer(true);
-      shimmerShownAtRef.current = Date.now();
-      showTimerRef.current = null;
-    }, shimmerDelays.show);
-    return () => {
-      if (showTimerRef.current) {
-        clearTimeout(showTimerRef.current);
-        showTimerRef.current = null;
-      }
-    };
-  }, [clearTimers, src]);
+  const {
+    t
+  } = useTranslation();
+  const [loadedSource, setLoadedSource] = useState({
+    hasLoaded: false,
+    src,
+    srcDoc
+  });
+  const [loadingAnnouncement, setLoadingAnnouncement] = useState('');
+  if (loadedSource.src !== src || loadedSource.srcDoc !== srcDoc) {
+    setLoadedSource({
+      hasLoaded: false,
+      src,
+      srcDoc
+    });
+  }
+  const isLoading = Boolean(src || srcDoc) && !loadedSource.hasLoaded;
   useEffect(() => {
-    return () => {
-      clearTimers();
-    };
-  }, [clearTimers]);
+    setLoadingAnnouncement(isLoading ? t('general:loading') : '');
+  }, [isLoading, t]);
   const onLoad = useCallback(e => {
     if (typeof onLoadFromProps === 'function') {
       onLoadFromProps(e);
     }
-    setIsLoading(false);
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (!showShimmer) {
-      return;
-    }
-    const elapsed = Date.now() - shimmerShownAtRef.current;
-    const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed);
-    if (remainingVisible === 0) {
-      setShowShimmer(false);
-      return;
-    }
-    hideTimerRef.current = setTimeout(() => {
-      setShowShimmer(false);
-      hideTimerRef.current = null;
-    }, remainingVisible);
-  }, [showShimmer, onLoadFromProps]);
+    setLoadedSource({
+      hasLoaded: true,
+      src,
+      srcDoc
+    });
+  }, [onLoadFromProps, src, srcDoc]);
   return /*#__PURE__*/_jsxs("div", {
     className: `${baseClass}__container`,
-    children: [showShimmer && /*#__PURE__*/_jsx(ShimmerEffect, {
-      "aria-live": "polite",
-      height: "100%",
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-atomic": "true",
+      className: "sr-only",
       role: "status",
-      transparent: true
+      children: loadingAnnouncement
+    }), /*#__PURE__*/_jsx(DelayedSpinner, {
+      baseClass: baseClass,
+      isLoading: isLoading
     }), /*#__PURE__*/_jsx("iframe", {
       ...rest,
       className: [`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`].filter(Boolean).join(' '),
@@ -96,6 +61,7 @@ export const IframeLoader = ({
       // eslint-disable-next-line
       sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads",
       src: src,
+      srcDoc: srcDoc,
       title: title
     })]
   });

package/dist/elements/IframeLoader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","ShimmerEffect","shimmerDelays","minVisible","show","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","showShimmer","setShowShimmer","shimmerShownAtRef","showTimerRef","hideTimerRef","clearTimers","current","clearTimeout","setTimeout","Date","now","e","elapsed","remainingVisible","Math","max","_jsxs","className","_jsx","height","role","transparent","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst shimmerDelays = {\n  minVisible: 300,\n  show: 1000,\n}\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n * Notable behaviors:\n * 1. Only show if the load takes longer than x ms.\n * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  title,\n  ...rest\n}) => {\n  const [isLoading, setIsLoading] = useState(Boolean(src))\n  const [showShimmer, setShowShimmer] = useState(false)\n  const shimmerShownAtRef = useRef(0)\n\n  const showTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const hideTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const clearTimers = useCallback(() => {\n    if (showTimerRef.current) {\n      clearTimeout(showTimerRef.current)\n      showTimerRef.current = null\n    }\n\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current)\n      hideTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    clearTimers()\n    setIsLoading(Boolean(src))\n    setShowShimmer(false)\n    shimmerShownAtRef.current = 0\n\n    if (!src) {\n      return\n    }\n\n    showTimerRef.current = setTimeout(() => {\n      setShowShimmer(true)\n      shimmerShownAtRef.current = Date.now()\n      showTimerRef.current = null\n    }, shimmerDelays.show)\n\n    return () => {\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n    }\n  }, [clearTimers, src])\n\n  useEffect(() => {\n    return () => {\n      clearTimers()\n    }\n  }, [clearTimers])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n\n      setIsLoading(false)\n\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n\n      if (!showShimmer) {\n        return\n      }\n\n      const elapsed = Date.now() - shimmerShownAtRef.current\n      const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed)\n\n      if (remainingVisible === 0) {\n        setShowShimmer(false)\n        return\n      }\n\n      hideTimerRef.current = setTimeout(() => {\n        setShowShimmer(false)\n        hideTimerRef.current = null\n      }, remainingVisible)\n    },\n    [showShimmer, onLoadFromProps],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      {showShimmer && <ShimmerEffect aria-live=\"polite\" height=\"100%\" role=\"status\" transparent />}\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","useEffect","useState","useTranslation","DelayedSpinner","baseClass","IframeLoader","onLoad","onLoadFromProps","src","srcDoc","title","rest","t","loadedSource","setLoadedSource","hasLoaded","loadingAnnouncement","setLoadingAnnouncement","isLoading","Boolean","e","_jsxs","className","_jsx","role","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DelayedSpinner } from '../DelayedSpinner/index.js'\nimport './index.css'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  srcDoc,\n  title,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n  const [loadedSource, setLoadedSource] = useState({ hasLoaded: false, src, srcDoc })\n  const [loadingAnnouncement, setLoadingAnnouncement] = useState('')\n\n  if (loadedSource.src !== src || loadedSource.srcDoc !== srcDoc) {\n    setLoadedSource({ hasLoaded: false, src, srcDoc })\n  }\n\n  const isLoading = Boolean(src || srcDoc) && !loadedSource.hasLoaded\n\n  useEffect(() => {\n    setLoadingAnnouncement(isLoading ? t('general:loading') : '')\n  }, [isLoading, t])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n      setLoadedSource({ hasLoaded: true, src, srcDoc })\n    },\n    [onLoadFromProps, src, srcDoc],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      <span aria-atomic=\"true\" className=\"sr-only\" role=\"status\">\n        {loadingAnnouncement}\n      </span>\n      <DelayedSpinner baseClass={baseClass} isLoading={isLoading} />\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        srcDoc={srcDoc}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAEjD,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAMP,MAAMC,SAAA,GAAY;AAElB;;;AAGA,OAAO,MAAMC,YAAA,GAA4CA,CAAC;EACxDC,MAAA,EAAQC,eAAe;EACvBC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AAAA,CACJ;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGV,cAAA;EACd,MAAM,CAACW,YAAA,EAAcC,eAAA,CAAgB,GAAGb,QAAA,CAAS;IAAEc,SAAA,EAAW;IAAOP,GAAA;IAAKC;EAAO;EACjF,MAAM,CAACO,mBAAA,EAAqBC,sBAAA,CAAuB,GAAGhB,QAAA,CAAS;EAE/D,IAAIY,YAAA,CAAaL,GAAG,KAAKA,GAAA,IAAOK,YAAA,CAAaJ,MAAM,KAAKA,MAAA,EAAQ;IAC9DK,eAAA,CAAgB;MAAEC,SAAA,EAAW;MAAOP,GAAA;MAAKC;IAAO;EAClD;EAEA,MAAMS,SAAA,GAAYC,OAAA,CAAQX,GAAA,IAAOC,MAAA,KAAW,CAACI,YAAA,CAAaE,SAAS;EAEnEf,SAAA,CAAU;IACRiB,sBAAA,CAAuBC,SAAA,GAAYN,CAAA,CAAE,qBAAqB;EAC5D,GAAG,CAACM,SAAA,EAAWN,CAAA,CAAE;EAEjB,MAAMN,MAAA,GAASP,WAAA,CACZqB,CAAA;IACC,IAAI,OAAOb,eAAA,KAAoB,YAAY;MACzCA,eAAA,CAAgBa,CAAA;IAClB;IACAN,eAAA,CAAgB;MAAEC,SAAA,EAAW;MAAMP,GAAA;MAAKC;IAAO;EACjD,GACA,CAACF,eAAA,EAAiBC,GAAA,EAAKC,MAAA,CAAO;EAGhC,oBACEY,KAAA,CAAC;IAAIC,SAAA,EAAW,GAAGlB,SAAA,aAAsB;4BACvCmB,IAAA,CAAC;MAAK,eAAY;MAAOD,SAAA,EAAU;MAAUE,IAAA,EAAK;gBAC/CR;qBAEHO,IAAA,CAACpB,cAAA;MAAeC,SAAA,EAAWA,SAAA;MAAWc,SAAA,EAAWA;qBACjDK,IAAA,CAAC;MACE,GAAGZ,IAAI;MACRW,SAAA,EAAW,CAAC,GAAGlB,SAAA,UAAmB,EAAEc,SAAA,IAAa,GAAGd,SAAA,sBAA+B,CAAC,CACjFqB,MAAM,CAACN,OAAA,EACPO,IAAI,CAAC;MACRpB,MAAA,EAAQA,MAAA;MACR;MACAqB,OAAA,EAAQ;MACRnB,GAAA,EAAKA,GAAA;MACLC,MAAA,EAAQA,MAAA;MACRC,KAAA,EAAOA;;;AAIf","ignoreList":[]}

package/dist/elements/InputStepper/index.css

@@ -20,7 +20,6 @@
       background: transparent;
       color: var(--color-icon-secondary);
       cursor: pointer;
-      transition: color 100ms;
 
       &:hover:not(:disabled) {
         color: var(--color-icon);

package/dist/elements/ItemsDrawer/ItemSearch/index.css

@@ -19,14 +19,13 @@
   }
 
   .item-search__input {
-    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);
     width: 100%;
     border: var(--stroke-width-small) solid transparent;
-    border-radius: var(--radius-medium);
+    border-radius: var(--field-border-radius);
     background: var(--color-bg-secondary);
     color: var(--color-text);
     height: var(--spacer-4);

package/dist/elements/ItemsDrawer/index.css

@@ -54,12 +54,14 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .items-drawer__items {
       grid-template-columns: repeat(5, 1fr);
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .items-drawer__items-wrapper {
       padding-top: var(--spacer-2-5);
@@ -78,6 +80,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .items-drawer__items-wrapper {
       padding-top: var(--spacer-2-5);

package/dist/elements/ItemsDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ItemsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAKhE,OAAO,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,aAAa,CAAA;AAGpB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAA;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA0ED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmIlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ItemsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAKhE,OAAO,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,aAAa,CAAA;AAGpB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAA;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA0ED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyJlD,CAAA"}

package/dist/elements/ItemsDrawer/index.js

@@ -88,6 +88,7 @@ export const ItemsDrawer = props => {
     title
   } = props;
   const [searchTerm, setSearchTerm] = useState('');
+  const [resultsAnnouncement, setResultsAnnouncement] = useState('');
   const [filteredItems, setFilteredItems] = useState(items);
   const {
     closeModal,
@@ -100,6 +101,22 @@ export const ItemsDrawer = props => {
   const {
     config
   } = useConfig();
+  const isOpen = isModalOpen(drawerSlug);
+  useEffect(() => {
+    if (!isOpen) {
+      setResultsAnnouncement('');
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setResultsAnnouncement(searchTerm ? t('general:searchResults', {
+        count: filteredItems.length,
+        search: searchTerm
+      }) : t('hierarchy:searchResults', {
+        count: filteredItems.length
+      }));
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [filteredItems.length, isOpen, searchTerm, t]);
   const itemGroups = useMemo(() => {
     const groups = {
       _none: []
@@ -150,7 +167,12 @@ export const ItemsDrawer = props => {
   return /*#__PURE__*/_jsxs(Drawer, {
     slug: drawerSlug,
     title: finalTitle,
-    children: [/*#__PURE__*/_jsx(ItemSearch, {
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-atomic": "true",
+      className: "sr-only",
+      role: "status",
+      children: resultsAnnouncement
+    }), /*#__PURE__*/_jsx(ItemSearch, {
       placeholder: searchPlaceholder || t('fields:searchForBlock'),
       setSearchTerm: setSearchTerm
     }), /*#__PURE__*/_jsx("div", {

package/dist/elements/ItemsDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","toWords","React","useEffect","useMemo","useState","DefaultBlockImage","useConfig","useTranslation","Drawer","ThumbnailCard","ItemSearch","baseClass","getItemLabel","item","i18n","labels","singular","toLowerCase","label","slug","getItemSlug","getItemImageInfo","admin","images","thumbnail","imageAltText","undefined","alt","imageURL","url","getItemDisplayLabel","ItemsDrawer","props","addRowIndex","drawerSlug","items","onItemClick","searchPlaceholder","title","searchTerm","setSearchTerm","filteredItems","setFilteredItems","closeModal","isModalOpen","t","config","itemGroups","groups","_none","forEach","group","Object","hasOwn","push","searchTermToUse","matchingItems","reduce","matchedItems","_item","blocksMap","itemLabel","includes","finalTitle","_jsxs","_jsx","placeholder","className","entries","map","groupLabel","groupItems","length","filter","Boolean","join","index","displayLabel","alignLabel","onClick","src"],"sources":["../../../src/elements/ItemsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientBlock, ClientWidget, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { DefaultBlockImage } from '../../graphics/DefaultBlockImage/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ThumbnailCard } from '../ThumbnailCard/index.js'\nimport './index.css'\nimport { ItemSearch } from './ItemSearch/index.js'\n\nexport type DrawerItem = ClientBlock | ClientWidget\n\nexport type ItemsDrawerProps = {\n  readonly addRowIndex?: number\n  readonly drawerSlug: string\n  readonly items: (DrawerItem | string)[]\n  readonly labels?: Labels\n  readonly onItemClick: (item: DrawerItem, index?: number) => Promise<void> | void\n  readonly searchPlaceholder?: string\n  readonly title?: string\n}\n\nconst baseClass = 'items-drawer'\n\nconst getItemLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    if (typeof item.labels.singular === 'string') {\n      return item.labels.singular.toLowerCase()\n    }\n    if (typeof item.labels.singular === 'object') {\n      return getTranslation(item.labels.singular, i18n).toLowerCase()\n    }\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label.toLowerCase()\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n).toLowerCase()\n    }\n  }\n\n  // Fallback to slug\n  if ('slug' in item) {\n    return toWords(item.slug).toLowerCase()\n  }\n\n  return ''\n}\n\nconst getItemSlug = (item: DrawerItem): string => {\n  return item.slug\n}\n\nconst getItemImageInfo = (item: DrawerItem) => {\n  if ('admin' in item && item?.admin?.images?.thumbnail) {\n    const thumbnail = item.admin?.images.thumbnail\n    return {\n      imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,\n      imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url,\n    }\n  }\n  if ('imageURL' in item) {\n    return {\n      imageAltText: item.imageAltText,\n      imageURL: item.imageURL,\n    }\n  }\n  return { imageAltText: undefined, imageURL: undefined }\n}\n\nconst getItemDisplayLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    return getTranslation(item.labels.singular, i18n)\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n)\n    }\n  }\n\n  // Fallback to slug - convert to human-readable label\n  return toWords(item.slug)\n}\n\nexport const ItemsDrawer: React.FC<ItemsDrawerProps> = (props) => {\n  const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filteredItems, setFilteredItems] = useState(items)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const { config } = useConfig()\n\n  const itemGroups = useMemo(() => {\n    const groups: Record<string, (DrawerItem | string)[]> = {\n      _none: [],\n    }\n    filteredItems.forEach((item) => {\n      if (typeof item === 'object' && 'admin' in item && item.admin?.group) {\n        const group = item.admin.group\n        const label = typeof group === 'string' ? group : getTranslation(group, i18n)\n\n        if (Object.hasOwn(groups, label)) {\n          groups[label].push(item)\n        } else {\n          groups[label] = [item]\n        }\n      } else {\n        groups._none.push(item)\n      }\n    })\n    return groups\n  }, [filteredItems, i18n])\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingItems = items?.reduce((matchedItems, _item) => {\n      let item: DrawerItem\n\n      if (typeof _item === 'string') {\n        // Handle string references (for blocks)\n        item = config.blocksMap?.[_item] as DrawerItem\n      } else {\n        item = _item\n      }\n\n      if (item) {\n        const itemLabel = getItemLabel(item, i18n)\n        if (itemLabel.includes(searchTermToUse)) {\n          matchedItems.push(item)\n        }\n      }\n      return matchedItems\n    }, [] as DrawerItem[])\n\n    setFilteredItems(matchingItems || [])\n  }, [searchTerm, items, i18n, config.blocksMap])\n\n  const finalTitle =\n    title ||\n    (labels\n      ? t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })\n      : t('fields:addNew'))\n\n  return (\n    <Drawer slug={drawerSlug} title={finalTitle}>\n      <ItemSearch\n        placeholder={searchPlaceholder || t('fields:searchForBlock')}\n        setSearchTerm={setSearchTerm}\n      />\n      <div className={`${baseClass}__items-wrapper`}>\n        <ul className={`${baseClass}__item-groups`}>\n          {Object.entries(itemGroups).map(([groupLabel, groupItems]) =>\n            !groupItems.length ? null : (\n              <li\n                className={[\n                  `${baseClass}__item-group`,\n                  groupLabel === '_none' && `${baseClass}__item-group-none`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={groupLabel}\n              >\n                {groupLabel !== '_none' && (\n                  <h3 className={`${baseClass}__item-group-label`}>{groupLabel}</h3>\n                )}\n                <ul className={`${baseClass}__items`}>\n                  {groupItems.map((_item, index) => {\n                    const item =\n                      typeof _item === 'string' ? (config.blocksMap?.[_item] as DrawerItem) : _item\n\n                    if (!item) {\n                      return null\n                    }\n\n                    const { imageAltText, imageURL } = getItemImageInfo(item)\n                    const displayLabel = getItemDisplayLabel(item, i18n)\n\n                    return (\n                      <li className={`${baseClass}__item`} key={index}>\n                        <ThumbnailCard\n                          alignLabel=\"center\"\n                          label={displayLabel}\n                          onClick={() => {\n                            void onItemClick(item, addRowIndex)\n                            closeModal(drawerSlug)\n                          }}\n                          thumbnail={\n                            <div className={`${baseClass}__default-image`}>\n                              {imageURL ? (\n                                <img alt={imageAltText} src={imageURL} />\n                              ) : (\n                                <DefaultBlockImage />\n                              )}\n                            </div>\n                          }\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </li>\n            ),\n          )}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","toWords","React","useEffect","useMemo","useState","DefaultBlockImage","useConfig","useTranslation","Drawer","ThumbnailCard","ItemSearch","baseClass","getItemLabel","item","i18n","labels","singular","toLowerCase","label","slug","getItemSlug","getItemImageInfo","admin","images","thumbnail","imageAltText","undefined","alt","imageURL","url","getItemDisplayLabel","ItemsDrawer","props","addRowIndex","drawerSlug","items","onItemClick","searchPlaceholder","title","searchTerm","setSearchTerm","resultsAnnouncement","setResultsAnnouncement","filteredItems","setFilteredItems","closeModal","isModalOpen","t","config","isOpen","timeout","setTimeout","count","length","search","clearTimeout","itemGroups","groups","_none","forEach","group","Object","hasOwn","push","searchTermToUse","matchingItems","reduce","matchedItems","_item","blocksMap","itemLabel","includes","finalTitle","_jsxs","_jsx","className","role","placeholder","entries","map","groupLabel","groupItems","filter","Boolean","join","index","displayLabel","alignLabel","onClick","src"],"sources":["../../../src/elements/ItemsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientBlock, ClientWidget, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { DefaultBlockImage } from '../../graphics/DefaultBlockImage/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ThumbnailCard } from '../ThumbnailCard/index.js'\nimport './index.css'\nimport { ItemSearch } from './ItemSearch/index.js'\n\nexport type DrawerItem = ClientBlock | ClientWidget\n\nexport type ItemsDrawerProps = {\n  readonly addRowIndex?: number\n  readonly drawerSlug: string\n  readonly items: (DrawerItem | string)[]\n  readonly labels?: Labels\n  readonly onItemClick: (item: DrawerItem, index?: number) => Promise<void> | void\n  readonly searchPlaceholder?: string\n  readonly title?: string\n}\n\nconst baseClass = 'items-drawer'\n\nconst getItemLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    if (typeof item.labels.singular === 'string') {\n      return item.labels.singular.toLowerCase()\n    }\n    if (typeof item.labels.singular === 'object') {\n      return getTranslation(item.labels.singular, i18n).toLowerCase()\n    }\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label.toLowerCase()\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n).toLowerCase()\n    }\n  }\n\n  // Fallback to slug\n  if ('slug' in item) {\n    return toWords(item.slug).toLowerCase()\n  }\n\n  return ''\n}\n\nconst getItemSlug = (item: DrawerItem): string => {\n  return item.slug\n}\n\nconst getItemImageInfo = (item: DrawerItem) => {\n  if ('admin' in item && item?.admin?.images?.thumbnail) {\n    const thumbnail = item.admin?.images.thumbnail\n    return {\n      imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,\n      imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url,\n    }\n  }\n  if ('imageURL' in item) {\n    return {\n      imageAltText: item.imageAltText,\n      imageURL: item.imageURL,\n    }\n  }\n  return { imageAltText: undefined, imageURL: undefined }\n}\n\nconst getItemDisplayLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    return getTranslation(item.labels.singular, i18n)\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n)\n    }\n  }\n\n  // Fallback to slug - convert to human-readable label\n  return toWords(item.slug)\n}\n\nexport const ItemsDrawer: React.FC<ItemsDrawerProps> = (props) => {\n  const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [resultsAnnouncement, setResultsAnnouncement] = useState('')\n  const [filteredItems, setFilteredItems] = useState(items)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const { config } = useConfig()\n  const isOpen = isModalOpen(drawerSlug)\n\n  useEffect(() => {\n    if (!isOpen) {\n      setResultsAnnouncement('')\n      return\n    }\n\n    const timeout = setTimeout(() => {\n      setResultsAnnouncement(\n        searchTerm\n          ? t('general:searchResults', { count: filteredItems.length, search: searchTerm })\n          : t('hierarchy:searchResults', { count: filteredItems.length }),\n      )\n    }, 300)\n\n    return () => clearTimeout(timeout)\n  }, [filteredItems.length, isOpen, searchTerm, t])\n\n  const itemGroups = useMemo(() => {\n    const groups: Record<string, (DrawerItem | string)[]> = {\n      _none: [],\n    }\n    filteredItems.forEach((item) => {\n      if (typeof item === 'object' && 'admin' in item && item.admin?.group) {\n        const group = item.admin.group\n        const label = typeof group === 'string' ? group : getTranslation(group, i18n)\n\n        if (Object.hasOwn(groups, label)) {\n          groups[label].push(item)\n        } else {\n          groups[label] = [item]\n        }\n      } else {\n        groups._none.push(item)\n      }\n    })\n    return groups\n  }, [filteredItems, i18n])\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingItems = items?.reduce((matchedItems, _item) => {\n      let item: DrawerItem\n\n      if (typeof _item === 'string') {\n        // Handle string references (for blocks)\n        item = config.blocksMap?.[_item] as DrawerItem\n      } else {\n        item = _item\n      }\n\n      if (item) {\n        const itemLabel = getItemLabel(item, i18n)\n        if (itemLabel.includes(searchTermToUse)) {\n          matchedItems.push(item)\n        }\n      }\n      return matchedItems\n    }, [] as DrawerItem[])\n\n    setFilteredItems(matchingItems || [])\n  }, [searchTerm, items, i18n, config.blocksMap])\n\n  const finalTitle =\n    title ||\n    (labels\n      ? t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })\n      : t('fields:addNew'))\n\n  return (\n    <Drawer slug={drawerSlug} title={finalTitle}>\n      <span aria-atomic=\"true\" className=\"sr-only\" role=\"status\">\n        {resultsAnnouncement}\n      </span>\n      <ItemSearch\n        placeholder={searchPlaceholder || t('fields:searchForBlock')}\n        setSearchTerm={setSearchTerm}\n      />\n      <div className={`${baseClass}__items-wrapper`}>\n        <ul className={`${baseClass}__item-groups`}>\n          {Object.entries(itemGroups).map(([groupLabel, groupItems]) =>\n            !groupItems.length ? null : (\n              <li\n                className={[\n                  `${baseClass}__item-group`,\n                  groupLabel === '_none' && `${baseClass}__item-group-none`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={groupLabel}\n              >\n                {groupLabel !== '_none' && (\n                  <h3 className={`${baseClass}__item-group-label`}>{groupLabel}</h3>\n                )}\n                <ul className={`${baseClass}__items`}>\n                  {groupItems.map((_item, index) => {\n                    const item =\n                      typeof _item === 'string' ? (config.blocksMap?.[_item] as DrawerItem) : _item\n\n                    if (!item) {\n                      return null\n                    }\n\n                    const { imageAltText, imageURL } = getItemImageInfo(item)\n                    const displayLabel = getItemDisplayLabel(item, i18n)\n\n                    return (\n                      <li className={`${baseClass}__item`} key={index}>\n                        <ThumbnailCard\n                          alignLabel=\"center\"\n                          label={displayLabel}\n                          onClick={() => {\n                            void onItemClick(item, addRowIndex)\n                            closeModal(drawerSlug)\n                          }}\n                          thumbnail={\n                            <div className={`${baseClass}__default-image`}>\n                              {imageURL ? (\n                                <img alt={imageAltText} src={imageURL} />\n                              ) : (\n                                <DefaultBlockImage />\n                              )}\n                            </div>\n                          }\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </li>\n            ),\n          )}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LLMInstructionsCell/index.css

@@ -0,0 +1,11 @@
+@layer payload-default {
+  .llm-instructions-cell {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-inline-size: calc(var(--spacer-6) * 8);
+    min-inline-size: calc(var(--spacer-6) * 4);
+    overflow: hidden;
+    white-space: pre-line;
+  }
+}

package/dist/elements/LLMInstructionsCell/index.d.ts

@@ -0,0 +1,5 @@
+import type { DefaultServerCellComponentProps } from 'payload';
+import React from 'react';
+import './index.css';
+export declare const LLMInstructionsCell: ({ cellData, field, link, linkURL, }: DefaultServerCellComponentProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/LLMInstructionsCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LLMInstructionsCell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,mBAAmB,wCAK7B,+BAA+B,sBAUjC,CAAA"}

package/dist/elements/LLMInstructionsCell/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component needs the client boundary for Link.
+import { Link } from '../../exports/client/index.js';
+import './index.css';
+export const LLMInstructionsCell = ({
+  cellData,
+  field,
+  link,
+  linkURL
+}) => {
+  const text = typeof cellData === 'string' ? cellData : cellData && field.type === 'richText' && typeof field.editor !== 'function' ? field.editor?.converters?.toMarkdown?.({
+    data: cellData
+  }) ?? '' : '';
+  const preview = /*#__PURE__*/_jsx("span", {
+    className: "llm-instructions-cell",
+    children: text
+  });
+  return link && linkURL ? /*#__PURE__*/_jsx(Link, {
+    href: linkURL,
+    children: preview
+  }) : preview;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/LLMInstructionsCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","Link","LLMInstructionsCell","cellData","field","link","linkURL","text","type","editor","converters","toMarkdown","data","preview","_jsx","className","href"],"sources":["../../../src/elements/LLMInstructionsCell/index.tsx"],"sourcesContent":["import type { DefaultServerCellComponentProps } from 'payload'\n\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component needs the client boundary for Link.\nimport { Link } from '../../exports/client/index.js'\nimport './index.css'\n\nexport const LLMInstructionsCell = ({\n  cellData,\n  field,\n  link,\n  linkURL,\n}: DefaultServerCellComponentProps) => {\n  const text =\n    typeof cellData === 'string'\n      ? cellData\n      : cellData && field.type === 'richText' && typeof field.editor !== 'function'\n        ? (field.editor?.converters?.toMarkdown?.({ data: cellData }) ?? '')\n        : ''\n  const preview = <span className=\"llm-instructions-cell\">{text}</span>\n\n  return link && linkURL ? <Link href={linkURL}>{preview}</Link> : preview\n}\n"],"mappings":";AAEA,OAAOA,KAAA,MAAW;AAElB;AACA,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,OAAO,MAAMC,mBAAA,GAAsBA,CAAC;EAClCC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJC;AAAO,CACyB;EAChC,MAAMC,IAAA,GACJ,OAAOJ,QAAA,KAAa,WAChBA,QAAA,GACAA,QAAA,IAAYC,KAAA,CAAMI,IAAI,KAAK,cAAc,OAAOJ,KAAA,CAAMK,MAAM,KAAK,aAC9DL,KAAA,CAAMK,MAAM,EAAEC,UAAA,EAAYC,UAAA,GAAa;IAAEC,IAAA,EAAMT;EAAS,MAAM,KAC/D;EACR,MAAMU,OAAA,gBAAUC,IAAA,CAAC;IAAKC,SAAA,EAAU;cAAyBR;;EAEzD,OAAOF,IAAA,IAAQC,OAAA,gBAAUQ,IAAA,CAACb,IAAA;IAAKe,IAAA,EAAMV,OAAA;cAAUO;OAAkBA,OAAA;AACnE","ignoreList":[]}

package/dist/elements/LLMInstructionsDescription/index.css

@@ -0,0 +1,79 @@
+@layer payload-default {
+  .llm-instructions.tabs-field {
+    margin-block-start: var(--spacer-0);
+  }
+
+  .llm-instructions .tabs-field__tabs {
+    display: flex;
+    flex-wrap: wrap;
+    padding-inline: var(--gutter-h) calc(var(--gutter-h) + var(--spacer-5));
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  .llm-instructions .tabs-field__tab-button {
+    flex-shrink: 1;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    font-size: var(--text-body-large-font-size);
+    line-height: var(--text-body-large-line-height);
+    text-align: start;
+    white-space: normal;
+
+    &[aria-selected='false'] {
+      color: var(--color-text);
+    }
+  }
+
+  .llm-instructions__description {
+    color: var(--color-text);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    margin-block: var(--spacer-0) var(--spacer-3);
+  }
+
+  .llm-instructions__editor {
+    .rich-text-lexical__label-row {
+      display: none;
+    }
+
+    .editor {
+      --content-editable-padding-block-start: var(--spacer-4);
+      --content-editable-padding-inline-start: var(--spacer-5);
+    }
+
+    .ContentEditable__root {
+      min-block-size: calc(var(--spacer-6) * 8);
+    }
+
+    .LexicalEditorTheme {
+      --lexical-h2-font-size: var(--text-heading-medium-font-size);
+      --lexical-h2-line-height: var(--text-heading-medium-line-height);
+      --lexical-h3-font-size: var(--text-heading-small-font-size);
+      --lexical-h4-font-size: var(--text-heading-small-font-size);
+
+      font-size: var(--text-body-large-font-size);
+      line-height: var(--text-body-large-line-height);
+    }
+
+    .LexicalEditorTheme__h2,
+    .LexicalEditorTheme__h3,
+    .LexicalEditorTheme__h4 {
+      margin-block: var(--spacer-2-5);
+    }
+  }
+
+  .llm-instructions__editor--system .LexicalEditorTheme {
+    color: var(--color-text);
+  }
+
+  .llm-instructions__editor--system .editor-container .editor {
+    animation: none;
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text);
+    border-radius: var(--radius-medium);
+  }
+}

package/dist/elements/LLMInstructionsDescription/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.css';
+export declare const LLMInstructionsDescription: ({ isSystem }: {
+    isSystem?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/LLMInstructionsDescription/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LLMInstructionsDescription/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,0BAA0B,iBAA0B;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,sBAuBtF,CAAA"}

package/dist/elements/LLMInstructionsDescription/index.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.css';
+export const LLMInstructionsDescription = t0 => {
+  const $ = _c(5);
+  const {
+    isSystem: t1
+  } = t0;
+  const isSystem = t1 === undefined ? false : t1;
+  const {
+    data
+  } = useDocumentInfo();
+  const {
+    t
+  } = useTranslation();
+  const isGlobal = data?.entityType === "global";
+  let t2;
+  if ($[0] !== data?.title || $[1] !== isGlobal || $[2] !== isSystem || $[3] !== t) {
+    t2 = _jsx("p", {
+      className: "llm-instructions__description",
+      children: isSystem ? t(isGlobal ? "llmInstructions:globalSystemDescription" : "llmInstructions:collectionSystemDescription") : t(isGlobal ? "llmInstructions:globalDescription" : "llmInstructions:collectionDescription", {
+        label: data?.title || ""
+      })
+    });
+    $[0] = data?.title;
+    $[1] = isGlobal;
+    $[2] = isSystem;
+    $[3] = t;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/LLMInstructionsDescription/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useDocumentInfo","useTranslation","LLMInstructionsDescription","t0","$","isSystem","t1","undefined","data","t","isGlobal","entityType","t2","title","_jsx","className","children","label"],"sources":["../../../src/elements/LLMInstructionsDescription/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport const LLMInstructionsDescription = ({ isSystem = false }: { isSystem?: boolean }) => {\n  const { data } = useDocumentInfo()\n  const { t } = useTranslation()\n  const isGlobal = data?.entityType === 'global'\n\n  return (\n    <p className=\"llm-instructions__description\">\n      {isSystem\n        ? t(\n            isGlobal\n              ? 'llmInstructions:globalSystemDescription'\n              : 'llmInstructions:collectionSystemDescription',\n          )\n        : t(\n            isGlobal\n              ? 'llmInstructions:globalDescription'\n              : 'llmInstructions:collectionDescription',\n            {\n              label: data?.title || '',\n            },\n          )}\n    </p>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,OAAO,MAAMC,0BAAA,GAA6BC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,QAAA,EAAAC;EAAA,IAAAH,EAA4C;EAA1C,MAAAE,QAAA,GAAAA,EAAgB,KAAAE,SAAA,WAAhBF,EAAgB;EAC3D;IAAAG;EAAA,IAAiBR,eAAA;EACjB;IAAAS;EAAA,IAAcR,cAAA;EACd,MAAAS,QAAA,GAAiBF,IAAA,EAAAG,UAAA,KAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAI,IAAA,EAAAK,KAAA,IAAAT,CAAA,QAAAM,QAAA,IAAAN,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAK,CAAA;IAGpCG,EAAA,GAAAE,IAAA,CAAC;MAAAC,SAAA,EAAY;MAAAC,QAAA,EACVX,QAAA,GACGI,CAAA,CACEC,QAAA,GACI,4CACA,iDAEND,CAAA,CACEC,QAAA,GACI,sCACA;QAAAO,KAAA,EAEKT,IAAA,EAAAK,KAAA,IAAe;MAAA,CACxB;IAAA,C;;;;;;;;;SAbRD,E;CAiBJ","ignoreList":[]}

package/dist/elements/LLMInstructionsMenuItem/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const LLMInstructionsMenuItem: ({ collectionSlug }: {
+    collectionSlug?: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/LLMInstructionsMenuItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LLMInstructionsMenuItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,uBAAuB,uBAAwB;IAAE,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,sBAmBtF,CAAA"}

package/dist/elements/LLMInstructionsMenuItem/index.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAdminURL, instructionsCollectionSlug } from 'payload/shared';
+import React from 'react';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import * as PopupList from '../Popup/PopupButtonList/index.js';
+export const LLMInstructionsMenuItem = t0 => {
+  const $ = _c(4);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    config
+  } = useConfig();
+  const {
+    globalSlug
+  } = useDocumentInfo();
+  const {
+    t
+  } = useTranslation();
+  const id = collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`;
+  let t1;
+  if ($[0] !== config.routes.admin || $[1] !== id || $[2] !== t) {
+    t1 = _jsxs(React.Fragment, {
+      children: [_jsx(PopupList.Divider, {}), _jsx(PopupList.Button, {
+        href: formatAdminURL({
+          adminRoute: config.routes.admin,
+          path: `/collections/${instructionsCollectionSlug}/${encodeURIComponent(id)}`
+        }),
+        children: t("llmInstructions:editInstructions")
+      })]
+    });
+    $[0] = config.routes.admin;
+    $[1] = id;
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/LLMInstructionsMenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","instructionsCollectionSlug","React","useConfig","useDocumentInfo","useTranslation","PopupList","LLMInstructionsMenuItem","t0","$","collectionSlug","config","globalSlug","t","id","t1","routes","admin","_jsxs","Fragment","children","_jsx","Divider","Button","href","adminRoute","path","encodeURIComponent"],"sources":["../../../src/elements/LLMInstructionsMenuItem/index.tsx"],"sourcesContent":["'use client'\n\nimport { formatAdminURL, instructionsCollectionSlug } from 'payload/shared'\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\n\nexport const LLMInstructionsMenuItem = ({ collectionSlug }: { collectionSlug?: string }) => {\n  const { config } = useConfig()\n  const { globalSlug } = useDocumentInfo()\n  const { t } = useTranslation()\n  const id = collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`\n\n  return (\n    <React.Fragment>\n      <PopupList.Divider />\n      <PopupList.Button\n        href={formatAdminURL({\n          adminRoute: config.routes.admin,\n          path: `/collections/${instructionsCollectionSlug}/${encodeURIComponent(id)}`,\n        })}\n      >\n        {t('llmInstructions:editInstructions')}\n      </PopupList.Button>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,cAAc,EAAEC,0BAA0B,QAAQ;AAC3D,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,YAAYC,SAAA,MAAe;AAE3B,OAAO,MAAMC,uBAAA,GAA0BC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW;EAAA,IAAAF,EAA+C;EACrF;IAAAG;EAAA,IAAmBR,SAAA;EACnB;IAAAS;EAAA,IAAuBR,eAAA;EACvB;IAAAS;EAAA,IAAcR,cAAA;EACd,MAAAS,EAAA,GAAWJ,cAAA,GAAiB,cAAcA,cAAA,EAAgB,GAAG,UAAUE,UAAA,EAAY;EAAA,IAAAG,EAAA;EAAA,IAAAN,CAAA,QAAAE,MAAA,CAAAK,MAAA,CAAAC,KAAA,IAAAR,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAI,CAAA;IAGjFE,EAAA,GAAAG,KAAA,CAAAhB,KAAA,CAAAiB,QAAA;MAAAC,QAAA,GACEC,IAAA,CAAAf,SAAA,CAAAgB,OAAA,IAAkB,GAClBD,IAAA,CAAAf,SAAA,CAAAiB,MAAA;QAAAC,IAAA,EACQxB,cAAA;UAAAyB,UAAA,EACQd,MAAA,CAAAK,MAAA,CAAAC,KAAA;UAAAS,IAAA,EACN,gBAAAzB,0BAAA,IAA8C0B,kBAAA,CAAmBb,EAAA;QAAK,CAC9E;QAAAM,QAAA,EAECP,CAAA,CAAE;MAAA,C;;;;;;;;;SARPE,E;CAYJ","ignoreList":[]}

package/dist/elements/LayoutToggle/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type DocumentLayout = 'grid' | 'table';
+export type LayoutToggleProps = {
+    layout: DocumentLayout;
+    onChange: (layout: DocumentLayout) => void;
+};
+export declare const LayoutToggle: React.FC<LayoutToggleProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/LayoutToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LayoutToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqBpD,CAAA"}