@pro-laico/payload-icons 0.0.0

package/LICENSE.md

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024-2026 Pro Laico LLC <contact@prolaico.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @pro-laico/payload-icons
+
+SVG icons for [Payload CMS](https://payloadcms.com/) — an Icon upload collection that optimizes and sanitizes every SVG on save, plus a drop-in `<Icon name="…" />` server component.
+
+```bash
+pnpm add @pro-laico/payload-icons
+```
+
+**[Documentation →](https://payload-plugins.prolaico.com/docs/plugins/payload-icons)**

package/dist/cache/index.d.ts

@@ -0,0 +1,9 @@
+import 'server-only';
+/** The SVG string for an icon name, resolved through the active set. Returns
+ *  `undefined` when the name isn't in the active set. The single seam for
+ *  rendering an icon yourself (the `<Icon>` component is this plus `extractSvg*`). */
+export declare const getIconSvg: (name: string, draft?: boolean) => Promise<string | undefined>;
+/** Dev-only diagnosis for an unresolved icon name: one `console.warn` per name per process, naming
+ *  the cause — no active set / active set only a draft / name not in the set — with the fix. */
+export declare const warnIconMissDev: (name: string, draft?: boolean) => Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/dist/cache/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AA8DpB;;sFAEsF;AACtF,eAAO,MAAM,UAAU,GAAU,MAAM,MAAM,EAAE,eAAa,KAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAA0C,CAAA;AAKnI;gGACgG;AAChG,eAAO,MAAM,eAAe,GAAU,MAAM,MAAM,EAAE,eAAa,KAAG,OAAO,CAAC,IAAI,CA0B/E,CAAA"}

package/dist/cache/index.js

@@ -0,0 +1,96 @@
+import "server-only";
+import { cache } from "react";
+import { getIconSetSlug, getPayloadClient } from "../lib/getPayloadClient.js";
+/** The lane-correct active-set filter: published-lane reads also require `_status: 'published'`,
+ *  but only when the collection actually has drafts (safe if `drafts: false`). */ const activeWhere = (payload, slug, draft)=>{
+    const hasDrafts = Boolean(payload.collections?.[slug]?.config?.versions?.drafts);
+    return !draft && hasDrafts ? {
+        and: [
+            {
+                active: {
+                    equals: true
+                }
+            },
+            {
+                _status: {
+                    equals: 'published'
+                }
+            }
+        ]
+    } : {
+        active: {
+            equals: true
+        }
+    };
+};
+/**
+ * The active icon set's `name → svgString` map, resolved in a SINGLE query and
+ * memoized per request via React `cache()`. Finds the set with `active: true`
+ * and populates each row's icon `svgString` in one go (depth 1 + a scoped
+ * `populate`), so a page with K icons costs one query, not K+1.
+ *
+ * On the published frontend (`draft: false`) it filters `_status: 'published'`,
+ * so it reads the published-lane active set — a set activated only in the draft
+ * lane (staged but not published) resolves to nothing, never leaking to prod.
+ * In draft mode it reads the draft-lane active set. The `_status` filter is only
+ * applied when the collection actually has drafts (safe if `drafts: false`).
+ */ const getActiveIconSet = cache(async (draft)=>{
+    const payload = await getPayloadClient();
+    // Read the slug AFTER getPayloadClient(): resolving the config applies the plugin, which stashes it.
+    const slug = getIconSetSlug();
+    const set = await payload.find({
+        collection: slug,
+        where: activeWhere(payload, slug, draft),
+        limit: 1,
+        depth: 1,
+        draft,
+        pagination: false,
+        overrideAccess: true,
+        select: {
+            iconsArray: true
+        },
+        // Scope the populated icon docs to just the svgString we inline.
+        populate: {
+            icon: {
+                svgString: true
+            }
+        }
+    }).then((res)=>res.docs[0] || null);
+    if (!set) return {};
+    const map = {};
+    for (const row of set.iconsArray ?? []){
+        const svg = row?.icon && typeof row.icon === 'object' ? row.icon.svgString : undefined;
+        if (row?.name && svg) map[row.name] = svg;
+    }
+    return map;
+});
+/** The SVG string for an icon name, resolved through the active set. Returns
+ *  `undefined` when the name isn't in the active set. The single seam for
+ *  rendering an icon yourself (the `<Icon>` component is this plus `extractSvg*`). */ export const getIconSvg = async (name, draft = false)=>(await getActiveIconSet(draft))[name];
+/** Names already warned about, so each miss logs once per process. */ const warnedMisses = new Set();
+/** Dev-only diagnosis for an unresolved icon name: one `console.warn` per name per process, naming
+ *  the cause — no active set / active set only a draft / name not in the set — with the fix. */ export const warnIconMissDev = async (name, draft = false)=>{
+    if (process.env.NODE_ENV === 'production' || warnedMisses.has(name)) return;
+    warnedMisses.add(name);
+    try {
+        const payload = await getPayloadClient();
+        const slug = getIconSetSlug();
+        const activeSetExists = async (d)=>{
+            const find = {
+                collection: slug,
+                where: activeWhere(payload, slug, d),
+                limit: 1,
+                depth: 0,
+                draft: d,
+                overrideAccess: true
+            };
+            return (await payload.find(find)).docs.length > 0;
+        };
+        const cause = await activeSetExists(draft) ? `name '${name}' not in the active set — add it to the set's Icons array` : await activeSetExists(true) ? 'active set exists only as a draft — publish it' : 'no active icon set — activate one';
+        console.warn(`[payload-icons] <Icon name="${name}"> did not resolve: ${cause}`);
+    } catch  {
+    // Diagnostics only — never surface failures into render.
+    }
+};
+
+//# sourceMappingURL=index.js.map

package/dist/cache/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/cache/index.ts"],"sourcesContent":["import 'server-only'\n\nimport { cache } from 'react'\nimport type { CollectionSlug, Payload, Where } from 'payload'\n\nimport { getIconSetSlug, getPayloadClient } from '../lib/getPayloadClient'\n\n/** A `name → svgString` map for the active set's icons. */\ntype IconSetMap = Record<string, string>\n\n/** The lane-correct active-set filter: published-lane reads also require `_status: 'published'`,\n *  but only when the collection actually has drafts (safe if `drafts: false`). */\nconst activeWhere = (payload: Payload, slug: string, draft: boolean): Where => {\n  const hasDrafts = Boolean(\n    (payload.collections as Record<string, { config?: { versions?: { drafts?: unknown } } }>)?.[slug]?.config?.versions?.drafts,\n  )\n  return !draft && hasDrafts ? { and: [{ active: { equals: true } }, { _status: { equals: 'published' } }] } : { active: { equals: true } }\n}\n\n/**\n * The active icon set's `name → svgString` map, resolved in a SINGLE query and\n * memoized per request via React `cache()`. Finds the set with `active: true`\n * and populates each row's icon `svgString` in one go (depth 1 + a scoped\n * `populate`), so a page with K icons costs one query, not K+1.\n *\n * On the published frontend (`draft: false`) it filters `_status: 'published'`,\n * so it reads the published-lane active set — a set activated only in the draft\n * lane (staged but not published) resolves to nothing, never leaking to prod.\n * In draft mode it reads the draft-lane active set. The `_status` filter is only\n * applied when the collection actually has drafts (safe if `drafts: false`).\n */\nconst getActiveIconSet = cache(async (draft: boolean): Promise<IconSetMap> => {\n  const payload = await getPayloadClient()\n  // Read the slug AFTER getPayloadClient(): resolving the config applies the plugin, which stashes it.\n  const slug = getIconSetSlug()\n\n  const set = (await payload\n    .find({\n      collection: slug as CollectionSlug,\n      where: activeWhere(payload, slug, draft),\n      limit: 1,\n      depth: 1,\n      draft,\n      pagination: false,\n      overrideAccess: true,\n      select: { iconsArray: true },\n      // Scope the populated icon docs to just the svgString we inline.\n      populate: { icon: { svgString: true } },\n    })\n    .then((res) => res.docs[0] || null)) as {\n    iconsArray?: { name?: string | null; icon?: { svgString?: string | null } | string | number | null }[]\n  } | null\n\n  if (!set) return {}\n  const map: IconSetMap = {}\n  for (const row of set.iconsArray ?? []) {\n    const svg = row?.icon && typeof row.icon === 'object' ? row.icon.svgString : undefined\n    if (row?.name && svg) map[row.name] = svg\n  }\n  return map\n})\n\n/** The SVG string for an icon name, resolved through the active set. Returns\n *  `undefined` when the name isn't in the active set. The single seam for\n *  rendering an icon yourself (the `<Icon>` component is this plus `extractSvg*`). */\nexport const getIconSvg = async (name: string, draft = false): Promise<string | undefined> => (await getActiveIconSet(draft))[name]\n\n/** Names already warned about, so each miss logs once per process. */\nconst warnedMisses = new Set<string>()\n\n/** Dev-only diagnosis for an unresolved icon name: one `console.warn` per name per process, naming\n *  the cause — no active set / active set only a draft / name not in the set — with the fix. */\nexport const warnIconMissDev = async (name: string, draft = false): Promise<void> => {\n  if (process.env.NODE_ENV === 'production' || warnedMisses.has(name)) return\n  warnedMisses.add(name)\n  try {\n    const payload = await getPayloadClient()\n    const slug = getIconSetSlug()\n    const activeSetExists = async (d: boolean): Promise<boolean> => {\n      const find = {\n        collection: slug as CollectionSlug,\n        where: activeWhere(payload, slug, d),\n        limit: 1,\n        depth: 0,\n        draft: d,\n        overrideAccess: true,\n      }\n      return (await payload.find(find)).docs.length > 0\n    }\n    const cause = (await activeSetExists(draft))\n      ? `name '${name}' not in the active set — add it to the set's Icons array`\n      : (await activeSetExists(true))\n        ? 'active set exists only as a draft — publish it'\n        : 'no active icon set — activate one'\n    console.warn(`[payload-icons] <Icon name=\"${name}\"> did not resolve: ${cause}`)\n  } catch {\n    // Diagnostics only — never surface failures into render.\n  }\n}\n"],"names":["cache","getIconSetSlug","getPayloadClient","activeWhere","payload","slug","draft","hasDrafts","Boolean","collections","config","versions","drafts","and","active","equals","_status","getActiveIconSet","set","find","collection","where","limit","depth","pagination","overrideAccess","select","iconsArray","populate","icon","svgString","then","res","docs","map","row","svg","undefined","name","getIconSvg","warnedMisses","Set","warnIconMissDev","process","env","NODE_ENV","has","add","activeSetExists","d","length","cause","console","warn"],"mappings":"AAAA,OAAO,cAAa;AAEpB,SAASA,KAAK,QAAQ,QAAO;AAG7B,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,6BAAyB;AAK1E;gFACgF,GAChF,MAAMC,cAAc,CAACC,SAAkBC,MAAcC;IACnD,MAAMC,YAAYC,QACfJ,QAAQK,WAAW,EAAuE,CAACJ,KAAK,EAAEK,QAAQC,UAAUC;IAEvH,OAAO,CAACN,SAASC,YAAY;QAAEM,KAAK;YAAC;gBAAEC,QAAQ;oBAAEC,QAAQ;gBAAK;YAAE;YAAG;gBAAEC,SAAS;oBAAED,QAAQ;gBAAY;YAAE;SAAE;IAAC,IAAI;QAAED,QAAQ;YAAEC,QAAQ;QAAK;IAAE;AAC1I;AAEA;;;;;;;;;;;CAWC,GACD,MAAME,mBAAmBjB,MAAM,OAAOM;IACpC,MAAMF,UAAU,MAAMF;IACtB,qGAAqG;IACrG,MAAMG,OAAOJ;IAEb,MAAMiB,MAAO,MAAMd,QAChBe,IAAI,CAAC;QACJC,YAAYf;QACZgB,OAAOlB,YAAYC,SAASC,MAAMC;QAClCgB,OAAO;QACPC,OAAO;QACPjB;QACAkB,YAAY;QACZC,gBAAgB;QAChBC,QAAQ;YAAEC,YAAY;QAAK;QAC3B,iEAAiE;QACjEC,UAAU;YAAEC,MAAM;gBAAEC,WAAW;YAAK;QAAE;IACxC,GACCC,IAAI,CAAC,CAACC,MAAQA,IAAIC,IAAI,CAAC,EAAE,IAAI;IAIhC,IAAI,CAACf,KAAK,OAAO,CAAC;IAClB,MAAMgB,MAAkB,CAAC;IACzB,KAAK,MAAMC,OAAOjB,IAAIS,UAAU,IAAI,EAAE,CAAE;QACtC,MAAMS,MAAMD,KAAKN,QAAQ,OAAOM,IAAIN,IAAI,KAAK,WAAWM,IAAIN,IAAI,CAACC,SAAS,GAAGO;QAC7E,IAAIF,KAAKG,QAAQF,KAAKF,GAAG,CAACC,IAAIG,IAAI,CAAC,GAAGF;IACxC;IACA,OAAOF;AACT;AAEA;;oFAEoF,GACpF,OAAO,MAAMK,aAAa,OAAOD,MAAchC,QAAQ,KAAK,GAAkC,AAAC,CAAA,MAAMW,iBAAiBX,MAAK,CAAE,CAACgC,KAAK,CAAA;AAEnI,oEAAoE,GACpE,MAAME,eAAe,IAAIC;AAEzB;8FAC8F,GAC9F,OAAO,MAAMC,kBAAkB,OAAOJ,MAAchC,QAAQ,KAAK;IAC/D,IAAIqC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,aAAaM,GAAG,CAACR,OAAO;IACrEE,aAAaO,GAAG,CAACT;IACjB,IAAI;QACF,MAAMlC,UAAU,MAAMF;QACtB,MAAMG,OAAOJ;QACb,MAAM+C,kBAAkB,OAAOC;YAC7B,MAAM9B,OAAO;gBACXC,YAAYf;gBACZgB,OAAOlB,YAAYC,SAASC,MAAM4C;gBAClC3B,OAAO;gBACPC,OAAO;gBACPjB,OAAO2C;gBACPxB,gBAAgB;YAClB;YACA,OAAO,AAAC,CAAA,MAAMrB,QAAQe,IAAI,CAACA,KAAI,EAAGc,IAAI,CAACiB,MAAM,GAAG;QAClD;QACA,MAAMC,QAAQ,AAAC,MAAMH,gBAAgB1C,SACjC,CAAC,MAAM,EAAEgC,KAAK,yDAAyD,CAAC,GACxE,AAAC,MAAMU,gBAAgB,QACrB,mDACA;QACNI,QAAQC,IAAI,CAAC,CAAC,4BAA4B,EAAEf,KAAK,oBAAoB,EAAEa,OAAO;IAChF,EAAE,OAAM;IACN,yDAAyD;IAC3D;AACF,EAAC"}

package/dist/collections/Icon.d.ts

@@ -0,0 +1,14 @@
+import type { CollectionConfig } from 'payload';
+import type { IconCollectionOverrides } from '../types';
+/** The default slug for the icon collection. */
+export declare const ICON_SLUG = "icon";
+/**
+ * Build the `Icon` upload collection: accepts `image/svg+xml` uploads, optimizes + sanitizes
+ * each SVG on `beforeChange` (`formatSVGHook`), and stores the result as `svgString` for inline
+ * frontend rendering. Public read by default; logged-in-admin writes.
+ *
+ * Pass {@link IconCollectionOverrides} to append fields/hooks, override access, or rename the slug —
+ * additions stack on top of the defaults.
+ */
+export declare const Icon: (options?: IconCollectionOverrides) => CollectionConfig;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/collections/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/collections/Icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAEvD,gDAAgD;AAChD,eAAO,MAAM,SAAS,SAAS,CAAA;AAM/B;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,GAAI,UAAS,uBAA4B,KAAG,gBA0C5D,CAAA"}

package/dist/collections/Icon.js

@@ -0,0 +1,96 @@
+import { formatSVGHook } from "../hooks/formatSVG.js";
+import { defaultAdminAccess, defaultReadAccess } from "../lib/defaultAccess.js";
+import { mergeHooks } from "../lib/mergeHooks.js";
+/** The default slug for the icon collection. */ export const ICON_SLUG = 'icon';
+/** Admin import-map paths for the theme-aware inline previews (the stored file `<img>`s as black — invisible on the dark theme). */ const IconPreviewFieldPath = '@pro-laico/payload-icons/admin/iconPreview#IconPreviewField';
+const IconPreviewCellPath = '@pro-laico/payload-icons/admin/iconPreview#IconPreviewCell';
+/**
+ * Build the `Icon` upload collection: accepts `image/svg+xml` uploads, optimizes + sanitizes
+ * each SVG on `beforeChange` (`formatSVGHook`), and stores the result as `svgString` for inline
+ * frontend rendering. Public read by default; logged-in-admin writes.
+ *
+ * Pass {@link IconCollectionOverrides} to append fields/hooks, override access, or rename the slug —
+ * additions stack on top of the defaults.
+ */ export const Icon = (options = {})=>{
+    const { slug = ICON_SLUG, adminGroup = 'Assets', access, fields = [], hooks, upload } = options;
+    return {
+        slug,
+        labels: {
+            singular: 'Icon',
+            plural: 'Icons'
+        },
+        access: {
+            read: access?.read ?? defaultReadAccess,
+            create: access?.create ?? defaultAdminAccess,
+            update: access?.update ?? defaultAdminAccess,
+            delete: access?.delete ?? defaultAdminAccess
+        },
+        admin: {
+            group: adminGroup,
+            useAsTitle: 'filename',
+            defaultColumns: [
+                'filename',
+                'svgString',
+                'filesize',
+                'updatedAt'
+            ]
+        },
+        // Payload blocks SVG uploads by default (they're on its restricted-types list). This is an
+        // SVG-only collection and `formatSVGHook` sanitizes every file (scripts / on* handlers /
+        // javascript: URLs stripped) before storage, so we opt in. `mimeTypes` still scopes uploads
+        // to SVG, and the opt-in stays overridable via `options.upload`.
+        upload: {
+            mimeTypes: [
+                'image/svg+xml'
+            ],
+            allowRestrictedFileTypes: true,
+            ...upload
+        },
+        fields: [
+            {
+                name: 'iconPreview',
+                type: 'ui',
+                admin: {
+                    components: {
+                        Field: IconPreviewFieldPath
+                    },
+                    condition: (data)=>Boolean(data?.svgString)
+                }
+            },
+            {
+                name: 'optimized',
+                type: 'text',
+                admin: {
+                    readOnly: true,
+                    condition: (data)=>Boolean(data?.optimized)
+                }
+            },
+            {
+                name: 'svgString',
+                type: 'code',
+                admin: {
+                    components: {
+                        Cell: IconPreviewCellPath
+                    },
+                    language: 'xml',
+                    // Read-only: a direct edit would bypass formatSVGHook's sanitization (only runs on file
+                    // uploads) and the string is later inlined via dangerouslySetInnerHTML — re-upload to change.
+                    readOnly: true,
+                    condition: (data)=>Boolean(data?.svgString),
+                    editorOptions: {
+                        wordWrap: 'off',
+                        scrollBeyondLastLine: false
+                    }
+                }
+            },
+            ...fields
+        ],
+        hooks: mergeHooks({
+            beforeChange: [
+                formatSVGHook
+            ]
+        }, hooks)
+    };
+};
+
+//# sourceMappingURL=Icon.js.map

package/dist/collections/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collections/Icon.ts"],"sourcesContent":["import type { CollectionConfig } from 'payload'\nimport { formatSVGHook } from '../hooks/formatSVG'\nimport { defaultAdminAccess, defaultReadAccess } from '../lib/defaultAccess'\nimport { mergeHooks } from '../lib/mergeHooks'\nimport type { IconCollectionOverrides } from '../types'\n\n/** The default slug for the icon collection. */\nexport const ICON_SLUG = 'icon'\n\n/** Admin import-map paths for the theme-aware inline previews (the stored file `<img>`s as black — invisible on the dark theme). */\nconst IconPreviewFieldPath = '@pro-laico/payload-icons/admin/iconPreview#IconPreviewField'\nconst IconPreviewCellPath = '@pro-laico/payload-icons/admin/iconPreview#IconPreviewCell'\n\n/**\n * Build the `Icon` upload collection: accepts `image/svg+xml` uploads, optimizes + sanitizes\n * each SVG on `beforeChange` (`formatSVGHook`), and stores the result as `svgString` for inline\n * frontend rendering. Public read by default; logged-in-admin writes.\n *\n * Pass {@link IconCollectionOverrides} to append fields/hooks, override access, or rename the slug —\n * additions stack on top of the defaults.\n */\nexport const Icon = (options: IconCollectionOverrides = {}): CollectionConfig => {\n  const { slug = ICON_SLUG, adminGroup = 'Assets', access, fields = [], hooks, upload } = options\n\n  return {\n    slug,\n    labels: { singular: 'Icon', plural: 'Icons' },\n    access: {\n      read: access?.read ?? defaultReadAccess,\n      create: access?.create ?? defaultAdminAccess,\n      update: access?.update ?? defaultAdminAccess,\n      delete: access?.delete ?? defaultAdminAccess,\n    },\n    admin: { group: adminGroup, useAsTitle: 'filename', defaultColumns: ['filename', 'svgString', 'filesize', 'updatedAt'] },\n    // Payload blocks SVG uploads by default (they're on its restricted-types list). This is an\n    // SVG-only collection and `formatSVGHook` sanitizes every file (scripts / on* handlers /\n    // javascript: URLs stripped) before storage, so we opt in. `mimeTypes` still scopes uploads\n    // to SVG, and the opt-in stays overridable via `options.upload`.\n    upload: { mimeTypes: ['image/svg+xml'], allowRestrictedFileTypes: true, ...upload },\n    fields: [\n      {\n        name: 'iconPreview',\n        type: 'ui',\n        admin: { components: { Field: IconPreviewFieldPath }, condition: (data) => Boolean(data?.svgString) },\n      },\n      { name: 'optimized', type: 'text', admin: { readOnly: true, condition: (data) => Boolean(data?.optimized) } },\n      {\n        name: 'svgString',\n        type: 'code',\n        admin: {\n          components: { Cell: IconPreviewCellPath },\n          language: 'xml',\n          // Read-only: a direct edit would bypass formatSVGHook's sanitization (only runs on file\n          // uploads) and the string is later inlined via dangerouslySetInnerHTML — re-upload to change.\n          readOnly: true,\n          condition: (data) => Boolean(data?.svgString),\n          editorOptions: { wordWrap: 'off', scrollBeyondLastLine: false },\n        },\n      },\n      ...fields,\n    ],\n    hooks: mergeHooks({ beforeChange: [formatSVGHook] }, hooks),\n  }\n}\n"],"names":["formatSVGHook","defaultAdminAccess","defaultReadAccess","mergeHooks","ICON_SLUG","IconPreviewFieldPath","IconPreviewCellPath","Icon","options","slug","adminGroup","access","fields","hooks","upload","labels","singular","plural","read","create","update","delete","admin","group","useAsTitle","defaultColumns","mimeTypes","allowRestrictedFileTypes","name","type","components","Field","condition","data","Boolean","svgString","readOnly","optimized","Cell","language","editorOptions","wordWrap","scrollBeyondLastLine","beforeChange"],"mappings":"AACA,SAASA,aAAa,QAAQ,wBAAoB;AAClD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,0BAAsB;AAC5E,SAASC,UAAU,QAAQ,uBAAmB;AAG9C,8CAA8C,GAC9C,OAAO,MAAMC,YAAY,OAAM;AAE/B,kIAAkI,GAClI,MAAMC,uBAAuB;AAC7B,MAAMC,sBAAsB;AAE5B;;;;;;;CAOC,GACD,OAAO,MAAMC,OAAO,CAACC,UAAmC,CAAC,CAAC;IACxD,MAAM,EAAEC,OAAOL,SAAS,EAAEM,aAAa,QAAQ,EAAEC,MAAM,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGN;IAExF,OAAO;QACLC;QACAM,QAAQ;YAAEC,UAAU;YAAQC,QAAQ;QAAQ;QAC5CN,QAAQ;YACNO,MAAMP,QAAQO,QAAQhB;YACtBiB,QAAQR,QAAQQ,UAAUlB;YAC1BmB,QAAQT,QAAQS,UAAUnB;YAC1BoB,QAAQV,QAAQU,UAAUpB;QAC5B;QACAqB,OAAO;YAAEC,OAAOb;YAAYc,YAAY;YAAYC,gBAAgB;gBAAC;gBAAY;gBAAa;gBAAY;aAAY;QAAC;QACvH,2FAA2F;QAC3F,yFAAyF;QACzF,4FAA4F;QAC5F,iEAAiE;QACjEX,QAAQ;YAAEY,WAAW;gBAAC;aAAgB;YAAEC,0BAA0B;YAAM,GAAGb,MAAM;QAAC;QAClFF,QAAQ;YACN;gBACEgB,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBAAEQ,YAAY;wBAAEC,OAAO1B;oBAAqB;oBAAG2B,WAAW,CAACC,OAASC,QAAQD,MAAME;gBAAW;YACtG;YACA;gBAAEP,MAAM;gBAAaC,MAAM;gBAAQP,OAAO;oBAAEc,UAAU;oBAAMJ,WAAW,CAACC,OAASC,QAAQD,MAAMI;gBAAW;YAAE;YAC5G;gBACET,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBACLQ,YAAY;wBAAEQ,MAAMhC;oBAAoB;oBACxCiC,UAAU;oBACV,wFAAwF;oBACxF,8FAA8F;oBAC9FH,UAAU;oBACVJ,WAAW,CAACC,OAASC,QAAQD,MAAME;oBACnCK,eAAe;wBAAEC,UAAU;wBAAOC,sBAAsB;oBAAM;gBAChE;YACF;eACG9B;SACJ;QACDC,OAAOV,WAAW;YAAEwC,cAAc;gBAAC3C;aAAc;QAAC,GAAGa;IACvD;AACF,EAAC"}

package/dist/collections/IconRequest.d.ts

@@ -0,0 +1,30 @@
+import type { CollectionConfig, Field } from 'payload';
+/** Slug of the runtime icon-request diagnostic collection. */
+export declare const ICON_REQUEST_SLUG = "iconRequest";
+/**
+ * Overrides for {@link createIconRequestCollection}. All additive on top of the
+ * built-in `name` / `count` / `firstRequestedAt` / `lastRequestedAt` fields.
+ */
+export interface IconRequestCollectionOverrides {
+    /** Override the `admin.group` sidebar label. @default 'Sets' */
+    group?: string;
+    /** Extra fields appended after the built-ins. */
+    fields?: Field[];
+    /** Additional Payload hooks merged onto the collection. */
+    hooks?: CollectionConfig['hooks'];
+}
+/**
+ * Diagnostic collection that records icon names requested at runtime which did
+ * NOT resolve to an icon in the active set — the live counterpart to the
+ * build-time usage manifest. Populated (throttled, fire-and-forget) by the
+ * `<Icon>` server component when `iconsPlugin({ trackRequests: true })` is set,
+ * and surfaced in the IconSet "Requested icons" panel.
+ *
+ * Unlike the static scan, this captures DYNAMIC names (`<Icon name={slug} />`)
+ * and genuine production misses — exactly the names a static pass can't see.
+ *
+ * Rows are written by the recorder via `overrideAccess`; admin access is
+ * read/update/delete for authenticated users (it's data you prune, not author).
+ */
+export declare const createIconRequestCollection: (opts?: IconRequestCollectionOverrides) => CollectionConfig;
+//# sourceMappingURL=IconRequest.d.ts.map

package/dist/collections/IconRequest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconRequest.d.ts","sourceRoot":"","sources":["../../src/collections/IconRequest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAItD,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,gBAAgB,CAAA;AAE9C;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC7C,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAChB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;CAClC;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,2BAA2B,GAAI,OAAM,8BAAmC,KAAG,gBA4BvF,CAAA"}

package/dist/collections/IconRequest.js

@@ -0,0 +1,82 @@
+import { authd } from "../lib/authenticated.js";
+/** Slug of the runtime icon-request diagnostic collection. */ export const ICON_REQUEST_SLUG = 'iconRequest';
+/**
+ * Diagnostic collection that records icon names requested at runtime which did
+ * NOT resolve to an icon in the active set — the live counterpart to the
+ * build-time usage manifest. Populated (throttled, fire-and-forget) by the
+ * `<Icon>` server component when `iconsPlugin({ trackRequests: true })` is set,
+ * and surfaced in the IconSet "Requested icons" panel.
+ *
+ * Unlike the static scan, this captures DYNAMIC names (`<Icon name={slug} />`)
+ * and genuine production misses — exactly the names a static pass can't see.
+ *
+ * Rows are written by the recorder via `overrideAccess`; admin access is
+ * read/update/delete for authenticated users (it's data you prune, not author).
+ */ export const createIconRequestCollection = (opts = {})=>{
+    const { group = 'Sets', fields: extraFields = [], hooks } = opts;
+    return {
+        slug: ICON_REQUEST_SLUG,
+        access: {
+            create: authd,
+            delete: authd,
+            read: authd,
+            update: authd
+        },
+        admin: {
+            group,
+            useAsTitle: 'name',
+            defaultColumns: [
+                'name',
+                'count',
+                'lastRequestedAt'
+            ],
+            // Hidden from the sidebar nav — it's a diagnostic feed surfaced through the
+            // IconSet "Requested icons" panel (which reads/clears it via the API), not
+            // a collection editors browse directly. `hidden` only affects nav/admin
+            // visibility; the REST + local API still work, so the panel and recorder
+            // are unaffected.
+            hidden: true,
+            description: 'Icon names requested at runtime that did not resolve to an icon in the active set. Populated when iconsPlugin({ trackRequests: true }) is set; compare against the IconSet usage panel.'
+        },
+        fields: [
+            {
+                name: 'name',
+                type: 'text',
+                required: true,
+                unique: true,
+                index: true,
+                admin: {
+                    readOnly: true
+                }
+            },
+            {
+                name: 'count',
+                type: 'number',
+                defaultValue: 1,
+                admin: {
+                    readOnly: true
+                }
+            },
+            {
+                name: 'firstRequestedAt',
+                type: 'date',
+                admin: {
+                    readOnly: true
+                }
+            },
+            {
+                name: 'lastRequestedAt',
+                type: 'date',
+                admin: {
+                    readOnly: true
+                }
+            },
+            ...extraFields
+        ],
+        ...hooks ? {
+            hooks
+        } : {}
+    };
+};
+
+//# sourceMappingURL=IconRequest.js.map

package/dist/collections/IconRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collections/IconRequest.ts"],"sourcesContent":["import type { CollectionConfig, Field } from 'payload'\n\nimport { authd } from '../lib/authenticated'\n\n/** Slug of the runtime icon-request diagnostic collection. */\nexport const ICON_REQUEST_SLUG = 'iconRequest'\n\n/**\n * Overrides for {@link createIconRequestCollection}. All additive on top of the\n * built-in `name` / `count` / `firstRequestedAt` / `lastRequestedAt` fields.\n */\nexport interface IconRequestCollectionOverrides {\n  /** Override the `admin.group` sidebar label. @default 'Sets' */\n  group?: string\n  /** Extra fields appended after the built-ins. */\n  fields?: Field[]\n  /** Additional Payload hooks merged onto the collection. */\n  hooks?: CollectionConfig['hooks']\n}\n\n/**\n * Diagnostic collection that records icon names requested at runtime which did\n * NOT resolve to an icon in the active set — the live counterpart to the\n * build-time usage manifest. Populated (throttled, fire-and-forget) by the\n * `<Icon>` server component when `iconsPlugin({ trackRequests: true })` is set,\n * and surfaced in the IconSet \"Requested icons\" panel.\n *\n * Unlike the static scan, this captures DYNAMIC names (`<Icon name={slug} />`)\n * and genuine production misses — exactly the names a static pass can't see.\n *\n * Rows are written by the recorder via `overrideAccess`; admin access is\n * read/update/delete for authenticated users (it's data you prune, not author).\n */\nexport const createIconRequestCollection = (opts: IconRequestCollectionOverrides = {}): CollectionConfig => {\n  const { group = 'Sets', fields: extraFields = [], hooks } = opts\n\n  return {\n    slug: ICON_REQUEST_SLUG,\n    access: { create: authd, delete: authd, read: authd, update: authd },\n    admin: {\n      group,\n      useAsTitle: 'name',\n      defaultColumns: ['name', 'count', 'lastRequestedAt'],\n      // Hidden from the sidebar nav — it's a diagnostic feed surfaced through the\n      // IconSet \"Requested icons\" panel (which reads/clears it via the API), not\n      // a collection editors browse directly. `hidden` only affects nav/admin\n      // visibility; the REST + local API still work, so the panel and recorder\n      // are unaffected.\n      hidden: true,\n      description:\n        'Icon names requested at runtime that did not resolve to an icon in the active set. Populated when iconsPlugin({ trackRequests: true }) is set; compare against the IconSet usage panel.',\n    },\n    fields: [\n      { name: 'name', type: 'text', required: true, unique: true, index: true, admin: { readOnly: true } },\n      { name: 'count', type: 'number', defaultValue: 1, admin: { readOnly: true } },\n      { name: 'firstRequestedAt', type: 'date', admin: { readOnly: true } },\n      { name: 'lastRequestedAt', type: 'date', admin: { readOnly: true } },\n      ...extraFields,\n    ],\n    ...(hooks ? { hooks } : {}),\n  }\n}\n"],"names":["authd","ICON_REQUEST_SLUG","createIconRequestCollection","opts","group","fields","extraFields","hooks","slug","access","create","delete","read","update","admin","useAsTitle","defaultColumns","hidden","description","name","type","required","unique","index","readOnly","defaultValue"],"mappings":"AAEA,SAASA,KAAK,QAAQ,0BAAsB;AAE5C,4DAA4D,GAC5D,OAAO,MAAMC,oBAAoB,cAAa;AAe9C;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAAuC,CAAC,CAAC;IACnF,MAAM,EAAEC,QAAQ,MAAM,EAAEC,QAAQC,cAAc,EAAE,EAAEC,KAAK,EAAE,GAAGJ;IAE5D,OAAO;QACLK,MAAMP;QACNQ,QAAQ;YAAEC,QAAQV;YAAOW,QAAQX;YAAOY,MAAMZ;YAAOa,QAAQb;QAAM;QACnEc,OAAO;YACLV;YACAW,YAAY;YACZC,gBAAgB;gBAAC;gBAAQ;gBAAS;aAAkB;YACpD,4EAA4E;YAC5E,2EAA2E;YAC3E,wEAAwE;YACxE,yEAAyE;YACzE,kBAAkB;YAClBC,QAAQ;YACRC,aACE;QACJ;QACAb,QAAQ;YACN;gBAAEc,MAAM;gBAAQC,MAAM;gBAAQC,UAAU;gBAAMC,QAAQ;gBAAMC,OAAO;gBAAMT,OAAO;oBAAEU,UAAU;gBAAK;YAAE;YACnG;gBAAEL,MAAM;gBAASC,MAAM;gBAAUK,cAAc;gBAAGX,OAAO;oBAAEU,UAAU;gBAAK;YAAE;YAC5E;gBAAEL,MAAM;gBAAoBC,MAAM;gBAAQN,OAAO;oBAAEU,UAAU;gBAAK;YAAE;YACpE;gBAAEL,MAAM;gBAAmBC,MAAM;gBAAQN,OAAO;oBAAEU,UAAU;gBAAK;YAAE;eAChElB;SACJ;QACD,GAAIC,QAAQ;YAAEA;QAAM,IAAI,CAAC,CAAC;IAC5B;AACF,EAAC"}

package/dist/collections/IconSet.d.ts

@@ -0,0 +1,43 @@
+import type { CollectionConfig, Field, PayloadRequest } from 'payload';
+/** The default slug for the icon-set collection. */
+export declare const ICON_SET_SLUG = "iconSet";
+/**
+ * Overrides for the `iconSet` collection — a named, ordered `name → icon` mapping
+ * into the shared `icon` pool. One set is `active` at a time; the frontend renders
+ * it (see {@link enforceSingleActive}).
+ */
+export interface IconSetCollectionOverrides {
+    /** Slug for the icon-set collection. @default 'iconSet' */
+    slug?: string;
+    /**
+     * Live-preview URL generator. When provided, wires both `admin.preview`
+     * (legacy iframe) and `admin.livePreview.url`. Omitted by default.
+     */
+    livePreviewUrl?: (args: {
+        data: Record<string, unknown>;
+        req: PayloadRequest;
+    }) => string | Promise<string>;
+    /** Override the `admin.group` sidebar label. @default 'Sets' */
+    group?: string;
+    /** Additional collection hooks. */
+    hooks?: CollectionConfig['hooks'];
+    /** Extra set-level fields appended to the Settings tab, below the title. */
+    fields?: Field[];
+    /** Extra fields appended to each `iconsArray` row, after the built-in `name` + `icon`. */
+    iconRowFields?: Field[];
+    /** Enable drafts/versions on the collection (per-set draft → publish). @default true */
+    drafts?: boolean;
+}
+/**
+ * Builds the `iconSet` collection — a named `name → icon` mapping with a
+ * single-active toggle; the frontend renders the active set.
+ *
+ * `iconSlug` and `usagePanel` are wired by the plugin (from the icon collection's
+ * slug and the top-level `usagePanel` option); they aren't part of the public
+ * override surface.
+ */
+export declare const createIconSetCollection: (opts?: IconSetCollectionOverrides & {
+    iconSlug?: string;
+    usagePanel?: boolean;
+}) => CollectionConfig;
+//# sourceMappingURL=IconSet.d.ts.map

package/dist/collections/IconSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSet.d.ts","sourceRoot":"","sources":["../../src/collections/IconSet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAkB,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAOtF,oDAAoD;AACpD,eAAO,MAAM,aAAa,YAAY,CAAA;AAWtC;;;;GAIG;AACH,MAAM,WAAW,0BAA0B;IACzC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,GAAG,EAAE,cAAc,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IAC3G,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAChB,0FAA0F;IAC1F,aAAa,CAAC,EAAE,KAAK,EAAE,CAAA;IACvB,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAM,0BAA0B,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,KAClF,gBAiFF,CAAA"}

package/dist/collections/IconSet.js

@@ -0,0 +1,168 @@
+import { activeField, enforceSingleActive } from "../lib/activeField.js";
+import { authd } from "../lib/authenticated.js";
+import { mergeHooks } from "../lib/mergeHooks.js";
+import { toKebabCase } from "../lib/titleCase.js";
+/** The default slug for the icon-set collection. */ export const ICON_SET_SLUG = 'iconSet';
+/** Admin import-map path for the IconSet "requested icons" usage panel. */ const IconUsagePanelPath = '@pro-laico/payload-icons/admin/iconUsagePanel';
+/** Admin import-map path for the per-row label inside `iconsArray`. */ const IconRowLabelPath = '@pro-laico/payload-icons/admin/iconRowLabel';
+/** Inline title field so the collection has no template dependency. */ const titleField = (defaultValue = 'New Icon Set')=>({
+        name: 'title',
+        type: 'text',
+        required: true,
+        unique: true,
+        defaultValue
+    });
+/**
+ * Builds the `iconSet` collection — a named `name → icon` mapping with a
+ * single-active toggle; the frontend renders the active set.
+ *
+ * `iconSlug` and `usagePanel` are wired by the plugin (from the icon collection's
+ * slug and the top-level `usagePanel` option); they aren't part of the public
+ * override surface.
+ */ export const createIconSetCollection = (opts = {})=>{
+    const { slug = ICON_SET_SLUG, iconSlug = 'icon', livePreviewUrl, group = 'Sets', hooks, fields: extraFields = [], iconRowFields = [], usagePanel = true, drafts = true } = opts;
+    // The "Requested icons" panel — a server UI field that scans usage (live in dev,
+    // manifest in prod) and diffs it against this set's icons. Config-free: the panel
+    // uses its defaults (ICON_USAGE_MANIFEST env for the manifest path in prod).
+    const usageField = usagePanel ? [
+        {
+            name: 'iconUsage',
+            type: 'ui',
+            admin: {
+                components: {
+                    Field: IconUsagePanelPath
+                }
+            }
+        }
+    ] : [];
+    return {
+        slug,
+        labels: {
+            singular: 'Icon Set',
+            plural: 'Icon Sets'
+        },
+        access: {
+            create: authd,
+            delete: authd,
+            read: authd,
+            update: authd
+        },
+        admin: {
+            group,
+            useAsTitle: 'title',
+            defaultColumns: [
+                'title',
+                'active',
+                '_status'
+            ],
+            ...livePreviewUrl && {
+                preview: (data, { req })=>livePreviewUrl({
+                        data: data,
+                        req
+                    }),
+                livePreview: {
+                    url: ({ data, req })=>livePreviewUrl({
+                            data: data,
+                            req
+                        })
+                }
+            }
+        },
+        fields: [
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Settings',
+                        fields: [
+                            {
+                                type: 'row',
+                                fields: [
+                                    activeField,
+                                    titleField('New Icon Set')
+                                ]
+                            },
+                            ...extraFields,
+                            ...usageField
+                        ]
+                    },
+                    {
+                        label: 'Icons',
+                        fields: [
+                            {
+                                name: 'iconsArray',
+                                type: 'array',
+                                label: 'Icons',
+                                labels: {
+                                    singular: 'Icon',
+                                    plural: 'Icons'
+                                },
+                                admin: {
+                                    initCollapsed: true,
+                                    components: {
+                                        RowLabel: IconRowLabelPath
+                                    }
+                                },
+                                fields: [
+                                    {
+                                        type: 'row',
+                                        fields: [
+                                            {
+                                                name: 'name',
+                                                type: 'text',
+                                                required: true,
+                                                // Normalize to kebab-case so the typed name matches `<Icon name>`.
+                                                hooks: {
+                                                    beforeValidate: [
+                                                        ({ value })=>typeof value === 'string' ? toKebabCase(value) : value
+                                                    ]
+                                                },
+                                                admin: {
+                                                    width: '25%',
+                                                    description: 'The name the frontend looks the icon up by (auto kebab-cased).',
+                                                    style: {
+                                                        maxWidth: '350px'
+                                                    }
+                                                }
+                                            },
+                                            {
+                                                name: 'icon',
+                                                type: 'upload',
+                                                relationTo: iconSlug,
+                                                displayPreview: false,
+                                                admin: {
+                                                    allowCreate: false,
+                                                    width: '75%',
+                                                    description: 'Select an icon.',
+                                                    style: {
+                                                        maxWidth: '350px'
+                                                    }
+                                                }
+                                            },
+                                            ...iconRowFields
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        hooks: mergeHooks({
+            beforeChange: [
+                enforceSingleActive
+            ]
+        }, hooks),
+        ...drafts ? {
+            versions: {
+                drafts: {
+                    schedulePublish: true
+                },
+                maxPerDoc: 50
+            }
+        } : {}
+    };
+};
+
+//# sourceMappingURL=IconSet.js.map