@kubex/zinc 1.1.94 → 1.1.95

package/docs/pages/components/page-builder.md

@@ -62,13 +62,24 @@ toggle to opt out.
 
 Style the panel through `inspector`, `inspector-header` and `inspector-body` parts.
 
+A container section additionally gets a **Layout** group at the top of the inspector: a column
+count, a weight per column, a "Keep adding rows" toggle, and — when growing is off — a row count.
+Every edit here is lossless: changing the column count re-chunks the same ordered list of
+stacks into the new shape, changing the row count only pads or trims trailing empty rows
+(clamping at the last row that still holds content), and changing a column's weight leaves
+every cell's contents untouched. All of it is undoable like any other edit.
+
 ## JavaScript API
 
 - `state` — get/set the current `PageState`. The getter returns a deep copy; the setter
   replaces the state wholesale (like the `config` attribute, it does not emit `zn-page-change`).
 - `addSection(type, index?)` — insert a new section of a registered type (default: at the end).
-- `addSectionToSlot(type, containerId, slotIndex)` — insert into a container's empty slot,
-  honouring its `accepts` list. Returns the new section, or `null` if not allowed.
+- `addSectionToCell(type, containerId, cellIndex, insertIndex?)` — insert a new section of a
+  registered type into a container's cell. `cellIndex` is the position in the container's flat,
+  row-major `cells` list; `insertIndex` (default `0`, the top of the stack) is where in that
+  cell's stack it lands. Returns the new section, or `null` if the drop isn't allowed — because
+  the type isn't in the container's `accepts` list, or because it would exceed the two-level
+  nesting cap.
 - `undo()` / `redo()` — step through edit history (bounded at 50 entries). There is no built-in
   toolbar: wire these to your own header buttons or keyboard shortcuts.
 - `registerSectionType(type)` / `registerSectionTypes(types)` — programmatic registration,
@@ -114,8 +125,8 @@ or call `restoreAutoSave()` yourself.
 
 Every edit emits `zn-page-change` with the full page state (`event.detail.state`, also
 readable via the `state` property) — plain JSON the host persists and later feeds back in
-through the `config` attribute. Sections appear in page order; container sections carry a
-`children` array sized to their slot count, with `null` for empty slots:
+through the `config` attribute. Sections appear in page order; a container section additionally
+carries `layout` and `cells`, per the Containers section below:
 
 ```json
 {
@@ -130,10 +141,11 @@ through the `config` attribute. Sections appear in page order; container section
       "type": "article-grid",
       "label": "Popular articles",
       "data": {"title": "Popular"},
-      "children": [
-        {"id": "s-mc42h-2", "type": "article-tile", "data": {"article": "art_42"}},
-        {"id": "s-mc42p-3", "type": "article-tile", "data": {"article": "art_7"}},
-        null, null, null, null
+      "layout": {"widths": [1, 1, 1], "grow": false},
+      "cells": [
+        [{"id": "s-mc42h-2", "type": "article-tile", "data": {"article": "art_42"}}],
+        [{"id": "s-mc42p-3", "type": "article-tile", "data": {"article": "art_7"}}],
+        []
       ]
     },
     {
@@ -145,29 +157,119 @@ through the `config` attribute. Sections appear in page order; container section
 }
 ```
 
-## Container tiles
+A host loading a config saved before this model — the old flat, null-padded `children` array —
+still has it accepted and migrated on load; see "Legacy `slots`" further down for what that
+older shape looked like and how it's converted.
+
+## A required first section
 
