@aglyn/aglyn 1.0.0-beta.172 → 1.0.0-beta.173

package/src/lib/app-utils/docs-index.generated.js

@@ -1409,7 +1409,7 @@ export const ASSIST_DOCS_INDEX = [
         title: 'Responsive styling & custom CSS',
         heading: 'Scheme-scoped colors',
         anchor: '#scheme-scoped-colors',
-        text: 'Published sites follow each visitor\'s light/dark scheme (system setting, or their own choice via the theme mode switcher component) unless the theme has its Dark scheme switched off, so a hardcoded light-mode hex can be unreadable in dark mode. Two tools keep colors correct in both schemes:\nTheme color references (preferred). Every color picker — text, background, and border color, plus color attributes on components — opens on your site theme\'s palette references first: Primary, Secondary, Background, Surface, Text, Divider, and friends. Each swatch is split to preview its light and dark resolutions, and selecting one stores the reference (e.g. background.paper), not a fixed color — the element automatically re-colors when the site switches schemes. Pick Custom color to reveal the full picker when you really want a fixed value.\nPer-scheme custom colors. The artboard\'s scheme toggle (the sun/moon button in the toolbar) doubles as a styling scope, exactly like the device preview does for breakpoints:\n- Light preview (default) — color edits set the element\'s base colors, which both schemes share until dark overrides exist.\n- Dark preview — the styles panel shows a "Styling: dark scheme" chip, and edits to text, background, and border color become dark-only overrides. Light mode keeps the base values; the canvas shows the dark result as you edit.\nOnly color fields scope to the scheme — spacing, sizing, typography, and layout always apply to both schemes no matter which one you preview. Clearing a color while previewing dark removes the override and falls back to the base color. Scheme overrides compose with breakpoint scoping: previewing dark on the MD – Laptop artboard writes a dark override that applies from MD up.'
+        text: 'Published sites follow each visitor\'s light/dark scheme (system setting, or their own choice via the theme mode switcher component) unless the theme has its Dark scheme switched off, so a hardcoded light-mode hex can be unreadable in dark mode. Two tools keep colors correct in both schemes:\nTheme color references (preferred). Every color picker — text, background, and border color, plus color attributes on components — opens on your site theme\'s palette references first: Primary, Secondary, Background, Surface, Text, Divider, and friends. Each swatch is split to preview its light and dark resolutions, and selecting one stores the reference (e.g. background.paper), not a fixed color — the element automatically re-colors when the site switches schemes. Pick Custom color to reveal the full picker when you really want a fixed value.\nPer-scheme custom colors. The artboard\'s scheme toggle (the sun/moon button in the toolbar) doubles as a styling scope, exactly like the device preview does for breakpoints:\n- Light preview (default) — color edits set the element\'s base colors, which both schemes share until dark overrides exist.\n- Dark preview — the styles panel shows a "Styling: dark scheme" chip, and edits to text, background, and border color become dark-only overrides. Light mode keeps the base values; the canvas shows the dark result as you edit.\nOnly color fields scope to the scheme — spacing, sizing, typography, and layout always apply to both schemes no matter which one you preview. Clearing a color while previewing dark removes the override and falls back to the base color. Scheme overrides compose with breakpoint scoping: previewing dark on the MD – Laptop artboard writes a dark override that applies from MD up.\nKeep one part of the page light or dark {#pin-a-color-sc'
     },
     {
         path: '/building-sites/besigner/responsive-styling',
@@ -1479,7 +1479,7 @@ export const ASSIST_DOCS_INDEX = [
         title: 'Reusable components',
         heading: 'Detach',
         anchor: '#detach',
-        text: 'Detach from component, on an instance, turns it back into ordinary elements with fresh ids — the confirmation reads "Detached — this copy no longer follows the component." Use it when one page needs a variation the shared source shouldn\'t carry.\nWhat you get is what the page was showing. The property values set on that instance — and every per-instance style and attribute override applied to it, on its outer element and on each element inside it — are baked into the copy as ordinary text, images, styles and attributes, so the section looks identical before and after; it is simply editable now. Nothing in the copy still points at a property.\nDetach copies the component\'s published tree — unsaved or unpublished edits sitting in the component\'s working version are not what you get.'
+        text: 'Detach from component, on an instance, turns it back into ordinary elements with fresh ids — the confirmation reads "Detached — this copy no longer follows the component." Use it when one page needs a variation the shared source shouldn\'t carry.\nWhat you get is what the page was showing. The property values set on that instance — and every style and setting changed on that page only, on its outer element and on each element inside it — are baked into the copy as ordinary text, images, styles and attributes, so the section looks identical before and after; it is simply editable now. Nothing in the copy still points at a property.\nDetach copies the component\'s published tree — unsaved or unpublished edits sitting in the component\'s working version are not what you get.'
     },
     {
         path: '/building-sites/besigner/reusable-components',
@@ -2265,6 +2265,13 @@ export const ASSIST_DOCS_INDEX = [
         anchor: '#layout-properties',
         text: 'A layout can take properties, the way a reusable component does, so one frame can differ from screen to screen — a banner one screen shows and another hides, a call to action worded per page — without a second layout.\n1. Open the layout in the Besigner and choose File ▸ Properties…\n2. Add property. Every property type a reusable component offers is here, with its default, help, settings and condition set with the same controls.\n3. Inside the layout, put the property\'s token — {{prop.bannerText}} — in any text or string attribute, or bind a field to it with the field\'s {} button: a switch to a Yes / no, an icon picker to an Icon. Hide when and Hide unless take a property too, so a screen can remove part of the layout\'s chrome.\nEach screen sets the values in Screen Properties, under Shared layout, below the Layout picker: one field per property, drawn with the control its type names. Leave a field empty and the layout\'s default renders. Save layout values stores them on the screen version being edited, beside its layout binding, so publishing that version publishes its values with it.\nValues are kept per layout. Binding a screen to a different layout starts from that layout\'s defaults, and a screen inside nested layouts sets each layout\'s properties separately.\nProperties saved on the layout\'s published version reach live screens straight away — that version is what they render. On any other version they go live when you publish it.\nPages the site builds without a screen of their own — search results, author pages, and a collection with no template screen — render inside the site\'s built-in page layout with its properties\' defaults.'
     },
+    {
+        path: '/building-sites/screens-and-layouts/layouts',
+        title: 'Layouts',
+        heading: 'Restyle the layout on one page',
+        anchor: '#restyle-the-layout-on-one-page',
+        text: 'A screen can change how the layout\'s elements look on that page alone: a transparent nav over this page\'s hero, a different footer background on a landing page. The layout\'s content stays the layout\'s, and every other screen using it keeps the layout\'s own styling.\n1. Open the screen in the Besigner. The banner above the canvas names the shared layout that frames it.\n2. Choose Style the layout on this page and pick an element. The list follows the layout\'s hierarchy, and a dot marks each element this page already restyles.\n3. The Styles tab opens on that element, marked Styles only, and says Styling the layout\'s … on this page only. Every control works as it does on the page\'s own elements, including breakpoints, the dark scheme and hover states. Each property you change is listed as a chip: its ✕ returns that property to the layout\'s value, and Reset clears them all.\n4. Save or publish the screen as usual. The styling is part of the screen version, so it is undoable, kept in a saved draft, and goes live when that version does.\nThe Attributes tab points you to the layout for anything else: an element\'s text, links and settings are edited in the layout itself (Edit layout). Select any element on the page to leave this mode.\nIf the layout is later edited and an element you restyled is removed, that styling is simply ignored. A reusable component the layout places, such as a site nav, can be restyled the same way: the change applies to its outer element.'
+    },
     {
         path: '/building-sites/screens-and-layouts/layouts',
         title: 'Layouts',