@bison-lab/payload-blocks 3.5.0 → 3.20.0

package/README.md

@@ -24,7 +24,7 @@ Payload site already has).
 | `@bison-lab/payload-blocks` | Block configs, field builders, row types, `resolveMedia` | Node. This is what `payload.config.ts` imports, and it touches no React. |
 | `@bison-lab/payload-blocks/react` | Renderers, `RenderBlocks`, the image and link seams, the rendering types | Client (`"use client"`). |
 | `@bison-lab/payload-blocks/rich-text` | The `richText` renderer, `internalDocToHrefFrom`, and `richTextBlockRenderer()` to build one that resolves internal links | Client. Split out because it is the only thing that needs `@payloadcms/richtext-lexical`. |
-| `@bison-lab/payload-blocks/admin` | `MinRowsArrayField` and `LinkField`, the admin fields the configs reference by path | Client, inside the Payload admin. Resolved through the site's import map, never imported by hand. |
+| `@bison-lab/payload-blocks/admin` | `MinRowsArrayField`, `LinkField`, and `NavItemsField`, the admin fields the configs reference by path | Client, inside the Payload admin. Resolved through the site's import map, never imported by hand. |
 
 The renderers are client components because the blocks they render are: every
 `@bison-lab/ui` export is a client reference, and these blocks are interactive
@@ -110,6 +110,22 @@ for `type: external`, and `required` binds whichever is active. A site's own
 block takes the same field through `linkFields()` or `linkField()`, and can
 point it at another collection with `pagesCollection`.
 
+`lookField()` and `colorTokenField()` read the published Theme. Options are
+the scales Color Settings offers page editors (Primary, Secondary, Accent,
+Highlight, plus every custom color) and only the included steps. Success and
+Destructive stay off that list. Adding Coral on Colors makes `coral` /
+`coral-400` appear with no package bump. The picker is
+`@bison-lab/payload-core/admin#LookField` — run `payload generate:importmap`.
+Pass the Theme document into `themeHeadFromDoc` so those keys paint
+(`[data-look]` + `--coral-*`).
+
+```ts
+import { lookField, colorTokenField } from '@bison-lab/payload-blocks'
+
+lookField()
+colorTokenField({ name: 'fill' })
+```
+
 **2. Own the registry.**
 
 The registry is a parameter, not an export, so the compile-time layout lock
@@ -321,43 +337,49 @@ stylesheet scans both packages:
 ## Wiring a header
 
 Two more blocks build a header rather than a page: `megaMenuBlock` and
-`LinkBlock`. They go in a global's `items` array, and the site owns that
-global. `megaMenuBlock` is a factory because the featured-link variants and
-the icon list are the site's — the CMS only ever offers approved values:
+`LinkBlock`. They go in `createNavigation({ blocks })`'s `header.items`.
+`megaMenuBlock` is a factory because the featured-link variants and
+the icon list are the site's — the CMS only ever offers approved values.
+The items field uses `NAV_ITEMS_FIELD` (the kit editor) instead of
+Payload's stock blocks UI:
 
 ```ts
+import { createNavigation } from '@bison-lab/payload-core'
 import { LinkBlock, megaMenuBlock } from '@bison-lab/payload-blocks'
 
-export const Navigation: GlobalConfig = {
-  slug: 'navigation',
-  fields: [
-    {
-      name: 'items',
-      type: 'blocks',
-      blocks: [
-        megaMenuBlock({
-          variants: [
-            { label: 'Lumbar', value: 'lumbar' },
-            { label: 'SI joint', value: 'si' },
-          ],
-          icons: [{ label: 'Help', value: 'help' }],
-        }),
-        LinkBlock,
-      ],
-    },
-  ],
-}
+globals: [
+  ...createNavigation({
+    blocks: [
+      megaMenuBlock({
+        variants: [
+          { label: 'Lumbar', value: 'lumbar' },
+          { label: 'SI joint', value: 'si' },
+        ],
+        icons: [{ label: 'Help', value: 'help' }],
+      }),
+      LinkBlock,
+    ],
+  }),
+]
 ```
 
-Then `payload generate:types` and `payload migrate:create`.
-
-An editor sees: label, landing page, the panel's max width, one to four
-columns (each a width, an optional divider, and sections of links), a footer
-with an overview link and a call to action, and an **Advanced** collapsible
-for CSS widths. The column widths, read as fractions, must add up to 100%:
-the rule is the array's own `validate`, so the editor sees "The columns add
-up to 75%. They need to add up to 100%." as they build, and the global's
-publish refuses the same. Custom widths skip it.
+Then `payload generate:types`, `payload generate:importmap`, and
+`payload migrate:create`. Until the import map includes
+`@bison-lab/payload-blocks/admin#NavItemsField`, the items field renders
+as nothing, not the stock blocks UI.
+
+An editor sees a rail of bar items (Link vs Mega type cards from
+`@bison-lab/admin-ui`), destinations
+through `LINK_FIELD`, a two-up column builder, and a sticky
+`FloatingNavBlock` preview under the published theme. Advanced CSS
+column widths stay on the schema so existing rows do not migrate; the
+kit does not render them. The column widths, read as fractions, must add
+up to 100%: the rule is the array's own `validate`, so the editor sees
+"The columns add up to 75%. They need to add up to 100%." as they build,
+and the global's publish refuses the same. Custom widths skip it. The
+mega trigger's landing page is now the same `type` / `page` / `href`
+picker as every other destination — a schema change, so sites run
+`payload migrate:create`.
 
 In the site header, one call turns the rows into `FloatingNavBlock` items.
 The variants and icons here are the looks behind the values above:

package/dist/admin.d.mts

@@ -1,5 +1,5 @@
 
-import { ArrayFieldClientComponent, RowFieldClientComponent } from "payload";
+import { ArrayFieldClientComponent, BlocksFieldClientComponent, RowFieldClientComponent } from "payload";
 
 //#region src/admin/link-field.d.ts
 declare const LinkField: RowFieldClientComponent;
@@ -26,5 +26,8 @@ declare const LinkField: RowFieldClientComponent;
  */
 declare const MinRowsArrayField: ArrayFieldClientComponent;
 //#endregion
-export { LinkField, MinRowsArrayField };
+//#region src/admin/nav-items-field.d.ts
+declare const NavItemsField: BlocksFieldClientComponent;
+//#endregion
+export { LinkField, MinRowsArrayField, NavItemsField };
 //# sourceMappingURL=admin.d.mts.map

package/dist/admin.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"admin.d.mts","names":[],"sources":["../src/admin/link-field.tsx","../src/admin/min-rows-array-field.tsx"],"mappings":";;;;cAuEa,SAAA,EAAW,uBAAA;;;;;AAAxB;;;;;;;;AChDA;;;;;;;;;cAAa,iBAAA,EAAmB,yBAAA"}
+{"version":3,"file":"admin.d.mts","names":[],"sources":["../src/admin/link-field.tsx","../src/admin/min-rows-array-field.tsx","../src/admin/nav-items-field.tsx"],"mappings":";;;;cAuEa,SAAA,EAAW,uBAAA;;;;;AAAxB;;;;;;;;AChDA;;;;;;;;ACqKA;cDrKa,iBAAA,EAAmB,yBAAA;;;cCqKnB,aAAA,EAAe,0BAAA"}