-A section type with a `slots` attribute becomes a full-row container: its card renders a
-3-column grid of that many child slots beneath it. Drag sections from the palette into empty
-cells, drag children **between cells to reorder**, or out onto the page. `accepts` restricts
-which types the slots take. Containers can't be placed inside other containers, and slot
-contents persist as `children` on the section (empty slots are `null`).
+Pages that must always open with a particular section — a hero banner, a masthead — set
+`required-first` to that section type. The builder hoists an existing section of the type to
+the top of the page, or inserts an empty one when there is none, and pins it there: it has no
+remove action, ignores <kbd>Delete</kbd>, can't be dragged or moved into a container slot, and
+nothing can be dropped above it. Its content stays fully editable in the inspector, and the
+type stays in the palette, so further sections of it can still be added below.
+
+Which section is pinned is derived from the state — `sections[0]` when its type matches — so
+nothing about the lock is written into the persisted config.
+
+```html:preview
+<zn-page-builder heading="KB Homepage" required-first="hero" style="height: 420px"
+  config='{"sections":[{"id":"t1","type":"rich-text","data":{"content":"Welcome"}}]}'>
+  <template type="hero" slot="config" label="Hero" icon="star" category="Headers"
+            description="Banner with a heading and optional search">
+    <zn-input name="title" label="Title"></zn-input>
+    <zn-toggle name="showSearch" label="Show search"></zn-toggle>
+  </template>
+  <template type="rich-text" slot="config" label="Rich Text" icon="notes" category="Content"
+            description="A block of markdown content">
+    <zn-input name="content" label="Content"></zn-input>
+  </template>
+</zn-page-builder>
+```
+
+The config above declares only a rich-text section, so the hero is inserted above it — loading a
+page that lacks the required section normalises it rather than rejecting it. Two things follow
+from that. The inserted section's `data` is empty, so a host that wants the pinned section
+prefilled should put it into the `config` it hands over rather than rely on the insert. And the
+guard is client-side, so a host that persists the config should enforce the same rule on save.
+
+## Containers
+
+A section type with the `container` attribute becomes a full-row container: its card renders a
+grid of **cells** beneath it, and each cell holds an ordered **stack** of sections. The type
+author only declares that it's a container and what it starts as; the editor reshapes it after
+placing it, from the inspector's Layout group.
+
+| Attribute | Meaning |
+|---|---|
+| `container` | Marks the type a container. Required. |
+| `columns="4"` | Seeds a new instance with 4 equal columns. |
+| `widths="1 2 1"` | Seeds the column weights directly (comma- or whitespace-separated). Wins over `columns`. |
+| `grow` | Seeds the instance growable — it always offers a further empty row. |
+| `accepts="a,b"` | Restricts which types the cells take. Omit to allow any type, within the nesting cap below. |
+
+If `widths` is present but unparsable — non-numeric tokens are discarded rather than kept as
+columns — the container falls back to `columns`, and if that's absent too, to three equal
+columns (`[1, 1, 1]`).
+
+Drag sections from the palette into a cell, stack several sections in one cell, or drag them
+between cells or out onto the page. Containers may nest **two levels deep** — a container inside
+a cell, itself holding another container — and a drop that would nest a third level is refused.
+That cap holds even when a container's `accepts` list names another container type: `accepts`
+can't be used to bypass it.
 
 ```html:preview
 <zn-page-builder heading="KB Homepage" style="height: 560px"
-  config='{"sections":[{"id":"g1","type":"article-grid","data":{}}]}'>
-  <template type="article-grid" slot="config" label="Article Grid" icon="grid_view"
-            category="Layout" description="A 3x2 grid of article tiles"
-            slots="6" accepts="article-tile">
+  config='{"sections":[{"id":"g1","type":"row","data":{},"layout":{"widths":[1,2,1],"grow":false},"cells":[[],[],[]]}]}'>
+  <template type="row" slot="config" label="Row" icon="view_column" category="Layout"
+            description="A row of columns you can weight" container widths="1 2 1">
+    <zn-input name="title" label="Row title"></zn-input>
+  </template>
+  <template type="grid" slot="config" label="Tile Grid" icon="grid_view" category="Layout"
+            description="Keeps adding rows as you fill it" container columns="3" grow>
     <zn-input name="title" label="Grid title"></zn-input>
   </template>
-  <template type="article-tile" slot="config" label="Article" icon="article" category="Content"
+  <template type="article" slot="config" label="Article" icon="article" category="Content"
             description="A single article tile">
     <zn-input name="article" label="Article id"></zn-input>
   </template>
 </zn-page-builder>
 ```
 
+### The container config
+
+A container persists its `layout` and its `cells` — a flat, row-major list of stacks whose
+length is always a whole multiple of `layout.widths.length`. Rows are implicit
+(`cells.length / layout.widths.length`), so there's no row count to keep in sync:
+
+```json
+{
+  "id": "s-mc42a-1",
+  "type": "row",
+  "layout": { "widths": [1, 2, 1], "grow": false },
+  "cells": [
+    [ { "id": "s-1", "type": "nav", "data": {} },
+      { "id": "s-2", "type": "links", "data": {} } ],
+    [ { "id": "s-3", "type": "hero", "data": {} } ],
+    []
+  ]
+}
+```
+
+Render it by mapping each weight to a grid track and each cell to a stack. A **growable**
+container never persists a trailing all-empty row — the builder adds that row itself at render
+time, so don't expect it in the JSON. A **fixed** container's trailing empty row, by contrast, is
+part of its layout and does persist.
+
+### Legacy `slots`
+
+`slots="6"` still declares a container, and pages persisted with the old flat, null-padded
+`children` array still load: they're migrated to `layout` + `cells` on load and re-saved in the
+new shape — `children` is never written back. A `slots`-declared container that has no explicit
+`accepts` also keeps its older, stricter rule of refusing container types in its cells (rather
+than allowing anything up to the nesting cap). Prefer `container` going forward.
+
 ## List sections
 
 Sections that show a set of existing items (categories, articles, …) reference them by id:

package/docs/pages/components/slash-menu.md

@@ -16,15 +16,16 @@ for you, as [`zn-textarea`](/components/textarea#slash-menu-quick-insertions) do
              slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}"></zn-textarea>
 ```
 
-Slot one into a textarea when you want the panel's own settings — `heading`, `max-items`, `placement`, `empty-text`, or
-its width — declared in markup. The textarea then drives your menu instead of building its own:
+Slot one into a textarea when you want the panel's own settings — `max-items`, `placement`, `empty-text`, its width, or
+the `heading` the list is announced by — declared in markup. The textarea then drives your menu instead of building its
+own:
 
 ```html:preview
 <zn-textarea label="Terms and conditions" rows="6" help-text="Type / to insert">
   <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
-    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
-    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
-    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
   </zn-slash-menu>
 </zn-textarea>
 ```
@@ -107,9 +108,134 @@ The menu doesn't listen for keys itself — whatever owns the field decides whic
 </script>
 ```
 
+### Grouping Items
+
+An item's `group` puts a heading above it. The heading is drawn whenever the group changes going down the list, so
+items sharing a group must be declared together — the menu lists them in the order it is given rather than gathering
+them for you. Leave the group off and an item is listed under no heading at all; declared first, those lead the list,
+which is how a handful of favourites can sit above named sections.
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="7" help-text="Type / to see the sections, or 'company' to search across them">
+  <zn-slash-menu slot="slash-menu" style="--slash-menu-width: 340px">
+    <zn-slash-item icon="star@lu" label="Merchant block" value="{{MERCHANT_BLOCK}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" keywords="company" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" keywords="company" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="calendar@lu" label="Refund window" value="{{REFUND_DAYS}} days"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+```
+
+Group headings are only a structure for browsing: a query ranks every match on merit, and the headings follow whatever
+order that leaves. Set `order` on an item to pin its place within a match band, and use `keywords` to make it findable
+by terms that aren't in its label.
+
+Driving the menu yourself, the same thing is a `group` on each item:
+
+```html:preview
+<zn-button id="grouped-anchor">Open the menu</zn-button>
+<zn-slash-menu id="grouped-menu"></zn-slash-menu>
+<div id="grouped-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const anchor = document.getElementById('grouped-anchor');
+  const menu = document.getElementById('grouped-menu');
+  const log = document.getElementById('grouped-log');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = [
+    {label: 'Paragraph', value: '', icon: 'type@lu', group: 'Basic blocks'},
+    {label: 'Heading 1', value: '# ', icon: 'heading-1@lu', group: 'Basic blocks'},
+    {label: 'Heading 2', value: '## ', icon: 'heading-2@lu', group: 'Basic blocks'},
+    {label: 'To-do list', value: '- [ ] ', icon: 'square-check@lu', group: 'Lists'},
+    {label: 'Bulleted list', value: '- ', icon: 'list@lu', group: 'Lists'},
+    {label: 'Callout', value: 'NOTE: ', icon: 'info@lu', group: 'Advanced'},
+    {label: 'Quote', value: '> ', icon: 'quote@lu', group: 'Advanced'}
+  ];
+  menu.hideKeys = true;
+  menu.anchor = anchor;
+
+  anchor.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+
+  menu.addEventListener('zn-slash-item-select', (event) => {
+    log.textContent = `selected ${event.detail.item.label} from ${event.detail.item.group}`;
+    menu.hide();
+  });
+</script>
+```
+
+### Keyboard Hints
+
+A footer pinned to the bottom of the panel spells out the keys the menu answers to. The list scrolls beneath it, so
+the hints stay in view. Use `hide-hints` on menus driven entirely by the mouse, or where the surrounding UI already
+explains the shortcuts.
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="4" help-text="Type / to see the hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings"></zn-slash-menu>
+</zn-textarea>
+
+<zn-textarea label="Internal note" rows="4" help-text="Type / — no hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings" hide-hints></zn-slash-menu>
+</zn-textarea>
+```
+
+### Recently Used
+
+Set `recent-key` and the menu remembers what was chosen there, listing the most recent of those items above the rest
+under their own heading. The key is where the menu is used — `page-body`, `ticket-reply` — so each place keeps its own
+history in `localStorage`, and two fields that should share one can share a key. `max-recent` caps the section
+(3 by default), `recent-heading` names it, and `clearRecent()` forgets the lot. The section stands aside as soon as
+there is a query, when the ranked matches are the better answer.
+
+It reads as one more group, so it sits naturally above [grouped items](#grouping-items) — the section's own heading, then
+the sections the list already had. Insert a few from the first field below to see it fill:
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="6" help-text="Type / and insert a few — they come back to the top">
+  <zn-slash-menu slot="slash-menu" recent-key="docs-grouped" style="--slash-menu-width: 340px">
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+
+<zn-button id="forget-recent" style="margin-top: 1rem">Forget them</zn-button>
+
+<script type="module">
+  import {clearRecentSlashItems} from '/dist/zn.min.js';
+
+  document.getElementById('forget-recent').addEventListener('click', () => {
+    clearRecentSlashItems('docs-grouped');
+    clearRecentSlashItems('docs-terms');
+  });
+</script>
+```
+
+Where the items below carry no heading of their own, a rule closes the section off instead. This field shares nothing
+with the one above — each key is its own history:
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="5" help-text="Type / and insert a few — the rule marks where they end"
+             slash-recent-key="docs-terms"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+                          Customer name={{CUSTOMER_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
+`zn-input`, `zn-inline-edit`, `zn-translations` and `zn-remarkd-editor` take the same `slash-recent-key`. On a menu you
+slot in yourself, or drive with `SlashMenuController`, set `recent-key` on the `zn-slash-menu` directly.
+
 ### Truncating Long Lists
 
-`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The panel
+`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The list
 scrolls when its content exceeds `--slash-menu-max-height`.
 
 ```html:preview

package/docs/pages/components/textarea.md

@@ -501,6 +501,22 @@ the merge fields an application allows.
 </script>
 ```
 
+#### Recently Used Items
+
+`slash-recent-key` remembers what was inserted here and lists those items above the rest next time, under a
+"Recently used" heading. The key names the place the field is used, so each keeps its own history — see
+[`zn-slash-menu`](/components/slash-menu#recently-used) for the menu's own settings.
+
+```html:preview
+<zn-textarea
+  label="Refund policy"
+  rows="5"
+  slash-recent-key="docs-textarea-refunds"
+  help-text="Type / and insert a couple — they come back to the top"
+  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+               Refund window={{REFUND_DAYS}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
 #### Changing the Trigger
 
 Set `slash-trigger` to any characters. Using `{{` lets someone who already knows the token they want type it directly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.94",
+  "version": "1.1.95",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -350,8 +350,14 @@ ul.square {
 
   // Frosted-glass inactive tabs for the zn-page tab navbar (consumed in
   // components/navbar/navbar.scss, scoped there to :host-context(zn-page)).
+  //
+  // The translucent background carries the frosted look on its own. Do NOT put a
+  // backdrop-filter here: navbar.scss applies it per inactive tab, so each tab
+  // becomes its own render surface and re-samples + re-blurs its backdrop every
+  // frame. On a page with a normal number of tabs that alone pushed GPU draw to
+  // ~8ms/frame and dropped frames on every scroll.
   --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
-  --navbar-page-inactive-tab-filter: blur(2px);
+  --navbar-page-inactive-tab-filter: none;
 
   .zn-primary {
     color: rgb(var(--zn-color-primary));

package/src/components/button/button.scss

@@ -456,8 +456,11 @@
     inset-inline-start: 0;
     bottom: 0;
     border-left: solid 1px;
-    mix-blend-mode: multiply;
-    color: rgb(var(--zn-border-color));
+    // PERF: a blend mode here gave every non-first button in every group its own
+    // render surface, and the :not(:hover) above meant hovering a group added and
+    // removed surfaces — re-running layerize and re-compositing on pointer move.
+    // A semi-transparent border reads the same over the button fills.
+    color: rgba(var(--zn-border-color), 0.85);
   }
 }
 

package/src/components/inline-edit/inline-edit.component.ts

@@ -117,12 +117,15 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   /** The characters that open the slash menu. */
   @property({ attribute: 'slash-trigger' }) slashTrigger = '/';
 
-  /** The heading shown above the slash menu's items. */
+  /** The name the slash menu's list is announced by. */
   @property({ attribute: 'slash-heading' }) slashHeading = 'Insert';
 
   /** Hides the insertion keys normally shown against the slash menu's items. */
   @property({ attribute: 'slash-hide-keys', type: Boolean }) slashHideKeys = false;
 
+  /** Lists the slash menu items most recently chosen here above the rest, remembered under this key. */
+  @property({ attribute: 'slash-recent-key' }) slashRecentKey = '';
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({ attribute: false }) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -466,6 +469,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         slash-trigger="${this.slashTrigger}"
         slash-heading="${this.slashHeading}"
         slash-preset="${this.slashPreset}"
+        slash-recent-key="${this.slashRecentKey}"
         ?slash-hide-keys="${this.slashHideKeys}"
         .slashItems="${this.slashItems}"
         .slashItemsProvider="${this.slashItemsProvider}"
@@ -489,6 +493,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 slash-trigger="${this.slashTrigger}"
                 slash-heading="${this.slashHeading}"
                 slash-preset="${this.slashPreset}"
+                slash-recent-key="${this.slashRecentKey}"
                 ?slash-hide-keys="${this.slashHideKeys}"
                 .slashItems="${this.slashItems}"
                 .slashItemsProvider="${this.slashItemsProvider}"

package/src/components/input/input.component.ts

@@ -276,12 +276,18 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The characters that open the slash menu. */
   @property({attribute: 'slash-trigger'}) slashTrigger = '/';
 
-  /** The heading shown above the slash menu's items. */
+  /** The name the slash menu's list is announced by. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
   /** Hides the insertion keys normally shown against the slash menu's items. */
   @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
 
+  /**
+   * Lists the items most recently chosen here above the rest, remembered in `localStorage` under this
+   * key. Share a key between the fields that should share a history; leave unset to offer no such list.
+   */
+  @property({attribute: 'slash-recent-key'}) slashRecentKey = '';
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -1100,7 +1106,11 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
+              <zn-slash-menu
+                part="slash-menu"
+                heading=${this.slashHeading}
+                recent-key=${this.slashRecentKey}
+                ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

package/src/components/page/page.scss

@@ -93,8 +93,13 @@
     background-repeat: no-repeat;
     background-position: bottom center;
     background-size: cover;
-    mix-blend-mode: color-burn;
-    opacity: 0.2;
+    // PERF: mix-blend-mode forces .page__header .header — which contains the tab
+    // navbar — into its own render surface with a backdrop readback. Dropped in
+    // favour of plain alpha compositing. This is a small visual change to the
+    // aurora wave (it no longer darkens what it sits on); restore the blend mode
+    // if the look regresses, but expect the GPU cost back with it.
+    //mix-blend-mode: color-burn;
+    opacity: 0.04;
     pointer-events: none;
   }
 

package/src/components/page-builder/modules/page-section-card/page-section-card.component.ts

@@ -39,6 +39,8 @@ export default class ZnPageSectionCard extends ZincElement {
   @property({type: Boolean, reflect: true}) selected = false;
   /** Set when the section's type has no registered template — renders greyed. */
   @property({type: Boolean, reflect: true}) unknown = false;
+  /** Set when the builder pins this section to the page — drops the remove action. */
+  @property({type: Boolean, reflect: true}) locked = false;
 
   protected updated(changed: PropertyValues) {
     super.updated(changed);
@@ -67,6 +69,10 @@ export default class ZnPageSectionCard extends ZincElement {
           <span class="card__label">${this.label}</span>
           ${this.summary ? html`<span class="card__summary">${this.summary}</span>` : ''}
         </span>
+        ${this.locked ? html`
+          <span class="card__lock" title="This section cannot be removed">
+            <zn-icon src="lock" size="14"></zn-icon>
+          </span>` : ''}
         <span class="card__actions" @keydown="${this._actionKeydown}">
           <zn-button
             class="card__action"
@@ -77,15 +83,16 @@ export default class ZnPageSectionCard extends ZincElement {
             title="Duplicate section"
             aria-label="Duplicate section"
             @click="${(e: Event) => this._action(e, 'page-card-duplicate')}"></zn-button>
-          <zn-button
-            class="card__action"
-            icon-button="small"
-            plain
-            icon="delete"
-            icon-size="14"
-            title="Remove section"
-            aria-label="Remove section"
-            @click="${(e: Event) => this._action(e, 'page-card-remove')}"></zn-button>
+          ${this.locked ? '' : html`
+            <zn-button
+              class="card__action"
+              icon-button="small"
+              plain
+              icon="delete"
+              icon-size="14"
+              title="Remove section"
+              aria-label="Remove section"
+              @click="${(e: Event) => this._action(e, 'page-card-remove')}"></zn-button>`}
         </span>
       </div>
     `;

package/src/components/page-builder/modules/page-section-card/page-section-card.scss

@@ -15,6 +15,11 @@
   cursor: grabbing;
 }
 
+:host([locked]),
+:host([locked]:active) {
+  cursor: default;
+}
+
 .card {
   display: flex;
   align-items: center;
@@ -77,6 +82,14 @@
   text-overflow: ellipsis;
 }
 
+// Always visible, unlike the hover actions — it is what explains their absence.
+.card__lock {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  opacity: 0.45;
+}
+
 // Space is always reserved (visibility, not display) so the card never
 // changes size or shifts its text when the actions appear on hover.
 .card__actions {

package/src/components/page-builder/modules/page-section-card/page-section-card.test.ts

@@ -41,6 +41,15 @@ describe('<zn-page-section-card>', () => {
     expect(hostSawKeydown, 'host keydown suppressed for button activation keys').to.be.false;
   });
 
+  it('should drop the remove action and show a lock when locked', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero" locked></zn-page-section-card>`);
+    expect(el.hasAttribute('locked')).to.be.true;
+    expect(el.shadowRoot!.querySelector('zn-button[title="Remove section"]'), 'remove gone').to.not.exist;
+    expect(el.shadowRoot!.querySelector('zn-button[title="Duplicate section"]'), 'duplicate kept').to.exist;
+    expect(el.shadowRoot!.querySelector('.card__lock'), 'lock indicator').to.exist;
+  });
+
   it('should reflect selected and unknown states', async () => {
     const el = await fixture<ZnPageSectionCard>(html`
       <zn-page-section-card label="Hero" selected unknown></zn-page-section-card>`);